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 相关文章推荐
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
Aug 28 Javascript
理解Javascript_13_执行模型详解
Oct 20 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
一个背景云变换js特效 鼠标移动背景云变化
Dec 28 Javascript
jQuery图片播放8款精美插件分享
Feb 17 Javascript
JavaScript的9种继承实现方式归纳
May 18 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
angular4自定义组件详解
Sep 28 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
Vue实现多页签组件
Jan 14 Vue.js
从零使用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隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
2011/11/10 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jquery提取元素里的纯文本不包含span等里的内容
2013/09/30 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
比较常见的javascript中定义函数的区别
2015/11/09 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
js实现四舍五入完全保留两位小数的方法
2016/08/02 Javascript
JS实现异步上传压缩图片
2017/04/22 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
用Node编写RESTful API接口的示例代码
2018/07/04 Javascript
vue+element的表格实现批量删除功能示例代码
2018/08/17 Javascript
js正则取值的结果数组调试方法
2018/10/10 Javascript
Vue CLI3中使用compass normalize的方法
2019/05/30 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
2020/11/04 Javascript
Python的设计模式编程入门指南
2015/04/02 Python
python回调函数用法实例分析
2015/05/09 Python
python删除过期文件的方法
2015/05/29 Python
python opencv 图像尺寸变换方法
2018/04/02 Python
pandas读取CSV文件时查看修改各列的数据类型格式
2019/07/07 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
《望洞庭》教学反思
2014/02/16 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
函授毕业生自我鉴定范文
2014/03/25 职场文书
比赛口号大全
2014/06/10 职场文书
水利水电专业自荐信
2014/07/08 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
全国助残日活动总结
2015/05/11 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
JavaCV实现照片马赛克效果
2022/01/22 Java/Android