Super Mario Bros with Atari Pong for all devices's game

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

No:17137

111

←

Prev Next

→

Super Mario Bros with Atari Pong for all devices
Developer User7570｜Date and time 23/9/22 9:16:59
Build time 40.081 sec｜Game capacity 5.489KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            display: block;
            position: absolute;
            margin: auto;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas" width="800" height="400"></canvas>

// Global Variables
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");
        const ballRadius = 10;
        let ballX = canvas.width / 2;
        let ballY = canvas.height / 2;
        let ballDX = -2;
        let ballDY = -2;
        const paddleWidth = 10;
        const paddleHeight = 60;
        const playerPaddleX = 10;
        const computerPaddleX = canvas.width - paddleWidth - 10;
        let playerPaddleY = canvas.height / 2 - paddleHeight / 2;
        let computerPaddleY = canvas.height / 2 - paddleHeight / 2;
        let upPressed = false;
        let downPressed = false;
        let playerScore = 0;
        let computerScore = 0;

// Event Listeners
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

// Handle key down events
        function keyDownHandler(event) {
            if (event.key === "ArrowUp") {
                upPressed = true;
            } else if (event.key === "ArrowDown") {
                downPressed = true;
            }
        }

// Handle key up events
        function keyUpHandler(event) {
            if (event.key === "ArrowUp") {
                upPressed = false;
            } else if (event.key === "ArrowDown") {
                downPressed = false;
            }
        }

// Draw the ball on the canvas
        function drawBall() {
            ctx.beginPath();
            ctx.arc(ballX, ballY, ballRadius, 0, Math.PI * 2);
            ctx.fillStyle = "#000000";
            ctx.fill();
            ctx.closePath();
        }

// Draw the player's paddle on the canvas
        function drawPlayerPaddle() {
            ctx.beginPath();
            ctx.rect(playerPaddleX, playerPaddleY, paddleWidth, paddleHeight);
            ctx.fillStyle = "#000000";
            ctx.fill();
            ctx.closePath();
        }

// Draw the computer's paddle on the canvas
        function drawComputerPaddle() {
            ctx.beginPath();
            ctx.rect(
                computerPaddleX,
                computerPaddleY,
                paddleWidth,
                paddleHeight
            );
            ctx.fillStyle = "#000000";
            ctx.fill();
            ctx.closePath();
        }

// Move the player's paddle
        function movePlayerPaddle() {
            if (upPressed && playerPaddleY > 0) {
                playerPaddleY -= 6;
            } else if (downPressed && playerPaddleY < canvas.height - paddleHeight) {
                playerPaddleY += 6;
            }
        }

// Move the computer's paddle
        function moveComputerPaddle() {
            // Simple AI movement
            const paddleCenter = computerPaddleY + paddleHeight / 2;
            if (paddleCenter < ballY && computerPaddleY < canvas.height - paddleHeight) {
                computerPaddleY += 2;
            } else if (paddleCenter > ballY && computerPaddleY > 0) {
                computerPaddleY -= 2;
            }
        }

// Update the canvas
        function updateCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBall();
            drawPlayerPaddle();
            drawComputerPaddle();

movePlayerPaddle();
            moveComputerPaddle();

// Check collision with walls
            if (ballY + ballDY < ballRadius || ballY + ballDY > canvas.height - ballRadius) {
                ballDY = -ballDY;
            }

// Check collision with paddles
            if (
                ballX - ballRadius <= playerPaddleX + paddleWidth &&
                ballY >= playerPaddleY &&
                ballY <= playerPaddleY + paddleHeight
            ) {
                ballDX = -ballDX;
            }

if (
                ballX + ballRadius >= computerPaddleX &&
                ballY >= computerPaddleY &&
                ballY <= computerPaddleY + paddleHeight
            ) {
                ballDX = -ballDX;
            }

// Check if player scores
            if (ballX + ballDX < 0) {
                computerScore++;
                resetBall();
            }

// Check if computer scores
            if (ballX + ballDX > canvas.width) {
                playerScore++;
                resetBall();
            }

ballX += ballDX;
            ballY += ballDY;

ctx.font = "20px Arial";
            ctx.fillText(
                `Player Score: ${playerScore}      Computer Score: ${computerScore}`,
                10,
                20
            );

requestAnimationFrame(updateCanvas);
        }

// Reset the ball position
        function resetBall() {
            ballX = canvas.width / 2;
            ballY = canvas.height / 2;
            ballDX = -ballDX;
            ballDY = -ballDY;
        }

// Start the game
        function startGame() {
            updateCanvas();
        }

startGame();
    </script>
</body>
</html>