In the sea! Fish observation! Fish schooling! Check fish schools in 3D space using Three.js! Tap to capture! Compete for scores! Score is placed in the center of the screen!'s game

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 157

Warning: in_array() expects parameter 2 to be array, bool given in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 476

Warning: count(): Parameter must be an array or an object that implements Countable in /home/yukuri/crypto-app.tokyo/public_html/AIGameCreator/Com0.php on line 484
In the sea! Fish observation! Fish schooling! Check fish schools in 3D space using Three.js! Tap to capture! Compete for scores! Score is placed in the center of the screen!'s game | AI game creator

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

No:8555

5009

←

Prev Next

→

In the sea! Fish observation! Fish schooling! Chec..ALL
Developer anonymous｜Date and time 70/1/1 9:56:20
Build time unknown sec｜Game capacity 3.38KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Fish Observation Game</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <script>
    // Fish data
    const fishData = [
      { name: "Fish A", score: 10 },
      { name: "Fish B", score: 20 },
      { name: "Fish C", score: 30 },
      { name: "Fish D", score: 40 },
      { name: "Fish E", score: 50 },
    ];

// Randomly generate fish positions
    function generateFishPositions() {
      const positions = [];
      for (let i = 0; i < fishData.length; i++) {
        const x = Math.random() * 8 - 4;
        const y = Math.random() * 8 - 4;
        const z = Math.random() * 8 - 4;
        positions.push({ x, y, z });
      }
      return positions;
    }

let score = 0;

// Initialize scene, camera, and renderer
    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

// Create fish meshes
    const fishMeshes = [];
    const fishPositions = generateFishPositions();
    for (let i = 0; i < fishData.length; i++) {
      const fishGeometry = new THREE.BoxGeometry();
      const fishMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const fishMesh = new THREE.Mesh(fishGeometry, fishMaterial);
      fishMesh.position.set(fishPositions[i].x, fishPositions[i].y, fishPositions[i].z);
      scene.add(fishMesh);
      fishMeshes.push(fishMesh);
    }

// Create score text
    const scoreText = document.createElement("div");
    scoreText.style.position = "absolute";
    scoreText.style.top = "50%";
    scoreText.style.left = "50%";
    scoreText.style.transform = "translate(-50%, -50%)";
    scoreText.style.fontSize = "48px";
    scoreText.style.fontWeight = "bold";
    scoreText.style.color = "white";
    scoreText.innerHTML = "Score: 0";
    document.body.appendChild(scoreText);

// Add click event listener to capture fish
    document.addEventListener("click", onDocumentClick);

// Function to handle click event
    function onDocumentClick(event) {
      const mouse = new THREE.Vector2();
      mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
      mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, camera);

const intersects = raycaster.intersectObjects(fishMeshes);
      if (intersects.length > 0) {
        const fishMesh = intersects[0].object;
        const index = fishMeshes.indexOf(fishMesh);
        const fish = fishData[index];
        score += fish.score;
        fishMesh.position.set(Math.random() * 8 - 4, Math.random() * 8 - 4, Math.random() * 8 - 4);
        scoreText.innerHTML = "Score: " + score;
      }
    }

// Update the scene
    function animate() {
      requestAnimationFrame(animate);

for (const fishMesh of fishMeshes) {
        fishMesh.rotation.x += 0.01;
        fishMesh.rotation.y += 0.01;
      }

renderer.render(scene, camera);
    }

// Start the game
    animate();
  </script>
</body>
</html>