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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
jquery中交替点击事件的实现代码
Feb 14 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
Jan 31 Javascript
jQuery匹配文档链接并添加class的方法
Jun 26 Javascript
浅谈JavaScript中指针和地址
Jul 26 Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
基于AngularJS的拖拽文件上传的实例代码
Jul 15 Javascript
详解vue mint-ui源码解析之loadmore组件
Oct 11 Javascript
vue使用原生swiper代码实例
Feb 05 Javascript
vue.js实现照片放大功能
Jun 23 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 和 MySQL 基础教程(三)
2006/10/09 PHP
PHP 线程安全与非线程安全版本的区别深入解析
2013/08/06 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
Javascript中call与apply的学习笔记
2014/09/22 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
jQuery弹层插件jquery.fancybox.js用法实例
2016/01/22 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JavaScript SHA-256加密算法详细代码
2016/10/06 Javascript
浅谈js原生拖放
2016/11/21 Javascript
浅析javascript中的Event事件
2016/12/09 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
基于js中this和event 的区别(详解)
2017/10/24 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
Jquery和CSS实现选择框重置按钮功能
2018/11/08 jQuery
使用Jenkins部署React项目的方法步骤
2019/03/11 Javascript
Vue时间轴 vue-light-timeline的用法说明
2020/10/29 Javascript
Python中with及contextlib的用法详解
2017/06/08 Python
python将txt文件读入为np.array的方法
2018/10/30 Python
python制作图片缩略图
2019/04/30 Python
美国校服网上商店:French Toast
2019/10/08 全球购物
俄罗斯购买剧院和演唱会门票网站:Parter.ru
2019/11/09 全球购物
英语专业大学生求职简历的自我评价
2013/10/18 职场文书
养殖项目策划书范文
2014/01/13 职场文书
理想点亮人生演讲稿
2014/05/21 职场文书
2015个人年度工作总结范文
2015/05/28 职场文书
军事理论课感想
2015/08/11 职场文书