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

No:6465

Oops! A fish that anyone can eat!
Developer User3589｜Date and time 23/7/2 14:09:12
Build time 21.404 sec｜Game capacity 1.941KB｜

Script

了解しました！おっとっと！誰でも食べられる魚というゲームを作ります。以下に実装例を示します。

おっとっと！誰でも食べられる魚！

スコア: 0

このゲームでは、画面内の魚の絵をクリックしてスコアを稼ぐというシンプルなゲームです。魚の位置はランダムに変わります。スコアがクリックするごとに増え、画面の上部に表示されます。ただし、この実装例では魚の画像（`emozi_all/fish.png`）が必要です。実際に動作させる際には、適切な画像を用意してください。なお、魚の画像は `img` タグの `src` 属性に指定しています。また、スマホの操作前提で作られていますが、PCでも動作します。画面サイズによっては魚が画面外に表示されることがあるため、画面が小さい場合は拡大してプレイしてください。

←

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 {
            text-align: center;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <h1>おっとっと！誰でも食べられる魚！</h1>
    <p id="score">スコア: 0</p>
    <img src="fish.png" id="fish">
    <script>
        var score = 0;
        var fish = document.getElementById("fish");

fish.addEventListener('click', function() {
            score++;
            document.getElementById("score").innerHTML = "スコア: " + score;
            moveRandomly();
        });

function moveRandomly() {
            var maxX = window.innerWidth - fish.width;
            var maxY = window.innerHeight - fish.height;

var randomX = Math.floor(Math.random() * maxX);
            var randomY = Math.floor(Math.random() * maxY);

fish.style.left = randomX + "px";
            fish.style.top = randomY + "px";
        }
    </script>
</body>
</html>
```

このゲームでは、画面内の魚の絵をクリックしてスコアを稼ぐというシンプルなゲームです。魚の位置はランダムに変わります。スコアがクリックするごとに増え、画面の上部に表示されます。

ただし、この実装例では魚の画像（`fish.png`）が必要です。実際に動作させる際には、適切な画像を用意してください。なお、魚の画像は `img` タグの `src` 属性に指定しています。

また、スマホの操作前提で作られていますが、PCでも動作します。画面サイズによっては魚が画面外に表示されることがあるため、画面が小さい場合は拡大してプレイしてください。