01/05/2020Maze Game

This Project was built as a fully responsive game to play on any device with a browser. It was made using the canvas API and stores user scores in local storage. While building this project, I realised that it would only run on some browsers, and did not work on my girlfriends phone when tested. I discovered this was due to safari not supporting ES6 Class syntax, and learnt about using compilers such as babel to make my project browser compatible.

One of the important takeaways of this project, is the importance of some Object-Oriented Programming techniques, and how important they are especially with regard to games, this simplifies the codebase, and means that all important game data can be stored in appropriate objects, as below:

   const gameData = {
     startingSession:true,
     active:false,
      level: parseInt(localStorage.getItem('level')) || 1,
      coins: parseInt(localStorage.getItem('coins')) || 0,
      canvas: document.querySelector("#game"),
      container: document.querySelector(".container"),
      color:{
       newHue:function(){gameData.color.gameHue =(Math.floor(Math.random()*356))},
       gameHue:1,
       player:function(){return `hsl( ${gameData.color.gameHue}, 60%, 50%)`},
       goal:function(){return `hsl( ${gameData.color.gameHue+178}, 60%, 50%)`},
       scoreBar:function(){return `hsl( ${gameData.color.gameHue}, 40%, 5%)`},
       nub:function(){return `hsl( ${gameData.color.gameHue}, 40%, 40%)`},
       wall:function(){return `hsl( ${gameData.color.gameHue}, 40%, 50%)`},
       back:function(){return `hsl( ${gameData.color.gameHue}, 40%, 15%)`}
      },
     display:{
       levelDisplay:document.querySelector("#level"),
       coinDisplay:document.querySelector("#coins"),
       timeDisplay:document.querySelector("#timer"),
       timeBackDisplay:document.querySelector("#timer-back"),
       resetDisplay:document.querySelector('#reset')
      },
    }