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 相关文章推荐
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
Mar 10 Javascript
面向对象的Javascript之二(接口实现介绍)
Jan 27 Javascript
获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍
Nov 08 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
node.js中的querystring.parse方法使用说明
Dec 10 Javascript
JavaScript中DOM详解
Apr 13 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
js实现分割上传大文件
Mar 09 Javascript
ionic隐藏tabs的方法
Aug 29 Javascript
Angular排序实例详解
Jun 28 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
Nov 28 Javascript
JavaScript实现新年倒计时效果
Nov 17 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代码
2012/06/08 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
Yii2.0实现生成二维码功能实例
2017/10/24 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Thinkphp5框架异常处理操作实例分析
2020/06/03 PHP
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
图片文字识别(OCR)插件Ocrad.js教程
2018/11/26 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
Vue实现圆环进度条的示例
2021/02/06 Vue.js
python逐行读取文件内容的三种方法
2014/01/20 Python
python求斐波那契数列示例分享
2014/02/14 Python
Python多线程编程(四):使用Lock互斥锁
2015/04/05 Python
python制作小说爬虫实录
2017/08/14 Python
python如何在循环引用中管理内存
2018/03/20 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
520使用Python实现“我爱你”表白
2020/05/20 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
Canvas实现放大镜效果完整案例分析(附代码)
2020/11/26 HTML / CSS
W Hamond官网:始于1979年的钻石专家
2020/07/20 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
环境工程求职简历的自我评价范文
2013/10/24 职场文书
社会保险接收函
2014/01/12 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
植树造林的宣传标语
2014/06/23 职场文书
维护民族团结演讲稿
2014/08/27 职场文书
亮剑精神观后感
2015/06/05 职场文书
运动会通讯稿600字
2015/07/20 职场文书
2016小学新学期寄语
2015/12/04 职场文书
情况说明书格式及范文
2019/06/24 职场文书
职场中的你,辞职信写对了吗?
2019/06/26 职场文书
基于Python编写一个监控CPU的应用系统
2022/06/25 Python