Hey Guyzzz!
I sometimes wonder that is there anyone on this planet who doesn't like playing games??? If you ask me, I just love it. Being a 90's kid and coming from an era where Nintendo, Atari, Gameboy devices had been prevalent and they still are, I have been through it all.
So describing in this article which I am coming up with after so long, a platform game which overall is a simple yet interactive one. I am glad that I was able to stumble upon freeCodeCamp JavaScript projects curriculum for the same. This also has helped me in solidifying my JS skills much more when bringing it to practice. Got to learn some new concepts as well.
Gameplay
There is a shape object which is the main player. You have to help the player in navigating through yellow checkpoints. Use the keyboard arrow keys to move the player around and spacebar to jump.
Simple, ain't it?
Don't believe me?? Watch the gameplay yourself!
Key Learnings
Here are some of my key takeaways which i came across while building the game and learning them along:
Setting up and creating 2D graphics in JS and using the HTML <canvas> element. Talking about it a bit, it is used to draw graphics and is only a container for the same.
getContext(): It is a JavaScript DOM object method which is used to provide context for where the graphics will be rendered. It corresponds to the HTML <canvas> element and returns a drawing context - it has got the properties & functions we use to draw on the canvas.
requestAnimationFrame(): This Web API belongs to the Window object method in JavaScript and is used for creating simplified & smoother animations. It specifies the browser to call a specific function and update the animation for the next repaint. It takes only one argument, which is a callback and it's called when the next repaint occurrence has to happen.
clearRect(): This Web API is the HTML canvas method which is used to clear the pixels in a given rectangle. We can also use this method to clear the specific area of the canvas.
fillStyle: It is the HTML canvas property which is used to return the color, gradient & the pattern used to fill the drawing context of the canvas.
every(): As far as the gameplay is concerned, I learnt about the every() method which made sure that the player jumps in accordance with the platforms being laid on different levels in order to reach the checkpoint. This method is primarily used in JavaScript to check whether all the elements in an array pass the given test condition provided by the user.
<canvas id="canvas"></canvas>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// get the canvas id using getElementById() function and getContext method
// applied on canvas for creating 2D graphics.
// ctx in short, refers to the context used on the canvas.
const animate = () => {
requestAnimationFrame(animate); // callback passed for the next repaint occurence
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
// ctx is the context of the canvas getting rendered.
// 0: x-coordinate from the left canvas rectangle corner to be cleared
// 0: y-coordinate from the top canvas rectangle corner to be cleared
// width: width of the rectangle to be cleared
// height: height of the rectangle to be cleared
function checkAdult(age) {
return age >= 18;
}
const ageArray = [34, 23, 20, 26, 12];
console.log(ageArray.every(checkAdult));
// will log false as 12 is less than 18, should pass with all the elements
Conclusion
I am currently working on adding the score feature and if one wants to play the game again, then they can start over with it. Also in my opinion, I don't consider the game to be very much in a realistic & complete state. It's because while playing, I have thought of some addons, specially the score feature, which are currently in progress. I wanted to thank Quincy Larson for introducing JavaScript curriculum in freeCodeCamp as it has always helped in strengthening my skills and learning some new concepts, not only for JS, but also for other tech stacks as well.
Hope you liked the article!
Happy Reading!
Happy Coding!