JSFiddle - React, Tailwind, and code Playground

by ALPHA_07

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Астероиды</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
    <canvas id='game' width='600' height='600'>Элемент не поодерживается</canvas>
</div>

<script type="text/javascript" src="game.js"></script>

</body>
</html>

CSS

body {
background: darkslategray;
}

#wrapper {
    width: 600px;
    margin: 0 auto;
}

canvas {
    cursor: none;
}

JavaScript

var canvas 	= document.getElementById( 'game' ); 
var context = canvas.getContext( '2d' );


var i,ship,Timer;
var aster=[];
var fire=[];
var expl=[];

//загрузка ресурсов
asterimg 	= new Image();
asterimg.src = 'astero.png';

shieldimg 	= new Image();
shieldimg.src = 'shield.png';

fireimg 	= new Image();
fireimg.src = 'fire.png';

shipimg 	= new Image();
shipimg.src = 'ship01.png';

explimg 	= new Image();
explimg.src = 'expl222.png';

fon 	= new Image();
fon.src = 'fon.png';

//старт игры
fon.onload = function () {
init();
game();
}

//совместимость с браузерами
var requestAnimFrame = (function(){
    return window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        window.oRequestAnimationFrame      ||
        window.msRequestAnimationFrame     ||
        function(callback){
            window.setTimeout(callback, 1000 / 20);
        };
})();

//начальные установки
function init() {
canvas.addEventListener("mousemove",  function(event) {	

var rect = canvas.getBoundingClientRect(), root = document.documentElement;

var mouseX = event.clientX - rect.left - root.scrollLeft;
var mouseY = event.clientY - rect.top - root.scrollTop;
			
var width_canvas = document.getElementById("game").offsetWidth;
var height_canvas = document.getElementById("game").offsetHeight;

ship.x=mouseX * 600/width_canvas-25;
ship.y=mouseY * 600/height_canvas-13;
});

Timer=0;
ship={x:300,y:300,animx:0,animy:0};	
}

//основной игровой цикл
function game() {
update();
render();
requestAnimFrame(game);
}

//функция обновления состояния игры
function update() {
	Timer++;

//спавн астероидов
if (Timer%10==0) {
	aster.push({
		angle:0,
		dxangle:Math.random()*0.2-0.1,
		del:0,
		x:Math.random()*550,
		y:-50,
		dx:Math.random()*2-1,
		dy:Math.random()*2+1
		});
	
}
//выстрел
if (Timer%30==0)...