AI game creator

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

No:50739

←

Prev Next

→

Catch the noodles
Developer User21395｜Date and time 24/3/9 13:34:41
Build time 6.72 sec｜Game capacity 2.272KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Catch the Noodles Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            background-color: #f8f8f8;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

let playerX = canvas.width / 2;
        const playerY = canvas.height - 30;
        const noodleSize = 20;
        let noodleX = Math.random() * (canvas.width - noodleSize);
        let noodleY = 0;
        let score = 0;

canvas.addEventListener('mousemove', (event) => {
            playerX = event.clientX - canvas.offsetLeft;
        });

function drawPlayer() {
            ctx.fillStyle = '#333';
            ctx.fillRect(playerX, playerY, 60, 10);
        }

function drawNoodle() {
            ctx.fillStyle = '#f00';
            ctx.fillRect(noodleX, noodleY, noodleSize, noodleSize);
        }

function drawScore() {
            ctx.fillStyle = '#333';
            ctx.font = '20px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

function moveNoodle() {
            noodleY += 3;
            if (noodleY > canvas.height) {
                noodleX = Math.random() * (canvas.width - noodleSize);
                noodleY = 0;
            }
        }

function checkCollision() {
            if (noodleY + noodleSize >= playerY && noodleX >= playerX && noodleX + noodleSize <= playerX + 60) {
                score++;
                noodleX = Math.random() * (canvas.width - noodleSize);
                noodleY = 0;
            }
        }

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

drawNoodle();
            drawPlayer();
            drawScore();

moveNoodle();
            checkCollision();

requestAnimationFrame(draw);
        }

draw();
    </script>
</body>
</html>
```