AI game creator

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

No:25558

←

Prev Next

→

Crossey road
Developer User12558｜Date and time 23/11/23 2:39:07
Build time 81.217 sec｜Game capacity 3.603KB｜

Script

Sure, here's a simple Crossy Road game implemented as a single HTML file using JavaScript:

This implementation creates a canvas element where the game is displayed. The player controls a character using the left and right arrow keys, aiming to avoid colliding with obstacles that are falling from the top of the canvas. The score increases for each obstacle avoided, and the game ends when the character collides with an obstacle. Note: The gameplay can be enhanced further by adding features such as different types of obstacles, power-ups, levels, and high scores. However, the provided code serves as a basic example to demonstrate the functionality of a Crossy Road-like game.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple Crossy Road game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
<title>Crossy Road</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<script>
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext("2d");
    var score = 0;
    var gameOver = false;
    
    canvas.width = 400;
    canvas.height = 400;
    document.body.appendChild(canvas);
    
    // Character
    var character = {
        x: canvas.width / 2,
        y: canvas.height - 30,
        width: 30,
        height: 30,
        speed: 5
    };
    
    var keysPressed = {};
    document.addEventListener("keydown", function (event) {
        keysPressed[event.keyCode] = true;
    });
    document.addEventListener("keyup", function (event) {
        delete keysPressed[event.keyCode];
    });
    
    // Obstacles
    var obstacles = [];
    function createObstacle() {
        var obstacle = {
            x: Math.random() * (canvas.width - 30),
            y: -30,
            width: 30,
            height: 30
        };
        obstacles.push(obstacle);
    }
    setInterval(createObstacle, 1000);
    
    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        if (!gameOver) {
            // Draw character
            ctx.fillRect(character.x, character.y, character.width, character.height);
            
            // Move character
            if (keysPressed[37] && character.x > 0) { // Left arrow key
                character.x -= character.speed;
            }
            if (keysPressed[39] && character.x < canvas.width - character.width) { // Right arrow key
                character.x += character.speed;
            }
            
            // Draw obstacles
            for (var i = 0; i < obstacles.length; i++) {
                var obstacle = obstacles[i];
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
                
                // Move obstacles
                obstacle.y += character.speed;
                
                // Check for collision
                if (character.x < obstacle.x + obstacle.width &&
                    character.x + character.width > obstacle.x &&
                    character.y < obstacle.y + obstacle.height &&
                    character.y + character.height > obstacle.y) {
                    gameOver = true;
                }
                
                // Remove obstacles that are off-screen
                if (obstacle.y > canvas.height) {
                    obstacles.splice(i, 1);
                    score++;
                }
            }
            
            // Draw score
            ctx.fillText("Score: " + score, 10, 20);
            
            requestAnimationFrame(draw);
        } else {
            ctx.fillText("Game Over! Your Score: " + score, 10, 20);
        }
    }
    
    draw();
</script>
</body>
</html>
```

This implementation creates a canvas element where the game is displayed. The player controls a character using the left and right arrow keys, aiming to avoid colliding with obstacles that are falling from the top of the canvas. The score increases for each obstacle avoided, and the game ends when the character collides with an obstacle.

Note: The gameplay can be enhanced further by adding features such as different types of obstacles, power-ups, levels, and high scores. However, the provided code serves as a basic example to demonstrate the functionality of a Crossy Road-like game.