<!DOCTYPE html>
<html>
<head>
<title>Космический корабль</title>
<style>
#game {
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="game"></div>
<script src="game.js"></script>
</body>
</html>// Получаем элемент игрового поля
var game = document.getElementById('game');
// Создаем элементы для корабля и препятствий
var ship = document.createElement('div');
ship.style.width = '50px';
ship.style.height = '50px';
ship.style.backgroundColor = 'blue';
ship.style.position = 'absolute';
ship.style.bottom = '0';
ship.style.left = '225px';
game.appendChild(ship);
var obstacle = document.createElement('div');
obstacle.style.width = '50px';
obstacle.style.height = '50px';
obstacle.style.backgroundColor = 'red';
obstacle.style.position = 'absolute';
obstacle.style.top = '0';
obstacle.style.left = Math.floor(Math.random() * 450) + 'px';
game.appendChild(obstacle);
// Устанавливаем начальные значения переменных
var speed = 5;
var score = 0;
// Создаем функцию для обновления игры
function update() {
// Обновляем позицию корабля
ship.style.left = parseInt(ship.style.left) + speed + 'px';
// Проверяем столкновение корабля с препятствием
if (checkCollision(ship, obstacle)) {
alert('Вы проиграли! Ваш счет: ' + score);
location.reload();
}
// Проверяем, достиг ли препятствие конца игрового поля
if (parseInt(obstacle.style.top) > 500) {
// Увеличиваем счет и создаем новое препятствие
score++;
obstacle.style.top = '0';
obstacle.style.left = Math.floor(Math.random() * 450) + 'px';
} else {
// Обновляем позицию препятствия
obstacle.style.top = parseInt(obstacle.style.top) + speed + 'px';
}
// Обновляем счет на экране
document.title = 'Космический корабль - ' + score;
// Вызываем функцию update() с задержкой в 50 миллисекунд
setTimeout(update, 50);
}
// Создаем функцию для проверки столкновения корабля с препятствием
function checkCollision(ship, obstacle) {
var shipRect = ship.getBoundingClientRect();
var obstacleRect = obstacle.getBoundingClientRect();
return !(
shipRect.bottom < obstacleRect.top ||
shipRect.top > obstacleRect.bottom ||
shipRect.right < obstacleRect.left ||
shipRect.left > obstacleRect.right
);
}
// Назначаем обработчик нажатия клавиш
document.addEventListener('keydown', function(event) {
if (event.keyCode === 37) {
// Стрелка влево
ship.style.left = parseInt(ship.style.left) - 10 + 'px';
} else if (event.keyCode === 39) {
// Стрелка вправо
ship.style.left = parseInt(ship.style.left) + 10 + 'px';
}
});
// Запускаем игру
update();
Сохраните файлы "index.html" и "game.js" в одной директории на вашем компьютере.
Откройте файл "index.html" в вашем любимом браузере. Игра должна загрузиться и вы должны увидеть корабль и красный прямоугольник (препятствие) на экране.
Управляйте кораблем с помощью клавиш "влево" и "вправо". Ваша задача - избегать столкновений с препятствиями и набирать как можно больше очков, проходя каждое препятствие.
Доработайте игру, добавляя новые элементы и улучшения. Например, вы можете добавить звуковые эффекты, больше препятствий и различные бонусы, которые увеличивают вашу скорость или дают временный щит, защищающий вас от препятствий.
После того, как вы закончите работу над игрой, вы можете разместить ее на своем веб-сайте или опубликовать в интернете, чтобы другие пользователи могли играть в нее.
Давайте доработем игру, добавляя новые элементы и улучшения.
На этом шаге вы можете использовать свою фантазию и добавить различные новые элементы и улучшения в вашу игру. Вот несколько примеров того, что можно сделать:
drawObstacle() в файле game.js.
function drawObstacle() {
ctx.fillStyle = "blue";
ctx.fillRect(obstacleX, obstacleY, obstacleWidth, obstacleHeight);
}В этом примере препятствие имеет синий цвет и является прямоугольником. Вы можете изменить этот код, чтобы добавить новые препятствия с другой формой и цветом.
drawBonus() в файле game.js.
function drawBonus() {
ctx.fillStyle = "green";
ctx.fillRect(bonusX, bonusY, bonusWidth, bonusHeight);
}В этом примере бонус имеет зеленый цвет и является прямоугольником. Вы можете изменить этот код, чтобы добавить новые бонусы с другой формой и цветом.
<audio> в файле index.html.
<audio id="collision-sound">
<source src="collision.mp3" type="audio/mpeg">
</audio>
<audio id="bonus-sound">
<source src="bonus.mp3" type="audio/mpeg">
</audio>В этом примере мы создали два тега <audio> для звуковых эффектов столкновения и получения бонуса. Вы можете изменить путь к файлам звуковых эффектов и настроить параметры звука, такие как громкость и скорость воспроизведения.
Вот и все! Теперь у вас есть простая браузерная игра на JavaScript, которую вы можете настроить и доработать по своему усмотрению. Удачи в вашем творческом процессе!
Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!
Написать коментарий