Make a racing game where you have to bet on a square to win, and they have to get to the other side of the screen which is the finish line's game

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

No:49545

125

←

Prev Next

→

Make a racing game where you have to bet on a squa..ALL
Developer User21041｜Date and time 24/3/5 11:51:08
Build time 5.796 sec｜Game capacity 1.598KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Racing Game</title>
    <style>
        #player, .square {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }
        #player {
            top: 80%;
            left: 10px;
        }
        .square {
            top: 20%;
            left: 10px;
        }
        #finish-line {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            height: 100%;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div id="finish-line"></div>
    <script>
        const player = document.getElementById('player');
        const squares = document.querySelectorAll('.square');
        const finishLine = document.getElementById('finish-line');
        
        let playerPosition = 10;

player.style.left = playerPosition + 'px';

document.addEventListener('keydown', function(event) {
            if(event.key === 'Enter'){
                const winnerSquare = Math.floor(Math.random() * squares.length);
                const squarePosition = squares[winnerSquare].offsetLeft;

if(playerPosition === squarePosition){
                    alert('You win!');
                }else{
                    alert('You lose!');
                }
            }

if(event.key === 'ArrowRight'){
                playerPosition += 10;
                player.style.left = playerPosition + 'px';
            }
        });
    </script>
</body>
</html>