A game where we must capture monsters of three different types earth, water and fire with three unique monsters that are the strongest of each of the types and that there is an evil organization that can hire us or not according to choice of name tiplemon.'s game

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

No:2410

247

←

Prev Next

→

A game where we must capture monsters of three dif..ALL
Developer User3408｜Date and time 23/6/21 10:40:46
Build time 7.72 sec｜Game capacity 0.505KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p><!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script type="importmap">
      {
        "imports": {
          "three": "https://unpkg.com/three@0.152.2/build/three.module.js"
        }
      }
    </script>
    <script type="module">
      import * as THREE from "three";
      // サイズを指定
      const width = 320;
      const height = 540;

// レンダラーを作成
      const renderer = new THREE.WebGLRenderer({
        canvas: document.querySelector("#myCanvas"),
        antialias: true,
      });
      renderer.setPixelRatio(window.devicePixelRatio);
      renderer.setSize(width, height);
      // レンダラー側で影を有効に
      renderer.shadowMap.enabled = true;

// シーンを作成
      const scene = new THREE.Scene();

// カメラを作成
      const camera = new THREE.PerspectiveCamera(30, width / height);

// 光源を作成
      {
        const spotLight = new THREE.SpotLight(0xffffff, 4, 2000, Math.PI / 5, 0.2, 1.5);
        spotLight.position.set(500, 300, 500);
        spotLight.castShadow = true; // 影を落とす設定
        spotLight.shadow.mapSize.width = 512;
        spotLight.shadow.mapSize.height = 512;
        scene.add(spotLight);
      }

// 地面を作成
      {
        // 床のテクスチャー
        const texture = new THREE.TextureLoader().load("imgs/floor.png");
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping; // リピート可能に
        texture.repeat.set(10, 10); // 10x10マスに設定
        texture.magFilter = THREE.NearestFilter; // アンチエイリアスを外す

const floor = new THREE.Mesh(
          new THREE.PlaneGeometry(1000, 1000),
          new THREE.MeshStandardMaterial({
            map: texture,
            roughness: 0.0,
            metalness: 0.6,
          })
        );
        floor.rotation.x = -Math.PI / 2;
        floor.receiveShadow = true; // 影の設定
        scene.add(floor);
      }

// マス目を作成
      {
        // 立方体のマテリアルとジオメトリを作成
        const material = new THREE.MeshStandardMaterial({
          color: 0x22dd22,
          roughness: 0.1,
          metalness: 0.2,
        });
        const geometry = new THREE.BoxGeometry(45, 45, 45);

// 立方体を複数作成しランダムに配置
        for (let i = 0; i < 60; i++) {
          const box = new THREE.Mesh(geometry, material);
          box.position.x = Math.round((Math.random() - 0.5) * 19) * 50 + 25;
          box.position.y = 25;
          box.position.z = Math.round((Math.random() - 0.5) * 19) * 50 + 25;
          // 影の設定
          box.receiveShadow = true;
          box.castShadow = true;
          scene.add(box);
        }
      }

tick();

// 毎フレーム時に実行されるループイベントです
      function tick() {
        // 角度に応じてカメラの位置を設定
        camera.position.x = 500 * Math.sin(Date.now() / 2000);
        camera.position.y = 250;
        camera.position.z = 500 * Math.cos(Date.now() / 2000);
        // 原点方向を見つめる
        camera.lookAt(new THREE.Vector3(0, 0, 0));

// レンダリング
        renderer.render(scene, camera);
        requestAnimationFrame(tick);
      }
    </script>
  </head>
  <body>
    <canvas id="myCanvas"></canvas>
  </body>
</html>