A 3d police car chasing a 2d pictogram's game

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

No:38753

←

Prev Next

→

A 3d police car chasing a 2d pictogram
Developer User17421｜Date and time 24/1/25 9:07:13
Build time 11.048 sec｜Game capacity 3.063KB｜

Script

WTH BOY

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Police Car Chase Game</title>
    <p>WTH BOY</p>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>

var policeCarX = 300;
        var policeCarY = 200;

var pictogramX = Math.floor(Math.random() * 550);
        var pictogramY = Math.floor(Math.random() * 350);

var pictogramCaught = false;

// Load game assets
        function loadImages() {
            policeCarImage = new Image();
            policeCarImage.src = "policeCar.png";

pictogramImage = new Image();
            pictogramImage.src = "pictogram.png";

// Start the game loop after images are loaded
            policeCarImage.onload = function () {
                setInterval(gameLoop, 1000 / 60);
            }
        }

// Game initialization
        function init() {
            canvas = document.getElementById('gameCanvas');
            canvasContext = canvas.getContext('2d');

loadImages();

// Event listener for player's touch input
            canvas.addEventListener('touchstart', movePoliceCar, false);
        }

// Update game logic
        function update() {
            if (!pictogramCaught) {
                if (pictogramX < policeCarX + 40 &&
                    pictogramX + 30 > policeCarX &&
                    pictogramY < policeCarY + 60 &&
                    30 + pictogramY > policeCarY) {
                    pictogramCaught = true;
                }
            }
        }

// Draw game objects on the canvas
        function draw() {
            // Clear the canvas
            canvasContext.clearRect(0, 0, canvas.width, canvas.height);

// Draw police car
            canvasContext.drawImage(policeCarImage, policeCarX, policeCarY);

// Draw pictogram
            if (!pictogramCaught) {
                canvasContext.drawImage(pictogramImage, pictogramX, pictogramY);
            }

// Display game over message if pictogram is caught
            if (pictogramCaught) {
                canvasContext.font = "30px Arial";
                canvasContext.fillStyle = "red";
                canvasContext.fillText("GAME OVER!", 250, 200);
            }
        }

// Game loop
        function gameLoop() {
            update();
            draw();
        }

// Move the police car on player's touch input
        function movePoliceCar(event) {
            event.preventDefault();
            policeCarX = event.targetTouches[0].pageX - canvas.offsetLeft - 20;
            policeCarY = event.targetTouches[0].pageY - canvas.offsetTop - 30;
        }

// Start the game when the HTML document is fully loaded
        window.onload = function () {
            init();
        };
    </script>
</body>
</html>