Create pong with 10 balls's game

Click here for free DL of the app version that can save data.

No:20921

121

←

Prev Next

→

Create pong with 10 balls
Developer User9231｜Date and time 23/10/12 2:04:38
Build time 101.48 sec｜Game capacity 4.274KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            background: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>

// Создаем платформу игрока
        const player = {
            x: 0,
            y: canvas.height / 2 - 50,
            width: 10,
            height: 100,
            color: "#5f27cd",
            dy: 10
        };

// Создаем множество мячиков
        const balls = [];
        for (let i = 0; i < 10; i++) {
            balls.push({
                x: canvas.width / 2,
                y: canvas.height / 2,
                radius: 10,
                speed: 4,
                dx: Math.random() < 0.5 ? -1 : 1,
                dy: Math.random() < 0.5 ? -1 : 1,
                color: "#f39c12"
            });
        }

// Передвижение платформы игрока
        function movePlayerUp() {
            player.y -= player.dy;
            if (player.y < 0) {
                player.y = 0;
            }
        }

function movePlayerDown() {
            player.y += player.dy;
            if (player.y + player.height > canvas.height) {
                player.y = canvas.height - player.height;
            }
        }

// Обновление координат мячика
        function updatePositions() {
            for (let i = 0; i < balls.length; i++) {
                const ball = balls[i];
                ball.x += ball.speed * ball.dx;
                ball.y += ball.speed * ball.dy;

// Обработка столкновений с вертикальными стенами
                if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                    ball.dy *= -1;
                }

// Обработка столкновений с платформой игрока
                if (ball.x - ball.radius < player.x + player.width && ball.y + ball.radius > player.y && ball.y - ball.radius < player.y + player.height) {
                    ball.dx *= -1;
                }
            }
        }

// Отрисовка платформы игрока
        function drawPlayer() {
            context.fillStyle = player.color;
            context.fillRect(player.x, player.y, player.width, player.height);
        }

// Отрисовка мячей
        function drawBalls() {
            balls.forEach(function (ball) {
                context.beginPath();
                context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
                context.fillStyle = ball.color;
                context.fill();
                context.strokeStyle = "#fff";
                context.lineWidth = 1;
                context.stroke();
                context.closePath();
            });
        }

// Отрисовка счета
        function drawScore() {
            context.font = "20px Arial";
            context.fillStyle = "#fff";
            context.fillText("Score: " + balls.length, 20, 30);
        }

// Отрисовка игрового поля
        function drawBoard() {
            context.fillStyle = "#000";
            context.fillRect(0, 0, canvas.width, canvas.height);
        }

// Главная функция игры
        function gameLoop() {
            drawBoard();
            drawPlayer();
            drawBalls();
            drawScore();
            updatePositions();
        }

setInterval(gameLoop, 16);

// Обработка нажатий кнопок на смартфоне
        document.addEventListener("keydown", function (event) {
            if (event.key === "ArrowUp" || event.key === "Up") {
                movePlayerUp();
            } else if (event.key === "ArrowDown" || event.key === "Down") {
                movePlayerDown();
            }
        });
    </script>
</body>
</html>