JS实现打砖块游戏


Posted in Javascript onFebruary 14, 2020

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

面向对象思想

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 #show{
 width: 200px;
 height: 600px;
 position: absolute;
 left:1122px ;
 top:50px;
 background-color: gray;
 color: blue;
 line-height: 100px;
 font-size: larger;
 align-self: center;
 }
 #lose{
 position: absolute;
 top: 300px;
 left: 300px;
 font-size: xx-large;
 display: none;
 }
 li{
 position: absolute;
 list-style-type: none;
 background-color: #000000;
 width: 90px;
 height: 30px;
 border: 1px solid white;
 }
 #box{
 position: absolute;
 width: 920px;
 height: 600px;
 left: 200px;
 top: 50px;
 border: 2px solid red;
 }
 #board{
 position: absolute;
 top:590px;
 left: 300px;
 width: 200px;
 height: 10px;
 background-color: black;
 }
 #bubble{
 position: absolute;
 top: 565px;
 left: 360px;
 width: 25px;
 height: 25px;
 background-color: #FF0000;
 border-radius: 50%;
 }
 </style>
 
 <script type="text/javascript">
 window.onload=function(){
 function $(id){
 return document.getElementById(id);
 }
 function rand(min,max){
 return Math.floor(Math.random()*(max-min+1))+min
 }
 
 //打砖块构造函数
 function BlockBreak(){
 this.box=$('box');//容器
 this.list=document.getElementsByTagName('li');//砖块
 this.board=$('board');//挡板
 this.ball=$('bubble');//小球
 this.fx=3;//横向
 
 this.fy=-3;//纵向
 this.leftInit=0;//砖块left初始值
 this.topInit=0;//砖块top初始值
 }
 //初始化功能 摆放每一个砖块的位置
 BlockBreak.prototype.init=function(){
 for(var i=0;i<this.list.length;i++){
 this.list[i].style.backgroundColor="rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
 var x=this.leftInit*this.list[0].offsetWidth;
 var y=this.topInit;
 this.list[i].style.left=x+'px';
 this.list[i].style.top=y+'px';
 this.leftInit++

 //换行
 if((i+1)%10==0){
 this.leftInit=0;
 this.topInit+=this.list[0].offsetHeight;
 }
 
 }
 }
 //挡板运动
 
 BlockBreak.prototype.keydown=function(){
 var that=this;
 var mleft=false;
 var mright=false;
 
 //因为按键之后第一次跟第之后的移动之间会有延迟,这是操作系统的问题防止连按两次
 //所以就不把移动放在这里了,把治理放一个标志,移动放在定时器里
 document.onkeydown=function(e){
 var e=e||event;
 if(e.keyCode==37){
 mleft=true;
 }
 if(e.keyCode==39){
 mright=true;
 
 }
 }
 document.onkeyup=function(){
 mleft=false;
 mright=false;
 }
 setInterval(function(){
 
 console.log(mleft);
 if (mleft){
 that.board.style.left=that.board.offsetLeft-15+'px';
 if(that.board.offsetLeft<=0){
 that.board.style.left=0;
 }
 }else if(mright){
 that.board.style.left=that.board.offsetLeft+15+'px';
 if(that.board.offsetLeft>=720){
 that.board.style.left=720+'px';
 }
 } 
 
 },50) 
 
 
 }
 var times=0;
 var score=0;
 //小球运动
 BlockBreak.prototype.move=function(){
 var timer=null;
 var that=this;
 timer=setInterval(function(){
 that.ball.style.left=that.ball.offsetLeft+that.fx+'px';
 that.ball.style.top=that.ball.offsetTop+that.fy+'px';
 //小球四个方向反弹
 if(that.ball.offsetTop<=0){
 that.fy*=-1;
 }
 if(that.ball.offsetLeft<=0){
 that.fx*=-1;
 }
 if(that.ball.offsetLeft>=(that.box.offsetWidth-that.ball.offsetWidth)){
 that.fx*=-1;
 
 }
 if(that.ball.offsetTop>=(that.box.offsetHeight-that.ball.offsetHeight)){
 //游戏结束
 
 $('lose').style.display='block';
 clearInterval(timer);
 $('res').innerHTML='游戏结束'+"<br>";
 }
 //小球挡板碰撞反弹
 if(that.ball.offsetTop+that.ball.offsetHeight>=that.board.offsetTop){
 if(that.ball.offsetLeft+that.ball.offsetWidth>=that.board.offsetLeft){
 if(that.ball.offsetLeft<=that.board.offsetLeft+that.board.offsetWidth){
 that.fy*=-1;
 times++;
 $('times').innerHTML=times+'次'+'<br>';
 }
 }
 }
 //小球砖块反弹
 //以一个小球为基准 遍历所有砖块,找到满足条件的砖块
 for(var i=0;i<that.list.length;i++)
 {
 if(that.ball.offsetTop<=that.list[i].offsetTop+that.list[i].offsetHeight){
 if(that.ball.offsetLeft>=that.list[i].offsetLeft){
 if(that.ball.offsetLeft<=that.list[i].offsetLeft+that.list[i].offsetWidth){
 that.fy*=-1;
 that.list[i].style.display='none';
 score++;
 $('score').innerHTML=score+'分'+'<br>';
 }
 }
 }
 
 }
 
 },10)
 }
 var bb=new BlockBreak();
 bb.init();
 $('start').onclick=function(){
 $('times').innerHTML=0+'次'+'<br>';
 $('score').innerHTML=0+'分'+"<br>";
 $('res').innerHTML= "正在游戏"+"<br>";
 bb.keydown();
 bb.move();
 
 }
 
 }
 </script>
 </head>
 <body>
 <div id="container">
 <div id="show">
 <span id="info">游戏重要信息<br></span>
 <span>当前时间:</span>
 <span id="time">加载中...<br></span>
 <span>游戏状态:</span>
 <span id="res">加载中...<br></span>
 <span>挡板打球次数:</span>
 <span id="times">加载中...<br></span>
 <span>游戏得分:</span>
 <span id="score">加载中...</span>
 </div>
 
 
 
 <!----游戏区域--->
 <div id="box">
 <ul>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 <div id="bubble"></div>
 <div id="board"></div>
 <div id="lose"><h1>Game Over!</h1></div>
 </div>
 
 <button type="button" id="start">开始游戏</button>
 
 </div>
 </body>
