AnotherGame

by enbette

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/0.178.0/three.tsl.js"></script>
<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"...

CSS

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

JavaScript

import * as THREE from 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.178.0/three.tsl.js'
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( 688, 500 );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

function animate() {

  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;

  renderer.render( scene, camera );

}

let gameWon = false
let mainInt = null
let meta
let office={
  x:0,
  leftX:0,
  rightX:1000
}
let rotateLeftBtn ={
  hold(){
    office.x=clamp(office.x-1,office.leftX,office.rightX)
  },
}
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,
    ...