Built Fighter Pilot Challenge – HTML Canvas & JavaScript

In this video you will learn how to create a simple game using the canvas in HTML5. The game in question has the player controlling a square with their mouse. The objective is to manoeuvre the square so that it avoids the shapes animating across the screen and bouncing of the edge of the canvas, for as long as possible and with the shapes travelling faster and faster as time progresses. This particular style of game was inspired by the so called “fighter pilot challenge” on the echalk website. The link to which can be found here: https://www.echalk.co.uk/amusements/Games/pilotTrainer/pilotTrainer.html 📚 Materials/References: Live Server, VSCode extension: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer 🧠 Concepts Covered: - How to create basic rectangular and square shapes in the HTML canvas API. - Detecting user click on canvas elements. - Basic collision detection in canvas between canvas edges and rectangles, and between the rectangles themselves. - How to progressively increase the game speed after an elapsed period of time. - How to use the Date object in JavaScript to record the time difference between two periods. As a bonus we will be covering the conversion of milliseconds into minutes that can be displayed in the proper minute format. 💻 Technologies used: - HTML5 and the canvas API - JavaScript (No jQuery) - CSS (No Bootstrap) If you enjoyed this video then please consider liking 👍 and subscribing. You would be doing me a huge favour if you did this and it would be greatly appreciated ❤️ by me. Likewise, if you have any queries or comments that you want answered. Then please, don’t hesitate post them down into the comments box below. I would love to hear back from you and will answer all of your questions to the best of my ability. Stay awesome guys. Peace and love. ☮️❤️ #JavaScript#HTML#Canvas#WebDev#CSS#HTML5#JavaScriptGame#FighterPilot#ArmyGame#DevTutorial