un pong ou des personnages d'animés traversent le terrain's game

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

No:20031

←

Prev Next

→

un pong ou des personnages d'animés traversent le ..ALL
Developer User8923｜Date and time 23/10/8 0:21:18
Build time 21.435 sec｜Game capacity 4.057KB｜

Script

Voici un exemple de code HTML pour créer un jeu de Pong utilisant des personnages d'anime qui traversent le terrain. Le jeu est conçu pour fonctionner sur un smartphone et utilise des pictogrammes d'anime pour représenter les personnages.

Ce code contient un exemple simple de jeu Pong où vous pouvez contrôler le joueur de gauche en déplaçant votre doigt sur l'écran. Les personnages d'anime sont représentés par des rectangles colorés et la balle est représentée par un cercle. Les joueurs se déplacent verticalement pour frapper la balle et éviter qu'elle ne traverse leurs côtés.

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Pong Anime</title>
    <style>
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="300"></canvas>
    
    <script>
        // Enclose the code in script tags
        (function() {
            // Start processing
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            
            // Create players
            var player1 = {
                x: 10,
                y: canvas.height / 2 - 25,
                width: 10,
                height: 50,
                speed: 5
            };
            
            var player2 = {
                x: canvas.width - 20,
                y: canvas.height / 2 - 25,
                width: 10,
                height: 50,
                speed: 5
            };
            
            // Create ball
            var ball = {
                x: canvas.width / 2,
                y: canvas.height / 2,
                radius: 5,
                speedX: 3,
                speedY: 3
            };
            
            // Update player position based on touch events
            document.addEventListener("touchmove", function(event) {
                var touch = event.touches[0];
                event.preventDefault();
                
                player1.y = touch.clientY - player1.height / 2;
            });
            
            // Update ball position and check collision with players
            function update() {
                // Clear the canvas
                context.clearRect(0, 0, canvas.width, canvas.height);
                
                // Draw players
                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);
                context.fill();
                context.closePath();
                
                // Update ball position
                ball.x += ball.speedX;
                ball.y += ball.speedY;
                
                // Check collision with players
                if (ball.x - ball.radius < player1.x + player1.width &&
                    ball.x + ball.radius > player1.x &&
                    ball.y - ball.radius < player1.y + player1.height &&
                    ball.y + ball.radius > player1.y) {
                    ball.speedX = -ball.speedX;
                }
                
                if (ball.x - ball.radius < player2.x + player2.width &&
                    ball.x + ball.radius > player2.x &&
                    ball.y - ball.radius < player2.y + player2.height &&
                    ball.y + ball.radius > player2.y) {
                    ball.speedX = -ball.speedX;
                }
                
                // Check collision with walls
                if (ball.y - ball.radius < 0 || ball.y + ball.radius > canvas.height) {
                    ball.speedY = -ball.speedY;
                }
                
                // Request animation frame to update the game loop
                requestAnimationFrame(update);
            }
            
            update();
            
        })();
    </script>
</body>
</html>
```