voxel's game | AI game creator

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

No:3908

862

voxel
Developer User3727｜Date and time 23/6/26 22:49:05
Build time 22.053 sec｜Game capacity 1.86KB｜

ボクセルは3Dのブロックを操作して、自分で作成した世界を自由に探索するゲームです。プレイヤーはスマホ操作でブロックを置いたり動かしたりすることができます。以下はJavaScriptで実装した例です。

この例では、10×10のブロックを生成して、canvas要素に描画しています。ブロックの色や形状は省略していますが、それらを変更することで自分で作成した世界を表現することができます。プレイヤーがブロックを操作する場合は、canvas要素上でマウスの座標を取得して、その座標に最も近いブロックを選択するなどの処理が必要です。また、ブロックを置く・動かすといったアクションを実現するために、イベントリスナーを設定する必要があります。これらの処理を組み合わせることで、より実用的なボクセルゲームを作成することができます。

→ 　

1　

0　

[PR]現在の売れ筋Kindle本ランキング

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

(C)2023 HisashiApp

ボクセルは3Dのブロックを操作して、自分で作成した世界を自由に探索するゲームです。プレイヤーはスマホ操作でブロックを置いたり動かしたりすることができます。

以下はJavaScriptで実装した例です。

<html>
<head>
  <title>ボクセル</title>
</head>
<body onload="start()">
  <canvas id="canvas"></canvas>
  <script>
    function start() {
console.log("start()");
      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

var blockSize = 50;
      var world = [];
      for (var x = 0; x < 10; x++) {
        for (var y = 0; y < 10; y++) {
          var block = { x: x * blockSize, y: y * blockSize, z: 0 };
          world.push(block);
        }
      }

drawWorld(world, ctx, blockSize);
    }

function drawWorld(world, ctx, blockSize) {
      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
      for (var i = 0; i < world.length; i++) {
        var block = world[i];
        ctx.fillRect(block.x, block.y, blockSize, blockSize);
      }
    }
  </script>
</body>
</html>

この例では、10×10のブロックを生成して、canvas要素に描画しています。ブロックの色や形状は省略していますが、それらを変更することで自分で作成した世界を表現することができます。

プレイヤーがブロックを操作する場合は、canvas要素上でマウスの座標を取得して、その座標に最も近いブロックを選択するなどの処理が必要です。また、ブロックを置く・動かすといったアクションを実現するために、イベントリスナーを設定する必要があります。これらの処理を組み合わせることで、より実用的なボクセルゲームを作成することができます。