벽돌 치기
7012 단어 JavaScripthtml5벽돌 을 치다
핵심 문제:
충돌 검 측,하 나 는 픽 셀 급 검 측,하 나 는 직사각형 검 측 입 니 다.이 게임 에서 저 는 4 시 검 측 을 사용 합 니 다.
<!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>
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.