malinovsky,
убрал стиль из canvas, математику(позиционирован е элементов) проверьте снова , на экране 10 кораблей с разной скоростью, смотреть shipsGeneration
<!DOCTYPE html>
<html>
<head>
<title>1Game</title>
<meta charset="utf-8">
</head>
<body>
<h2>Управление игрой:</h2>
<p>Перемещение влево/вправо стрелки влево/вправо на клавиатуре, клавиша "пробел" - выстрел.</p>
<canvas id="canvas" width=600 height=400></canvas>
<script>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var keys = {
'Left' : 37,
'Right' : 39,
'Space' : 32
};
var keyDown = {};
var setKey = function (keyCode) {
keyDown[keyCode] = true;
};
var clearKey = function (keyCode) {
keyDown[keyCode] = false;
};
var isKeyDown = function (keyName) {
return keyDown[keys[keyName]] == true;
};
window.onkeydown = function (e) {
setKey(e.keyCode);
};
window.onkeyup = function (e) {
clearKey(e.keyCode);
};
var drawRect = function (x, y, sizeX, sizeY, color) {
ctx.beginPath();
ctx.rect(x, y, sizeX, sizeY);
ctx.fillStyle = color;
ctx.fill();
ctx.closePath();
};
var drawPlayer = function (x) {
ctx.beginPath();
ctx.rect(x, 395, 50, 5);
ctx.rect(x+10, 390, 30, 5);
ctx.rect(x+23, 385, 5, 5);
ctx.fillStyle = "rgb(173, 105, 82)";
ctx.fill();
ctx.closePath();
};
var Destruction = function () {
for(var i = 0; i < shots.length; i++) {
for(var j = 0; j < ships.length; j++) {
if(~~shots[i].y == ~~ships[j].y+5 && shots[i].x+5 >= ships[j].x && shots[i].x <= ships[j].x+10) {
ships.splice(j, 1);
shots.splice(i, 1);
break;
}
}
}
};
;
var shipsGeneration = function (time) {
if( countShips > 30 && ships.length < 10) {
ships.push({
t : (3 + Math.random()*13|0)*1000,//время падения от 3сек до 15сек
ts : time,//время старта
x : Math.random() * 590|0,
y : 0
});
countShips = 0;
}
countShips++;
for(var i = 0; i < ships.length; i++) {
var s = ships[i], p = (time-s.ts)/s.t;
if(p < 1)s.y = p*400|0;
else {s.y= 0; s.ts = time ; s.t= (3 + Math.random()*13|0)*1000;
s.x = Math.random() * 590|0;
};
drawRect(s.x, s.y, 10, 10, "rgb(22, 105, 67)");
}
};
var shotsGeneration = function (time) {
if(isKeyDown('Space')) {
var length = shots.length;
if(length > 0) {
if( (shots[length-1].y + 7) < 130) {
shots.push({
x : xPlayer+23,
y : 130
});
}
} else {
shots.push({
x : xPlayer+23,
y : 130
});
}
}
for(var i = 0; i < shots.length; i++) {
drawRect(shots[i].x, shots[i].y, 5, 5, "rgb(195, 55, 67)");
shots[i].y -= 2;
}
};
var Player = function () {
if(isKeyDown('Left')) {
xPlayer-=4;
}
if(isKeyDown('Right')) {
xPlayer+=4;
}
drawPlayer(xPlayer);
};
var ships = [];
var shots = [];
var countShips = 0;
var xPlayer = 120;
var main = function (time) {
ctx.clearRect(0, 0, 600, 400);
drawRect(0, 0, 600, 400, "rgb(36, 177, 219)");
Destruction();
shipsGeneration(time);
shotsGeneration();
Player();
requestAnimationFrame(main);
};
main();
</script>
</body>
</html>