Multiplayer racing game's game

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

No:40308

←

Prev Next

→

Multiplayer racing game
Developer User9721｜Date and time 24/2/2 8:12:31
Build time 14.491 sec｜Game capacity 4.695KB｜

Script

Sure! Here's an example of a simple multiplayer racing game implemented as a single HTML file using JavaScript. Please note that this is a basic implementation to give you an idea, and you can enhance it further based on your requirements.

This game allows two players to control their respective colored rectangles (blue and red) using arrow keys and the "a" and "d" keys. The goal is to reach the end of the track without colliding with the track boundaries. The first player to reach the end wins. Each player is represented by a simple rectangle on the canvas. You can further enhance this game by adding features like score tracking, multiplayer synchronization, graphics, sound effects, etc.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Multiplayer Racing Game</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

const player1 = { x: 0, y: 180 }; // Starting position for player 1
        const player2 = { x: 0, y: 220 }; // Starting position for player 2
        const trackWidth = 400;
        const trackHeight = 40;
        const trackColor = "#7F7F7F";

let gameStarted = false;

// Keyboard event listeners
        window.addEventListener('keydown', handleKeyDown);
        window.addEventListener('keyup', handleKeyUp);

// Start the game
        function startGame() {
            gameStarted = true;
            movePlayers();
        }

// Draw initial track and players
        function draw() {
            // Clear canvas
            context.clearRect(0, 0, canvas.width, canvas.height);

// Draw track
            context.fillStyle = trackColor;
            context.fillRect(0, 180, trackWidth, trackHeight);
            context.fillRect(0, 220, trackWidth, trackHeight);

// Draw player 1
            context.fillStyle = "blue";
            context.fillRect(player1.x, player1.y, 20, 20);

// Draw player 2
            context.fillStyle = "red";
            context.fillRect(player2.x, player2.y, 20, 20);
        }

// Handle keyboard keydown events
        function handleKeyDown(event) {
            if (event.key === 'ArrowRight') {
                player1.x += 5;
            } else if (event.key === 'ArrowLeft') {
                player1.x -= 5;
            } else if (event.key === 'd') {
                player2.x += 5;
            } else if (event.key === 'a') {
                player2.x -= 5;
            }

// Check for collision
            checkCollision();

// Redraw canvas
            if (gameStarted) {
                draw();
            }
        }

// Handle keyboard keyup events
        function handleKeyUp(event) {
            if (
                event.key === 'ArrowRight' ||
                event.key === 'ArrowLeft' ||
                event.key === 'd' ||
                event.key === 'a'
            ) {
                // Check for collision
                checkCollision();

// Redraw canvas
                if (gameStarted) {
                    draw();
                }
            }
        }

// Move the players
        function movePlayers() {
            setInterval(() => {
                player1.x += 3;
                player2.x += 2;

// Check for collision
                checkCollision();

// Redraw canvas
                draw();
            }, 20);
        }

// Check for collision between players and track
        function checkCollision() {
            // Check collision for player 1
            if (
                player1.x < 0 ||
                player1.x + 20 > trackWidth ||
                (player1.y >= 160 && player1.y <= 200)
            ) {
                gameOver("Player 2 wins!");
            }

// Check collision for player 2
            if (
                player2.x < 0 ||
                player2.x + 20 > trackWidth ||
                (player2.y >= 200 && player2.y <= 240)
            ) {
                gameOver("Player 1 wins!");
            }
        }

// Game over
        function gameOver(message) {
            gameStarted = false;
            alert(message);

// Reset player positions
            player1.x = 0;
            player2.x = 0;

// Redraw canvas
            draw();
        }

// Initial draw
        draw();
    </script>
</body>
</html>
```

You can further enhance this game by adding features like score tracking, multiplayer synchronization, graphics, sound effects, etc.