AI game creator

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

No:17305

←

Prev Next

→

Giant Pong
Developer User7638｜Date and time 23/9/23 4:01:06
Build time 55.381 sec｜Game capacity 5.982KB｜

Script

Sure, here's a simple implementation of a game called "Giant Pong" using JavaScript and HTML. The game is designed to be played on a smartphone and uses pictograms. The game is played by tapping on the left or right side of the screen to control the paddle and prevent the ball from hitting the edges.

Just copy the above code and save it as a `.html` file. You can then open the file in a web browser on your smartphone to play "Giant Pong."

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Giant Pong</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// Game state
        let canvas, context;
        let paddlePosition, ballPosition, ballDirection;
        let score;

// Initialize game
        function init() {
            canvas = document.getElementById("gameCanvas");
            context = canvas.getContext("2d");
            canvas.width = canvasWidth;
            canvas.height = canvasHeight;

resetGame();

// Event listener for touch/mouse click
            document.addEventListener("touchstart", handleTouchStart);
            document.addEventListener("mousedown", handleTouchStart);
        }

// Reset game state
        function resetGame() {
            paddlePosition = Math.floor(canvasHeight / 2 - paddleHeight / 2);
            ballPosition = { x: Math.floor(canvasWidth / 2), y: Math.floor(canvasHeight / 2) };
            ballDirection = { x: 1, y: 1 };
            score = 0;
        }

// Update game state and render
        function updateGame() {
            // Move the paddle based on touch position
            if (paddlePosition >= 0 && paddlePosition <= canvasHeight - paddleHeight) {
                document.addEventListener("touchmove", handleTouchMove);
                document.addEventListener("mousemove", handleTouchMove);
            }

// Move the ball
            ballPosition.x += ballDirection.x * ballSpeed;
            ballPosition.y += ballDirection.y * ballSpeed;

// Collision detection with paddle
            if (ballPosition.x - ballRadius <= paddleWidth && ballPosition.y >= paddlePosition && ballPosition.y <= paddlePosition + paddleHeight) {
                ballDirection.x = 1;
                score += scoreIncrement;
                ballSpeed += ballSpeedIncrement;

if (score >= maxScore) {
                    // Game over, you won!
                    alert("Congratulations! You won!");
                    resetGame();
                }
            }

// Collision detection with canvas edges
            if (ballPosition.x + ballRadius >= canvasWidth) {
                ballDirection.x = -1;
            }
            if (ballPosition.y + ballRadius >= canvasHeight || ballPosition.y - ballRadius <= 0) {
                ballDirection.y *= -1;
            }

render();
        }

// Render the game
        function render() {
            // Clear canvas
            context.clearRect(0, 0, canvasWidth, canvasHeight);

// Draw paddle
            context.fillStyle = "#000000";
            context.fillRect(0, paddlePosition, paddleWidth, paddleHeight);

// Draw ball
            context.beginPath();
            context.arc(ballPosition.x, ballPosition.y, ballRadius, 0, Math.PI * 2, false);
            context.fillStyle = "#000000";
            context.fill();

// Draw score
            context.font = "bold 24px Arial";
            context.fillText("Score: " + score, 10, 30);
        }

// Handle touch/mouse click event
        function handleTouchStart(event) {
            const touchY = event.touches ? event.touches[0].clientY : event.clientY;
            const touchSide = touchY <= canvasHeight / 2 ? "top" : "bottom";

if (touchSide === "top") {
                paddlePosition -= paddleSpeed;
                if (paddlePosition < 0) {
                    paddlePosition = 0;
                }
            } else {
                paddlePosition += paddleSpeed;
                if (paddlePosition > canvasHeight - paddleHeight) {
                    paddlePosition = canvasHeight - paddleHeight;
                }
            }

event.preventDefault();
        }

// Handle touch/mouse move event
        function handleTouchMove(event) {
            const touchY = event.touches ? event.touches[0].clientY : event.clientY;
            const touchSide = touchY <= canvasHeight / 2 ? "top" : "bottom";

if (touchSide === "top") {
                paddlePosition = touchY - paddleHeight / 2;
                if (paddlePosition < 0) {
                    paddlePosition = 0;
                }
            } else {
                paddlePosition = touchY - paddleHeight / 2;
                if (paddlePosition > canvasHeight - paddleHeight) {
                    paddlePosition = canvasHeight - paddleHeight;
                }
            }

event.preventDefault();
        }

// Start the game
        function startGame() {
            init();
            setInterval(updateGame, 10);
        }

// Start the game when the page is loaded
        window.onload = startGame;
    </script>
</body>
</html>
```

Just copy the above code and save it as a `.html` file. You can then open the file in a web browser on your smartphone to play "Giant Pong."