Code a 2D maze game with a red dragon that tries to find you his body is composed of the letter X and his head is a 🐲 dragon head emoji ofk he chases you and add touch controls so ypu can move's game

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

No:47999

←

Prev Next

→

Code a 2D maze game with a red dragon that tries t..ALL
Developer User20679｜Date and time 24/3/1 7:01:19
Build time 10.32 sec｜Game capacity 2.837KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Dragon Maze Game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

#gameCanvas {
            background: #f0f0f0;
            display: block;
            margin: auto;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

const playerSize = 30;
        const dragonSize = 30;
        let playerX = canvas.width / 2 - playerSize / 2;
        let playerY = canvas.height / 2 - playerSize / 2;
        let dragonX = canvas.width / 2 - dragonSize / 2;
        let dragonY = canvas.height / 2 - dragonSize / 2;

canvas.width = 400;
        canvas.height = 400;

const updateTime = 1000 / 30;
        let lastUpdate = 0;

function update() {
            if (dragonX < playerX) {
                dragonX += 1;
            } else {
                dragonX -= 1;
            }

if (dragonY < playerY) {
                dragonY += 1;
            } else {
                dragonY -= 1;
            }

if (playerX < dragonX + dragonSize &&
                playerX + playerSize > dragonX &&
                playerY < dragonY + dragonSize &&
                playerY + playerSize > dragonY) {
                console.log('Game Over');
            }
        }

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

// Draw player
            ctx.fillStyle = 'blue';
            ctx.fillRect(playerX, playerY, playerSize, playerSize);

// Draw dragon body (Xs)
            ctx.fillStyle = 'red';
            ctx.font = '30px Arial';
            ctx.fillText('X', dragonX, dragonY);
            ctx.fillText('X', dragonX - 20, dragonY + 20);
            ctx.fillText('X', dragonX + 20, dragonY + 20);

// Draw dragon head emoji
            ctx.font = '30px Arial';
            ctx.fillText('🐲', dragonX - 20, dragonY - 20);
        }

function gameLoop(timestamp) {
            let deltaTime = timestamp - lastUpdate;

if (deltaTime > updateTime) {
                update();
                draw();
                lastUpdate = timestamp;
            }

requestAnimationFrame(gameLoop);
        }

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