A platformer game using Phaser3 library and Vanilla JS. This project features the knowledge of Webpack, ES6, JS Modules, Async code, DOM, JSON and Jest tests.

Overview

RUNNING BUNNY

A platformer game using Phaser3 library and Vanilla JS. This project features the knowledge of Webpack, ES6, JS Modules, Async code, DOM, JSON and Jest tests.

This little bunny got lost in the big city and now he has to run for his life! Help him to avoid the city buildings' holes and collecting stars for gaining strength.

Screenshots

screenshot

screenshot

screenshot

Game Design

  • This game is an Endless Runner Platform Game.
  • The platforms appear infinitely until the game ends and the game character (the bunny) has to jump from platform to platform;
  • If the bunny falls from the platform, the game is over;
  • Your progress (score) is measured by the number of stars you collect. Each star counts 10 points.
  • To jump, you have to simply click on the screen with the left mouse button, or use whether the key up arrow or space in your keyboard. Clicking twice, you'll jump 2x (limit of jumps at once);
  • If you have a score above 0 points, you can save your score to the leaderboard by submitting your name in the Game Over screen;
  • You can check the leaderboard by clicking on the "Leaderboard" on the Main Menu or Gave Over Scene.

Built With

  • Html & JavaScript;
  • Phaser3;
  • Webpack;
  • Bootstrap;
  • Git and GitHub.

Live Demo

Play the game!

How to Play

  1. Go to the Live Demo Link to play online;
  • If you'd like to download the game to run on your local machine, follow the steps "Running the game in your Local Machine" below;
  1. Click on the "Play" button to start the game;
  • Use your mouse clicking (inside the game screen) or the keys (up arrow or spacebar) to jump;
  • Avoid falling from the building's platforms and try to collect as many coins as you can;
  • Each coin collected gives you 10 points. You can look at your score at the top-left corner of the screen;
  • If you fall from a building platform, you will see the "Game Over" screen with your final score;
  1. When the game is over;
  • If your punctuation is above 0, feel free to save your score and submit it to the leaderboard;
  • If you want to play again, click on the "Play Again" button to restart the game from score 0, or;
  • Click on the "Leaderboard" button to see the current top eight scores;
  • Click on the "Menu" button to go to the Main Menu scene;
  1. Don't forget to have fun while playing the game. :)

Running the game in your Local Machine

Prerequisites

  • Node.js;
  • npm;
  • Code Editor.

Setup

To get a local copy and run this repository there are 2 possible ways:

- If you are not used to the terminal usage (non-technical user):

  1. on the very beginning of this page, in the up-left corner, you will see a green button "CODE", click there;

  2. After clicking, it will open menu options. Select to download the zip document and save it whenever you'd like, as shown in the image below:

tutorial1

  1. Unzip the file (you can unzip it by clicking with the right mouse option on the file, in "Extract All" and selecting a destiny folder);

  2. Open your Code editor > Select the option "File" in the top-left corner > And then "Open Folder" > Select the same folder you saved the extracted files as described in item 3;

  3. Now you have this whole project to run on your computer!

  • Install the necessary configurations to run the project: type npm install;
  • Run the application by typing npm start, launch your local browser and type the URL: http://localhost:8080 in the browser;
  1. Get back to the topic "How to Play" to read the game instructions.

- If you are used the terminal usage (technical user):

  1. Open your terminal and go to the directory where you want to clone the repository;

  2. Download/clone this repository GitHub Repository on your computer: type git clone https://github.com/anapdh/js-capstoneproject; (In case you need more help, check out this link: Cloning a GitHub Repository;

  3. Still in your terminal, use the command cd to go to the place where you saved/cloned the repository. For example: Desktop/User/js-capstoneproject/. You may use the command ls to see the files and repositories existent in your current location;

  4. Install the necessary configurations to run the project: type npm install;

  5. Now your environment is ready to run the project! Run the application by typing npm start, launch your local browser and type the URL: http://localhost:8080;

  6. Get back to the topic "How to Play" to read the game instructions.

Run tests

To run all the tests, type on your terminal the command jest or npm test.

PS: you need to have jest installed in your computer. If you're having any errors, please, type npm install --save-dev jest, or follow the Jest Documentation to install it globally.

Authors

👩🏼‍💻 Ana Paula Hübner

Acknowledgment

A special thanks to:

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

Show your support

Give a ⭐️ if you like this project!

📝 License

This project is MIT licensed.

You might also like...

Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results.

Select2 Select2 is a jQuery-based replacement for select boxes. It supports searching, remote data sets, and pagination of results. To get started, ch

Jan 1, 2023

JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard API using JavaScript async and await and add some styling.

Leaderboard Project JavaScript project for the Leaderboard list app, using Webpack and ES6 features, notably modules. this app consume the Leaderboard

May 20, 2022

Awesome Books project with ES6 is an application that was built using Vanilla JavaScript with ES6 features like using arrow functions. This application allows you to keep records of your favorite books.

Javascript Project Awesome Books with ES6 Using Javascript to create a simple Awesome Books project. Populating the books list and then removing one b

Sep 28, 2022

In this project, I restructure my previous Awesome books app code. The goal is to practice ES6 syntax and also make the code more organized by using ES6 modules.

Awesome Books In this project, I will restructure my previous Awesome books app code. The goal is to make it more organized by using modules. I will a

Aug 23, 2022

JavaScript project for the Leader-board list app, using webpack and ES6 features, notably modules

JavaScript project for the Leader-board list app, using webpack and ES6 features, notably modules

