Недавно осваивать JavaScript начал и мой сын. И сейчас он с удовольствием читает книгу Ника Моргана Javascript для детей. Самые любопытные могут скачать и почитать эту книгу тут:
Читая с сыном книгу Ника Моргана Javascript для детей, не могла не сохранить себе в коллекцию первую игру c этой книги – Игра Виселица (Hangman).
Игра написана самыми простыми циклами и набором переменных, без функций, с помощью сигнальных диалогов.
А вот еще одна игра, где уже применятеся взаимодействие со страницей и реакция на клики.
Цель игры – найти клад на карте. Клад – это точка, которая устанавливается рандомно. Искать помогают подсказки.
А вот и полный код игры:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Найди клад!</title>
</head>
<body>
<h1 id="heading">Найди клад!</h1>
<img id="map" width=400 height=400
src="https://stepfor.top/images/treasuremap.png">
<p id="distance"></p>
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>
// Получить случайное число от 0 до size-1
var getRandomNumber = function (size) {
return Math.floor(Math.random() * size);
};
// Вычислить расстояние от клика (event) до клада (target)
var getDistance = function (event, target) {
var diffX = event.offsetX - target.x;
var diffY = event.offsetY - target.y;
return Math.sqrt((diffX * diffX) + (diffY * diffY));
};
// Получить для расстояния строку подсказки
var getDistanceHint = function (distance) {
if (distance < 10) {
return "Обожжешься!";
} else if (distance < 20) {
return "Очень горячо";
} else if (distance < 40) {
return "Горячо";
} else if (distance < 80) {
return "Тепло";
} else if (distance < 160) {
return "Холодно";
} else if (distance < 320) {
return "Очень холодно";
} else {
return "Замерзнешь!";
}
};
// Создаем переменные
var width = 400;
var height = 400;
var clicks = 0;
// Случайная позиция клада
var target = {
x: getRandomNumber(width),
y: getRandomNumber(height)
};
// Добавляем элементу img обработчик клика
$("#map").click(function (event) {
clicks++;
// Получаем расстояние от места клика до клада
var distance = getDistance(event, target);
// Преобразуем расстояние в подсказку
var distanceHint = getDistanceHint(distance);
// Записываем в элемент #distance новую подсказку
$("#distance").text(distanceHint);
// Если клик был достаточно близко, поздравляем с победой
if (distance < 8) {
alert("Клад найден! Сделано кликов: " + clicks);
}
});
</script>
</body>
</html> А если Вы хотите посмотреть еще примеры с этой игры то вам сюда: Ник Морган – Javascript для детей – примеры
Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More
Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More
Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More
Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More
Установка PostgreSQL на сервер Read More
Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More
View Comments
а можно пж гейм овер для игры найди клад?