<!
doctype html>
<html>
<head>
<meta charset ="UTF-8">
<title>Игра гонки</title>
</head>
<body>
<div style="display: flex; justify-content: center; align-items: center;
height: 100vh;">
<canvas id="canvas" width="400" height="500"></canvas>
</div>
<style>
body {
background-color: green;
}
</style>
<div>
<button
onclick="[Link]('photoInput1').click()">Выбрать фото 1</button>
<input id="photoInput1" type="file" style="display: none">
</div>
<div>
<button
onclick="[Link]('photoInput2').click()">Выбрать фото 2</button>
<input id="photoInput2" type="file" style="display: none">
</div>
<div>
<button
onclick="[Link]('photoInput3').click()">Выбрать фото 3</button>
<input id="photoInput3" type="file" style="display: none">
</div>
<script>
var canvas = [Link]("canvas");
var lives = 5;
var okLeft = false;
var okRight = false;
var line = new Image();
[Link] = "img/[Link]";
line.X = 180;
line.Y = -140;
var line2 = new Image();
[Link] = "img/[Link]";
line2.X = 180;
line2.Y = 160;
var myCar = new Image();
[Link] = "img/[Link]";
myCar.X = 50;
myCar.Y = 400;
var enemyCar1 = new Image();
[Link] = "img/[Link]";
enemyCar1.X = 50;
enemyCar1.Y = -150;
var enemyCar2 = new Image();
[Link] = "img/[Link]";
enemyCar2.X = 250;
enemyCar2.Y = -450;
function drawRect() {
[Link] = "Gray";
[Link](0, 0, 400, 500);
}
function drawLives() {
[Link] = "30px Arial";
[Link] = "White";
[Link]("Lives: " + lives, 235, 48);
}
function drawLines() {
[Link](line, line.X, line.Y);
line.Y += 3;
if (line.Y > 500) {
line.Y = -140;
}
[Link](line2, line2.X, line2.Y);
line2.Y += 3;
if (line2.Y > 500) {
line2.Y = -140;
}
}
function stop() {
cancelAnimationFrame(myReq);
[Link] = "60px Arial";
[Link] = "Red";
[Link]("Game over", 40, 200);
stop = true;
}
function drawMyCar() {
if (okLeft === true && myCar.X > 0) {
myCar.X -= 5;
}
if (okRight === true && myCar.X < 335) {
myCar.X += 5;
}
[Link](myCar, myCar.X, myCar.Y, 50, 100);
}
function drawEnemyCar1() {
if (enemyCar1.Y + 100 > myCar.Y && enemyCar1.X + 65 > myCar.X &&
enemyCar1.X < myCar.X + 65) {
crash = true;
enemyCar1.Y = enemyCar2.Y - 300;
lives--;
if (lives < 1) {
stop();
}
} else {
crash = false;
}
if (!crash) {
[Link](enemyCar1, enemyCar1.X, enemyCar1.Y);
enemyCar1.Y += 2;
if (enemyCar1.Y > 500) {
enemyCar1.Y = -100;
enemyCar1.X = [Link]([Link]() * 335);
}
}
}
function drawEnemyCar2() {
if (enemyCar2.Y + 100 > myCar.Y && enemyCar2.X + 65 > myCar.X &&
enemyCar2.X < myCar.X + 65) {
crash = true;
enemyCar2.Y = enemyCar1.Y - 300;
lives--;
if (lives < 1) {
stop();
}
} else {
crash = false;
}
if (!crash) {
[Link](enemyCar2, enemyCar2.X, enemyCar2.Y);
enemyCar2.Y += 2;
if (enemyCar2.Y > 500) {
enemyCar2.Y = -100;
enemyCar2.X = [Link]([Link]() * 335);
}
}
}
function render() {
if (stop === true) {
return;
}
drawRect();
drawLives();
drawLines();
drawMyCar();
drawEnemyCar1();
drawEnemyCar2();
myReq = requestAnimationFrame(render);
}
render();
addEventListener("keydown", function (event) {
var newDirect = [Link];
if (newDirect === 37) {
okLeft = true;
}
if (newDirect === 39) {
okRight = true;
}
});
addEventListener("keyup", function (event) {
var newDirect = [Link];
if (newDirect === 37) {
okLeft = false;
}
if (newDirect === 39) {
okRight = false;
}
});
</script>
</body>
</html>