3D JS minecraft with button for mine , joystick for move, and button for build's game

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

No:10431

←

Prev Next

→

3D JS minecraft with button for mine , joystick fo..ALL
Developer Micah｜Date and time 23/7/31 11:24:42
Build time 24.364 sec｜Game capacity 3.308KB｜

Script

Sure! Here's an example of a simple 3D Minecraft game implemented as a single HTML file using JavaScript. The game allows you to mine blocks, move around using a joystick, and build new blocks using a button. The game interface is optimized for smartphone operation and utilizes pictograms where possible:

Please note that this is a simplified implementation and may not have the full functionality or features of a complete Minecraft game. However, it should give you a starting point to build upon and expand according to your requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>3D Minecraft Game</title>
  <style>
    #canvas {
      width: 100%;
      height: 100%;
    }
    #controls {
      position: absolute;
      bottom: 10px;
      left: 10px;
      display: flex;
      align-items: center;
    }
    .button {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      background-color: gray;
      border-radius: 50%;
    }
    .button:hover {
      cursor: pointer;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <div id="canvas"></div>
  <div id="controls">
    <div class="button" onclick="mineBlock()"></div>
    <div class="joystick" onmousemove="move(event)">
      <div class="handle"></div>
    </div>
    <div class="button" onclick="buildBlock()"></div>
  </div>
  <script>
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');

let playerX = 100;
    let playerZ = 100;
    let joystickHandleX = 0;
    let joystickHandleY = 0;
    let blocks = [];

function renderPlayer() {
      context.fillStyle = 'blue';
      context.fillRect(playerX, 0, 50, playerZ);
    }

function renderBlocks() {
      context.fillStyle = 'green';
      blocks.forEach((block) => {
        context.fillRect(block.x, 0, 50, block.z);
      });
    }

function render() {
      context.clearRect(0, 0, canvas.width, canvas.height);

renderPlayer();
      renderBlocks();

requestAnimationFrame(render);
    }

function mineBlock() {
      blocks = blocks.filter((block) => {
        return block.x !== playerX || block.z !== playerZ;
      });
    }

function move(event) {
      const joystick = document.querySelector('.joystick');
      const joystickRect = joystick.getBoundingClientRect();

joystickHandleX = event.clientX - joystickRect.left;
      joystickHandleY = event.clientY - joystickRect.top;

if (joystickHandleX < 0) {
        joystickHandleX = 0;
      } else if (joystickHandleX > joystickRect.width) {
        joystickHandleX = joystickRect.width;
      }

if (joystickHandleY < 0) {
        joystickHandleY = 0;
      } else if (joystickHandleY > joystickRect.height) {
        joystickHandleY = joystickRect.height;
      }

const maxX = joystickRect.width / 2;
      const maxY = joystickRect.height / 2;

const deltaX = joystickHandleX - maxX;
      const deltaY = joystickHandleY - maxY;

const normalizedDeltaX = deltaX / maxX;
      const normalizedDeltaY = deltaY / maxY;

const speed = 5;
      playerX += normalizedDeltaX * speed;
      playerZ += normalizedDeltaY * speed;
    }

function buildBlock() {
      blocks.push({ x: playerX, z: playerZ });
    }

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