Простой HTML код
<!DOCTYPE html>
<html>
<head>
<title>Гоночные машины</title>
<style>
.car {
position: relative;
width: 50px;
height: 100px;
background-color: red;
}
.track {
position: relative;
width: 400px;
height: 200px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Гоночные машины</h1>
<div class="track">
<div id="car1" class="car"></div>
<div id="car2" class="car"></div>
</div>
<script>
document.addEventListener("keydown", function(event) {
moveCar(event.key);
});
function moveCar(key) {
var car1 = document.getElementById("car1");
var car2 = document.getElementById("car2");
var car1Position = parseInt(car1.style.left) || 0;
var car2Position = parseInt(car2.style.left) || 0;
var carSpeed = 10;
if (key === "ArrowRight") {
car1Position += carSpeed;
} else if (key === "ArrowLeft") {
car1Position -= carSpeed;
}
if (key === "d") {
car2Position += carSpeed;
} else if (key === "a") {
car2Position -= carSpeed;
}
car1.style.left = car1Position + "px";
car2.style.left = car2Position + "px";
checkWin(car1Position, car2Position);
}
function checkWin(car1Position, car2Position) {
var trackWidth = 400;
if (car1Position >= trackWidth) {
alert('Машина 1 победила!');
resetGame();
} else if (car2Position >= trackWidth) {
alert('Машина 2 победила!');
resetGame();
}
}
function resetGame() {
var car1 = document.getElementById("car1");
var car2 = document.getElementById("car2");
car1.style.left = 0;
car2.style.left = 0;
}
</script>
</body>
</html>
В этом примере есть два элемента с классом "car", которые представляют две машины для игры. Функция moveCar обрабатывает событие keydown и перемещает машины влево или вправо в зависимости от нажатой клавиши (стрелка вправо и влево для первой машины, "d" и "a" для второй машины). После перемещения машин функция checkWin проверяет, достигла ли какая-либо из машин конца трека, и выводит сообщение о победе, если это произошло. Функция resetGame сбрасывает позиции машин в начальное положение при окончании игры.
