Game where you find a key and unlock a door's game

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

No:50616

105

←

Prev Next

→

Game where you find a key and unlock a door
Developer User21371｜Date and time 24/3/9 9:26:39
Build time 9.643 sec｜Game capacity 2.65KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Key and Door Game</title>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Load images
        const keyImg = new Image();
        keyImg.src = 'https://image.flaticon.com/icons/png/128/1753/1753850.png';

const doorImg = new Image();
        doorImg.src = 'https://image.flaticon.com/icons/png/128/1344/1344951.png';

const playerImg = new Image();
        playerImg.src = 'https://image.flaticon.com/icons/png/128/2204/2204776.png';

let playerX = canvas.width / 2;
        let playerY = canvas.height / 2;

let keyX = Math.random() * (canvas.width - 50);
        let keyY = Math.random() * (canvas.height - 50);

let doorX = Math.random() * (canvas.width - 50);
        let doorY = Math.random() * (canvas.height - 50);

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

// Draw key
            ctx.drawImage(keyImg, keyX, keyY, 50, 50);

// Draw door
            ctx.drawImage(doorImg, doorX, doorY, 50, 50);

// Draw player
            ctx.drawImage(playerImg, playerX, playerY, 50, 50);
        }

function checkCollision() {
            if (playerX < keyX + 50 && playerX + 50 > keyX &&
                playerY < keyY + 50 && playerY + 50 > keyY) {
                alert("You found the key! Now find the door to unlock it.");
            }

if (playerX < doorX + 50 && playerX + 50 > doorX &&
                playerY < doorY + 50 && playerY + 50 > doorY) {
                alert("Congratulations! You unlocked the door and escaped!");
            }
        }

function update() {
            draw();
            checkCollision();
        }

function movePlayer(e) {
            switch (e.key) {
                case 'ArrowUp':
                    playerY -= 10;
                    break;
                case 'ArrowDown':
                    playerY += 10;
                    break;
                case 'ArrowLeft':
                    playerX -= 10;
                    break;
                case 'ArrowRight':
                    playerX += 10;
                    break;
            }

update();
        }

update();

document.addEventListener('keydown', movePlayer);
    </script>
</body>
</html>