Mokkomokkomokkomelian🦖.'s game

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

No:847

302

←

Prev Next

→

Mokkomokkomokkomelian🦖.
Developer User3162｜Date and time 23/6/17 20:18:14
Build time 40.226 sec｜Game capacity 3.307KB｜

Script

このゲームは、モッコメリアンという恐竜が果実を集めるゲームです。プレイヤーはモッコメリアンを操作し、画面をタッチすることでジャンプやアイテムを使用することができます。以下に、実装例を示します。

このプログラムは、キャンバス要素を用いてゲームを描画しています。`gameLoop`関数を用いて、ゲームの状態を更新し、描画しています。`addEventListener`を用いて、タッチイベントを処理しています。このゲームは、スマホで遊ぶことを前提に開発されています。また、絵文字も多用して可愛らしさを出しています。

←

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>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas"></canvas>
    <script>
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// 背景の描画
      function drawBackground() {
        ctx.fillStyle = "#a6f0ff";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
      }

// モッコメリアンの描画
      function drawDino(x, y) {
        ctx.fillStyle = "#fd6f69";
        ctx.fillRect(x, y, 50, 50);
      }

// 果実の描画
      function drawFruit(x, y) {
        ctx.fillStyle = "#ffb5a7";
        ctx.beginPath();
        ctx.arc(x, y, 20, 0, 2 * Math.PI);
        ctx.fill();
      }

// ゲームオーバーの描画
      function drawGameOver() {
        ctx.fillStyle = "#000";
        ctx.font = "bold 50px sans-serif";
        const textWidth = ctx.measureText("GAME OVER").width;
        const x = canvas.width / 2 - textWidth / 2;
        const y = canvas.height / 2;
        ctx.fillText("GAME OVER", x, y);
      }

// ゲームの状態
      let score = 0;
      let isGameOver = false;
      let dinoX = 50;
      let dinoY = canvas.height - 100;
      let fruitX = canvas.width - 50;
      let fruitY = Math.random() * canvas.height;

// ゲームループ
      function gameLoop() {
        if (isGameOver) {
          drawGameOver();
          return;
        }

// 描画
        drawBackground();
        drawDino(dinoX, dinoY);
        drawFruit(fruitX, fruitY);

// 当たり判定
        if (dinoX + 50 >= fruitX && dinoX <= fruitX + 40
          && dinoY + 50 >= fruitY && dinoY <= fruitY + 40) {
          score++;
          fruitX = canvas.width - 50;
          fruitY = Math.random() * canvas.height;
        }

// 移動
        dinoY += 5;
        fruitX -= 10;

// 落下判定
        if (dinoY > canvas.height) {
          isGameOver = true;
        }

// スコア表示
        ctx.fillStyle = "#000";
        ctx.font = "bold 30px sans-serif";
        ctx.fillText(`SCORE: ${score}`, 20, 40);

// 再描画
        requestAnimationFrame(gameLoop);
      }

// タッチイベントの処理
      canvas.addEventListener("touchstart", (event) => {
        dinoY -= 100;
      });

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

このプログラムは、キャンバス要素を用いてゲームを描画しています。`gameLoop`関数を用いて、ゲームの状態を更新し、描画しています。`addEventListener`を用いて、タッチイベントを処理しています。

このゲームは、スマホで遊ぶことを前提に開発されています。また、絵文字も多用して可愛らしさを出しています。