彩色砖头拿走不谢想拍谁拍谁

打砖块小游戏

欢迎来到程序小院

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

开始游戏

<canvas id="canvas" width="960" height="520"></canvas>css

#d1 { border: 1px solid transparent; background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: linear-gradient(to right, #fff, #fff), linear-gradient(120deg, #f7716d, #60C4FD, #EDC951, #7ac630, #f7716d, #60C4FD, #EDC951, #7ac630,#7ac630, #f7716d, #60C4FD, #EDC951, #7ac630); margin:0 auto; width: 960px; }js

window.onload = function() {//页面加载完成后执行 Game.setup(); };var ctx = null;//游戏主体var Game = { canvas: document.getElementById('canvas'),//获取canvas画布 setup: function() { if (this.canvas.getContext) { ctx = this.canvas.getContext('2d');//获取ctx this.width = this.canvas.width; this.height = this.canvas.height; GameGame(); Ctrlit();//对键盘、鼠标和触摸监听时间进行初始化 } }, animate: function() { Game.play = requestAnimFrame(Game.animate); //调用requestAnimFrame方法，进行每秒六十次的调用 Game.draw(); }, init: function() { Backgroundit(); Hudit(); Bricksit(); Ballit(); Paddleit(); //this.animate(); }, draw: function() { ctx.clearRect(0, 0, this.width, this.height);//对canvas画布进行清除 Background.draw(); Bricks.draw(); Paddle.draw(); Hud.draw(); Ball.draw(); }, levelUp: function() { Hud.lv += 1; Bricksit(); Ballit(); Paddleit(); }, levelLimit: function(lv) { if(lv<=10){ return lv; } else{ return 10;} }, runGame: function() { Game.canvas.removeEventListener('click', GameGame, false); //移除canvas的点击监听，移除当时runGame方法的调用 Gameit(); Game.animate(); }, restartGame: function() { Game.canvas.removeEventListener('click', Game.restartGame, false); //移除canvas的点击监听，移除当时restartGame方法的调用 Gameit(); }};//得分与关卡计数器var Hud = { init: function() { this.lv =1; thisore = 0; }, draw: function() { ctx.font = '18px helvetica, arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'right'; ctx.fillText('分数: ' + thisore, Game.width - 15, Game.height - 35); ctx.textAlign = 'right'; ctx.font = '12px helvetica, arial'; ctx.fillText('关卡: ' + this.lv, Game.width - 15, Game.height - 15); }};//创建游戏开始和结束的画面var Screen = { create: function() {//具体绘制的方法 ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(0, 0, Game.width, Game.height); ctx.fillStyle = this.textColor; ctx.textAlign = 'center'; ctx.font = '30px helvetica, arial'; ctx.fillText(this.text, Game.width / 2, Game.height / 2); ctx.fillStyle = '#f7716d'; ctx.font = '14px helvetica, arial'; ctx.fillText(this.textSub, Game.width / 2, Game.height / 2 + 60); }, gameover: function(score) {//游戏结束画面的设置 this.text = '游戏结束，分数：'+score; this.textSub = '点击重玩'; this.textColor = '#f7716d'; this.create();//调用本身的图像绘制方法 }};//第3步：显示背景图像var Background = { init: function() { this.ready = false; this.img = new Image(); this.img.src = '/default/game/dzk/background.jpg'; this.img.onload = function() { Background.ready = true; }; }, draw: function() { if (this.ready) { ctx.drawImage(this.img, 0, 0); } }};//第4步：计算矩形砖块的宽度与高度var Bricks = { gap: 6, col: 10, w: 91, h: 30, r:5, init: function() { //this.row = 3; //this.row = 2 + Hud.lv; this.row = 2 + Game.levelLimit(Hud.lv); //设置每关砖块的行数，调用limit方法 this.total = 0; //对count二维数组进行赋值 thisunt = [this.row]; for (var i = this.row; i--;) { thisunt[i] = [thisl]; } }, draw: function() {//对砖块绘制的方法 //清除被小球击中的砖块 var i, j; for (i = this.row; i--;) { for (j = thisl; j--;) { if (thisunt[i][j] !== false) { //碰撞侦测，判断小球是否与当前重绘的砖块发生重叠 if (Ball.x >= this.x(j) &&//对小球碰撞的砖块进行判断 Ball.x <= (this.x(j) + this.w) && Ball.y >= this.y(i) && Ball.y <= (this.y(i) + this.h)) { //判断条件都为真时，执行下两行代码 thisllide(i, j);//将碰撞的砖块的值设置为false continue; } ctx.fillStyle=this.gradient(i), //ctx.fillRect(this.x(j), this.y(i), this.w, this.h); //将砖块绘制成椭圆 ctx.beginPath(); ctx.moveTo(this.x(j)+15, this.y(i)); ctx.lineTo(this.x(j)+90-15, this.y(i)); ctx.arcTo(this.x(j)+90, this.y(i), this.x(j)+90, this.y(i)+15, this.r); ctx.arcTo(this.x(j)+90, this.y(i)+30, this.x(j), this.y(i)+30, this.r); ctx.lineTo(this.x(j)+15, this.y(i)+30); ctx.arcTo(this.x(j), this.y(i)+30, this.x(j), this.y(i), this.r); ctx.arcTo(this.x(j), this.y(i), this.x(j)+90, this.y(i), this.r); ctx.closePath(); //ctx.stroke(); ctx.fill(); } } } if (this.total === (this.row * thisl)) { //当计数器等于当前关卡砖块总数时 Game.levelUp();//调用Game里面levelUp的方法(升级关卡) } }, collide: function(i, j) { Hudore += 1;//如果碰撞判断成立，成绩积分+1 this.total += 1;//计数器+1 //如果发生重叠，将其设定为false，并将小球的y坐标取负 thisunt[i][j] = false; Ball.sy = -Ball.sy; }, x: function(row) {//返回当前砖块所占用X的区间 return (row * this.w) + (row * this.gap); }, y: function(col) {//返回当前砖块所占用Y的区间 return (col * this.h) + (col * this.gap); }, //第5步：给砖块着色 gradient: function(row) { for(;row>3;){ //按行数循环将砖块着色 row=row-4;} switch(row) {//对相应的砖块行进行着色 case 0: return this.gradientPurple ? this.gradientPurple : this.gradientPurple = this.makeGradient(row, '#bd06f9', '#9604c7'); case 1: return this.gradientRed ? this.gradientRed : this.gradientRed = this.makeGradient(row, '#F9064A', '#c7043b'); case 2: return this.gradientGreen ? this.gradientGreen : this.gradientGreen = this.makeGradient(row, '#05fa15', '#04c711'); case 3: return this.gradientOrange ? this.gradientOrange : this.gradientOrange = this.makeGradient(row, '#faa105', '#c77f04'); } }, makeGradient: function(row, color1, color2) { var y = this.y(row); var grad = ctx.createLinearGradient(0, y, 0, y + this.h); //渐变起始颜色为color1，终止颜色为color2 grad.addColorStop(0, color1); grad.addColorStop(1, color2); return grad; }};

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处/d/file/gt/2023-09/3kdf4gt1p0o