SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/arcade/games/fish.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>🎣 SIMON ARCADE — Fishing 3D</title>
<style>
html,body{margin:0;height:100%;overflow:hidden;background:#0a0f1a;font-family:ui-sans-serif}
#ui{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;pointer-events:none}
#castBtn{pointer-events:auto;padding:14px 32px;border:none;border-radius:12px;background:#6ae0ff;color:#001030;font-size:20px;font-weight:700;cursor:pointer;box-shadow:0 0 20px #6ae0ff88;transition:.2s}
#castBtn:hover{background:#00b4ff;color:white;box-shadow:0 0 30px #00b4ff}
#tension{position:absolute;bottom:40px;width:240px;height:28px;background:#111;border:2px solid #6ae0ff;border-radius:20px;overflow:hidden;display:none}
#bar{width:40px;height:100%;background:#48d18a;border-radius:20px;position:absolute;left:100px}
#status{position:absolute;bottom:80px;color:#eaf2ff;font-size:18px;text-shadow:0 0 8px #000}
</style>
</head>
<body>
<canvas id="scene"></canvas>
<div id="ui">
  <button id="castBtn">CAST 🎣</button>
  <div id="status"></div>
  <div id="tension"><div id="bar"></div></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
<script>
let scene,camera,renderer,water,rod,hook,fish=[],state="idle";
let velocity=0, tension=0, bar=document.getElementById('bar'), tbar=document.getElementById('tension');
let castBtn=document.getElementById('castBtn'),statusTxt=document.getElementById('status');
const clock=new THREE.Clock();

init(); animate();

function init(){
  scene=new THREE.Scene();
  camera=new THREE.PerspectiveCamera(60,innerWidth/innerHeight,.1,500);
  camera.position.set(0,2,6);

renderer=new THREE.WebGLRenderer({canvas:document.getElementById('scene'),antialias:true});
  renderer.setSize(innerWidth,innerHeight);
  renderer.setPixelRatio(devicePixelRatio);

const light=new THREE.DirectionalLight(0xffffff,1.1);
  light.position.set(5,10,5);
  scene.add(light);
  scene.add(new THREE.AmbientLight(0x335577,0.6));

// Water plane
  const geo=new THREE.PlaneGeometry(40,40,64,64);
  const mat=new THREE.MeshPhongMaterial({color:0x004488,shininess:60,transparent:true,opacity:.9,flatShading:true});
  water=new THREE.Mesh(geo,mat);
  water.rotation.x=-Math.PI/2;
  scene.add(water);

// Fishing rod
  const rodMat=new THREE.MeshStandardMaterial({color:0x222222,metalness:.3,roughness:.7});
  rod=new THREE.Mesh(new THREE.CylinderGeometry(.03,.05,2,12),rodMat);
  rod.position.set(0,1,-2);
  rod.rotation.x=Math.PI/8;
  scene.add(rod);

hook=new THREE.Mesh(new THREE.SphereGeometry(.05,12,12),new THREE.MeshStandardMaterial({color:0xff0000,emissive:0xaa0000}));
  hook.position.set(0,.2,-3);
  scene.add(hook);

// Fishes
  const fishMat=new THREE.MeshStandardMaterial({color:0xffcc4d,metalness:.4});
  for(let i=0;i<6;i++){
    let f=new THREE.Mesh(new THREE.SphereGeometry(.15,12,12),fishMat);
    f.position.set((Math.random()-0.5)*10,0.1,(Math.random()-0.5)*10);
    scene.add(f);
    fish.push(f);
  }

castBtn.onclick=cast;
  window.addEventListener('resize',()=>{camera.aspect=innerWidth/innerHeight;camera.updateProjectionMatrix();renderer.setSize(innerWidth,innerHeight);});
}

function animate(){
  requestAnimationFrame(animate);
  const dt=clock.getDelta();

// Wavy water
  for(let i=0;i<water.geometry.attributes.position.count;i++){
    const y=Math.sin(i/5+performance.now()/600)*0.05;
    water.geometry.attributes.position.setY(i,y);
  }
  water.geometry.attributes.position.needsUpdate=true;

// Fish wander
  fish.forEach(f=>{
    f.position.x+=Math.sin(performance.now()/500+f.position.z)*.002;
    f.position.z+=Math.cos(performance.now()/800+f.position.x)*.002;
  });

if(state==="casting"){
    hook.position.z-=velocity*dt;
    velocity=Math.max(0,velocity-4*dt);
    if(velocity<=0){ // stop
      state="waiting";
      statusTxt.textContent="Waiting for bite...";
      setTimeout(()=>bite(),1500+Math.random()*2000);
    }
  }
  else if(state==="fight"){
    tension+= (Math.random()-.5)*2;
    if(keys.ArrowUp) tension+=2;
    if(keys.ArrowDown) tension-=2;
    tension=Math.max(0,Math.min(100,tension));
    bar.style.left=`${tension*2}px`;
    if(tension<=0 || tension>=100){
      failCatch();
    }
  }

renderer.render(scene,camera);
}

function cast(){
  if(state!=="idle")return;
  statusTxt.textContent="Casting...";
  state="casting";
  velocity=10;
  castBtn.style.display="none";
}

function bite(){
  if(state!=="waiting")return;
  statusTxt.textContent="🐟 Bite! Keep bar in the middle!";
  tbar.style.display="block";
  tension=50;
  state="fight";
  setTimeout(()=>successCatch(),5000);
}

function failCatch(){
  statusTxt.textContent="❌ Line snapped!";
  reset();
}

function successCatch(){
  if(state!=="fight")return;
  statusTxt.textContent="✅ Fish caught!";
  tbar.style.display="none";
  setTimeout(reset,2000);
}

function reset(){
  state="idle";
  hook.position.set(0,.2,-3);
  castBtn.style.display="block";
  tbar.style.display="none";
}

let keys={};
window.addEventListener('keydown',e=>keys[e.key]=true);
window.addEventListener('keyup',e=>keys[e.key]=false);
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump