FlappyBird без текстур
by twobomb three
CSS
body{
background: #000;
}
canvas{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
outline: 3px solid #FFF;
}
JavaScript
var canvas, ctxW = 800, ctxH = 500,ctx,isRun = true,columns,player,restart = false;
function init(){
player = {
x: ctxW/2 - 15,
y:ctxH/2 - 15,
width: 30,
height:30,
bestScore :0,
score: 0,
velocity: 0,
heightJump: -5,
gravity: .25,
jump:false,
gameOver: function(){
isRun = false;
setTimeout(function(){
restart = true;
}, 1000);
},
draw: function(){
ctx.fillStyle = "#888";
ctx.fillRect(this.x,this.y, this.width,this.height);
ctx.font = "20px Arial";
ctx.fillText(this.score,ctxW/2,25);
},
handler: function(){
if(this.jump){
this.jump = false;
this.velocity = this.heightJump;
}
this.y += this.velocity;
this.velocity += this.gravity;
if(this.y < 0 || this.y + this.height > ctxH)
this.gameOver();
for(var key in columns.up){
var col = columns.up[key];
if(!col.checked && col.x + col.width <= this.x ){
col.checked = true;
this.score++;
}
if(this.x + this.width > col.x && this.x < col.x + col.width &&
this.y + this.height > col.y && this.y < col.y + col.height){
this.gameOver();
break;
}
}
for(var key in columns.down){
var col = columns.down[key];
if(this.x + this.width > col.x && this.x < col.x + col.width &&
this.y + this.height > col.y && this.y < col.y + col.height){
this.gameOver();
break;
}
}
}
}
document.addEventListener("mousedown", function(){
player.jump = true;
if(restart){
player.jump = false;
player.y = ctxH/2 - player.height/2;
player.velocity = 0;
player.bestScore = Math.max(player.bestScore,player.score);
player.score = 0;
columns.up = new Array;
columns.down = new Array;
restart = false;
isRun = true;
}
});
columns = {speed: 3, minHeight: 20 ,/*минимальная высота*/width: 70,distance: 200,/*расстояние между боковыми колонами*/aperture: 0.3,//0 - 1 проем в процентах от...