Sanrio Obstacle Course

About

This is a two-player games that allows users to choose their own characters and compete in a simple obstacle course.

URL to webpage

• https://sanrio-obstacle-course-erican1214.netlify.app/

Compatability/Accessibility

• This has only been tested on a Google Chrome Browser and may not be compatible with other browsers. The game is also not responsive to different window sizes. Currently not adjustable to play on mobile.

Credit Inspiration

This game is heavily inspired by the Google Chrome Dinosaur Game. The coding for the obstacle course is also borrowed from Kenny Yip Coding. Here is his Youtube tutorial and GitHub of his code of the Dino Game. My code of the obstacle course was taken from his tutorial, but I have revised it to be two-player.

Credits

Audio Attributions

• video-game-battle-music.wav by MichaelLydian

Image Attributions

• All characters from Sanrio Co.
• candy.png
• candy_cane.png
• checkmark.png
• cherry_background.jpg
• cloud_background.jpg
• copyright_icon.png
• daisy_background.jpg
• dessert_background.jpg
• lollipop.png
• music_icon.png
• pink_arrow.png
• pink_dessert_background.jpg
• pretzel.png
• purple_cloud_background.jpg
• scoreboard_icon.png
• sky_doodle_background.jpg
• question_mark.png
• x_button.png

Important Information for Downloading Packages

Applications Needed

• Node.js
• VSCode (or any IDE)
• Google Chrome (or any browser)

Packages Needed

• Express.js (The libraries and dependencies can be found in package-lock.json)

• To install Express.js, navigate to the project directory, and run the following command prompts (for Windows, use npm.cmd instead of npm)

  • npm init -y
  • npm install express

• More command prompts if necessary

  • npm install ejs

How to run webpage (if you're using Node.js)

• Navigate the project directory
• Type "node server.js" if you are only interacting
• Type "npm run dev" if you want to continuously edit this webpage (for Windows, use npm.cmd instead of npm)
• Go on your browser and type "localhost:3000" in the search bar

File Overview

← README.md

• This file currently, shows details about how this webpage works

← index.ejs

• HTML file that shows content of the webpage

← style.css

• CSS file that customizes that content of the webpage

← script.js

• Javascript file that adds interaction to the webpage and listens for events

← server.js

• Javascript file that connects the code to server

← package.json, package-lock.json

• Shows the necessary libraries/packages/dependencies for Node.js to run Express.js