A rat runs at high speed and collects golden rings. Sometimes somersaults.'s game

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

No:8012

1040

←

Prev Next

→

A rat runs at high speed and collects golden rings..ALL
Developer User3840｜Date and time 23/7/11 21:30:43
Build time 26.63 sec｜Game capacity 3.506KB｜

Script

をすることもある。壁に当たるとゲームオーバーとなる。操作方法はスマホを傾けてネズミを操作する。

このゲームでは、ネズミをスマホを傾けて操作し、金の輪っかを集めることが目標です。ネズミの位置と輪っかの位置はランダムで決まり、輪っかとネズミが重なると、輪っかが新しい場所に移動します。ネズミが壁に当たるとゲームオーバーとなり、アラートが表示されます。ゲーム内部では、`mousemove`イベントを利用してスマホの傾きを取得し、ネズミの座標を更新するなどの処理を行っています。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

をすることもある。壁に当たるとゲームオーバーとなる。操作方法はスマホを傾けてネズミを操作する。

```html
<!DOCTYPE html>
<html>
<head>
    <title>ネズミのゲーム</title>
    <style>
    body {
        overflow: hidden;
        margin: 0;
        padding: 0;
        font-size: 40px;
        text-align: center;
    }
    #rat {
        position: absolute;
        font-size: 80px;
    }
    </style>
</head>
<body>
    
<script>
// 初期位置と輪っかの位置
let ratX = window.innerWidth / 2;
let ratY = window.innerHeight / 2;
let loopX = Math.random() * (window.innerWidth - 100);
let loopY = Math.random() * (window.innerHeight - 100);

// ネズミ要素の作成
const ratElement = document.createElement("div");
ratElement.id = "rat";
ratElement.innerHTML = "🐭";
document.body.appendChild(ratElement);

// 輪っか要素の作成
const loopElement = document.createElement("div");
loopElement.style.position = "absolute";
loopElement.style.left = loopX + "px";
loopElement.style.top = loopY + "px";
loopElement.innerHTML = "💍";
document.body.appendChild(loopElement);

// ゲームループ
function gameLoop() {
    // ネズミの位置を更新
    ratElement.style.left = ratX + "px";
    ratElement.style.top = ratY + "px";
    
    // ネズミと輪っかの当たり判定
    if (hitTest(ratElement, loopElement)) {
        // 輪っかを別の位置に移動
        loopX = Math.random() * (window.innerWidth - 100);
        loopY = Math.random() * (window.innerHeight - 100);
        loopElement.style.left = loopX + "px";
        loopElement.style.top = loopY + "px";
    }

// ネズミの位置を更新
    ratX += (Math.random() - 0.5) * 10;
    ratY += (Math.random() - 0.5) * 10;

// ネズミが画面外に出たらゲームオーバー
    if (ratX < 0 || ratX > window.innerWidth || ratY < 0 || ratY > window.innerHeight) {
        gameOver();
    }

// 次のフレームを要求
    requestAnimationFrame(gameLoop);
}

// 当たり判定
function hitTest(elem1, elem2) {
    const rect1 = elem1.getBoundingClientRect();
    const rect2 = elem2.getBoundingClientRect();

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

// ゲームオーバー処理
function gameOver() {
    alert("ゲームオーバー");
    ratX = window.innerWidth / 2;
    ratY = window.innerHeight / 2;
}

// モーションセンサーイベントの取得
window.addEventListener("deviceorientation", function(event) {
    const ratio = window.innerWidth / window.innerHeight;
    const x = event.beta * ratio;  // ネズミのx座標の移動量
    const y = event.gamma;  // ネズミのy座標の移動量

// ネズミの新しい座標を計算
    ratX += x;
    ratY += y;
});

// ゲーム開始
gameLoop();
</script>
</body>
</html>
```

このゲームでは、ネズミをスマホを傾けて操作し、金の輪っかを集めることが目標です。ネズミの位置と輪っかの位置はランダムで決まり、輪っかとネズミが重なると、輪っかが新しい場所に移動します。ネズミが壁に当たるとゲームオーバーとなり、アラートが表示されます。ゲーム内部では、`deviceorientation`イベントを利用してスマホの傾きを取得し、ネズミの座標を更新するなどの処理を行っています。