Coding / Programming Videos

Post your favorite coding videos and share them with others!

Arrow Swipe Game with HTML, CSS and JavaScript (Part 4 – Restart Game)

Download Video link >

Arrow Swipe Game with HTML, CSS and JavaScript (Part 4 – Restart Game)

Learn how to build an Arrow Swipe Game, with touchscreen support, using HTML, CSS and JavaScript!

Part 1 – Setting the Foundation: Basic HTML, CSS and JavaSript, Font Awesome Icons, Multi-device Swipe with JavaScript using Mouse Events (mousedown, mouseup) for traditional or non-touch screens and Touch Events (touchstart, touchend) for touch screens.

Part 2 – Animations: Animate.css Library, CSS Animations, Add/Remove CSS Animation Classes with JavaScript.

Part 3 – Progress Bar Countdown Timer: HTML and CSS for static Progress Bar, JavaScript (setInterval/clearInterval) for Dynamic (animated) Progress Bar.

Part 4 – Restart Game: HTML, CSS and JavaScript to create a Restart Game Button with the corresponding Functionality.

Code for this Project:

Suggested Videos:
Font Awesome 5 Icons:
Animations with Animate.css:

Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!

Email: [email protected]

Subscribe: ❤️




View Comments source >

Transcript view all >

00:00 hey what's up guys hope you are doing

00:02 well in the previous part we've added a

00:04 progress bar countdown timer to our game

00:07 however up to this point the only way to

00:10 restart the game is by loading a page so

Leave a Reply

Please Login to comment
Notify of
Translate »