Traffic Jam! Eliminate the cars.'s game

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

No:7358

4799

←

Prev Next

→

Traffic Jam! Eliminate the cars.
Developer anonymous｜Date and time 23/8/14 16:22:41
Build time unknown sec｜Game capacity 3.812KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Traffic Jam</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

.game-container {
            width: 250px;
            display: flex;
            flex-direction: column;
        }

.row {
            display: flex;
        }

.cell {
            width: 50px;
            height: 50px;
            padding: 5px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
        }

.car {
            background-color: #4287f5;
            color: white;
        }

.empty {
            background-color: #ddd;
            color: black;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const grid = document.querySelector('.grid');
            const cars = document.querySelectorAll('.car');

const CAR_WIDTH = 2;
            let carPosition = [1,1]; // initial position of the car
            let gameEnded = false;

function updateGameBoard() {
                const cells = document.querySelectorAll('.cell');
                cells.forEach(cell => {
                    cell.classList.remove('car');
                    cell.classList.add('empty');
                });

for (let j = carPosition[1]; j < carPosition[1] + CAR_WIDTH; j++) {
                    cells[carPosition[0] * 5 + j].classList.remove('empty');
                    cells[carPosition[0] * 5 + j].classList.add('car');
                }
            }

function moveLeft() {
                if (carPosition[1] > 0) {
                    carPosition[1]--;
                }
                updateGameBoard();
                checkGameEnd();
            }

function moveRight() {
                if (carPosition[1] < 5 - CAR_WIDTH) {
                    carPosition[1]++;
                }
                updateGameBoard();
                checkGameEnd();
            }

function checkGameEnd() {
                if (carPosition[1] === 3 && carPosition[0] === 2) {
                    gameEnded = true;
                    alert('Game Over!');
                }
            }

function handleKeyPress(event) {
                if (gameEnded) {
                    return;
                }

if (event.key === 'ArrowLeft') {
                    moveLeft();
                } else if (event.key === 'ArrowRight') {
                    moveRight();
                }
            }

createGameBoard();
            document.addEventListener('keydown', handleKeyPress);
        });
    </script>
</head>
<body>
    <div class="game-container">
        <div class="grid"></div>
    </div>
</body>
</html>