</html>

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

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

Javascript 相关文章推荐
9款2014最热门jQuery实用特效推荐
Dec 07 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
Apr 06 Javascript
Java遍历集合方法分析(实现原理、算法性能、适用场合)
Apr 25 Javascript
AngularJS Controller作用域
Jan 09 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
js实现跟随鼠标移动的小球
Aug 26 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue页面引入three.js实现3d动画场景操作
Aug 10 Javascript
从零使用TypeScript开发项目打包发布到npm
Feb 14 #Javascript
JavaScript中的this原理及6种常见使用场景详解
Feb 14 #Javascript
node.js中对Event Loop事件循环的理解与应用实例分析
Feb 14 #Javascript
Angular之jwt令牌身份验证的实现
Feb 14 #Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 #Javascript
JS实现简易计算器
Feb 14 #Javascript
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
Feb 14 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP 防恶意刷新实现代码
2010/05/16 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP获取访问设备信息的方法示例
2019/02/20 PHP
PHP中localeconv()函数的用法
2019/03/26 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
php异常处理捕获错误整理
2019/09/23 PHP
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
js实现点击添加一个input节点
2014/12/05 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
JS前端笔试题分析
2016/12/19 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
详解Vue中一种简易路由传参办法
2017/09/15 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
解决vue一个页面中复用同一个echarts组件的问题
2020/07/19 Javascript
python3如何将docx转换成pdf文件
2018/03/23 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
python抖音表白程序源代码
2019/04/07 Python
详解如何设置Python环境变量?
2019/05/13 Python
python pyinstaller 加载ui路径方法
2019/06/10 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python pandas.DataFrame.loc函数使用详解
2020/03/26 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
优秀中专生推荐信
2013/11/17 职场文书
翻译专业应届生求职信
2013/11/23 职场文书
战略合作意向书
2014/07/29 职场文书
法定代表人资格证明书
2014/09/11 职场文书
领导班子整改措施
2014/10/24 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang