Усовершенствуем игру, в которой реализовано уклонение от препятствий на JavaScript.
Сделаем игру в мяч.
Файл index.html
<canvas id="canvas" style="background:#CCC"></canvas>
Файл index.js
(function(elid, width, height, speed, strength){
var canvas = document.querySelector(elid),
ctx = canvas.getContext("2d"),
pos = 0, blocks = [], curHeight = 0, mousePos, newHeight = -1;
canvas.width = width; canvas.height = height;ctx.fillStyle = "black";
var game = setInterval(function(){
strength+= 0.001;
var tetha = (strength > 0.6)? 0.6: strength;
if( Math.random() < tetha ) blocks.push([Math.random()*(width-10),height + 10, 10 + Math.random()*40]);
ctx.clearRect(0,0,width,height);
ctx.beginPath(); ctx.arc(pos+5,curHeight+5,5,0,2*Math.PI); ctx.fill();
for(var i = 0; i < blocks.length; i++){
ctx.fillRect(blocks[i][0],blocks[i][1],blocks[i][2], 10);
if( blocks[i][0] - 5 < pos && (blocks[i][0] + blocks[i][2] - 5 > pos) && (curHeight - blocks[i][1] < 0 && curHeight - blocks[i][1] > -15) && curHeight == newHeight)
newHeight = blocks[i][1]-15;
if( blocks[i][1] < 0 )
blocks.splice( i--, 1);
else
blocks[i][1] -= 5;
}
if (curHeight == newHeight)
newHeight = curHeight +=10 * ((strength > 0.6)? 0.6: strength) ;
if((!(curHeight = newHeight) || curHeight < -1 || curHeight > height) && clearInterval(game) == undefined )
alert("Game over. You have " + Math.floor(1000 * strength) + " points.");
pos += (Math.abs(pos - mousePos ) > 10)? (mousePos > pos) ? ((mousePos < width)? 10 : 0) : ((mousePos > 0)? -10:0) : 0;
}, speed);
document.addEventListener('mousemove', function (e) { mousePos = e.pageX; }, false);
})("#canvas",400,300,33,0.05);
Комментариев нет:
Отправить комментарий