SUPER MARIO RACCOON is a simple but addictive game where the player needs to fly Mario accross an array of obstacles, which if collision occurs a life is taken away. The player can also collect "stars" (each coin has the value of +1) to achieve new highscores and collect "mushrooms" (each mushroom has the value of +1 , to a maximum of 3 lives).The player will start with 3 lives and the game will end only once it has 0 lives or falls below the canvas.
CANVAS The MVP version will be the first level of the game: a player and an array of enemies. Mario will be affected by gravity, so the player needs to make it fly using the space bar. Top of the canvas cannot be accessed and if Mario falls below canvas it is game over.
- Instructions button & instruction screen
- Highscore (using local storage)
- Add stars and stars counter on game screen
- Add mushrooms and lives counter on game screen
- Move background image shifting to the left of the canvas
- Install appropriate font
- Add music to the game (different one for splash/game/gameover)
- With time increase difficulty and change background image (3 levels)
Game(canvas) {
this.canvas
this.ctx
this.player
this.enemies
}
Game.prototype.start () {
function loop () {
//update variables
//clear canvas
//paint canvas
}
}
Game.prototype.stop () {
//when the game is over
}
Game.prototype.fly () {
//using space make mario fly up
}
Player(canvas, lives) {
this.x
this.y
this.direction 0
this.size
this.speed
this.lives
this.canvas
this.ctx
}
Player.prototype.setDirection() {}
Player.prototype.collidesWithEnemies() {}
Player.prototype.loseLife() {}
Player.prototype.update() {}
Player.prototype.draw() {}
Player.prototype.isDead() {}
Enemy(canvas, y, speed) {
this.x
this.y
this.direction 0
this.size
this.speed
this.canvas
this.ctx
}
Enemy.prototype.update()
Enemy.prototype.draw()
Enemy.prototype.isInScreen()
Enemy.prototype.die()
Definition of the different states and their transition (transition functions)
- splashScreen()
- buildSplash()
- addEventListener(startGame)
- starGame()
- destroySplash()
- create new Game()
- game.start()
- gameOver()
- destroyGame()
- buildGameOver()
- addEventListener(startGame)
- create files javascript
- Main - on website load buildSplash
- Main - addEventListener to "start game" button
- Main - destroySplash
- Main - buildGame
- Main - create instance of a new Game and start the game
- Main - game over functionality
- Main - build GameOverScreen
- Main - addEventListner to "restart" the game
- Game - start loop which draws frames of player and enemies
- Game - create instances of player and array of enemies
- Game - randomize position and speed of enemies using forEach
- Game - set direction of player on spacebar keyNote
- Game - end animationFrame when game is over
- Player - draw the player
- Player - remove lifes from player
- Enemy - draw the enemy
- Enemy - if enemy is outside screen remove enemy from array
URls for the project repo and deploy Link Repo Link Deploy
URls for the project presentation (slides) Link Slides.com