首页 > 代码库 > HTML5与Javascript 实现网页弹球游戏
HTML5与Javascript 实现网页弹球游戏
1. 使用html 5 的canvas 技术和javascript实现弹球游戏
整体流程图：
1.1 html5 canvas技术的使用
首先在html页面中定义画布。
<canvas bgcolor = "#FFF" id="gamePane" width="1000" height="500" tabindex="0"> Sorry, your browser doesn't support the HTML5 game. </canvas>
定义完画布之后就可以在javascript代码中对画布进行操作。
canvas = document.getElementById('gamePane');
ctx = canvas.getContext("2d");在画布中构画图形。
ballImg = new Image();
ballImg.src = http://www.mamicode.com/"/site_media/images/kkball.ico";>
1.2 javascript弹球游戏实现
使用canvas技术我们实现了弹球游戏的GUI界面，接下来是游戏功能逻辑。
1.2.1首先明确游戏功能：
A. 游戏元素： 弹球，砖块，挡板，道具。
B. 游戏开始， 球从挡板出发，碰撞到砖块或者游戏边界时会反弹，碰撞到砖块时砖块消失，如果砖块隐藏了道具，道具显示并下落，碰到挡板时会发挥道具效果。弹球碰到挡板时也会反弹，但是如果碰到下边界则会损失游戏生命。
C. 当砖块完全消失时进入下一关，随着关卡数增加，板的长度会减小，球的速度回加快。
D. 道具： 1. 使弹球速度乘以1.3；2. 使弹球速度除以1.3；3. 使板的长度乘以2；4. 使板的长度除以2；
1.2.2 画布的刷新
画布的刷新使用html中的定时器实现。每0.003秒调用一次draw，更新画面。
interval = setInterval(draw, 3);
1.2.3用户交互 用户通过鼠标进行交互，游戏还未开始时， 球和板的x坐标都会随鼠标x坐标变化。这时点击鼠标左键，球和板的x坐标不再变化，这时可以设置球运行方向，方向为鼠标所在位置。游戏开始后，板x坐标随鼠标x坐标变化。
为鼠标点击和移动设置响应函数。
canvas.addEventListener('mousedown',onMouseDown, false);
canvas.addEventListener('mousemove', padMove, false);
canvas.addEventListener('mouseup', start, false);
鼠标事件响应函数。
//鼠标落下点击事件
function onm ouseDown(e){
if(isStart==0){
isPressed = 1;
}
}
//鼠标移动点击事件
function padMove(e){
var x;
x = e.layerX;
x = x<padWidth/2?padWidth/2:x;
x = x>(worldWidth-padWidth/2)?(worldWidth-padWidth/2):x;
padX = x;
if(isStart==0){ //如果游戏还未开始，则需要重新绘制板，如果游戏开始了，板的绘制在draw中完成。
if(isPressed == 0){
ballX = padX;
ctx.clearRect(0, worldHeight-padHeight-2*radius, worldWidth, 2*radius); //clear the pad
drawBall();
drawPad();
}
}
}
//鼠标抬起事件函数，设置弹球角度，设置定时器定时刷新页面。
function start(e){
if(isStart==0){
ballAngle = Math.atan((worldHeight- e.layerY)/(e.layerX - ballX));
if(ballAngle > 0){
ballAngle = - ballAngle;
}
else{
ballAngle = Math.PI - ballAngle;
}
isStart =1;
isPressed = 0;
interval = setInterval(draw, 3);
}
}
1.2.4 弹球运动与碰撞检测
弹球位置更新。
ballX = ballX + ballSpeed * Math.cos(ballAngle);
ballY = ballY + ballSpeed * Math.sin(ballAngle);
球游戏边界碰撞检测。
//球碰撞到左右两边边界
if(ballX < radius || ballX > worldWidth - radius){
ballAngle = Math.PI - ballAngle;
}
//球碰到上边界
if(ballY < radius){
ballAngle = Math.PI*2 - ballAngle;
}
//球碰到下边界
if(ballY > worldHeight-radius){
//如果球未碰到板上，则游戏停止，判断生命是否用完，用完游戏结束
if(ballX< padX-padWidth/2 || ballX > padX + padWidth/2){
ctx.clearRect(0,0,worldWidth,worldHeight-padHeight);
self.clearInterval(interval);
if(life>0){
drawInfo(1);
life = life -1;
reset();
}
else if(life ==0){
drawInfo(2);
getData();
}
return;
}
//球碰到板上
else{
ballAngle = Math.PI*2 - ballAngle;
}
}
//判断砖块是否打完，如果打完进入下一关
if(count>= col*row){
ctx.clearRect(0,0,worldWidth,worldHeight-padHeight);
self.clearInterval(interval);
newLevel();
return;
}
1.2.5 弹球与砖块碰撞检测。
每次弹球到达可能有砖块的那一层的时候，判断弹球位置所在砖块是否还在，如果还在，则消去它，同时判断其是否有道具。如果有，则创建道具。
function testCollision(){
//球的位置不可能有砖块
if(ballY > brickHeight * row){
return;
}
//循环判断弹球在那一层
for(var i = row;i>0;i--){
if((ballY-radius)<=(brickHeight*i)){
if((ballY-radius)>(brickHeight*(i-1))){
var x = Math.floor(ballX/brickWidth);
if(bricks[i-1][x].isdisplay==0){
continue;
}
else{
bricks[i-1][x].isdisplay=0;
ballAngle= Math.PI*2-ballAngle;
score= score+100;
count = count +1;
//判断是否有道具
if(bricks[i-1][x].tool!=0){
var brickX = bricks[i-1][x].col * brickWidth;
var brickY = bricks[i-1][x].row * brickHeight;
var temp = new tool(brickX, brickY, bricks[i-1][x].tool);
toolArray.push(temp); }
return;
}
}
else{
continue;
}
}
else
break;
}
}
1.2.6 道具的实现
初始化时创建一个存放道具的Array。
toolArray = new Array();
if(bricks[i-1][x].tool!=0){
var brickX = bricks[i-1][x].col * brickWidth;
var brickY = bricks[i-1][x].row * brickHeight;
var temp = new tool(brickX, brickY, bricks[i-1][x].tool);
toolArray.push(temp);
}
每次碰到砖块时，判断砖块是否有道具，如果有道具就创建道具，将其放入数组。砖块是否有道具及道具类型由随机数产生。
每次刷新画面时调用testTool函数，判断道具是否落到底部。如果落到板上则发挥效果。
function testTool(){
//循环遍历整张道具数组
for(var i = 0;i<toolArray.length;i++){
console.log("tesetool", toolArray[i].type);
var temp = toolArray[i];
//道具还未落到底部
if(temp.y<worldHeight-padHeight){
continue;
}
else{
//道具落到板上，判断道具类型，发挥效果。
if(temp.x>=padX-padWidth/2 && temp.x<=padX+padWidth/2){
switch(temp.type){
case 1:{
if(ballSpeed<2.6)
ballSpeed=ballSpeed*1.3;
console.log("tool", temp.type);
break;
}
case 2:{
if(ballSpeed>1.5)
ballSpeed=ballSpeed/1.3;
console.log("tool", temp.type);
break;
}
case 3:{
if(padWidth<200){
padWidth = padWidth *2;
}
console.log("tool", temp.type);
break;
}
case 4:{
if(padWidth>50)
padWidth=padWidth /2;
console.log("tool", temp.type);
break;
}
}
}
toolArray.splice(i, 1);
}
}
}
完整代码：var canvas;
var ctx;
var ballX = 500;
var ballY = 470;
var ballAngle = -Math.PI/2;
var radius = 20;
var ballSpeed = 2;
var padX = 500; //挡板位置
var padWidth = 100;
var padHeight = 10;
var worldWidth;
var worldHeight;
var interval;
var score = 0;
var brickWidth = 100;
var brickHeight = 25;
var bricks;
var color;
var col = 10;
var row = 5;
var isStart = 0;
var time = 0;
var life = 3;
var isPressed = 0;
var level = 1;
var count = 0;
var ballImg;
var brickImg;
var padImg;
var tool1Img;
var tool2Img;
var tool3Img;
var tool4Img;
var toolArray;
var toolLength = 30;
var toolHeight = 30;
var isLoad = [0,0,0,0,0,0,0];
var loadInterval;
function brick(){
this.col = 0;
this.row = 0;
this.isdisplay = 1; //是否显示
this.tool = 0; //道具类型，0 表示无道具。
this.color = "#000000"
}
//tool:
//type:
//1: make the ball speed x1.3
//2: make the ball speed /1.3
//3: make the pad length twice
//4: make the pad length 1/2
function tool(x , y ,type){
this.x = x;
this.y = y;
this.type = type;
}
function loadImage(){
tool1Img = new Image();
tool1Img.src = http://www.mamicode.com/"/site_media/images/tool1.png";1>
HTML5与Javascript 实现网页弹球游戏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。