3D graphics displays a cube's game

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

No:37062

←

Prev Next

→

3D graphics displays a cube
Developer Game Studio｜Date and time 24/1/20 3:07:32
Build time 22.177 sec｜Game capacity 4.849KB｜

Script

Sure! Here's an example of a simple game that displays a rotating cube using HTML, JavaScript, and CSS:

This example sets up a WebGL context and uses shaders to render a rotating cube. The game can be played by simply opening the HTML file in a web browser on a smartphone or any other device that supports WebGL. Note that this example uses the `requestAnimationFrame` function to continuously update and render the cube, creating a smooth animation effect.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example of a simple game that displays a rotating cube using HTML, JavaScript, and CSS:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Rotating Cube Game</title>
  <style>
    #canvas {
      width: 100%;
      height: 100%;
    }
  </style>

// Set up WebGL context
      var gl = canvas.getContext("webgl");

// Set up the vertex shader
      var vertexShaderSource = `
        attribute vec3 aPos;

uniform mat4 uModel;
        uniform mat4 uView;
        uniform mat4 uProjection;

void main() {
          gl_Position = uProjection * uView * uModel * vec4(aPos, 1.0);
        }
      `;

var vertexShader = gl.createShader(gl.VERTEX_SHADER);
      gl.shaderSource(vertexShader, vertexShaderSource);
      gl.compileShader(vertexShader);

// Set up the fragment shader
      var fragmentShaderSource = `
        precision mediump float;

void main() {
          gl_FragColor = vec4(1.0, 0.5, 0.3, 1.0);
        }
      `;

var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
      gl.shaderSource(fragmentShader, fragmentShaderSource);
      gl.compileShader(fragmentShader);

// Create and link the shader program
      var shaderProgram = gl.createProgram();
      gl.attachShader(shaderProgram, vertexShader);
      gl.attachShader(shaderProgram, fragmentShader);
      gl.linkProgram(shaderProgram);
      gl.useProgram(shaderProgram);

// Define the vertices of the cube
      var vertices = [
        // Front face
        -0.5, -0.5, 0.5,
        0.5, -0.5, 0.5,
        0.5, 0.5, 0.5,
        -0.5, 0.5, 0.5,

// Back face
        -0.5, -0.5, -0.5,
        0.5, -0.5, -0.5,
        0.5, 0.5, -0.5,
        -0.5, 0.5, -0.5,
      ];

// Define the cube indices (to form triangles)
      var indices = [
        0, 1, 2, 0, 2, 3,  // Front face
        1, 5, 6, 1, 6, 2,  // Right face
        5, 4, 7, 5, 7, 6,  // Back face
        4, 0, 3, 4, 3, 7,  // Left face
        3, 2, 6, 3, 6, 7,  // Top face
        4, 5, 1, 4, 1, 0   // Bottom face
      ];

// Create buffer objects for vertices and indices
      var vertexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

var indexBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// Associate vertex attribute with shader attribute
      var posAttribLocation = gl.getAttribLocation(shaderProgram, "aPos");
      gl.enableVertexAttribArray(posAttribLocation);
      gl.vertexAttribPointer(posAttribLocation, 3, gl.FLOAT, false, 0, 0);

// Get uniform locations for model, view, and projection matrices
      var modelUniformLocation = gl.getUniformLocation(shaderProgram, "uModel");
      var viewUniformLocation = gl.getUniformLocation(shaderProgram, "uView");
      var projectionUniformLocation = gl.getUniformLocation(shaderProgram, "uProjection");

// Set up model, view, and projection matrices
      var modelMatrix = mat4.create();
      var viewMatrix = mat4.create();
      var projectionMatrix = mat4.create();
      mat4.perspective(projectionMatrix, 45 * Math.PI / 180, canvas.width / canvas.height, 0.1, 100.0);

// Rotate the cube
      var angle = 0;
      function rotateCube() {
        angle += 0.01;
        mat4.identity(modelMatrix);
        mat4.translate(modelMatrix, modelMatrix, [0.0, 0.0, -6.0]);
        mat4.rotateY(modelMatrix, modelMatrix, angle);
        mat4.rotateX(modelMatrix, modelMatrix, angle);

gl.uniformMatrix4fv(modelUniformLocation, false, modelMatrix);
        gl.uniformMatrix4fv(viewUniformLocation, false, viewMatrix);
        gl.uniformMatrix4fv(projectionUniformLocation, false, projectionMatrix);

gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.enable(gl.DEPTH_TEST);

gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
        gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);

requestAnimationFrame(rotateCube);
      }

rotateCube();
    }
  </script>
</head>
<body>
  <canvas id="canvas"></canvas>
</body>
</html>
```

Note that this example uses the `requestAnimationFrame` function to continuously update and render the cube, creating a smooth animation effect.