Рассмотрим создание игры «Угадай число» на JS. Компьютер загадывает простое число — от 1 до 100, наша задача его угадать. Есть подсчет попыток и подсказка (больше число или меньше). Игра имеет очень простую логику и интерфейс, но отлично подойдет для практики новичкам по HTML, CSS и Javascript.
Полезные ссылки
Объяснение кода можете найти в видеоуроке.
Стартовый проект для работы скачивайте на GitHub.
Поиграть в «Угадай число» можно по ссылке.
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" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>Игра: угадай число</title>
</head>
<body>
<div class="container">
<div class="canvas">
<div class="desc">
<h1 class="desc__title">Игра: угадай число</h1>
<p class="desc__subtitle">
Компьютер загадал число от 1 до 100. Ваша задача его угадать.
</p>
</div>
<div class="field">
<label for="" class="filed__form__label">Ваше число: </label>
<input type="text" class="field__form__input" />
<button class="field__form__btn">Проверить</button>
</div>
<div class="result">
<div class="result__check">
<span class="result__check__label">Результат:</span>
<span class="result__check__out"></span>
</div>
<div class="result__help">
<span class="result__help">Подсказка:</span>
<span class="result__help__out"></span>
</div>
<div class="result__count">
<span class="result__count__label">Число попыток:</span>
<span class="result__count__out"></span>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS стили
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
html {
box-sizing: border-box;
height: 100%;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
body {
display: flex;
flex-direction: column;
font-family: "Roboto", sans-serif;
font-size: 16px;
line-height: 1.2;
height: 100%;
background-image: url(bg.png);
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.canvas {
display: flex;
justify-content: space-around;
align-items: center;
background-color: #fff;
width: 600px;
height: 400px;
border: 1px solid #eee;
box-shadow: 4px 4px 8px 0px rgba(34, 60, 80, 0.2);
flex-direction: column;
padding: 20px;
}
.desc__title {
font-size: 2em;
text-align: center;
margin-bottom: 15px;
color: #222;
}
.desc__subtitle {
color: #6c757d;
}
.filed__form__label {
color: #6c757d;
margin-right: 10px;
}
.field__form__input {
padding: 10px;
width: 150px;
margin-right: 10px;
border: 1px solid #ccc;
}
.field__form__btn {
padding: 10px;
border: 1px solid #ccc;
}
JS скрипт
let input = document.querySelector(".field__form__input");
let btn = document.querySelector(".field__form__btn");
let check = document.querySelector(".result__check__out");
let help = document.querySelector(".result__help__out");
let count = document.querySelector(".result__count__out");
let item = 0;
let randNum = 1 + Math.floor(Math.random() * 100);
let userNum;
btn.onclick = function (evt) {
evt.preventDefault();
userNum = input.value;
console.log(userNum, randNum);
if (userNum > randNum) {
check.textContent = "Пока что не угадали";
help.textContent = "Многовато будет";
item++;
count.textContent = item;
} else if (userNum < randNum) {
check.textContent = "Пока что не угадали";
help.textContent = "Маловато будет";
item++;
count.textContent = item;
} else {
check.textContent = "Поздравляю! Вы угадали число";
help.textContent = "В самый раз";
item++;
count.textContent = item;
}
};
Курс по Unity предлагает обучение созданию игр и приложений с использованием Unity, позволяя разработать проекты от начала до конца. Вы узнаете, как работать с Unity, программировать на C#, создавать игровые механики и обрабатывать графику, звуки и эффекты. Курс включает создание трех разных проектов: 2D-платформера, 3D-баттлера и 3D-шутера.
После окончания вы сможете разрабатывать собственные игры и приложения, а также выполнять задания на позиции Unity Junior Developer. Вы также получите возможность добавить собственные механики, персонажей, спецэффекты и музыку в ваши проекты.