Code a 3D cube game like Minecraft but with wireframes and untextured shaded faces add mobile controls's game

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

No:48438

←

Prev Next

→

Code a 3D cube game like Minecraft but with wirefr..ALL
Developer User20762｜Date and time 24/3/2 5:58:35
Build time 19.434 sec｜Game capacity 2.612KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>3D Cube Game</title>
  <style>
    canvas {
      display: block;
      margin: 0 auto;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="800" height="600"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

const cube = {
      vertices: [
        [-1, -1, -1],
        [1, -1, -1],
        [1, 1, -1],
        [-1, 1, -1],
        [-1, -1, 1],
        [1, -1, 1],
        [1, 1, 1],
        [-1, 1, 1]
      ],
      faces: [
        [0, 1, 2, 3],
        [1, 5, 6, 2],
        [5, 4, 7, 6],
        [4, 0, 3, 7],
        [0, 4, 5, 1],
        [3, 2, 6, 7]
      ],
      position: { x: 0, y: 0, z: -5 },
      rotation: { x: 0, y: 0, z: 0 }
    };

let isDragging = false;
    let lastX, lastY;

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < cube.faces.length; i++) {
        const face = cube.faces[i];
        ctx.beginPath();
        for (let j = 0; j < face.length; j++) {
          const v = cube.vertices[face[j]];
          const x = v[0] * Math.cos(cube.rotation.y) - v[2] * Math.sin(cube.rotation.y);
          const z = v[0] * Math.sin(cube.rotation.y) + v[2] * Math.cos(cube.rotation.y);
          const y = v[1] * Math.cos(cube.rotation.x) - z * Math.sin(cube.rotation.x);
          z = v[1] * Math.sin(cube.rotation.x) + z * Math.cos(cube.rotation.x);
          const screenX = x / (-z) * 200 + canvas.width / 2;
          const screenY = y / (-z) * 200 + canvas.height / 2;
          if (j === 0) {
            ctx.moveTo(screenX, screenY);
          } else {
            ctx.lineTo(screenX, screenY);
          }
        }
        ctx.closePath();
        ctx.stroke();
      }

requestAnimationFrame(draw);
    }

function handleTouchStart(event) {
      isDragging = true;
      lastX = event.touches[0].clientX;
      lastY = event.touches[0].clientY;
    }

function handleTouchMove(event) {
      if (isDragging) {
        cube.rotation.y += (event.touches[0].clientX - lastX) * 0.01;
        cube.rotation.x += (event.touches[0].clientY - lastY) * 0.01;

lastX = event.touches[0].clientX;
        lastY = event.touches[0].clientY;
      }
    }

function handleTouchEnd(event) {
      isDragging = false;
    }

canvas.addEventListener('touchstart', handleTouchStart);
    canvas.addEventListener('touchmove', handleTouchMove);
    canvas.addEventListener('touchend', handleTouchEnd);

draw();
  </script>
</body>
</html>
```