CafeGame

by enbette

HTML

<img id="demo" src="Demo.png" hidden="true" />

<img
  id="bunBottom"
  src="https://i.ibb.co/ccMbtJtH/bun-Bottom.png"
  hidden="true"
/>
<img id="intro" src="https://i.ibb.co/hRCJDzB9/Intro2.png" hidden="true" />
<img id="loss" src="https://i.ibb.co/h1mCsjQP/Loss.png" hidden="true" />
<img id="bunTop" src="https://i.ibb.co/nqDLnpF2/bunTop.png" hidden="true" />
<img id="burgerEgg" src="https://i.ibb.co/G6vtRmn/egg.png" hidden="true" />
<img id="burgerGreen" src="https://i.ibb.co/whnDdsQF/green.png" hidden="true" />
<img id="meatDone" src="https://i.ibb.co/mCsw9Hq2/meatDone.png" hidden="true" />
<img id="meat4" src="https://i.ibb.co/HLyjWr1z/meat-Burned.png" hidden="true" />
<img id="meat2" src="https://i.ibb.co/8nt513tt/meat-Medium.png" hidden="true" />
<img
  id="meat3"
  src="https://i.ibb.co/fVTXBLdf/meat-Done-Grill.png"
  hidden="true"
/>
<img id="meat1" src="https://i.ibb.co/1h8NbNr/meatRaw.png" hidden="true" />

<img id="glass" src="https://i.ibb.co/RGdszV2H/glass.png" hidden="true" />
<img
  id="glassGreen1"
  src="https://i.ibb.co/TqHCVq1h/glass-Green1.png"
  hidden="true"
/>
<img
  id="glassGreen2"
  src="https://i.ibb.co/4ZNMHK5s/glass-Green2.png"
  hidden="true"
/>
<img
  id="glassGreen3"
  src="https://i.ibb.co/6q5X24v/glass-Green3.png"
  hidden="true"
/>
<img
  id="glassGreen4"
  src="https://i.ibb.co/RGJhWkSn/glass-Green4.png"
  hidden="true"
/>
<img
  id="glassYellow1"
  src="https://i.ibb.co/p6WMfzbF/glass-Yellow1.png"
  hidden="true"
/>
<img
  id="glassYellow2"
  src="https://i.ibb.co/xKZ0fg1h/glass-Yellow2.png"
  hidden="true"
/>
<img
  id="glassYellow3"
  src="https://i.ibb.co/Hf8jSPG4/glass-Yellow3.png"
  hidden="true"
/>
<img
  id="glassYellow4"
  src="https://i.ibb.co/1GHQm9Zh/glass-Yellow4.png"
  hidden="true"
/>
<img id="green1" src="https://i.ibb.co/MDb6FRVy/green1.png" hidden="true" />
<img id="green2" src="https://i.ibb.co/0jtrTPjJ/green2.png" hidden="true" />
<img...

CSS

canvas {
    background-image: url('https://i.ibb.co/hRCJDzB9/Intro2.png')
}

JavaScript

let gameWon = false
let mainInt = null
let meta
let mousePos = { x: 0, y: 0 }
let pairs = [
  {
    left: {
      id: 'Toraix',
      dx: -70,
      dy: 0,
    },
    right: {
      id: 'SadBread',
      dx: 70,
      dy: 0,
    },
  },
  {
    left: {
      id: 'TiredRen1',
      name: 'TiredRen',
      dx: -50,
      dy: 0,
    },
    right: {
      id: 'TiredRen2',
      name: 'TiredRen',
      dx: 50,
      dy: 0,
    },
  },
  {
    left: {
      id: 'Tomomo',
      dx: -50,
      dy: 0,
    },
    right: {
      id: 'Enbette',
      dx: 50,
      dy: 0,
    },
  },
  {
    left: {
      id: "ICan'tWhistle",
      dx: -70,
      dy: 0,
    },
    right: {
      id: 'Mimimumu',
      dx: 70,
      dy: 0,
    },
  },
  {
    left: {
      id: 'Live2Shine1NoCar',
      name: 'Live2Shine',
      dx: -50,
      dy: 0,
    },
    right: {
      id: 'Live2Shine2',
      name: 'Live2Shine',
      dx: 50,
      dy: 0,
    },
  },
  {
    left: {
      id: 'Callisto',
      name: 'Callisto',
      dx: -50,
      dy: 0,
    },
    right: {
      id: 'Glade',
      name: 'Glade',
      dx: 50,
      dy: 0,
    },
  },
  {
    left: {
      id: 'Athena1',
      name: 'Athena',
      dx: -55,
      dy: 0,
    },
    right: {
      id: 'Athena2',
      name: 'Athena',
      dx: 55,
      dy: 0,
    },
  },
]

function shuffleArray(array) {
  let currentIndex = array.length,
    randomIndex
  while (currentIndex !== 0) {
    randomIndex = Math.floor(Math.random() * currentIndex)
    currentIndex--
    ;[array[currentIndex], array[randomIndex]] = [
      array[randomIndex],
      array[currentIndex],
    ]
  }
  return array
}

let queue = shuffleArray(pairs)
let curQueueI = 0

let customers = {
  left: {
    pair: null,
    initPos: { x: -200, y: 250 },
    realPos: { x: -200, y: 250 },
    outPos: { x: 1000, y: 250 },
    pos: { x: 200, y: 250 },
   ...