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

No:36036

109

Augmented reality game that uses the players phone..ALL
Developer User16711｜Date and time 24/1/16 7:53:12
Build time 12.161 sec｜Game capacity 4.527KB｜

Sure! Here's an example of a single HTML file that implements the game you described using JavaScript, HTML, and CSS:

Monster Peek Game

Tap on the monster when it appears in a doorway or window to kill it!

In this example, the game uses the smartphone camera to detect doorways and windows appearing in the video feed. When a doorway or window is detected, a monster image is positioned on top of that area. The player's task is to tap on the monster to kill it. Once the monster is tapped, an alert message will appear congratulating the player. Note that you would need to provide the `emozi_all/monster.png` file (representing the monster image) and adjust the pixel color values in the `detectMonster` function based on the doorways and windows you want to detect. Please keep in mind that this is a simplified example meant to demonstrate the concept. In a real-world scenario, you would need to handle various edge cases, improve the monster detection algorithm, and enhance the overall game experience.

→ 　

0　

0　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

Sure! Here's an example of a single HTML file that implements the game you described using JavaScript, HTML, and CSS:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Monster Peek Game</title>
    <style>
        #game-container {
            position: relative;
        }

#monster {
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
    <h1>Monster Peek Game</h1>
    <p>Tap on the monster when it appears in a doorway or window to kill it!</p>

<div id="game-container">
        <video id="camera" width="100%" height="auto" autoplay></video>
        <img id="monster" src="monster.png" alt="Monster">
    </div>

<script>
        window.addEventListener('DOMContentLoaded', (event) => {
            const video = document.getElementById('camera');
            const monster = document.getElementById('monster');

// Check for camera support
            if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
                // Access the smartphone camera
                navigator.mediaDevices.getUserMedia({ video: true })
                    .then(function (stream) {
                        video.srcObject = stream;
                        video.play();
                        detectMonster();
                    })
                    .catch(function (error) {
                        console.log('Unable to access the camera:', error);
                    });
            } else {
                console.log('Camera access not supported on this device.');
            }

// Function to detect monster when it appears in a doorway or window
            function detectMonster() {
                const videoWidth = video.videoWidth;
                const videoHeight = video.videoHeight;
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.width = videoWidth;
                canvas.height = videoHeight;

setInterval(() => {
                    context.drawImage(video, 0, 0, videoWidth, videoHeight);
                    const imageData = context.getImageData(0, 0, videoWidth, videoHeight);
                    const pixels = imageData.data;

// Check if monster appears in doorways or windows
                    for (let i = 0; i < pixels.length; i += 4) {
                        const red = pixels[i];
                        const green = pixels[i + 1];
                        const blue = pixels[i + 2];
                        const alpha = pixels[i + 3];

// Check if the pixel color represents a doorway or window (you can adjust these values)
                        if (red < 100 && green < 100 && blue < 100 && alpha > 100) {
                            // Set the monster position to match the detected doorway or window
                            const windowX = (i / 4) % videoWidth;
                            const windowY = Math.floor((i / 4) / videoWidth);

monster.style.left = windowX + 'px';
                            monster.style.top = windowY + 'px';
                            monster.style.display = 'block';
                            break;
                        } else {
                            monster.style.display = 'none';
                        }
                    }
                }, 100);
            }

// Kill the monster when tapped
            monster.addEventListener('click', function () {
                monster.style.display = 'none';
                alert('Good job! You killed the monster!');
            });
        });
    </script>
</body>
</html>
```

In this example, the game uses the smartphone camera to detect doorways and windows appearing in the video feed. When a doorway or window is detected, a monster image is positioned on top of that area. The player's task is to tap on the monster to kill it. Once the monster is tapped, an alert message will appear congratulating the player.

Note that you would need to provide the `monster.png` file (representing the monster image) and adjust the pixel color values in the `detectMonster` function based on the doorways and windows you want to detect.

Please keep in mind that this is a simplified example meant to demonstrate the concept. In a real-world scenario, you would need to handle various edge cases, improve the monster detection algorithm, and enhance the overall game experience.