A 3D wireframe cube. you can control the camera with arrow buttons.'s game

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

No:6907

146

←

Prev Next

→

A 3D wireframe cube. you can control the camera wi..ALL
Developer User3943｜Date and time 23/7/4 7:16:37
Build time 37.284 sec｜Game capacity 3.688KB｜

Script

Here's an example of a game where you can control the camera using arrow buttons. It displays a wireframe cube in 3D using JavaScript and HTML:

To play the game, you can copy and paste the above code into a new HTML file and open it with your web browser. Use the arrow keys to control the camera and observe the wireframe cube rotating in 3D space. Adjust the cube size, camera movement speed, scaling, and other parameters to suit your preferences.

←

Prev　Next

→ 　

Back　

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

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

Here's an example of a game where you can control the camera using arrow buttons. It displays a wireframe cube in 3D using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
  <title>3D Wireframe Cube Game</title>
  <style>
    #canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  
  <script>
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const cubeSize = 100; // Adjust the size of the cube here
    const speed = 5; // Adjust the camera movement speed here

let rotationX = 0;
    let rotationY = 0;

function drawCube() {
      const halfSize = cubeSize / 2;

const vertices = [
        { x: -halfSize, y: halfSize, z: -halfSize },
        { x: halfSize, y: halfSize, z: -halfSize },
        { x: halfSize, y: -halfSize, z: -halfSize },
        { x: -halfSize, y: -halfSize, z: -halfSize },
        { x: -halfSize, y: halfSize, z: halfSize },
        { x: halfSize, y: halfSize, z: halfSize },
        { x: halfSize, y: -halfSize, z: halfSize },
        { x: -halfSize, y: -halfSize, z: halfSize }
      ];

ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.beginPath();
      // Front face
      connectVertices(vertices, 0, 1, 2, 3);
      // Back face
      connectVertices(vertices, 4, 5, 6, 7);
      // Connect front and back faces
      connectVertices(vertices, 0, 4);
      connectVertices(vertices, 1, 5);
      connectVertices(vertices, 2, 6);
      connectVertices(vertices, 3, 7);
      ctx.stroke();
    }

function connectVertices(vertices, ...indices) {
      for (let i = 0; i < indices.length; i++) {
        const vertexA = vertices[indices[i]];
        const vertexB = vertices[indices[(i + 1) % indices.length]];

const transformedA = projectVertex(vertexA);
        const transformedB = projectVertex(vertexB);

ctx.moveTo(transformedA.x, transformedA.y);
        ctx.lineTo(transformedB.x, transformedB.y);
      }
    }

function projectVertex(vertex) {
      const cosX = Math.cos(rotationX);
      const sinX = Math.sin(rotationX);
      const cosY = Math.cos(rotationY);
      const sinY = Math.sin(rotationY);

const y = vertex.y * cosX - vertex.z * sinX;
      const z = vertex.z * cosX + vertex.y * sinX;
      const x = y * sinY + vertex.x * cosY;

// Scaling and translating the projected 3D coordinates to 2D space
      const scale = canvas.width / (cubeSize * 4); // Adjust the scale factor here
      const offset = canvas.width / 2;

const finalX = x * scale + offset;
      const finalY = z * scale + offset;

return { x: finalX, y: finalY };
    }

function startGame() {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

window.addEventListener('keydown', handleKeys);

setInterval(drawCube, 16); // Adjust the refresh rate (in milliseconds) here
    }

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