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

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

No:8555

4541

←

Prev Next

→

In the sea! Fish observation! Fish schooling! Chec..ALL
Developer User3589｜Date and time 23/7/16 22:57:15
Build time 30.251 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>