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

No:6513

292

←

Prev Next

→

sunburn
Developer User3891｜Date and time 23/7/2 16:08:36
Build time 27.15 sec｜Game capacity 3.179KB｜

Script

こちらが、スマートフォンでプレイ可能なシンプルなゲームの実装例です。

日焼けゲーム

スマホを動かして日焼けを避けよう！

🌞

このプログラムは、スマートフォンの傾きを利用して画面上の「🌞」という絵文字（太陽）を操作し、出現する「☀️」という絵文字（日焼け）との衝突を避けるゲームです。スマートフォンを傾けることで太陽を操作し、衝突を避けることで得点が加算されます。メッセージ欄にスコアが表示されます。

←

Prev　Next

→ 　

Back　

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

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

こちらが、スマートフォンでプレイ可能なシンプルなゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日焼けゲーム</title>
</head>
<body>
    <h1>日焼けゲーム</h1>
    <p id="message">スマホを動かして日焼けを避けよう！</p>
    <div id="player" style="position: absolute; left: 50px; top: 50px; font-size: 50px;">🌞</div>
    <script>
        const player = document.getElementById("player");
        const message = document.getElementById("message");

let score = 0;

function getRandomNumber(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

function updateScore() {
            message.innerText = "Score: " + score;
        }

updateScore();

function handleOrientation(event) {
            const x = event.beta;
            const y = event.gamma;

const maxX = window.innerWidth - player.clientWidth;
            const maxY = window.innerHeight - player.clientHeight;

const newX = Math.min(Math.max(player.offsetLeft + x, 0), maxX);
            const newY = Math.min(Math.max(player.offsetTop + y, 0), maxY);

player.style.left = newX + "px";
            player.style.top = newY + "px";
        }

function checkCollision() {
            const suns = document.getElementsByClassName("sun");

for (let i = 0; i < suns.length; i++) {
                const sun = suns[i];
                if (isCollided(player, sun)) {
                    sun.remove();
                    score++;
                    updateScore();
                }
            }
        }

function isCollided(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();

return !(rect1.right < rect2.left ||
                rect1.left > rect2.right ||
                rect1.bottom < rect2.top ||
                rect1.top > rect2.bottom);
        }

setInterval(() => {
            const sun = document.createElement("div");
            sun.classList.add("sun");
            sun.style.position = "absolute";
            sun.style.left = getRandomNumber(0, window.innerWidth - 50) + "px";
            sun.style.top = getRandomNumber(0, window.innerHeight - 50) + "px";
            sun.style.fontSize = "50px";
            sun.innerText = "☀️";
            document.body.appendChild(sun);

setTimeout(() => {
                sun.remove();
                checkCollision();
            }, 3000);
        }, 2000);

window.addEventListener("deviceorientation", handleOrientation);
    </script>
</body>
</html>
```