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:49546

←

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:20
Build time 4.48 sec｜Game capacity 1.417KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Racing Game</title>
    <style>
        canvas {
            display: block;
            margin: 0 auto;
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>

const square = {
            x: 0,
            y: 200,
            speedX: 3,
            width: 50,
            height: 50
        };

const finishLine = canvas.width - 50;

function drawSquare() {
            ctx.fillStyle = 'red';
            ctx.fillRect(square.x, square.y, square.width, square.height);
        }

function moveSquare() {
            square.x += square.speedX;
        }

function checkCollision() {
            if (square.x + square.width >= finishLine) {
                alert('You won the race!');
                square.x = 0;
            }
        }

function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

moveSquare();
            drawSquare();
            checkCollision();

requestAnimationFrame(gameLoop);
        }

gameLoop();
    </script>
</body>
</html>