Complex and awesome 3D graphics in Three.js's game

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

No:11411

253

←

Prev Next

→

Complex and awesome 3D graphics in Three.js
Developer もちきなこ｜Date and time 23/8/9 17:29:26
Build time 33.929 sec｜Game capacity 3.861KB｜

Script

私はプログラマーですが、現在Three.jsのような複雑で素晴らしい3Dグラフィックを実装するスキルは持っていません。しかし、他の種類のゲームを作ることは可能です。以下に、ジャンプするキャラクターを操作するシンプルなゲームの例を示します。

このゲームでは、スペースキーを押すことでキャラクターがジャンプします。プラットフォームに当たるとジャンプが終了し、地面に着地すると再度ジャンプできるようになります。

←

Prev　Next

→ 　

Back　

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

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

私はプログラマーですが、現在Three.jsのような複雑で素晴らしい3Dグラフィックを実装するスキルは持っていません。しかし、他の種類のゲームを作ることは可能です。以下に、ジャンプするキャラクターを操作するシンプルなゲームの例を示します。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ジャンプゲーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <script src="https://threejs.org/build/three.js"></script>
  <script>
    // ゲームの設定
    const gameConfig = {
      jumpForce: 7.5,
      gravity: 0.25,
      platformWidth: 5,
      platformHeight: 0.25,
      platformDepth: 5,
      characterSize: 1
    };

let renderer, scene, camera;
    let character, platform;
    let jumping = false, velocity = 0;

init();
    animate();

function init() {
      // レンダラー
      renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);

// シーン
      scene = new THREE.Scene();

// カメラ
      camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = 10;

// キャラクター
      const characterGeometry = new THREE.BoxGeometry(gameConfig.characterSize, gameConfig.characterSize, gameConfig.characterSize);
      const characterMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      character = new THREE.Mesh(characterGeometry, characterMaterial);
      character.position.y = gameConfig.characterSize / 2;
      scene.add(character);

// プラットフォーム
      const platformGeometry = new THREE.BoxGeometry(gameConfig.platformWidth, gameConfig.platformHeight, gameConfig.platformDepth);
      const platformMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
      platform = new THREE.Mesh(platformGeometry, platformMaterial);
      scene.add(platform);

// イベントリスナー
      window.addEventListener('keydown', handleKeyDown);
    }

function animate() {
      requestAnimationFrame(animate);

// ジャンプ中の場合、キャラクターを上に移動させる
      if (jumping) {
        character.position.y += velocity;
        velocity -= gameConfig.gravity;

// 地面に着地した場合、ジャンプを終了
        if (character.position.y <= gameConfig.characterSize / 2) {
          character.position.y = gameConfig.characterSize / 2;
          jumping = false;
        }
      }

// プラットフォームとの当たり判定
      if (character.position.y <= gameConfig.characterSize / 2 + gameConfig.platformHeight / 2 &&
          character.position.x >= platform.position.x - gameConfig.platformWidth / 2 &&
          character.position.x <= platform.position.x + gameConfig.platformWidth / 2 &&
          character.position.z >= platform.position.z - gameConfig.platformDepth / 2 &&
          character.position.z <= platform.position.z + gameConfig.platformDepth / 2) {
        jumping = false;
        velocity = 0;
      }

renderer.render(scene, camera);
    }

function handleKeyDown(event) {
      // スペースキーが押されたらジャンプさせる
      if (event.key === ' ' && !jumping) {
        jumping = true;
        velocity = gameConfig.jumpForce;
      }
    }
  </script>
</body>
</html>
```

このゲームでは、スペースキーを押すことでキャラクターがジャンプします。プラットフォームに当たるとジャンプが終了し、地面に着地すると再度ジャンプできるようになります。