Leaderboard JavaScript project for the Leader-board list app, using webpack and ES6 features, Built With HTML CSS Javascript webpack Getting started t

Feb 17, 2022

A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules

A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules

LEADERBOARD In this activity I am setting up a JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules. I wil

Mar 16, 2022

A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules.

A JavaScript project for the Leaderboard list app, using webpack and ES6 features, notably modules.

Leaderboard ONJoseph Leaderboard project JavaScript leaderboard project using API. Description In this activity I will set up a JavaScript project for

May 12, 2022

A system for sharing tests between students. In RepoProvas anyone can look up old tests for their subjects and teachers or send old tests to help other students!

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

May 10, 2022

A mini figure Doctor Strange platformer game with doctor strange variants to fight monsters. Give a star and fork too.

A mini figure Doctor Strange platformer game with doctor strange variants to fight monsters. Give a star and fork too.

Doctor Strange : The Game This is a Doctor Strange variants based platformer game made in GDevelop. This game have 5 levels where you fight monsters a

Nov 5, 2022

⚡️The Fullstack React Framework — built on Next.js

⚡️The Fullstack React Framework — built on Next.js

The Fullstack React Framework "Zero-API" Data Layer — Built on Next.js — Inspired by Ruby on Rails Read the Documentation “Zero-API” data layer lets y

Jan 4, 2023

This project is based on the Awesome Books app repo, refactored with ES6 and organized with modules. The purpose of this project is to learn functionality organization using JavaScript modules.

Awesome Books with ES6 and modules A basic app project built with HTML, CSS and JS ES6 to keep track of awesome books. Built With HTML/CSS and JS best

Aug 27, 2022

To-do list is a tool that helps to organize your day. It simply lists the things that you need to do and allows you to mark them as complete. It is tested by JavaScript Unit testing using Jest framework. It is build by using ES6 and Webpack!

Project Name To Do list: interactive list Description the project. In this project, I added some functionality to my application to make it interactiv

Nov 11, 2022

We are a group of videogame URJC students making a brand new Phaser3.0 browser multiplayer game. Come and support us!

COOKIE MAYHEM - JUEGOS EN RED Este proyecto está sujeto a cambios. Somos un grupo de estudiantes de Diseño y Desesarrollo de Videojuegos en la Univers

Dec 19, 2022
Comments
  • Feature/running bunny

    Feature/running bunny

    This branch features:

    • A platform game using Phaser library;
    • A scoring system using the provided API so when the user completes a game they are given a score;
    • Game deployed to a server and accessible online;
    • Scenes (Boot, Preloader, Title, Game, and more);
    • The README includes:
      • A description of game design;
      • Instructions on how to run the game in a local environment;
    • The instructions in the README about the game design and development are written in a way that they are understandable for non-technical people.

    Explain what were your initial objectives (at the end of day 2) of the project and which ones did you (or not) achieve and why:

    My objectives when planning the game were mainly creating something where a sprite has to run from random obstacles and platform holes. I thought about creating something based on the 'Forest Gump' movie, in which the character had to keep running regardless of all obstacles in life. The time I had to build the project and lack of abilities using Phaser and sprites had made me change the idea and update the game to something 'simple, but that could at least implement some obstacles (the holes of the platform) and a purpose, like collecting coins to gain points. Even though I couldn't implement the game I planned on day 2, I'm still happy with the outcome of this project.

    opened by anapdh 0
Owner
Ana Paula Hübner
Full-Stack Developer | JavaScript, Ruby, Ruby on Rails, HTML & CSS, and continuously learning | Looking for new opportunities.
Ana Paula Hübner
ES6 Native @mentions

Tribute A cross-browser @mention engine written in ES6, no dependencies. Tested in Firefox, Chrome, iOS Safari, Safari, IE 9+, Edge 12+, Android 4+, a

zurb 1.8k Jan 4, 2023
A vanilla JS customisable select box/text input plugin ⚡️

Choices.js I'm looking for active maintainers for this project as I no longer have the time to support it. Please get in touch if you're interested ??

Josh Johnson 5.4k Jan 7, 2023
Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Autocomplete - Simple accessible autocomplete for vanilla javacript with support for remote & local data, ~3KB gzip

Grzegorz Tomicki 58 Dec 24, 2022
This project was developed to practice Front-end and Back-end comunication, data formatting, http requests GET, POST, DELETE, form validation, it also consumes a rest API

React Application ?? Demonstration of the application | Features | Technologies used | Application installation ?? Demonstration of the application Ap

Victor Lira 36 May 17, 2022
This is my first project of the year, I created with the theme of Takt Op. Destiny for having really liked the anime I hope you like it.

How to see project? Go to https://destiny.fhillslinger.vercel.app/ to see the project Introduction Well, I created this page because I really liked th

null 5 Nov 14, 2022
typeahead.js is a fast and fully-featured autocomplete library

typeahead.js Inspired by twitter.com's autocomplete search functionality, typeahead.js is a flexible JavaScript library that provides a strong foundat

Twitter 16.5k Dec 31, 2022
🔮 Fast and full-featured autocomplete library

Autocomplete A JavaScript library that lets you quickly build autocomplete experiences ?? Autocomplete v1 is in an alpha phase and early feedback is w

Algolia 2.3k Jan 6, 2023
🔮 Fast and full-featured autocomplete library

A JavaScript library that lets you quickly build autocomplete experiences All you need to get started is: A container to inject the experience into Da

Algolia 2.3k Jan 1, 2023