Недавно осваивать JavaScript начал и мой сын. И сейчас он с удовольствием читает книгу Ника Моргана Javascript для детей. Самые любопытные могут скачать и почитать эту книгу тут:
Читая с сыном книгу Ника Моргана Javascript для детей, не могла не сохранить себе в коллекцию первую игру c этой книги — Игра Виселица (Hangman).
Игра написана самыми простыми циклами и набором переменных, без функций, с помощью сигнальных диалогов.
А вот еще одна игра, где уже применятеся взаимодействие со страницей и реакция на клики.
Цель игры — найти клад на карте. Клад — это точка, которая устанавливается рандомно. Искать помогают подсказки.
А вот и полный код игры:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!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 для детей — примеры
а можно пж гейм овер для игры найди клад?