Как создать игру на JavaScript на примере тапалки

JavaScript технологии можно применять не только для того, чтобы добавлять интерактивные элементы на сайт, но и можно сделать интересную игру для ваших посетителей. На простом примере создания простой тапалки, которые взорвали интернет в прошлом году, как можно развлечь ваших читателей.

Изучение веб-технологий требует усидчивости, поэтому удобное рабочее место для здоровья спины играет ключевую роль. Эргономичное игровое кресло можно выбрать здесь
https://ergotronica.ru/category/gejmerskie-kresla.html.

Пример игры Тапалки (Кликер)

Правила игры просты, с ними знаком наверное каждый пользователь интернета. Нужно просто кликать по определенному объекту. чаще, кнопке. Каждый клик засчитывается 1 очко. Чем больше кликов. тем больше очков соберешь. Такие тапалки стали трендом в телеграм в 2024 году ,потому что пользователи тапали в надежде разбогатеть. У нас это будет лишь в развлекательных целях.

.klicker { display: flex; justify-content: center; align-items: center; height: 50vh; margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; } canvas { border: 2px solid #000; background-color: #fff; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); let score = 0; // Начальное количество очков const circle = { x: canvas.width / 2, // Центр по X y: canvas.height / 2, // Центр по Y radius: 50, // Радиус круга color: 'red' // Начальный цвет круга }; // Отрисовка круга function drawCircle() { ctx.beginPath(); ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2); ctx.fillStyle = circle.color; ctx.fill(); ctx.closePath(); } // Отрисовка счета внутри круга function drawScore() { ctx.font = '30px Arial'; ctx.fillStyle = 'white'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(score, circle.x, circle.y); } // Проверка клика по кругу function checkClick(event) { const rect = canvas.getBoundingClientRect(); const mouseX = event.clientX - rect.left; const mouseY = event.clientY - rect.top; // Проверка, попал ли клик в круг const distance = Math.sqrt((mouseX - circle.x) ** 2 + (mouseY - circle.y) ** 2); if (distance <= circle.radius) { score++; // Увеличиваем счет circle.color = getRandomColor(); // Меняем цвет круга } } // Генерация случайного цвета function getRandomColor() { const colors = ['red', 'blue', 'green', 'orange', 'purple', 'yellow']; return colors[Math.floor(Math.random() * colors.length)]; } // Основной цикл игры function gameLoop() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Очистка холста drawCircle(); drawScore(); requestAnimationFrame(gameLoop); } // Обработчик клика canvas.addEventListener('click', checkClick); // Запуск игры gameLoop();

Как создать игру Тапалку на JS

Эта игра будет написана с использованием холста <canvas>. Для начала вставим в любое место в блоге в элемент дизайна "HTML - произвольный HTML" (если вы работаете на wordpress, если на другом, то вы знаете аналог), следующий код:

<div class="klicker"><canvas id="gameCanvas" width="400" height="400"></canvas></div>

Задаем стили для обертки div, так, чтобы игровое поле находилось по центру и имело серый цвет фона:

 .klicker {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 50vh;
            margin: 0;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }
        canvas {
            border: 2px solid #000;
            background-color: #fff;
        }

Далее идет работа с JavaScript. Сначала инициализируем холст и контекст при помощи кода:

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

• canvas — это элемент <canvas> на странице, на котором будет отрисовываться игра.
• ctx — это контекст рисования, который позволяет выполнять операции отрисовки на холсте.

Переходим к настройке начальных параметров игры. Задаем начальное количество очков, а также координаты круга.

let score = 0; // Начальное количество очков
const circle = {
    x: canvas.width / 2, // Центр круга по X
    y: canvas.height / 2, // Центр круга по Y
    radius: 50, // Радиус круга
    color: 'red' // Начальный цвет круга
};

С помощью следующей функции происходит отрисовка круга:

function drawCircle() {
    ctx.beginPath();
    ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI * 2);
    ctx.fillStyle = circle.color;
    ctx.fill();
    ctx.closePath();
}

Далее производим отрисовку внутри круга:

function drawScore() {
    ctx.font = '30px Arial';
    ctx.fillStyle = 'white';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(score, circle.x, circle.y);
}

Генерируем случайный цвет круга. Цвет будет меняться случайным образом при нажатии на кнопку:

function checkClick(event) {
    const rect = canvas.getBoundingClientRect();
    const mouseX = event.clientX - rect.left;
    const mouseY = event.clientY - rect.top;

    const distance = Math.sqrt((mouseX - circle.x) ** 2 + (mouseY - circle.y) ** 2);
    if (distance <= circle.radius) {
        score++; // Увеличиваем счет
        circle.color = getRandomColor(); // Меняем цвет круга
    }
}

В последней функции происходит основной цикл игры:

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height); // Очистка холста
    drawCircle();
    drawScore();
    requestAnimationFrame(gameLoop);
}

Добавляем обработку события клика на холст:

canvas.addEventListener('click', checkClick);

Запуск игры после добавления запуска функции.

gameLoop();

Собираем все в единый код, добавляем скрипт на страницу в тег script и наслаждаемся результатом.