気's game | AI game creator

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

No:3080

3247

気
Developer User3494｜Date and time 23/6/23 18:26:51
Build time 36.852 sec｜Game capacity 4.095KB｜

になる内容でも可。課題にチャレンジしてみました！以下が実際のプログラムです。

このプログラムは「Emoji Dodge」という名前のゲームです。「🙂」の絵文字で操作するキャラクターを障害物から避けてスコアを競うゲームです。ゲームの説明は以下の通りです。 - 左右に「←→」キーで操作することができます。 - 赤い正方形が障害物です。当たるとゲームオーバーです。 - 障害物を避けていくと、スコアが加算されていきます。5点ごとに障害物の速度が上がり、難易度が上がります。 - スコアは「🙂」の絵文字と合わせて画面上部に表示されます。スマホでも遊べるように、キャンバスサイズを画面サイズに合わせて調整してあります。また、キー操作ができるように「window.addEventListener」でキー入力のイベントを追加しています。絵文字を使っているので、ちょっぴりユニークなゲームになっていますね！

→ 　

2　

0　

　
　

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

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

(C)2023 HisashiApp

になる内容でも可。

課題にチャレンジしてみました！以下が実際のプログラムです。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Emoji Dodge</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #000;
        color: #FFF;
        text-align: center;
        font-size: 2rem;
        overflow: hidden;
      }
      
      canvas {
        display: block;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
    <script>
      // キャンバスの設定
      const canvas = document.getElementById("myCanvas");
      const ctx = canvas.getContext("2d");
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
      
      // ゲームに必要な変数の定義
      const emoji = "🙂";
      const emojiSize = 60;
      let score = 0;
      let speed = 4;
      let emojiX = canvas.width / 2 - emojiSize / 2;
      let emojiY = canvas.height - emojiSize - 20;
      let obstacleX = Math.random() * canvas.width;
      let obstacleY = -100;
      let obstacleSize = 80;
      
      // ユーザー操作の処理
      window.addEventListener("keydown", (e) => {
        switch(e.keyCode) {
          case 37: // 左矢印キー
            if (emojiX > 0) {
              emojiX -= 20;
            }
            break;
          case 39: // 右矢印キー
            if (emojiX < canvas.width - emojiSize) {
              emojiX += 20;
            }
            break;
        }
      });
      
      // 障害物の生成
      function createObstacle() {
        ctx.fillStyle = "#FF0000";
        ctx.fillRect(obstacleX, obstacleY, obstacleSize, obstacleSize);
      }
      
      // 障害物の移動
      function moveObstacle() {
        obstacleY += speed;
        if (obstacleY > canvas.height) {
          obstacleX = Math.random() * canvas.width;
          obstacleY = -100;
          score++;
          if (score % 5 === 0) {
            speed++;
          }
        }
      }
      
      // 当たり判定の処理
      function checkCollision() {
        if (obstacleY + obstacleSize > emojiY && obstacleY < emojiY + emojiSize) {
          if (obstacleX + obstacleSize > emojiX && obstacleX < emojiX + emojiSize) {
            alert(`ゲームオーバー！\nスコア：${score}点`);
            location.reload();
          }
        }
      }
      
      // 描画処理
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        createObstacle();
        moveObstacle();
        checkCollision();
        ctx.fillText(`${emoji}${score}`, canvas.width / 2, 50);
        ctx.fillText("←→キーで移動", canvas.width / 2, canvas.height - 50);
        ctx.font = `${emojiSize}px sans-serif`;
        ctx.fillText(emoji, emojiX, emojiY);
        requestAnimationFrame(draw);
      }
      
      // ゲームスタート
      draw();
    </script>
  </body>
</html>

このプログラムは「Emoji Dodge」という名前のゲームです。「🙂」の絵文字で操作するキャラクターを障害物から避けてスコアを競うゲームです。

ゲームの説明は以下の通りです。
- 左右に「←→」キーで操作することができます。
- 赤い正方形が障害物です。当たるとゲームオーバーです。
- 障害物を避けていくと、スコアが加算されていきます。5点ごとに障害物の速度が上がり、難易度が上がります。
- スコアは「🙂」の絵文字と合わせて画面上部に表示されます。

スマホでも遊べるように、キャンバスサイズを画面サイズに合わせて調整してあります。また、キー操作ができるように「window.addEventListener」でキー入力のイベントを追加しています。

絵文字を使っているので、ちょっぴりユニークなゲームになっていますね！