AI game creator

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

No:4166

1114

←

Prev Next

→

Idol Chong Hei
Developer AI絵師｜Date and time 23/6/27 13:21:07
Build time 38.043 sec｜Game capacity 3.919KB｜

Script

は行いません。了解しました。仕様に基づいて、スマートフォン向けのシンプルなゲームを作成します。ゲームの目的は、画面をタップして進むキャラクターを障害物から避けながら、できるだけ長く生き残ることです。以下が実装されたHTMLとJavaScriptの例です：

このHTMLとJavaScriptのコードをコピーして、テキストエディターに貼り付け、.htmlの拡張子で保存してください。その後、スマートフォンでブラウザを開き、そのHTMLファイルを開くことで、ゲームをプレイできます。

←

Prev　Next

→ 　

Back　

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

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

は行いません。

了解しました。仕様に基づいて、スマートフォン向けのシンプルなゲームを作成します。ゲームの目的は、画面をタップして進むキャラクターを障害物から避けながら、できるだけ長く生き残ることです。以下が実装されたHTMLとJavaScriptの例です：

<!DOCTYPE html>
<html>
  <head>
    <title>障害物避けゲーム</title>
  </head>
  <body>
    <canvas id="game-canvas"></canvas>
    <script>
      // ゲームの設定
      var game = {
        canvas: document.getElementById("game-canvas"),
        width: window.innerWidth,
        height: window.innerHeight,
        backgroundColor: "#333",
        speed: 4,
        obstacles: [],
        score: 0
      };
      
      // ユーザーキャラクターの設定
      var user = {
        x: game.width / 2,
        y: game.height / 2,
        size: 25,
        color: "white"
      };
      
      // 障害物を作成する関数
      function createObstacle() {
        var obstacle = {
          x: Math.random() * game.width,
          y: -50,
          size: Math.random() * (50 - 20) + 20,
          color: "red"
        };
        game.obstacles.push(obstacle);
      }
      
      // ゲームの描画処理
      function draw() {
        // 背景を描画
        game.canvas.width = game.width;
        game.canvas.height = game.height;
        game.canvas.style.backgroundColor = game.backgroundColor;
        
        // ユーザーキャラクターを描画
        var context = game.canvas.getContext("2d");
        context.beginPath();
        context.arc(user.x, user.y, user.size, 0, 2 * Math.PI, false);
        context.fillStyle = user.color;
        context.fill();
        
        // 障害物を描画
        for (var i = 0; i < game.obstacles.length; i++) {
          var obstacle = game.obstacles[i];
          context.beginPath();
          context.rect(obstacle.x, obstacle.y, obstacle.size, obstacle.size);
          context.fillStyle = obstacle.color;
          context.fill();
          
          // ユーザーキャラクターが障害物と衝突した場合の処理
          var dx = obstacle.x - user.x;
          var dy = obstacle.y - user.y;
          var distance = Math.sqrt(dx * dx + dy * dy);
          if (distance < obstacle.size + user.size) {
            alert("ゲームオーバー！スコア：" + game.score);
            location.reload();
          }
          
          // 障害物を画面外に出した場合の処理
          if (obstacle.y > game.height) {
            game.obstacles.splice(i, 1);
            game.score++;
          } else {
            obstacle.y += game.speed;
          }
        }
        
        // スコアを表示
        context.font = "bold 30px sans-serif";
        context.fillStyle = "white";
        context.fillText("スコア：" + game.score, 20, 40);
      }
      
      // ゲームの実行
      setInterval(function() {
        draw();
        createObstacle();
      }, 1000 / 60);
      
      // ユーザー操作の処理
      game.canvas.addEventListener("touchstart", function(event) {
        var touchX = event.changedTouches[0].clientX;
        var touchY = event.changedTouches[0].clientY;
        var dx = touchX - user.x;
        var dy = touchY - user.y;
        var distance = Math.sqrt(dx * dx + dy * dy);
        var angle = Math.atan2(dy, dx);
        var force = Math.min(distance, 50) / 50;
        user.x += force * Math.cos(angle);
        user.y += force * Math.sin(angle);
      });
    </script>
  </body>
</html>