contact.js

// ------------------------------------------------------------
// assets
// ------------------------------------------------------------

const ASSETS = {
  
    COLOR: {
      TAR: ['#959298', '#9c9a9d'],
      RUMBLE: ['#959298', '#f5f2f6'],
      GRASS: ['#eedccd', '#e6d4c5']    
    },
    
    IMAGE: {
      TREE: {
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/tree.png',
        width: 132,
        height: 192
      },
      HERO: {
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/hero.png',
        width: 110,
        height: 56
      },
      CAR: {
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/car04.png',
        width: 50,
        height: 36
      },
      FINISH: {
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/finish.png',
        width: 339,
        height: 180,
        offset: -.5
      },
      SKY: {
        src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/cloud.jpg'
      }
    },
      
    AUDIO: {
      theme: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/theme.mp3',
      engine: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/engine.wav',
      honk: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/honk.wav',
      beep: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/155629/beep.wav'
    }
    
  }
  
  // ------------------------------------------------------------
  // helper functions
  // ------------------------------------------------------------
  
  Number.prototype.pad = function(numZeros, char = 0) {
      let n = Math.abs(this)
      let zeros = Math.max(0, numZeros - Math.floor(n).toString().length )
      let zeroString = Math.pow(10, zeros).toString().substr(1).replace(0, char)
      return zeroString + n
  }
  
  Number.prototype.clamp = function(min, max) {
    return Math.max(min, Math.min(this, max))
  }
  
  const timestamp = _ => new Date().getTime()
  const accelerate = (v, accel, dt) => v + (accel * dt)
  const isCollide = (x1,w1,x2,w2) => (x1 - x2) ** 2 <= (w2 + w1) ** 2
  
  function getRand(min, max) {
      return Math.random() * (max - min) + min | 0;
  }
  
  function randomProperty(obj) {
      let keys = Object.keys(obj)
      return obj[keys[ keys.length * Math.random() << 0]]
  }
  
  function drawQuad(element, layer, color, x1, y1, w1, x2, y2, w2) {
    element.style.zIndex = layer
    element.style.background = color
    element.style.top = y2 + `px`
    element.style.left = x1 - w1 / 2 - w1 + `px`
    element.style.width = w1 * 3 + `px`
    element.style.height = y1 - y2 + `px`
  
    let leftOffset = w1 + x2 - x1 + Math.abs(w2/2 - w1/2)
    element.style.clipPath = `polygon(${leftOffset}px 0, ${leftOffset + w2}px 0, 66.66% 100%, 33.33% 100%)`
  }
  
  const KEYS = {}
  const keyUpdate = e => {
    KEYS[e.code] = e.type === `keydown`
    e.preventDefault()
  }
  addEventListener(`keydown`, keyUpdate)
  addEventListener(`keyup`, keyUpdate)
  
  function sleep(ms) {
      return new Promise(function(resolve, reject) {
          setTimeout(_ => resolve(), ms)
      })
  }
  
  // ------------------------------------------------------------
  // objects
  // ------------------------------------------------------------
  
  class Line {
  
    constructor() {
      this.x = 0
      this.y = 0
      this.z = 0
  
      this.X = 0
      this.Y = 0
      this.W = 0
  
      this.curve = 0
      this.scale = 0
  
      this.elements = []
      this.special = null
  
    }
  
    project(camX, camY, camZ) {
      this.scale = camD / (this.z - camZ)
      this.X = (1 + this.scale * (this.x - camX)) * halfWidth
      this.Y = Math.ceil( (1 - this.scale * (this.y - camY)) * height / 2 )
      this.W = this.scale * roadW * halfWidth
    }
  
    clearSprites() {
      for(let e of this.elements) e.style.background = 'transparent'
    }
  
    drawSprite(depth, layer, sprite, offset) {
  
      let destX = this.X + this.scale * halfWidth * offset
      let destY = this.Y + 4
      let destW = sprite.width * this.W / 265
      let destH = sprite.height * this.W / 265
  
      destX += destW * offset
      destY += destH * -1
  
      let obj = (layer instanceof Element) ? layer : this.elements[layer + 6]
      obj.style.background = `url('${sprite.src}') no-repeat`
      obj.style.backgroundSize = `${destW}px ${destH}px`
      obj.style.left = destX + `px`
      obj.style.top = destY + `px`
      obj.style.width = destW + `px`
      obj.style.height = destH + `px`
      obj.style.zIndex = depth
  
    }
  
  }
  
  class Car {
  
    constructor(pos, type, lane) {
  
      this.pos = pos
      this.type = type
      this.lane = lane
  
      var element = document.createElement('div')
      road.appendChild(element)
      this.element = element
  
    }
  
  }
  
   class Audio {
  
      constructor() {
  
          this.audioCtx = new AudioContext()
  
      // volume
      this.destination = this.audioCtx.createGain()
      this.volume = 1
          this.destination.connect( this.audioCtx.destination )
  
          this.files = {}
  
          let _self = this
          this.load(ASSETS.AUDIO.theme, 'theme', function(key) {
  
              let source = _self.audioCtx.createBufferSource()
              source.buffer = _self.files[key]
  
              let gainNode = _self.audioCtx.createGain()
              gainNode.gain.value = .6
              source.connect(gainNode)
              gainNode.connect(_self.destination)
  
              source.loop = true
              source.start(0)
  
          })
  
      }
  
    get volume() {
      return this.destination.gain.value
    }
  
    set volume(level) {
      this.destination.gain.value = level
    }
  
  
      play(key, pitch) {
          if (this.files[key]) {
              let source = this.audioCtx.createBufferSource()
              source.buffer = this.files[key]
              source.connect(this.destination)
        if(pitch) source.detune.value = pitch
              source.start(0)
          } else this.load(key, () => this.play(key))
      }
   
      load(src, key, callback) {
          let _self = this
          let request = new XMLHttpRequest()
          request.open('GET', src, true)
          request.responseType = 'arraybuffer'
          request.onload = function() {
              _self.audioCtx.decodeAudioData(request.response, function(beatportBuffer) {
                  _self.files[key] = beatportBuffer
                  callback(key)
              }, function() {})
          }
          request.send()
      }
  }
  
  // ------------------------------------------------------------
  // global varriables
  // ------------------------------------------------------------
  
  const highscores = []
  
  const width = 600
  const halfWidth = width / 2
  const height = 400
  const roadW = 4000
  const segL = 200
  const camD = 0.2
  const H = 1500
  const N = 70
  
  const maxSpeed = 200
  const accel = 38
  const breaking = -80
  const decel = -40
  const maxOffSpeed = 40
  const offDecel = -70
  const enemy_speed = 8
  const hitSpeed = 20
  
  const LANE = {
    A: -2.3,
    B: -.5,
    C: 1.2
  }
  
  const mapLength = 15000
  
  
  // loop
  let then = timestamp()
  const targetFrameRate = 1000 / 25 // in ms
  
  let audio
  
  // game
  let inGame, start, playerX, speed, scoreVal, pos, cloudOffset, sectionProg, mapIndex, countDown
  let lines = []
  let cars = []
  
  
  // ------------------------------------------------------------
  // map
  // ------------------------------------------------------------
  
  function getFun(val) {
    return i => val
  }
  
  function genMap() {
  
    let map = []
  
    for(var i = 0; i < mapLength; i += getRand(0, 50)) {
  
      let section = {
        from: i,
        to: (i = i + getRand(300, 600))
      }
  
      let randHeight = getRand(-5, 5)
      let randCurve = getRand(5, 30) * ((Math.random() >= .5) ? 1 : -1)
      let randInterval = getRand(20, 40)
  
      if(Math.random() > .9) Object.assign(section, {curve: _ => randCurve, height: _ => randHeight})
      else if(Math.random() > .8) Object.assign(section, {curve: _ => 0, height: i => Math.sin(i/randInterval)*1000})
      else if(Math.random() > .8) Object.assign(section, {curve: _ => 0, height: _ => randHeight})
      else Object.assign(section, {curve: _ => randCurve, height: _ => 0})
  
      map.push(section)
    }
  
    map.push({from: i, to: i + N, curve: _ => 0, height: _ => 0, special: ASSETS.IMAGE.FINISH})
    map.push({from: Infinity})
    return map
  
  }
  
  let map = genMap()
  
  // ------------------------------------------------------------
  // additional controls
  // ------------------------------------------------------------
  
  addEventListener(`keyup`, function(e){
  
    if(e.code === 'KeyM') {
      e.preventDefault()
  
      audio.volume = (audio.volume === 0) ? 1 : 0
      return
    }
  
    if(e.code === 'KeyC') {
      e.preventDefault()
  
      if(inGame) return
  
      sleep(0).then(_ => {
        text.classList.remove('blink')
        text.innerText = 3
        audio.play('beep')
        return sleep(1000)
      }).then(_ => {
        text.innerText = 2
        audio.play('beep')
        return sleep(1000)
      }).then(_ => {
  
        reset()
  
        home.style.display = 'none'
  
        road.style.opacity = 1
        hero.style.display = 'block'
        hud.style.display = 'block'
  
        audio.play('beep', 500)
  
        inGame = true
  
      })
  
      return
    }
  
    if(e.code === 'Escape') {
      e.preventDefault()
  
      reset()
    }
  
  
  })
  
  // ------------------------------------------------------------
  // game loop
  // ------------------------------------------------------------
  
  function update(step) {
  
    // prepare this iteration
    pos += speed
    while (pos >= N * segL) pos -= N * segL
    while (pos < 0) pos += N * segL
  
    var startPos = (pos / segL)  | 0
    let endPos = (startPos + N - 1) % N
  
    scoreVal += speed*step
    countDown -= step
  
    // left / right position
    playerX -= lines[startPos].curve / 5000 * step * speed
  
    if(KEYS.ArrowRight) hero.style.backgroundPosition = '-220px 0', playerX+=.007*step*speed
    else if(KEYS.ArrowLeft) hero.style.backgroundPosition = '0 0', playerX-=.007*step*speed
    else hero.style.backgroundPosition = '-110px 0'
  
    playerX = playerX.clamp(-3, 3)
  
    // speed
  
    if(inGame && KEYS.ArrowUp) speed = accelerate(speed, accel, step)
    else if(KEYS.ArrowDown) speed = accelerate(speed, breaking, step)
    else speed = accelerate(speed, decel, step)
  
    if(Math.abs(playerX) > 0.55 && speed >= maxOffSpeed) {
      speed = accelerate(speed, offDecel, step)
    }
  
    speed = speed.clamp(0, maxSpeed)
  
    // update map
    let current = map[mapIndex]
    let use = current.from < scoreVal && current.to > scoreVal
    if(use) sectionProg += speed*step
    lines[endPos].curve = use ? current.curve(sectionProg) : 0
    lines[endPos].y = use ? current.height(sectionProg) : 0
    lines[endPos].special = null
  
    if(current.to <= scoreVal) {
      mapIndex++
      sectionProg = 0
  
      lines[endPos].special = map[mapIndex].special
  
    }
  
    // win / lose + UI
  
    if(!inGame) {
  
      speed = accelerate(speed, breaking, step)
      speed = speed.clamp(0, maxSpeed)
  
    } else if(countDown <= 0 || lines[startPos].special) {
  
      tacho.style.display = 'none'
  
      home.style.display = 'block'
      road.style.opacity = .4
      text.innerText = 'INSERT COIN'
  
      highscores.push(lap.innerText)
      highscores.sort()
      updateHighscore()
  
      inGame = false
  
    } else {
  
      time.innerText = (countDown|0).pad(3)
      score.innerText = (scoreVal|0).pad(8)
      tacho.innerText = speed | 0
  
      let cT = new Date(timestamp() - start)
      lap.innerText = `${cT.getMinutes()}'${cT.getSeconds().pad(2)}"${cT.getMilliseconds().pad(3)}`
  
    }
  
  
    // sound
    if(speed > 0) audio.play('engine', speed * 4)
  
    // draw cloud
    cloud.style.backgroundPosition = `${ (cloudOffset -= lines[startPos].curve * step * speed * .13) | 0}px 0`
  
    // other cars
    for(let car of cars) {
  
      car.pos = (car.pos + enemy_speed * step) % N
  
      // respawn
      if( (car.pos|0) === endPos) {
        if(speed < 30) car.pos = startPos
        else car.pos = endPos - 2
        car.lane = randomProperty(LANE)
      }
  
      // collision
      const offsetRatio = 5
      if((car.pos|0) === startPos && isCollide(playerX * offsetRatio + LANE.B, .5, car.lane, .5)) {
        speed = Math.min(hitSpeed, speed)
        if(inGame) audio.play('honk')
      }
  
    }
  
    // draw road
    let maxy = height
    let camH = H + lines[startPos].y
    let x = 0
    let dx = 0
  
    for (let n = startPos; n < startPos + N; n++) {
  
      let l = lines[n % N]
      let level = N * 2 - n
  
      // update view
      l.project(playerX * roadW - x, camH, startPos * segL - (n >= N ? N * segL : 0))
      x += dx
      dx += l.curve
  
      // clear assets
      l.clearSprites()
  
      // first draw section assets
      if(n % 10 === 0) l.drawSprite(level, 0, ASSETS.IMAGE.TREE, -2)
      if((n + 5) % 10 === 0) l.drawSprite(level, 0, ASSETS.IMAGE.TREE, 1.3)
  
      if(l.special) l.drawSprite(level, 0, l.special, l.special.offset||0)
  
      for(let car of cars) if((car.pos|0) === n % N) l.drawSprite(level, car.element, car.type, car.lane)
  
      // update road
  
      if (l.Y >= maxy ) continue
      maxy = l.Y
  
      let even = ((n / 2) | 0) % 2
      let grass = ASSETS.COLOR.GRASS[even * 1]
      let rumble = ASSETS.COLOR.RUMBLE[even * 1]
      let tar = ASSETS.COLOR.TAR[even * 1]
  
      let p = lines[(n - 1) % N]
  
      drawQuad(l.elements[0], level, grass, width / 4, p.Y, halfWidth + 2, width / 4, l.Y, halfWidth)
      drawQuad(l.elements[1], level, grass, width / 4 * 3, p.Y, halfWidth + 2, width / 4 * 3, l.Y, halfWidth)
  
      drawQuad(l.elements[2], level, rumble, p.X, p.Y, p.W * 1.15, l.X, l.Y, l.W * 1.15)
      drawQuad(l.elements[3], level, tar, p.X,p.Y, p.W, l.X, l.Y, l.W)
  
      if(!even) {
        drawQuad(l.elements[4], level, ASSETS.COLOR.RUMBLE[1], p.X, p.Y, p.W * .4, l.X, l.Y, l.W * .4)
        drawQuad(l.elements[5], level, tar, p.X, p.Y, p.W * .35, l.X, l.Y, l.W * .35)
      }
  
    }
  
  }
  
  // ------------------------------------------------------------
  // init
  // ------------------------------------------------------------
  
  function reset() {
  
    inGame = false
  
    start = timestamp()
    countDown = map[map.length - 2].to / 130 + 10
  
    playerX = 0
    speed = 0
    scoreVal = 0
  
    pos = 0
    cloudOffset = 0
    sectionProg = 0
    mapIndex = 0
  
    for(let line of lines) line.curve = line.y = 0
  
    text.innerText = 'INSERT COIN'
    text.classList.add('blink')
  
    road.style.opacity = .4
    hud.style.display = 'none'
    home.style.display = 'block'
    tacho.style.display = 'block'
  
  }
  
  function updateHighscore() {
    let hN = Math.min(12, highscores.length)
    for(let i = 0; i < hN; i++) {
      highscore.children[i].innerHTML = `${(i+1).pad(2, '&nbsp;')}. ${highscores[i]}`
    }
  }
  
  function init() {
    
  
    document.getElementById('game').style.width= width + "px"
    document.getElementById('game').style.height = height + 'px'
  
    hero.style.top = height - 80 + 'px'
    hero.style.left = halfWidth - ASSETS.IMAGE.HERO.width / 2 + 'px'
    hero.style.background = `url(${ASSETS.IMAGE.HERO.src})`
    hero.style.width = `${ASSETS.IMAGE.HERO.width}px`
    hero.style.height = `${ASSETS.IMAGE.HERO.height}px`
  
    cloud.style.backgroundImage = `url(${ASSETS.IMAGE.SKY.src})`
    
    audio = new Audio
    Object.keys(ASSETS.AUDIO).forEach(key => audio.load(ASSETS.AUDIO[key], key, _=>0))
  
    cars.push(new Car(0, ASSETS.IMAGE.CAR, LANE.C))
    cars.push(new Car(10, ASSETS.IMAGE.CAR, LANE.B))
    cars.push(new Car(20, ASSETS.IMAGE.CAR, LANE.C))
    cars.push(new Car(35, ASSETS.IMAGE.CAR, LANE.C))
    cars.push(new Car(50, ASSETS.IMAGE.CAR, LANE.A))
    cars.push(new Car(60, ASSETS.IMAGE.CAR, LANE.B))
    cars.push(new Car(70, ASSETS.IMAGE.CAR, LANE.A))
  
    for (let i = 0; i < N; i++) {
      var line = new Line
      line.z = i * segL + 270
  
      for (let j = 0; j < 6 + 2; j++) {
        var element = document.createElement('div')
        road.appendChild(element)
        line.elements.push(element)
      }
  
      lines.push(line)
  
    }
  
    for(let i = 0; i < 12; i++) {
      var element = document.createElement('p')
      highscore.appendChild(element)
    }
    updateHighscore()
  
    reset()
  
    // START GAME LOOP
    ;(function loop(){
        requestAnimationFrame(loop)
  
        let now = timestamp()
        let delta = now - then
  
        if (delta > targetFrameRate) {
            then = now - (delta % targetFrameRate)
            update(delta / 1000)
        }
  
    })()
  
  }
  
  init()