JavaScript实现打砖块游戏


Posted in Javascript onFebruary 25, 2020

本文实例为大家分享了JavaScript实现打砖块游戏的具体代码,供大家参考,具体内容如下

html+css部分

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>打砖块</title>
 <link rel="stylesheet" type="text/css" href="css/break.css" rel="external nofollow" />
 <script type="text/javascript" src="js/break.js"></script>
 
 
 <style type="text/css">
 *{
 padding: 0;
 margin: 0;
 }
 .content{
 position: relative;
 width: 800px;
 height: 600px;
 background-color: #999;
 margin: 0 auto;
 overflow: hidden;
 }
 .game{
 position: relative;
 width: 550px;
 height: 500px;
 background-color: pink;
 margin: 20px auto 0;
 }
 .brick{
 position: absolute;
 width: 50px;
 height: 20px;
 background-color: blueviolet;
 }
 .flap{
 position: absolute;
 width: 120px;
 height: 30px;
 bottom: 0;
 left: 0;
 background-color: blue;
 }
 .ball{
 position: absolute;
 width: 30px;
 height: 30px;
 bottom: 30px;
 left: 0;
 border-radius: 50%;
 background-color: greenyellow;
 }
 .btn{
 position: absolute;
 width: 550px;
 height: 50px;
 bottom: 0;
 left: 125px;
 }
 .btn button{
 width: 120px;
 height: 40px;
 }
 #score{
 position: absolute;
 width: 80px;
 height: 30px;
 right: 0;
 top: 10%;
 background-color: #fff;
 /*border: 1px solid red;*/
 }
 </style>
 </head>
 <body>
 <div class="content">
 <div class="game">
 <!--<div class="brick"></div>-->
 <!--<div class="flap"></div>
 <div class="ball"></div>-->
 </div>
 <div class="btn">
 <button id="start">开始</button>
 <button id="reset">重置</button>
 </div>
 <div id="score">
 
 </div>
 </div>
 </body>
</html>

js部分

window.onload = init;
 
