Cross the road without being hit by the red cars's game

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

No:23171

←

Prev Next

→

Cross the road without being hit by the red cars
Developer User10673｜Date and time 23/10/28 16:00:05
Build time 109.096 sec｜Game capacity 5.59KB｜

Script

Sure! Here's a simple game called "Crossy Road" implemented as a single HTML file, including JavaScript code. It's playable on smartphones and utilizes pictograms. You just need to copy the code into a new HTML file, and you can start playing by opening it in a web browser.

Note: Replace the `background-image` URLs in the CSS with the actual URLs of pictograms you want to use for the player and the cars. Also, ensure that the `keydown` events are properly captured on the smartphone's browser or consider using touch events instead.

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Crossy Road</title>
    <style>
        #game-board {
            display: grid;
            grid-template-columns: repeat(9, 1fr);
            gap: 2px;
            padding: 10px;
            background-color: black;
            width: 90vmin;
            height: 90vmin;
        }

.cell {
            background-color: white;
            border-radius: 50%;
        }

.player {
            background-image: url('https://example.com/pictogram_player.png'); /* Replace with the actual URL of the player pictogram */
            background-size: cover;
            background-repeat: no-repeat;
        }

.car {
            background-image: url('https://example.com/pictogram_car.png'); /* Replace with the actual URL of the car pictogram */
            background-size: cover;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// Game State
        let playerPos;
        let cars = [];

// Create the game board with cells
        const gameBoard = document.getElementById('game-board');

for (let row = 0; row < gridSize; row++) {
            for (let col = 0; col < gridSize; col++) {
                const cell = document.createElement('div');
                cell.className = 'cell';
                gameBoard.appendChild(cell);
            }
        }

// Create the player on the board
        const playerCell = gameBoard.childNodes[playerStartPosition[0] * gridSize + playerStartPosition[1]];
        playerCell.classList.add('player');
        playerPos = playerStartPosition;

// Function to move the player
        function movePlayer(e) {
            const key = e.key;

switch (key) {
                case 'ArrowUp':
                    if (playerPos[0] > 0) {
                        movePlayerTo([playerPos[0] - 1, playerPos[1]]);
                    }
                    break;

case 'ArrowDown':
                    if (playerPos[0] < gridSize - 1) {
                        movePlayerTo([playerPos[0] + 1, playerPos[1]]);
                    }
                    break;

case 'ArrowLeft':
                    if (playerPos[1] > 0) {
                        movePlayerTo([playerPos[0], playerPos[1] - 1]);
                    }
                    break;

case 'ArrowRight':
                    if (playerPos[1] < gridSize - 1) {
                        movePlayerTo([playerPos[0], playerPos[1] + 1]);
                    }
                    break;
            }
        }

// Function to move the player to a specific position
        function movePlayerTo(position) {
            const currentCell = gameBoard.childNodes[playerPos[0] * gridSize + playerPos[1]];
            const nextCell = gameBoard.childNodes[position[0] * gridSize + position[1]];

currentCell.classList.remove('player');
            nextCell.classList.add('player');
            playerPos = position;
        }

// Function to create a moving car
        function createCar() {
            const carPos = [0, Math.floor(Math.random() * gridSize)];
            const carCell = gameBoard.childNodes[carPos[0] * gridSize + carPos[1]];

const carInterval = setInterval(() => {
                moveCarTo(carPos, [carPos[0] + 1, carPos[1]]);
            }, carSpeed);

cars.push({
                position: carPos,
                interval: carInterval
            });

carCell.classList.add('car');
        }

// Function to move a car to a specific position
        function moveCarTo(currentPos, newPos) {
            const currentCarCell = gameBoard.childNodes[currentPos[0] * gridSize + currentPos[1]];
            const nextCarCell = gameBoard.childNodes[newPos[0] * gridSize + newPos[1]];

currentCarCell.classList.remove('car');
            nextCarCell.classList.add('car');

if (newPos[0] === playerPos[0] && newPos[1] === playerPos[1]) {
                gameOver();
            }

currentPos = newPos;
        }

// Function to handle game over
        function gameOver() {
            alert('Oh no! You got hit by a car!');

cars.forEach((car) => {
                clearInterval(car.interval);
            });

gameBoard.removeEventListener('keydown', movePlayer);
        }

// Start the game
        function startGame() {
            gameBoard.addEventListener('keydown', movePlayer);
            gameBoard.setAttribute('tabindex', 0);
            gameBoard.focus();

setInterval(createCar, carSpeed);
        }

startGame();
    </script>
</body>
</html>
```