打砖块 打砖块小游戏

这篇文章给大家聊聊关于打砖块，以及打砖块小游戏对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。

玩法：\\n【点击任意位置开始】左、右箭头键或移动鼠标，球拍接住球弹起消掉砖块，知道打完砖块进入下一个关卡，总共10关，赶紧去闯关吧^^。\\n

开始游戏

<canvasid="canvas"width="960"height="520"></canvas>\\ncss

#d1{\\nborder:1pxsolidtransparent;\\nbackground-clip:padding-box,border-box;\\nbackground-origin:padding-box,border-box;\\nbackground-image:linear-gradient(toright,#fff,#fff),\\nlinear-gradient(120deg,#f7716d,#60C4FD,#EDC951,#7ac630,\\n#f7716d,#60C4FD,#EDC951,#7ac630,#7ac630,#f7716d,#60C4FD,#EDC951,#7ac630);\\nmargin:0auto;\\nwidth:960px;\\n}\\njs

window.onload=function(){//页面加载完成后执行\\nGame.setup();\\n};\\nvarctx=null;\\n//游戏主体\\nvarGame={\\ncanvas:document.getElementById('canvas'),//获取canvas画布\\nsetup:function(){\\nif(this.canvas.getContext){\\nctx=this.canvas.getContext('2d');//获取ctx\\nthis.width=this.canvas.width;\\nthis.height=this.canvas.height;\\nGame.runGame();\\nCtrl.init();//对键盘、鼠标和触摸监听时间进行初始化\\n}\\n},\\nanimate:function(){\\nGame.play=requestAnimFrame(Game.animate);\\n//调用requestAnimFrame方法，进行每秒六十次的调用\\nGame.draw();\\n},\\ninit:function(){\\nBackground.init();\\nHud.init();\\nBricks.init();\\nBall.init();\\nPaddle.init();\\n//this.animate();\\n},\\ndraw:function(){\\nctx.clearRect(0,0,this.width,this.height);//对canvas画布进行清除\\nBackground.draw();\\nBricks.draw();\\nPaddle.draw();\\nHud.draw();\\nBall.draw();\\n},\\nlevelUp:function(){\\nHud.lv+=1;\\nBricks.init();\\nBall.init();\\nPaddle.init();\\n},\\nlevelLimit:function(lv){\\nif(lv<=10){\\nreturnlv;\\n}\\nelse{\\nreturn10;}\\n},\\nrunGame:function(){\\nGame.canvas.removeEventListener('click',Game.runGame,false);\\n//移除canvas的点击监听，移除当时runGame方法的调用\\nGame.init();\\nGame.animate();\\n},\\nrestartGame:function(){\\nGame.canvas.removeEventListener('click',Game.restartGame,false);\\n//移除canvas的点击监听，移除当时restartGame方法的调用\\nGame.init();\\n}\\n};\\n\\n//得分与关卡计数器\\nvarHud={\\ninit:function(){\\nthis.lv=1;\\nthis.score=0;\\n},\\ndraw:function(){\\nctx.font='18pxhelvetica,arial';\\nctx.fillStyle='white';\\nctx.textAlign='right';\\nctx.fillText('分数:'+this.score,Game.width-15,Game.height-35);\\nctx.textAlign='right';\\nctx.font='12pxhelvetica,arial';\\nctx.fillText('关卡:'+this.lv,Game.width-15,Game.height-15);\\n}\\n};\\n//创建游戏开始和结束的画面\\nvarScreen={\\ncreate:function(){//具体绘制的方法\\nctx.fillStyle='rgba(0,0,0,0.6)';\\nctx.fillRect(0,0,Game.width,Game.height);\\nctx.fillStyle=this.textColor;\\nctx.textAlign='center';\\nctx.font='30pxhelvetica,arial';\\nctx.fillText(this.text,Game.width/2,Game.height/2);\\nctx.fillStyle='#f7716d';\\nctx.font='14pxhelvetica,arial';\\nctx.fillText(this.textSub,Game.width/2,Game.height/2+60);\\n},\\ngameover:function(score){//游戏结束画面的设置\\nthis.text='游戏结束，分数：'+score;\\nthis.textSub='点击重玩';\\nthis.textColor='#f7716d';\\nthis.create();//调用本身的图像绘制方法\\n}\\n};\\n\\n//第3步：显示背景图像\\nvarBackground={\\ninit:function(){\\nthis.ready=false;\\nthis.img=newImage();\\nthis.img.src='/default/game/dzk/background.jpg';\\nthis.img.onload=function(){\\nBackground.ready=true;\\n};\\n},\\ndraw:function(){\\nif(this.ready){\\nctx.drawImage(this.img,0,0);\\n}\\n}\\n};\\n\\n//第4步：计算矩形砖块的宽度与高度\\nvarBricks={\\ngap:6,\\ncol:10,\\nw:91,\\nh:30,\\nr:5,\\ninit:function(){\\n//this.row=3;\\n//this.row=2+Hud.lv;\\nthis.row=2+Game.levelLimit(Hud.lv);\\n//设置每关砖块的行数，调用limit方法\\nthis.total=0;\\n//对count二维数组进行赋值\\nthis.count=[this.row];\\nfor(vari=this.row;i--;){\\nthis.count[i]=[this.col];\\n}\\n},\\ndraw:function(){//对砖块绘制的方法\\n//清除被小球击中的砖块\\nvari,j;\\nfor(i=this.row;i--;){\\nfor(j=this.col;j--;){\\nif(this.count[i][j]!==false){\\n//碰撞侦测，判断小球是否与当前重绘的砖块发生重叠\\nif(Ball.x>=this.x(j)&&//对小球碰撞的砖块进行判断\\nBall.x<=(this.x(j)+this.w)&&\\nBall.y>=this.y(i)&&\\nBall.y<=(this.y(i)+this.h)){\\n//判断条件都为真时，执行下两行代码\\nthis.collide(i,j);//将碰撞的砖块的值设置为false\\ncontinue;\\n}\\nctx.fillStyle=this.gradient(i),\\n//ctx.fillRect(this.x(j),this.y(i),this.w,this.h);\\n//将砖块绘制成椭圆\\nctx.beginPath();\\nctx.moveTo(this.x(j)+15,this.y(i));\\nctx.lineTo(this.x(j)+90-15,this.y(i));\\nctx.arcTo(this.x(j)+90,this.y(i),this.x(j)+90,this.y(i)+15,this.r);\\nctx.arcTo(this.x(j)+90,this.y(i)+30,this.x(j),this.y(i)+30,this.r);\\nctx.lineTo(this.x(j)+15,this.y(i)+30);\\nctx.arcTo(this.x(j),this.y(i)+30,this.x(j),this.y(i),this.r);\\nctx.arcTo(this.x(j),this.y(i),\\nthis.x(j)+90,this.y(i),this.r);\\nctx.closePath();\\n//ctx.stroke();\\nctx.fill();\\n\\n}\\n}\\n}\\nif(this.total===(this.row*this.col)){\\n//当计数器等于当前关卡砖块总数时\\nGame.levelUp();//调用Game里面levelUp的方法(升级关卡)\\n}\\n},\\ncollide:function(i,j){\\nHud.score+=1;//如果碰撞判断成立，成绩积分+1\\nthis.total+=1;//计数器+1\\n//如果发生重叠，将其设定为false，并将小球的y坐标取负\\nthis.count[i][j]=false;\\nBall.sy=-Ball.sy;\\n},\\nx:function(row){//返回当前砖块所占用X的区间\\nreturn(row*this.w)+(row*this.gap);\\n},\\ny:function(col){//返回当前砖块所占用Y的区间\\nreturn(col*this.h)+(col*this.gap);\\n},\\n\\n//第5步：给砖块着色\\ngradient:function(row){\\nfor(;row>3;){//按行数循环将砖块着色\\nrow=row-4;}\\nswitch(row){//对相应的砖块行进行着色\\ncase0:\\nreturnthis.gradientPurple?\\nthis.gradientPurple:\\nthis.gradientPurple=\\nthis.makeGradient(row,'#bd06f9','#9604c7');\\ncase1:\\nreturnthis.gradientRed?\\nthis.gradientRed:\\nthis.gradientRed=\\nthis.makeGradient(row,'#F9064A','#c7043b');\\ncase2:\\nreturnthis.gradientGreen?\\nthis.gradientGreen:\\nthis.gradientGreen=\\nthis.makeGradient(row,'#05fa15','#04c711');\\ncase3:\\nreturnthis.gradientOrange?\\nthis.gradientOrange:\\nthis.gradientOrange=\\nthis.makeGradient(row,'#faa105','#c77f04');\\n}\\n},\\nmakeGradient:function(row,color1,color2){\\nvary=this.y(row);\\nvargrad=ctx.createLinearGradient(0,y,0,y+this.h);\\n//渐变起始颜色为color1，终止颜色为color2\\ngrad.addColorStop(0,color1);\\ngrad.addColorStop(1,color2);\\nreturngrad;\\n}\\n};\\n

源码

转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/

关于本次打砖块和打砖块小游戏的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。