Minecraft block in Three.jr's game

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

No:17759

104

←

Prev Next

→

Minecraft block in Three.jr
Developer User7456｜Date and time 23/9/24 14:12:44
Build time 23.993 sec｜Game capacity 2.948KB｜

Script

Sure! Here's an example of a simple game implemented using JavaScript and displayed in a single HTML file. This game allows you to control a character represented by a Minecraft block using smartphone touch controls:

In this game, the user controls a Minecraft block by touching and moving their finger on the smartphone screen. The block will follow the movement of the finger. The game is displayed using the Three.js library which allows rendering 3D graphics in the browser. You can save the above code into a file with a `.html` extension and open it in a web browser to play the game. The Minecraft block will move according to your touch movements on the smartphone screen.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Minecraft Block Game</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  </head>
  <body>
    <script>
      // Global variables
      let canvas, renderer, scene, camera, block;

// Initialization function
      function init() {
        // Create canvas
        canvas = document.createElement("div");
        canvas.style.width = "100%";
        canvas.style.height = "100vh";
        document.body.appendChild(canvas);

// Create renderer
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(canvas.offsetWidth, canvas.offsetHeight);
        canvas.appendChild(renderer.domElement);

// Create scene
        scene = new THREE.Scene();

// Create camera
        camera = new THREE.PerspectiveCamera(
          45,
          canvas.offsetWidth / canvas.offsetHeight,
          0.1,
          1000
        );
        camera.position.z = 5;

// Create block geometry and material
        const geometry = new THREE.BoxGeometry(1, 1, 1);
        const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// Create block object
        block = new THREE.Mesh(geometry, material);
        scene.add(block);
        
        // Start rendering loop
        render();
      }

// Touch event handler
      function onTouch(event) {
        const touchX = event.changedTouches[0].clientX;
        const touchY = event.changedTouches[0].clientY;

const canvasWidth = canvas.offsetWidth;
        const canvasHeight = canvas.offsetHeight;

const normalizedX = (touchX / canvasWidth) * 2 - 1;
        const normalizedY = -(touchY / canvasHeight) * 2 + 1;

// Move block based on touch coordinates
        block.position.x = normalizedX;
        block.position.y = normalizedY;
      }

// Render loop function
      function render() {
        requestAnimationFrame(render);
        renderer.render(scene, camera);
      }

// Initialize game when page is loaded
      window.onload = init;

// Register touch event listener on canvas
      canvas.addEventListener("touchmove", onTouch, false);
    </script>
  </body>
</html>
```

In this game, the user controls a Minecraft block by touching and moving their finger on the smartphone screen. The block will follow the movement of the finger. The game is displayed using the Three.js library which allows rendering 3D graphics in the browser.

You can save the above code into a file with a `.html` extension and open it in a web browser to play the game. The Minecraft block will move according to your touch movements on the smartphone screen.