Canvas Boilerplate is the go-to solution for quickly creating modern canvas pieces using ES6 and webpack.

Getting Started

Install dependencies:

    yarn

or

    npm install

Run webpack:

    npm start

Your canvas piece should open up automatically at http://localhost:3000 and you should see 'HTML CANVAS BOILERPLATE' on hover.

Fred-the-alien

❗ Note: This mini project is only for academic purposes. It will never be subject of comercialization.

📖 Story: I was looking for some nice web design videos, until I've found Chris. His youtube channel is full of useful tutorials.

His youtube channel: https://www.youtube.com/c/ChrisCourses

💡 Concept: The idea behind this mini project is to be able to build a small 2d game that enables your character to navigate on a platform, jump obstacles, avoid death piths which will eventually lead you to a loss.

My version

I've tried not to use the sprites that was used in the tutorial. Instead I've used another one.

---

The initial position of where the player is positioned. The player should be able to stay on top of the platform ✅ The background should be able to scroll when the player goes to the right side or left side ✅

---

The jumping functionality of the player:

The player should be able to jump while implementing concepts of gravity and velocity ✅

---

Adding death piths to the game that reinitializes the game ✅ Here I've tried to add an alert instead of a console log that way it's more visible to the player ✌️

---

Finally, the game should be able to display a win message when you reach the end of the final platform ✅

---

What I've learned 💎

•   new concepts like gravity, velocity, accelration, element positioning, setting up the 2 context
  

•   POO concepts implementation in javascript such as classes, objects, constructors...
  

•   Event listeners: I was really interested to see how a computer input source can be used to have control over the game, and how it works: converting each input from the keyboard to a code. And how the codes of different keys are called in a switch case to perform a certain action inside the game. 
  

---

Credits to 👍

• Chris Courses: https://chriscourses.com/
• Smashicons - Flaticon

---

Developped by 💻

KISSAI Sami