用html5写的一个小游戏,不断的学习,一步一步地完善
核心问题:
碰撞检测,一种是像素级的检测,一种是矩形检测,这个游戏中我使用的是四点检测
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id='ctx' width='600' height='800'></canvas>
</body>
<script type="text/javascript">
/*
Copyright @wangbin
*/
var WIDTH = 600;
var HEIGHT = 800;
var Controller = (function(){
var FPS = 30;
var Game = {
ku:{},
over:0,
init:function(){
this.ctx = document.getElementById("ctx").getContext("2d");
this.stage = this.ku["Stage"](this);//构建舞台
this.map = this.ku["Map"](this);
this.ball = this.ku["Ball"](this);
this.bang = this.ku["Bang"](this);
this.ku["Control"](this);
},
start:function(){
this.step();
},
step:function(){
this.stage.step();//舞台步进
if(this.over) return;
var that = this;
this.myTime = setTimeout(function(){that.step()},1000/FPS);
},
pause:function(){
clearTimeout(this.myTime);
},
draw:function(){
this.ctx.fillRect(0,0,100,100);
}
};
return {
init : function(){
Game.init();
},
start : function(){
Game.start();
},
pause : function(){
Game.pause();
},
module : function(name,fun){
Game.ku[name] = fun;
}
}
})();
Controller.module("Stage",function(Game){
var stage = {
drawStage:function(){
},
drawCurtain:function(){//擦掉舞台,重绘
Game.ctx.clearRect(0,0,WIDTH,HEIGHT);
},
step:function(){//舞台步进
this.drawCurtain();
Game.map.step();//进图步进
Game.ball.step();//球步进
Game.bang.step();//球步进
},
gameOver:function(){
Game.over = 1;
this.drawCurtain();
Game.ctx.fillText("你输了!",300,400);
}
};
return stage;
});
Controller.module("Map",function(Game){
var map = {
map_array:[
[2,2,2,2,2,2,2,2,2,2,2,2],
[2,1,1,1,1,1,1,1,1,1,1,2],
[2,1,1,1,1,1,1,1,1,1,1,2],
[2,1,1,1,1,1,1,1,1,1,1,2],
[2,1,1,1,1,1,1,1,1,1,1,2],
[2,1,1,1,1,1,1,1,1,1,1,2],
[2,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,2],
[2,0,0,0,0,0,0,0,0,0,0,2],
[5,5,5,5,5,5,5,5,5,5,5,5],
],
step:function(){
this.drawMap();
},
drawMap:function(){//照地图矩阵绘制地图
this.everyWidth = WIDTH / this.map_array[0].length;
this.everyHeight = HEIGHT / this.map_array.length;
for(var i in this.map_array){
for(var j in this.map_array[i]){
if(this.map_array[i][j] == 1)//砖块style
Game.ctx.strokeRect(j * this.everyWidth,i * this.everyHeight,this.everyWidth,this.everyHeight);
else if(this.map_array[i][j] == 2 || this.map_array[i][j] == 3 || this.map_array[i][j] == 4 )//边界style
Game.ctx.fillRect(j * this.everyWidth,i * this.everyHeight,this.everyWidth,this.everyHeight);
}
}
}
};
return map;
});
Controller.module("Ball",function(Game){
var R = 20;
var ball = {
ballDot:{'x':200,'y':500},
ballDirect:{x:3,y:-5},//球的方向和速度
drawBall:function(){//根据球的坐标画球
Game.ctx.beginPath();
Game.ctx.arc(this.ballDot.x,this.ballDot.y,R,0,2*Math.PI,true);
Game.ctx.fill();
},
step:function(){//球步进
//判断球在地图上所处的区域位置,此游戏的关键之处
//判断球四周是否有障碍存在
var that = this;
function check(x,y){
var tempX = Math.floor(x / Game.map.everyWidth);
var tempY = Math.floor(y / Game.map.everyHeight);
if(Game.map.map_array[tempY][tempX] == 5){//游戏结束
Game.stage.gameOver();
return false;
}
if(Game.map.map_array[tempY][tempX] == 1) {//碰到砖块
Game.map.map_array[tempY][tempX] = 0;
return 1;
}
if(Game.map.map_array[tempY][tempX] == 2) return 1;//碰到边界
}
//实际上可以以四点代表这个球,只需看这四点与地图的交点就行了
if(check(this.ballDot.x - R,this.ballDot.y)) this.ballDirect.x = -this.ballDirect.x;
if(check(this.ballDot.x + R,this.ballDot.y)) this.ballDirect.x = -this.ballDirect.x;
if(check(this.ballDot.x ,this.ballDot.y + R)) this.ballDirect.y = -this.ballDirect.y;
if(check(this.ballDot.x ,this.ballDot.y - R)) this.ballDirect.y = -this.ballDirect.y;
//棒检测
var a = this.ballDot.x - Game.bang.zsDot.x;
var b = this.ballDot.y + R - Game.bang.zsDot.y;
if(a >= 0 && a <= Game.bang.width && b == 0) this.ballDirect.y = -this.ballDirect.y;
if(Game.over) return;//如果输入了就不往下走了
this.ballDot.x += this.ballDirect.x;
this.ballDot.y += this.ballDirect.y;
this.drawBall();
}
}
return ball;
});
Controller.module("Bang",function(Game){
var bang = {
width:100,
height:20,
v:20,
zsDot:{x:500,y:700},//左上点坐标
drawBang:function(){
if(Game.over) return;//如果输入了就不往下走了
Game.ctx.fillRect(this.zsDot.x , this.zsDot.y , this.width , this.height);
},
step:function(){
this.drawBang();
}
}
return bang;
});
Controller.module("Control",function(Game){
window.addEventListener('keydown',function(e){
if(e.keyCode == 39) Game.bang.zsDot.x += Game.bang.v;
if(e.keyCode == 37) Game.bang.zsDot.x -= Game.bang.v;
if(e.keyCode == 38) Game.pause();
},false);
});
Controller.init();
Controller.start();
</script>
</html>
分享到:
相关推荐
html5实现经典打砖块游戏源码下载 html5实现经典打砖块游戏源码下载
HTML5弹珠打砖块游戏代码,打砖块小游戏是一种动作电子游戏的名称,玩家操作一根萤幕上水平的“棒子”,让一颗不断弹来弹去的“球”在撞击作为过关目标消去的“砖块”的途中不会落到萤幕底下。
HTML5打砖块小游戏基于HTML5 canvas jquery-1.5.2.min.js制作,经典打砖块小游戏网页版,单机版。
HTML5弹球打砖块小游戏,左、右箭头键或移动鼠标,控制小球打砖块。
弹球打砖块HTML5源码
HTML,是一种制作万维网页面的标准语言,它消除了不同计算机之间信息交流的障碍; CSS,可以帮助把网页外观做得更加美观; JavaScript,是一种轻量级的解释型编程语言; jQuery,使用户能更方便地处理HTML documents...
HTML5有望成为网络游戏开发的热门新平台,其跨平台性已奠定了其未来发展的基础。本专题为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写,为大家讲解HTML5游戏开发基础教程及分享实战经验。 今...
html5网页版打砖块小游戏源码下载
HTML5 canvas打砖块射击小游戏,颜色爆炸射击游戏,使用小键盘"左"和"右"箭头或"a"和"d"键移动,"空格键"发射子弹。
HTML5弹球打砖块小游戏,左、右箭头键或移动鼠标,控制小球打砖块。
游戏在打砖块的主要玩法基础上加入了更多玩法,包括:道具和通关计时系统等。 可以在手机上直接运行 程序使用js语言进行编写的html5版本游戏,使用了PIXI框架进行开发。
H5 canvas实现打砖块小游戏,界面比较丑,下载的亲们请自己修改一下,主要是解决小球与砖块和边缘的碰撞问题,可能还有些小bug
JS+canvas实现弹球打砖块小游戏。弹球打砖块是可以有丰富拓展的小游戏,这里面有详细的碰撞检测逻辑,可以实现基础的弹球打砖块,适合新手在此基础上写出自己的玩法。
Ball And Wall - 打砖块风格的游戏 演示 演示可在和使用此代码的扩展版本在 。 安装 。 用法 下载源代码后,通过 bower 安装依赖项: $ bower install 和通过 npm 的开发工具: $ npm install 带有_dev.html...
h5小游戏—打砖块本项目是利用原生js实现的h5小游戏,在实现时使用了大量es6语法,对于es6语法不太熟悉的小伙伴可以先查阅相关资料了解一下demo:项目截图已完成功能: 设计多个关卡 显示计分板 特殊砖块血量更多 ...
jQuery网页版打砖块小游戏源码是一款基于jQuery HTML5实现的打砖块小游戏代码。
网页打砖块游戏html代码,有分步解释,从零到有的完整过程
打砖块一个用HTML5 canvas写的最简单的打砖块游戏。随着剩余砖块数量的减小,球运动的速度会越来越大。样例:
python小游戏,通过一个小球发射弹出去打掉所有的砖块,打完就可以继续下一关,关卡会越来越难。