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: https://codepen.io/Coding_Journey/full/pQvKOj/

Suggested Videos:
Font Awesome 5 Icons: https://www.youtube.com/watch?v=rXiO4bm2Zpc
Animations with Animate.css: https://www.youtube.com/watch?v=FYtCTt7sKwY

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

Codepen: https://codepen.io/Coding_Journey/
Twitter: https://twitter.com/CodingJrney
Email: [email protected]

Subscribe: ❤️
https://www.youtube.com/channel/UCwpH4liYtBSiVXSfL8x2TyQ?sub_confirmation=1

source

Bookmark(0)
 

 

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
  Subscribe  
Notify of
Translate »