小程序直播实战攻略_JS完成打砖块游戏

发布时间:2021-01-06 15:01 作者:jianzhan

摘要: JS完成打砖头手机游戏 本文关键为大伙儿详尽详细介绍了JS完成打砖头手机游戏,原文中实例编码详细介绍的十分详尽,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照

JS实现打砖块游戏       这篇文章主要为大家详细介绍了JS实现打砖块游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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;
 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. unction(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) 

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'). unction(){ $('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

更多关于Js游戏的精彩文章,请查看专题:

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


  • 我国日报网站建站互联网

    在我国日报网站寰球网上信息内容:自八月1七日起一开始的一周时间内,在我国网民可以依据在我国日报网站或凡科网向俄罗斯政治军事、经济发展发展趋势、学术研究科学研究等社会

  • 有关HTTP各种各样情况码意

    模拟题目:相关HTTP各种各样各种各样状况码寓意着的是什么含义? 确信学过SEO提高的工作中工作人员,对于HTTP各种各样各种各样状况码务必把握,对于301、404这种状况码,大多数数数

  • ECCV2018

    模拟题目:ECCV2018 | 这一开源系统系统软件的车辆牌照辨别系统软件手机软件战胜了目前最初进的商业服务服务手机上手机软件 原文中由“我很喜欢计算机视觉效果实际效果”授权转截

  • 经常拆换网络服务器对网

    原题目:经常拆换网络服务器对网站是不是有危害? SEO普遍难题填补:我的站点因为这一段時间在开展一些作用、负荷层面的检测,以便让网站能一直被一切正常浏览,因此在一2个月

  • 王国cms手机端建网站文图

    模拟题目:帝国cms手机上端建设网站文图案例实例教程 帝国cms7.2称之为“变形金钢”,“可以轻轻地松松建立很多访问端”,具体上对大多数数数网站网站站长来说,在帝国cms官方网网