ASMR Programming - Hangman Game with animations using JavaScript - No Talking

preview_player
Показать описание
Welcome to another ASMR programming session where we develop the Hangman Game with animations using HTML, CSS, and JavaScript. In this video, you'll experience the soothing sounds of keyboard typing and coding without any talking and without music. Perfect for those who enjoy ASMR and want to learn programming in a relaxing environment.

In this ASMR programming video, we focus on:

1. Building the amazing Hangman Game with HTML, CSS, and JavaScript.
2. Creating a responsive and interactive interface.
3. Using random word API for game.
4. Making the game more interesting with animations
5. Using front-end design techniques to enhance the user experience.
6. Whether you're a beginner or an experienced developer, this ASMR coding session is designed to help you improve your coding skills while enjoying the calming sounds of keyboard typing. Join me as we dive into the world of programming ASMR and create something amazing together.

My devices:
- Keyboard: Keychron K5
- Mouse: Logitech MX Master 3S

00:00:00 What we will code
00:00:16 Creating html, js and css files
00:00:31 Start to write HTML layout
00:02:50 CSS styles coding
00:13:24 Start programming logic in JavaScript
00:13:36 Add event listeners for start Hangman game
00:16:17 Coding function getRandomWord() that will receive words via API
00:19:56 Coding function initializeUI()
00:24:53 Coding function handleGuess()
00:29:29 Drawing Hangman game on canvas using JS
00:36:31 Spliting the drawing into two functions drawHangman() and drawGallows()
00:37:16 Coding function animateCircle() for head
00:40:49 Coding function animateLine() for body, legs and hands
00:44:01 Coding function animateDrawHangman()
00:47:51 Coding function clearCanvas()
00:48:43 Coding function updateUI()
00:51:22 Coding function checkWin()
00:52:40 Coding function showMessage()
00:58:13 Coding function enableKeyboard()
01:03:03 Coding function animateWin()
01:05:16 Coding function animateLose()
01:07:36 Testing animate functions in game and fixing bugs
01:10:52 Coding function resetAnimations()
01:15:25 Final result with play time

#hangman #asmrprogramming #javascript #notalking
Рекомендации по теме