FrogGame

by enbette

HTML

<img id="back" src="https://i.imgur.com/yk7zTo9.png" hidden="true" />
    <img id="closed" src="https://i.imgur.com/akrQzLs.png" hidden="true" />
    <img id="open" src="https://i.imgur.com/VcKscIo.png" hidden="true" />
    <img id="eyes" src="https://i.imgur.com/KxxtsjY.png" hidden="true" />
    <img id="eyes2" src="https://i.imgur.com/7V6e4Oe.png" hidden="true" />
    <img id="fly1" src="https://i.imgur.com/R1bZLLn.png" hidden="true" />
    <img id="fly2" src="https://i.imgur.com/vXuEjrI.png" hidden="true" />
    <img id="badfly" src="https://i.imgur.com/rYqczFm.png" hidden="true" />
    <img id="lost" src="https://i.imgur.com/RcuK3ty.png" hidden="true" />
    <img id="won" src="https://i.imgur.com/bkG7kc9.png" hidden="true" />
    <img id="demo" src="https://i.imgur.com/7YVRvwZ.png" hidden="true" />
    <img id="eyesClosed" src="https://i.imgur.com/wPHOT8i.png" hidden="true" />
    <canvas id="gameScreen" height="500" width="688"></canvas>
    <span
      id="fCode"
      style="
        display: none;
        position: absolute;
        left: 370px;
        top: 280px;
        font-size: 26px;
        color: #ffc2d1;
      "
      >Just4Froggy</span
    >
    <span
      id="mCode"
      style="
        display: none;
        position: absolute;
        left: 260px;
        top: 305px;
        font-size: 26px;
        color: #ffc2d1;
      "
      ></span
    >

JavaScript

let started = false
let wonScreen = document.getElementById("won")
let lostScreen = document.getElementById("lost")
let caughtCount = 0
let totalNeed = 30
let inv = false
let spdMult = 1
let time = 0
let anotherTimer = 0
let canvasElem = document.getElementById("gameScreen")
let back = document.getElementById("back")
let leftEye = { x: 319, y: 380 }
let rightEye = { x: 375, y: 380 }
let mouth = { x: 310, y: 413, textureId: "closed" }
let targetPos = { x: -1, y: -1 }
let curTargetPos = { x: 344, y: 428 }
let caughtFly = null

let pathLength = 0
var activeObj
var activeInterval

canvasElem.addEventListener(
  "click",
  function (e) {
    shoot(e)
  },
  true,
)
canvasElem.addEventListener("mousemove", function (e) {
  eyesMove(e)
})

let waitToStartInt = setInterval(waitToStart, 20)

function waitToStart() {
  canvasElem
    .getContext("2d")
    .drawImage(document.getElementById("demo"), 0, 0, 688, 500)
}

function shoot(e) {
  //console.log({X:e.offsetX,y:e.offsetY})
  if (!started) {
    started = true
    Game.start()
    setInterval(updateScreen, 20)
    clearInterval(waitToStartInt)
  } else if (time < 90 && !inv && mouth.textureId === "closed") {
    mouth.textureId = "open"
    mouth.x = 315
    mouth.y = 401
    targetPos = { x: e.offsetX, y: e.offsetY }
    let path = { x: targetPos.x - 344, y: targetPos.y - 428 }
    pathLength = Math.sqrt(path.x ** 2 + path.y ** 2)
  }
}
function eyesMove(e) {
  let x = e.offsetX
  let y = e.offsetY

  leftEye.x = lerp(
    319,
    325,
    clamp(Math.sign(x - 319) * Math.sqrt(Math.abs(x - 319) / 120), -1, 1),
  )
  leftEye.y = lerp(
    380,
    385,
    clamp(Math.sign(y - 380) * Math.sqrt(Math.abs(y - 380) / 120), -1, 1),
  )

  rightEye.x = lerp(
    375,
    381,
    clamp(Math.sign(x - 375) * Math.sqrt(Math.abs(x - 375) / 120), -1, 1),
  )
  rightEye.y = lerp(
    380,
    385,
    clamp(Math.sign(y - 380) * Math.sqrt(Math.abs(y -...