用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、CSS3和JavaScript等核心技术，为用户提供了一种无需下载安装即可在浏览器中玩的轻量级游戏体验。这款打砖块游戏代码展示了如何利用这些...
"html5实现经典打砖块游戏源码下载"这个标题表明我们将探讨如何利用HTML5的特性来构建一个传统的打砖块游戏。打砖块游戏是20世纪70年代末期诞生的一种简单但具有挑战性的电子游戏，玩家通过移动一个平台来反射弹球，...
HTML5弹球打砖块小游戏是一款基于Web技术开发的互动娱乐应用，主要利用HTML5的Canvas元素和JavaScript编程实现。这款游戏的设计灵感源自经典的打砖块游戏，玩家通过控制挡板来反弹小球，打破屏幕上排列的砖块。下面...
HTML5打砖块小游戏是一款利用HTML5的Canvas技术和jQuery库构建的经典在线娱乐项目。这个小游戏的实现充分展示了HTML5在现代网页开发中的强大功能，尤其是Canvas元素提供的绘图能力，以及jQuery库为JavaScript编程...
【弹球打砖块HTML5源码】是一个基于HTML5技术开发的游戏项目，它展示了HTML5在游戏开发领域的强大功能。HTML5是超文本标记语言的第五次重大修订，为网页开发者提供了更多元化和现代化的工具，尤其在多媒体内容和交互...
HTML，是一种制作万维网页面的标准语言，它消除了不同计算机之间信息交流的障碍； CSS，可以帮助把网页外观做得更加美观； JavaScript，是一种轻量级的解释型编程语言； jQuery，使用户能更方便地处理HTML documents...
HTML5有望成为网络游戏开发的热门新平台，其跨平台性已奠定了其未来发展的基础。本专题为那些愿意学习或使用HTML5及相关Web技术开发交互式游戏的开发者而编写，为大家讲解HTML5游戏开发基础教程及分享实战经验。 今...
在这个"HTML5 canvas打砖块射击小游戏"中，我们看到的是利用JavaScript和Canvas API构建的一个经典游戏，类似于早期的街机游戏"打砖块"。以下是关于这个游戏和相关技术的一些详细知识点： 1. **HTML5 Canvas**：...
在这个"html5网页版打砖块小游戏源码下载"中，我们可以深入学习HTML5在游戏开发中的应用，以及相关的前端技术。 1. HTML5 Canvas： 打砖块游戏通常基于HTML5的Canvas元素构建，这是一个可编程的画布，允许开发者...
在本文中，我们将深入探讨如何使用HTML5的Canvas API实现一个基本的打砖块小游戏。Canvas是HTML5中一个强大的绘图元素，它允许开发者在网页上进行动态图形编程，从而实现各种各样的互动效果和游戏。 首先，我们来看...
游戏在打砖块的主要玩法基础上加入了更多玩法，包括：道具和通关计时系统等。 可以在手机上直接运行 程序使用js语言进行编写的html5版本游戏，使用了PIXI框架进行开发。
网页打砖块游戏是一款经典的游戏，它通过HTML、CSS和JavaScript等前端技术实现。这个压缩包文件提供了制作网页打砖块游戏的HTML代码，对于学习Web开发，尤其是想要掌握动态网页交互的人来说，是非常宝贵的资源。 ...
《JS+canvas实现弹球打砖块小游戏Breaker》是一个基于JavaScript和HTML5 Canvas技术开发的趣味性小游戏，它展示了如何利用编程技巧实现一个经典的打砖块游戏。在这个项目中，开发者可以学习到如何运用Canvas API进行...
《Cocos Creator与TypeScript构建打砖块小游戏详解》 在IT行业中，游戏开发是一项充满挑战和乐趣的任务，尤其对于初学者来说，通过简单的游戏项目可以快速掌握编程基础和游戏引擎的使用。本文将深入探讨如何使用...
《Android打砖块游戏源码解析与libgdx框架应用》 在移动设备上，游戏开发已经成为一个繁荣的领域，而Android平台凭借其广泛的用户基础和开放性，为开发者提供了丰富的机遇。本篇文章将深入探讨一个基于Android的...
在这个"HTML5弹球打砖块小游戏"中，我们可以深入理解HTML5在游戏开发中的应用。 首先，游戏的核心是通过HTML5的Canvas元素来实现的。Canvas是一个二维绘图表面，允许开发者使用JavaScript进行动态图形绘制。在这个...
基于Phaser的HTML5打砖块游戏，利用了HTML5技术的潜力，提供了一种在网页上实现互动娱乐体验的方式。HTML5是现代网页开发的标准，它引入了许多新特性，如Canvas绘图、Web Audio音频处理和Web Storage数据存储，这些...
打砖块游戏是一种经典的街机游戏，通过控制一块可移动的挡板来反弹小球，打破屏幕上方排列的砖块。在这个"打砖块JavaScript源码"中，我们可以深入学习如何使用JavaScript语言来实现这样的游戏。JavaScript是一种广泛...
Ball And Wall - 打砖块风格的游戏 演示 演示可在和使用此代码的扩展版本在 。 安装 。 用法 下载源代码后，通过 bower 安装依赖项： $ bower install 和通过 npm 的开发工具： $ npm install 带有_dev.html...