function init(){
 var gameArea = document.getElementsByClassName("game")[0];
 var rows = 5;
 var cols = 11;
 var b_width = 50;
 var b_height = 20;
 var bricks = [];
 var speedX = 5;
 var speedY = -5;
 var interId = null;
 var lf = 0;
 var tp = 0;
 var flap
 var ball;
 var n = 0;
 
 var st = document.getElementById("start");
 var rt = document.getElementById("reset");
 var score = document.getElementById("score");
 score.innerHTML = "得分:" + n;
 
 renderDom();
 bindDom();
 
 function renderDom(){
 getBrick();
 //得到五彩砖块
 function getBrick(){
 for (var i = 0; i < rows; i++) {
 var tp = i * b_height;
 var brick = null;
 for (var j = 0; j < cols; j++) {
  var lf = j * b_width;
  brick = document.createElement("div");
  brick.className = "brick";
  brick.setAttribute("style","top:" + tp + "px;left:" + lf + "px;");
  brick.style.backgroundColor = getColor();
  bricks.push(brick);
  gameArea.appendChild(brick);
 }
 }
 }
 
 //添加挡板
 var flap = document.createElement("div");
 flap.className = "flap";
 gameArea.appendChild(flap);
 //添加挡板小球
 var ball = document.createElement("div");
 ball.className = "ball";
 gameArea.appendChild(ball);
 }
 
 function bindDom(){
 flap = document.getElementsByClassName("flap")[0];
 
 window.onkeydown = function(e){
 var ev = e || window.event;
 var lf = null;
 if (e.keyCode == 37) { //左键往左走
 lf = flap.offsetLeft - 10;
 if (lf < 0) { 
  lf = 0;
 }
 flap.style.left = lf + "px";
 
 }else if (e.keyCode == 39) { //右键往右走
 lf = flap.offsetLeft + 10;
 if (lf >= gameArea.offsetWidth - flap.offsetWidth) {
  lf = gameArea.offsetWidth - flap.offsetWidth
 }
 flap.style.left = lf + "px";
 }
 }
 
 st.onclick = function(){
 ballMove();
 st.onclick = null;
 }
 
 rt.onclick = function(){
 window.location.reload();
 }
 
 }
 
 //得到砖块的随即颜色
 function getColor(){
 var r = Math.floor(Math.random()*256);
 var g = Math.floor(Math.random()*256);
 var b = Math.floor(Math.random()*256);
 return "rgb(" + r + "," + g + "," + b +")";
 }
 //实现小球上下左右来回运动
 function ballMove(){
 ball = document.getElementsByClassName("ball")[0];
 
 interId = setInterval(function(){
 lf = ball.offsetLeft + speedX;
 tp = ball.offsetTop + speedY;
 //实现砖块消失的效果
 for (var i = 0; i < bricks.length; i++) {
 var bk = bricks[i];
 if ((lf + ball.offsetWidth/2) >= bk.offsetLeft
  && (lf + ball.offsetWidth/2) <= (bk.offsetLeft + bk.offsetWidth)
  && (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop
 ) {
  bk.style.display = "none";
  speedY = 5;
  n++;
  score.innerHTML = "得分:"+n;
 }
 }
 
 if (lf < 0) {
 speedX = -speedX;
 }
 if (lf >= (gameArea.offsetWidth - ball.offsetWidth)){ 
 speedX = -speedX;
 }
 if (tp <= 0) {
 speedY = 5;
 }else if((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop
  && (ball.offsetLeft + ball.offsetWidth/2) >= flap.offsetLeft
  && (ball.offsetLeft + ball.offsetWidth/2) <= (flap.offsetLeft + flap.offsetWidth)
 ){
 speedY = -5;
 }else if(ball.offsetTop >= flap.offsetTop){
 gameOver();
 }
 ball.style.left = lf + 'px';
 ball.style.top = tp + "px";
 },20)
 }
 
 //判断游戏是否结束
 function gameOver(){
 alert("game over" + "\n" + "您的得分是" + score.innerHTML);
 clearInterval(interId);
 }
 
}

更多关于Js游戏的精彩文章,请查看专题: 《JavaScript经典游戏 玩不停》

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery之美中不足小结
Feb 16 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
Feb 23 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
Apr 25 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
10条建议帮助你创建更好的jQuery插件
May 18 Javascript
使用Object.defineProperty实现简单的js双向绑定
Apr 15 Javascript
javascript简单进制转换实现方法
Nov 24 Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
Windows下安装 node 的版本控制工具 nvm
Feb 06 Javascript
深入理解Antd-Select组件的用法
Feb 25 #Javascript
京东优选小程序的实现代码示例
Feb 25 #Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 #Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 #Javascript
Javascript地址引用代码实例解析
Feb 25 #Javascript
Javascript如何实现双指控制图片功能
Feb 25 #Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
Feb 25 #Javascript
You might like
php5.3 废弃函数小结
2010/05/16 PHP
ThinkPHP之R方法实例详解
2014/06/20 PHP
完整删除ecshop中获取店铺信息的API
2014/12/24 PHP
php json_encode与json_decode详解及实例
2016/12/13 PHP
PHP中常用的魔术方法
2017/04/28 PHP
AJAX的使用方法详解
2017/04/29 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
JavaScript修改css样式style
2008/04/15 Javascript
JQuery autocomplete 使用手册
2010/04/01 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
JS排序之选择排序详解
2017/04/08 Javascript
React Native 使用Fetch发送网络请求的示例代码
2017/12/02 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
详解vue中$nextTick和$forceUpdate的用法
2019/12/11 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
django框架cookie和session用法实例详解
2019/12/10 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
拿来就用!Python批量合并PDF的示例代码
2020/08/10 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
德国高尔夫商店:Golfshop.de
2019/06/22 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
党员群众路线学习心得体会
2014/11/04 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
2015年青年志愿者工作总结
2015/05/20 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
苹果M1芯片安装nginx 并且部署vue项目步骤详解
2021/11/20 Servers