make a game where the grimace collects the grimace of the neck for each grimace of the neck 1 point is added arrow control's game

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

No:26388

←

Prev Next

→

make a game where the grimace collects the grimace..ALL
Developer User13076｜Date and time 23/11/30 2:53:39
Build time 105.25 sec｜Game capacity 4.431KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Grimace Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="300"></canvas>

// Define the grimace object
        var grimace = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            width: 50,
            height: 50,
            speed: 5
        };

// Define the neck grimace object
        var neckGrimace = {
            x: Math.random() * (canvas.width - 50),
            y: Math.random() * (canvas.height - 50),
            width: 50,
            height: 50
        };

// Game score
        var score = 0;

// Arrow key states
        var arrowKeys = {
            left: false,
            right: false,
            up: false,
            down: false
        };

// Event listeners for arrow key controls
        document.addEventListener("keydown", keyDownHandler, false);
        document.addEventListener("keyup", keyUpHandler, false);

// Key down event handler
        function keyDownHandler(event) {
            if (event.keyCode == 37) { // Left arrow key
                arrowKeys.left = true;
            }
            else if (event.keyCode == 39) { // Right arrow key
                arrowKeys.right = true;
            }
            else if (event.keyCode == 38) { // Up arrow key
                arrowKeys.up = true;
            }
            else if (event.keyCode == 40) { // Down arrow key
                arrowKeys.down = true;
            }
        }

// Key up event handler
        function keyUpHandler(event) {
            if (event.keyCode == 37) { // Left arrow key
                arrowKeys.left = false;
            }
            else if (event.keyCode == 39) { // Right arrow key
                arrowKeys.right = false;
            }
            else if (event.keyCode == 38) { // Up arrow key
                arrowKeys.up = false;
            }
            else if (event.keyCode == 40) { // Down arrow key
                arrowKeys.down = false;
            }
        }

// Update the game state
        function update() {
            // Move the grimace based on arrow keys
            if (arrowKeys.left) {
                grimace.x -= grimace.speed;
            }
            else if (arrowKeys.right) {
                grimace.x += grimace.speed;
            }

if (arrowKeys.up) {
                grimace.y -= grimace.speed;
            }
            else if (arrowKeys.down) {
                grimace.y += grimace.speed;
            }

// Check collision between grimace and neck grimace
            if (grimace.x < neckGrimace.x + neckGrimace.width &&
                grimace.x + grimace.width > neckGrimace.x &&
                grimace.y < neckGrimace.y + neckGrimace.height &&
                grimace.y + grimace.height > neckGrimace.y) {
                score++; // Increase the score
                // Place the neck grimace at a random position
                neckGrimace.x = Math.random() * (canvas.width - 50);
                neckGrimace.y = Math.random() * (canvas.height - 50);
            }
        }

// Render the game
        function draw() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the grimace
            ctx.fillStyle = "#000";
            ctx.fillRect(grimace.x, grimace.y, grimace.width, grimace.height);

// Draw the neck grimace
            ctx.fillStyle = "#FF0000";
            ctx.fillRect(neckGrimace.x, neckGrimace.y, neckGrimace.width, neckGrimace.height);

// Draw the score
            ctx.fillStyle = "#000";
            ctx.font = "20px Arial";
            ctx.fillText("Score: " + score, 10, 20);
        }

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

// Start the game
        gameLoop();
    </script>
</body>
</html>