Игра кошки-мышки на JavaScript
@labwebВ этой статье Мы с Вами напишем простую игру "кошки-мышки", используя минимальные знания JavaScript, Css и Html.
Шаг 1: Подготовим структуру проекта, для этого создаём файлы javascript.js, style.css, index.html и скачиваем любые изображения кошки и кота.
Шаг 2: Добавляем HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WebLabMouseCat</title> <!-- Подключаем файл CSS --> <link rel="stylesheet" href="style.css"> </head> <body> <!-- Подключаем картинку --> <img class="catImg" id="cat" src="cat.png" alt=""> <!-- Подключаем файл JS --> <script src="javascript.js"></script> </body> </html>
Шаг 3: Добавляем CSS
/* Меняем курсор на фото мышки */
* {
cursor: url(mouse.png), auto;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
/* Задаём стили для кота */
.catImg {
width: 150px;
height: 150px;
transition: 0.2s;
}
Шаг 4: Добавляем JS
//Задаём переменную
let cat = document.getElementById('cat');
//Задаём коту фиксированное позиционирование
cat.style.position = 'fixed';
//Наш кот стремиться к центру курсора мыши
document.onmousemove = (event) => {
cat.style.left = event.clientX - 75 + 'px';
cat.style.top = event.clientY - 75 + 'px';
}
//Когда кот догоняет мышку
cat.onmouseover = () => alert('Мышка была поймана!');