Canvas game ПВО
Игрушка на канвас созданная за 2 часа
by twobomb three
CSS
*{
margin:0;
padding:0;
}
canvas{
outline:1px solid red;
}
body{
overflow:hidden;
}
JavaScript
alert("Управление A,D,Влево,Вправо, ЛКМ");
var ctxW , ctxH ,ctx,gameField,count = 0;
var player, enemys = [],rockets = [],bgTxt = new Image();
var maxEnemy = 5,spawnTime = 500,lastSpawn =0;
var lastTime = 0,deltaTime = 0;//DeltaTime - умножать все значение скорости и т.п. на это значение, обеспечивает одинаковую скорость игры при любых просдках фпс, это время затраченное на кадр / 1000
var textures = ["https://cs4.pikabu.ru/post_img/2016/07/20/6/1469008659135928999.png",
"http://www.phantoms.su/uploads/gallery/album_1584/xgallery_33842_1584_13249.png.pagespeed.ic.HvgfB5iC1v.png",
"http://pngimg.com/uploads/ufo/ufo_PNG14397.png",
"https://cdn1.savepice.ru/uploads/2018/3/10/8f48cce7f0d05850c205a6206a62b0ba-full.png",
"https://cdn1.savepice.ru/uploads/2018/3/10/e789d63a14728e68fe3c8333c7d76363-full.png",
"https://cdn1.savepice.ru/uploads/2018/3/10/aa32353bddee89a2abfdc02be6d3afac-full.png",
"https://avatanplus.com/files/resources/mid/56ab75239b74d1528dc19335.png",
"http://xgm.guru/files/1565/174851/Picture.png"];
/*Как идут углы
270
|
180 --O-- 0
|
90 */
window.onload = init;
function init(){//Инициализация параметров
ctxW = window.innerWidth;
ctxH = window.innerHeight;
gameField = document.createElement("canvas");
document.body.appendChild(gameField);
gameField.width = ctxW;
gameField.height = ctxH;
ctx = gameField.getContext("2d");
player = new player(ctxW/2,ctxH - 50,150,50,100,textures[3],textures[4]);
bgTxt.src = textures[7];
var loadStatus = loadResources(textures,gameLoop);//Загружаем текстуры
(function(){//Функция показа загрузки текстур (не обязательная)
ctx.clearRect(0,0,ctxW,ctxH);
ctx.font = "20px Impact";
ctx.fillText("Загрузка игры... "+loadStatus.percent +"%" ,ctxW/2,ctxH/2);
if(loadStatus.loaded < loadStatus.count)
setTimeout(arguments.callee,1000/60);
})();
};
function gameLoop(){//Игровой цикл
var tmpTime = Date.now();
deltaTime = (tmpTime- lastTime)/1000;
lastTime...