欢迎来到程序小院
打砖块小游戏
玩法：
【点击任意位置开始】左、右箭头键或移动鼠标，球拍接住球弹起消掉砖块，知道打完砖块进入下一个关卡，总共10关，赶紧去闯关吧^^。
开始游戏
html
<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;
Game.runGame();
Ctrl.init();//对键盘、鼠标和触摸监听时间进行初始化
}
},
animate: function() {
Game.play = requestAnimFrame(Game.animate);
//调用requestAnimFrame方法，进行每秒六十次的调用
Game.draw();
},
init: function() {
Background.init();
Hud.init();
Bricks.init();
Ball.init();
Paddle.init();
//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;
Bricks.init();
Ball.init();
Paddle.init();
},
levelLimit: function(lv) {
if(lv<=10){
return lv;
}
else{
return 10;}
},
runGame: function() {
Game.canvas.removeEventListener('click', Game.runGame, false);
//移除canvas的点击监听，移除当时runGame方法的调用
Game.init();
Game.animate();
},
restartGame: function() {
Game.canvas.removeEventListener('click', Game.restartGame, false);
//移除canvas的点击监听，移除当时restartGame方法的调用
Game.init();
}
};
//得分与关卡计数器
var Hud = {
init: function() {
this.lv =1;
this.score = 0;
},
draw: function() {
ctx.font = '18px helvetica, arial';
ctx.fillStyle = 'white';
ctx.textAlign = 'right';
ctx.fillText('分数: ' + this.score, 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二维数组进行赋值
this.count = [this.row];
for (var i = this.row; i--;) {
this.count[i] = [this.col];
}
},
draw: function() {//对砖块绘制的方法
//清除被小球击中的砖块
var i, j;
for (i = this.row; i--;) {
for (j = this.col; j--;) {
if (this.count[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)) {
//判断条件都为真时，执行下两行代码
this.collide(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 * this.col)) {
//当计数器等于当前关卡砖块总数时
Game.levelUp();//调用Game里面levelUp的方法(升级关卡)
}
},
collide: function(i, j) {
Hud.score += 1;//如果碰撞判断成立，成绩积分+1
this.total += 1;//计数器+1
//如果发生重叠，将其设定为false，并将小球的y坐标取负
this.count[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;
}
};
源码
需要源码请关注添加好友哦^ ^
转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/