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

No:51988

A game that uses the phone camera and shows you wh..ALL
Developer User21734｜Date and time 24/3/17 8:34:52
Build time 6.291 sec｜Game capacity 2.265KB｜

Script

Camera Click Game

Click all the objects that are not actually behind the camera lens before 30 seconds end!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Click Game</title>
</head>

<body>
    <h1>Camera Click Game</h1>
    <p>Click all the objects that are not actually behind the camera lens before 30 seconds end!</p>

<div>
        <video id="camera" width="400" height="400" autoplay></video>
        <canvas id="canvas" width="400" height="400"></canvas>
        <button id="startBtn">Start Game</button>
    </div>

let objects = ['🍎', '📱', '🍕', '🕶️', '👓', '🦜'];
        let timerInterval;

startBtn.addEventListener('click', () => {
            startGame();
            timerInterval = setInterval(() => {
                endGame();
            }, 30000);
        });

function endGame() {
            clearInterval(timerInterval);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            alert('Game Over. Your final score: ' + objects.length);
        }

document.addEventListener('click', (event) => {
            const x = event.clientX - canvas.offsetLeft;
            const y = event.clientY - canvas.offsetTop;

let randomIndex = Math.floor(Math.random() * objects.length);
            let randomObject = objects[randomIndex];

ctx.font = "30px Arial";
            ctx.fillText(randomObject, x, y);

setTimeout(() => {
                if (objects.includes(randomObject)) {
                    objects.splice(randomIndex, 1);
                }
            }, 500);
        });
    </script>
</body>

</html>