Coin Rush

A JavaScript game that uses device orientation.

View Application

Project Summary

The aim for this project is to create a JavaScript application that has either a device orienation, device motion, geolocation or get user media API. The JavaScript app must also contain either css animations or SASS.

This is a game that was made by using JavaScript, HTML5, CSS3 and device orientation. The goal is to collect as many coins as possible within the time limit. The reason why I made a game for this project is because I always wanted to create a game that is not only fun but addicted. Note: This is meant to be played on mobile devices with portrait orientation set to ON.

Skills

  • JavaScript
  • HTML5 - Canvas
  • CSS3

API Device Orientation

By using the canvas element and JavaScript I was able to create the player character as well as the coin. The player character is able to move by using the device orientation function and tracking the gamma and beta values.

Game Area

Using the canvas element also allowed me to create an area in which the player can never leave. This was done by setting the canvas width and height to the screen’s maximum width and height as well creating if statements to prevent the player’s position from going negative or beyond the canvas width and height.

Collision Detection

Whenever the player character touches the coin, the coin relocates to another position on the game area and the player’s score increases by one. I accomplished this by creating a variable that calculates the distance between player and the coin. If the distance is less then the combined value of the player’s radius and the coin’s radius, a function will activate causing the coin to relocate to another position within the game area.

High Score & Local Storage

Whenever the player beats the high score, it will be stored locally within the user’s browser. Every time the user visits the application or ends a play session, the high score will be displayed on the screen.

Project Turnout

What I took away from this project is a greater understanding of JavaScript and its capabilities. The project itself turned out to be a success as my classmates were trying to get the highest score.

web game

View Application

Back to the top