html5-打砖块

用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>
展开阅读全文

小游戏-打砖块问题-砖块消失

06-15

在球的上方若干排砖块,下方有一挡板,当球碰挡板返回碰到砖块,砖块消失,咋样使砖块消失??rn这是我想让砖块消失的方法,但是调试没错误,运行却没有让砖块消失的效果!rnBOOL CMyDoc::OnNewDocument()rnrn if (!CDocument::OnNewDocument())rn return FALSE;rn for(int i=0;iSelectObject(&brushNewRed);//画刷rnrn CRect rect1;rn GetClientRect(&rect1); rn CRect block[C_XBLOCKS][C_YBLOCKS]; rn int xDim;rn int yDim;rn xDim = rect.Width();rn yDim = rect.Height();rn int iBlockWidth;rn int iBlockHeight;rn iBlockWidth = (int)xDim/(C_XBLOCKS );rn iBlockHeight = (int)((yDim/5)/C_YBLOCKS); rn for(int i=0;i<= C_XBLOCKS;i++)rn rn for (int j=0;j<=C_YBLOCKS;j++)rn rn block[i][j].left=(int)(i*iBlockWidth);rn block[i][j].right=block[i][j].left+iBlockWidth;rn block[i][j].top = (int)(j*iBlockHeight + 20);rn block[i][j].bottom = block[i][j].top + iBlockHeight;rn pDC->Rectangle(block[i][j]);rn if(j==0 || j==2 )rn pDC->SelectObject(&brushNewRed);rn elsern pDC->SelectObject(&brushNewBlue);rn rn if(pDoc->m_nCount[i][j]==0)rn pDC->Rectangle(pDoc->block[i][j]);rn else break;rn rn rn rn。。、、、、、、、、、、、、、、、、、、rnvoid CMyView::OnTimer(UINT nIDEvent) rnrn // TODO: Add your message handler code here and/or call defaultrn CMyDoc* pDoc = GetDocument();rn ASSERT_VALID(pDoc);rnrn InvalidateRect(pDoc->m_rectBall,TRUE);rn CRect rect1;rn GetClientRect(&rect1);rn if(pDoc->m_rectBall.right>=rect1.right || pDoc->m_rectBall.left<=rect1.left)rn pDoc->m_nx=-pDoc->m_nx;rn else ;rn if(pDoc->m_rectBall.top<=rect1.top || pDoc->m_rectBall.left>pDoc->m_rectBody.left && pDoc->m_rectBall.rightm_rectBody.right && pDoc->m_rectBall.bottom>pDoc->m_rectBody.top)rn pDoc->m_ny=-pDoc->m_ny; rn pDoc->m_rectBall.left-=pDoc->m_nx;rn pDoc->m_rectBall.right-=pDoc->m_nx;rn pDoc->m_rectBall.top-=pDoc->m_ny;rn pDoc->m_rectBall.bottom-=pDoc->m_ny;rn InvalidateRect(pDoc->m_rectBall,FALSE);rnrn int i,j;rn for(i=0;i m_nCount[i][j]==0) rn rn if(pDoc->m_rectBall.left>pDoc->block[i][j].left&& pDoc->m_rectBall.rightblock[i][j].right && pDoc->m_rectBall.topblock[i][j].bottom) rn rn pDoc->m_ny=-pDoc->m_ny;rn pDoc->m_rectBall.left-=pDoc->m_nx;rn pDoc->m_rectBall.right-=pDoc->m_nx;rn pDoc->m_rectBall.top-=pDoc->m_ny;rn pDoc->m_rectBall.bottom-=pDoc->m_ny;rn pDoc-> m_nCount[i][j]=1;rn InvalidateRect(pDoc->block[i][j],TRUE);rn rn rn rnrn rn CView::OnTimer(nIDEvent);rnrnrnrn 论坛

砖块的程序无法显示

03-30

程序无错误提示,就是不能在模拟器上显示,还请各位指点指点rnrnimport javax.microedition.midlet.MIDlet;rnimport javax.microedition.lcdui.*;rnrnpublic class BlockBall extends MIDlet rnrn private Display display;rn private GameCanvas canvas;rn rn public BlockBall() rn rn display=Display.getDisplay(this);rn canvas=new GameCanvas();rn rn rnrn rn protected void startApp()rn display.setCurrent(canvas);rn rn protected void pauseApp() rn rn protected void destroyApp(boolean arg0)rnrn rnrnrnrnimport java.io.*;rnimport javax.microedition.lcdui.*;rnrnpublic class GameCanvas extends Canvas implements Runnablernrn /**rn * rn */rn private int state;rn private final static int active=1;rn private final static int clear=2;rn private final static int over=3;rn rn private final int Block_v=10;rn private final int Block_h=2;rn private final int Block_width=this.getWidth()/Block_h;rn private final int Block_height=Block_width/2;rn private boolean block[][]=new boolean[Block_h][Block_v];rn private int blockCount=Block_h*Block_v;rn rn private final int Ball_width=5;rn private final int Ball_height=5;rn private int Ball_speed=6;rn private int Ballx=0;rn private int Bally=getHeight()-Ball_height;rn rn private final int Bar_width=12;rn private final int Bar_height=4;rn private int Bar_speed=0;rn private int Barx=0;rn private int Bary=getHeight()-Bar_height;rn rn private Image Block=null;rn private Image Bar=null;rn private Image Ball=null;rn rn public GameCanvas() rn new Thread(this).start();rn rn for(int i=0;igetWidth()-Ball_width)rn Ballx=getWidth()-Ball_width;rn Ball_speed*=-1;rn rn if(Bally<0)rn Bally=0;rn Ball_speed*=-1;rn rn if(Bally>getHeight()-Ball_height)rn state=over;rn rn if(Bally+Ball_height>Bary&&Ballx+Ball_width>Barx&&Ballx0)rn Ball_speed+=2;rn rn rn rn for(int i=0;ii*Block_width&&Ballx<(i+1)*Block_width)rn if(Bally+Ball_height>(i+1)*Block_height&&Bally<(i+2)*Block_height)rn block[i][j]=false;rn Bally*=-1;rn blockCount--;rn rn if(blockCount==0)rn state=clear;rn rn rn rn rn rn repaint();rn rn rn public void moveBar()rn Barx+=Bar_speed;rn if(Barx<0)rn Barx=0;rn else if(Barx>getWidth()-Bar_width)rn Barx=getWidth()-Bar_width;rn rn rn public void keyPressed(int key)rn if(state==active)rn if(getGameAction(key)==Graphics.LEFT)rn Bar_speed=-5;rn else if(getGameAction(key)==Graphics.RIGHT)rn Bar_speed=5;rn rn repaint();rn rn rn rn public void keyReleased(int key)rn Bar_speed=0;rn rnrnrn 论坛

没有更多推荐了,返回首页