black hole's game | AI game creator

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

No:4426

7076

black hole
Developer User3727｜Date and time 23/6/28 0:33:30
Build time 38.69 sec｜Game capacity 3.499KB｜

プレイヤーは画面中央に描かれたブラックホールを操作し、飛んでくる宇宙船を取り込んでいくゲームです。プログラムは以下の通りです。

mousemoveイベントでプレイヤーのタッチ操作を取得し、宇宙船とブラックホールの当たり判定を行っています。また、requestAnimationFrameメソッドで描画を継続的に行っています。ゲームの説明を補足すると、プレイヤーが操作するブラックホールは白い円として描画され、その周りを宇宙船が飛んできます。宇宙船を取り込むたびにスコアが増加し、宇宙船が画面外へ消えると減点されます。画面外に出た宇宙船は配列から削除されます。新しい宇宙船は一定確率で作成され、ランダムな色で描画されます。スマートフォンの画面サイズに合わせた設計となっています。実際に遊ぶには、上記コードを「blackhole.html」として保存して、スマートフォンのブラウザで開いてください。

→ 　

5　

3　

[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"/>
    <title>ブラックホールゲーム</title>
    <style>
      canvas {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="320" height="480"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");
      var ship = {x: canvas.width/2, y: canvas.height/2, r: 10};
      var score = 0;
      
      canvas.addEventListener("touchmove", function(event) {
        var touch = event.touches[0];
        ship.x = touch.pageX - canvas.offsetLeft;
        ship.y = touch.pageY - canvas.offsetTop;
      });
      
      function drawShip() {
        ctx.fillStyle = "white";
        ctx.beginPath();
        ctx.arc(ship.x, ship.y, ship.r, 0, Math.PI*2, false);
        ctx.fill();
      }
      
      function drawScore() {
        ctx.fillStyle = "white";
        ctx.font = "24px sans-serif";
        ctx.fillText("Score: " + score, 10, 30);
      }
      
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawShip();
        drawScore();
        
        // 宇宙船の描画と移動
        for (var i = 0; i < ships.length; i++) {
          var s = ships[i];
          ctx.fillStyle = s.color;
          ctx.beginPath();
          ctx.arc(s.x, s.y, s.r, 0, Math.PI*2, false);
          ctx.fill();
          s.x += s.vx;
          s.y += s.vy;
          
          // 宇宙船とブラックホールの当たり判定
          var dx = ship.x - s.x;
          var dy = ship.y - s.y;
          var dist = Math.sqrt(dx*dx + dy*dy);
          if (dist < ship.r + s.r) {
            score++;
            ships.splice(i, 1);
          }
        }
        
        // 宇宙船の追加
        var p = Math.random();
        if (p < 0.03) {
          var s = {
            x: Math.random()*canvas.width,
            y: -50,
            r: 20,
            vx: Math.random()*4 - 2,
            vy: Math.random()*4 + 2,
            color: "rgb(" + Math.floor(Math.random()*256) 
              + "," + Math.floor(Math.random()*256)
              + "," + Math.floor(Math.random()*256) + ")"
          };
          ships.push(s);
        }
        
        requestAnimationFrame(draw);
      }
      
      var ships = [];
      draw();
    </script>
  </body>
</html>
```

touchmoveイベントでプレイヤーのタッチ操作を取得し、宇宙船とブラックホールの当たり判定を行っています。また、requestAnimationFrameメソッドで描画を継続的に行っています。

ゲームの説明を補足すると、プレイヤーが操作するブラックホールは白い円として描画され、その周りを宇宙船が飛んできます。宇宙船を取り込むたびにスコアが増加し、宇宙船が画面外へ消えると減点されます。画面外に出た宇宙船は配列から削除されます。新しい宇宙船は一定確率で作成され、ランダムな色で描画されます。

スマートフォンの画面サイズに合わせた設計となっています。実際に遊ぶには、上記コードを「blackhole.html」として保存して、スマートフォンのブラウザで開いてください。