Pong 2 players vs ai's game | AI game creator

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

No:40403

88

Pong 2 players vs ai
Developer User17003｜Date and time 24/2/2 11:08:19
Build time 21.919 sec｜Game capacity 6.059KB｜

Sure! Below is a basic implementation of Pong, a classic game where 2 players can play against an AI. The game can be played on a smartphone and uses pictograms for simplicity. Please note that this is a simplified version of the game. You can further enhance it by adding more features, effects, and better AI logic. This code should be placed within the `` tags in your HTML file. Just copy and paste the code below and save it as an HTML file to play. <br><br> <br> <style> canvas { border: 1px solid black; } </style> <canvas id="pong" width="350" height="400"></canvas>

This code sets up the game canvas, creates players (left and right paddles), and a ball. It also handles keyboard events for player movements. For simplicity, player 2 (the AI) moves downwards continuously. You can customize the AI's behavior by adding your own logic. Note: This is a basic implementation, and there are many ways to improve it. You can add scoring, sound effects, better AI, game controls, and more. Feel free to customize and enhance the game according to your preferences.

→ 　

0　

0　

　
　

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

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

(C)2023 HisashiApp

Sure! Below is a basic implementation of Pong, a classic game where 2 players can play against an AI. The game can be played on a smartphone and uses pictograms for simplicity.

Please note that this is a simplified version of the game. You can further enhance it by adding more features, effects, and better AI logic. This code should be placed within the `<script>` tags in your HTML file. Just copy and paste the code below and save it as an HTML file to play.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pong - 2 Players vs AI</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="pong" width="800" height="400"></canvas>
    <script>
        // Paddle Settings
        const PADDLE_WIDTH = 10;
        const PADDLE_HEIGHT = 60;
        const PADDLE_MARGIN = 10;
        const PADDLE_SPEED = 6; // Increase this value for faster movement

// Ball Settings
        const BALL_RADIUS = 5;
        const BALL_SPEED = 4; // Increase this value for faster ball movement

// Game Variables
        let canvas, context;
        let player1, player2, ball;

// Initialize the game
        function init() {
            canvas = document.getElementById('pong');
            context = canvas.getContext('2d');

// Create players
            player1 = {
                x: PADDLE_MARGIN,
                y: canvas.height / 2 - PADDLE_HEIGHT / 2,
                width: PADDLE_WIDTH,
                height: PADDLE_HEIGHT,
                dy: 0
            };

player2 = {
                x: canvas.width - PADDLE_WIDTH - PADDLE_MARGIN,
                y: canvas.height / 2 - PADDLE_HEIGHT / 2,
                width: PADDLE_WIDTH,
                height: PADDLE_HEIGHT,
                dy: 2
            };

// Create ball
            ball = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                radius: BALL_RADIUS,
                speed: BALL_SPEED,
                dx: 2,
                dy: 2
            };

// Keyboard Event Listeners
            document.addEventListener('keydown', movePlayer);
            document.addEventListener('keyup', stopPlayer);

// Update the game every frame
            setInterval(update, 10);
        }

// Move the player
        function movePlayer(event) {
            switch (event.keyCode) {
                // Player 1 controls (Left side player)
                case 87: // W Key
                    player1.dy = -PADDLE_SPEED;
                    break;
                case 83: // S Key
                    player1.dy = PADDLE_SPEED;
                    break;

// Player 2 controls (Right side player)
                // Assuming the AI operates player 2
                // Feel free to customize and implement your own AI logic here
                // For simplicity, player 2 is always moving downwards
            }
        }

// Stop the player from moving
        function stopPlayer(event) {
            switch (event.keyCode) {
                case 87: // W Key
                case 83: // S Key
                    player1.dy = 0;
                    break;
            }
        }

// Update the game state
        function update() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Move the players
            player1.y += player1.dy;
            player2.y += player2.dy;

// Prevent players from going out of canvas
            if (player1.y < 0) player1.y = 0;
            if (player1.y + player1.height > canvas.height) player1.y = canvas.height - player1.height;

if (player2.y < 0) player2.y = 0;
            if (player2.y + player2.height > canvas.height) player2.y = canvas.height - player2.height;

// Move the ball
            ball.x += ball.dx;
            ball.y += ball.dy;

// Ball collision with walls
            if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
                ball.dy *= -1;
            }

// Ball collision with players
            if (
                ball.y + ball.radius > player1.y && // Ball is below the player's top edge
                ball.y - ball.radius < player1.y + player1.height && // Ball is above the player's bottom edge
                ball.x - ball.radius < player1.x + player1.width // Ball is to the right of the player's left edge
            ) {
                ball.dx *= -1;
            }

if (
                ball.y + ball.radius > player2.y && // Ball is below the player's top edge
                ball.y - ball.radius < player2.y + player2.height && // Ball is above the player's bottom edge
                ball.x + ball.radius > player2.x // Ball is to the left of the player's right edge
            ) {
                ball.dx *= -1;
            }

// Draw players
            context.fillStyle = 'black'; // Player color
            context.fillRect(player1.x, player1.y, player1.width, player1.height);
            context.fillRect(player2.x, player2.y, player2.width, player2.height);

// Draw ball
            context.beginPath();
            context.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false);
            context.fillStyle = 'black'; // Ball color
            context.fill();
            context.closePath();
        }

// Start the game
        init();
    </script>
</body>
</html>
```

This code sets up the game canvas, creates players (left and right paddles), and a ball. It also handles keyboard events for player movements. For simplicity, player 2 (the AI) moves downwards continuously. You can customize the AI's behavior by adding your own logic.

Note: This is a basic implementation, and there are many ways to improve it. You can add scoring, sound effects, better AI, game controls, and more. Feel free to customize and enhance the game according to your preferences.