Создайте оценочную игру с помощью Vanilla JavaScript
На прошлой неделе коллега попросил меня оценить количество людей на мероприятии, и именно тогда нам обоим стало очевидно, что мои навыки оценки ужасны. Мне было так неловко! Той ночью я решил попробовать написать игру, которая поможет мне лучше оценивать.
Используемые технологии
В игре Bubble Estimator используются следующие технологии:
- JavaScript: основа игровой логики, обработка создания пузырьков, ввод данных пользователем и подсчет очков.
- SVG (масштабируемая векторная графика): обеспечение визуально привлекательной и масштабируемой графики для динамических пузырьков.
- API веб-аудио: добавление звуковых эффектов для улучшения игрового процесса.
Функции
- Динамическое создание пузырьков разных размеров, цветов и положений.
- Звуковые эффекты с использованием API веб-аудио для создания оживленной атмосферы.
- Пользовательский ввод для оценки количества созданных пузырьков.
- Система начисления баллов, основанная на точности оценки пользователя.
Основные моменты кода
Я так горжусь функцией генератора пузырьков, простой рекурсивной функцией, ответственной за всю магию!
function createBubbles(svg, centerX, centerY, radius, depth) {
if (depth === 0) {
return;
}
const numBubbles = Math.floor(Math.random() * 6) + 2;
const angleIncrement = (3 * Math.PI) / numBubbles;
for (let i = 0; i < numBubbles; i++) {
const angle = i * angleIncrement;
//cartesian coordinates
const x = radius * Math.cos(angle) + centerX;
const y = radius * Math.sin(angle) + centerY;
const newRadius = radius / (Math.random() + 1);
const newX = x + newRadius * Math.cos(angle);
const newY = y + newRadius * Math.sin(angle);
//draw circle
const circle = document.createElementNS(
"http://www.w3.org/2000/svg",
"circle"
);
circle.setAttribute("cx", newX);
circle.setAttribute("cy", newY);
circle.setAttribute("r", newRadius);
//color
const randomColor = generateRandomColor();
circle.setAttribute("fill", randomColor);
circlesDrawn++;
console.log("num bubbles", circlesDrawn);
svg.appendChild(circle);
//play sound
playBlopSound();
//recursive case
setTimeout(() => {
circle.style.transform = "translate(0,-5%)";
createBubbles(svg, newX, newY, newRadius, depth - 1);
}, i * 500);
}
}Демоверсия
Вы можете попробовать игру, пройдя по этой ссылке: https://voluble-duckanoo-221094.netlify.app/
Как реализовывалось/Учебное пособие
Да, и если вам интересно посмотреть, как я это сделал; вот ссылка на процесс реализации и учебник.
Исходный код:
Исходный код доступен на GitHub: Bubble Estimator Game на GitHub.
Я надеюсь, что этот проект вдохновит вас исследовать новые идеи и получить удовольствие от своего пути программирования.
