Build JavaScript Candy Crush Game & other Games Projects

Learn to download Visual Studio Code, set up a games js folder, open it in VS Code, install live server, and customize font size, autosave, color theme, and tab size.

Create a two-player rock paper scissors game with a game container and play area, turn-based rounds, a 60-second timer, live scores, name customization, and local storage high scores.

Layout the html structure for a rock paper scissors game, creating html, css, and js files, then a game container with modals, controls, timer, scoreboard, and two-player sections.

Build the game interface with a game container, round result, i score, and modals for entering player names, plus a final scoreboard and winner announcement.

Style the project with a CSS reset and border-box, center the game container with flex, and implement a modal overlay with gradient content and focus-ready inputs.

Style the final scoreboard with a translucent white background, rounded corners, and spaced layout; tune headings, winner text, and responsive buttons with hover effects and transitions.

Style the project with responsive CSS for a candy crush game, using a white translucent game container, flexbox layouts for controls and scoreboard, and DRY techniques to group shared styles.

Configure the game area with display flex, center alignment, and spaced sections. Style player panels with color blocks, white text, padding, border radius, transitions, and a large versus choice display.

Learn styling techniques for a JavaScript candy crush game, including active and inactive states with fade and grow effects, spinning icons, round results, and responsive layout with media queries.

Create a rock paper scissors choices array with human readable names, and initialize core game variables: running state, player names and scores, time left, and round status.

Display the username modal when the start game button is clicked, switch display to block, focus the first player input, and allow enter to submit usernames and start the game.

Learn to wire the submit usernames button click, capture and trim player inputs, require both names, update player labels, hide the modal, reset fields, and start the game.

Start the start game function initializes the game by resetting scores, time left, current player, clearing choices and round results, updating the UI, and starting the timer.

Synchronize the scoreboard and timer to update player names and scores in the UI. Start timer uses setInterval to count down with template literals and ends the game at zero.

Learn how to implement updateCurrentPlayer in JavaScript to update player names and section labels, toggle active and inactive states, and control UI elements when the game starts or ends. The lecture covers DOM access, button disabling, and a no-game state return to prevent actions until restart.

Update current player manages round state and UI by showing round in progress, disabling inputs, toggling active states, and displaying whose turn it is, with initialization call.

The endGame function stops the countdown with clearInterval when time ends, determines the winner or a tie from player scores, and records the winner's name and score.

In endGame() part 2, update the I score, compare with the high score, store the new high score and winner in local storage, and reset the UI and game state.

Show the game over modal, populate player names and scores, announce the winner, and conditionally display a new high score with a ternary operator.

Close the game over modal with a click, then update and display the high score in the UI using local storage and a reset high score flow.

Create a getRandomChoice function to pick from a three-item choices array with math.random and math.floor, then wire player 1 and player 2 buttons to trigger the turn logic.

Learn how the playTurn function manages game logic and turn taking, using a player parameter, with early exits for invalid moves and with round in progress controlling the move.

Enhance the playTurn(player) function by storing the player's selection in a choice variable and animating it. Switch players, update indicators, and re-activate controls after a 300 milliseconds animation.

Animate the choice function uses the element id to spin a six-step rock-paper-scissors animation (100 ms per spin), then clears the interval and reactivates the next player.

Continue animateChoice() by generating a final choice with getRandomChoice after six spins, assign it to each player's final choice, then delay 500 ms to evaluate the round and update the score.

Implement the determineWinner(choice1, choice2) function using rock-paper-scissors rules to identify a tie, player one win, or player two win, as a prerequisite for the evaluate round function.

The evaluateRound function triggers after both players have played, waits 500 milliseconds, then computes and displays the round result using choice names and player choices, and stores the winner.

Use a switch statement to express the round winner from the determine winner function, handling player one, player two, or a tie, then update scores and reveal the result.

Explains the resetRound function that clears both players' choices to null, hides the round result, and reinitializes to player one for the next round with a 1500-millisecond delay.

Launch a speed typing game with random word prompts that reload for new sentences, track live words-per-minute and accuracy, and save high scores in local storage.

Build a speed typing game UI with HTML, CSS, and JavaScript, using a header, timer, score, progress bar, game area, and a typing input with clear IDs and classes.

Build the html structure for the game's stats panel and the user model, with stat cards for words per minute, errors, accuracy, and sentences, plus a start game button.

Master css styling basics: reset margins, use border-box, set Verdana font, apply a linear gradient background, and build a responsive flexbox container with centering, gaps, shadows, and rounded corners.

Style the game UI with a progress bar and progress field, apply gradient backgrounds, borders, and overflow handling; implement correct/incorrect/current character styling and a blinking blink animation.

In CSS styling part 3, learn styling for a candy-crush game UI: input fields with focus transitions, flexbox button layouts, disabled states, and a stats grid and start card.

Learn practical css styling for a model environment, using rgba backgrounds, fixed and absolute positioning, centering with top left 50% and transform, shadows, borders, focus states, and responsive layouts.

Learn how to define the game state as a single source of truth using an object literal in JavaScript, tracking is playing, is paused, user name, timing, and sentence indices.

The lecture explains building a shuffle sentences function to randomize sentence order using a spread operator and sort with Math.random, and integrating it in init game.

Learn startGame() logic to show the username modal, enforce a username, set the game to playing, record the start time, enable and focus the typing input, and update the UI.

Implement displayCurrentSentence to render the current, shuffled sentence from game state, building a div with class sentence text inside the sentence display and calling updateProgress.

Extend the displayCurrentSentence function by capturing the typing input, reading the value, and updating progress as a for loop iterates over each character of the current sentence, highlighting correct chars.

Implement the submitUsername function to capture and trim input, update the game state's username, display the player name, hide the modal, validate nonempty input, and start the game.

Start timer function initializes a setInterval every 1000 ms to decrement game state time left, update the timer display, and end the game when time left reaches zero.

Learn to implement a JavaScript countdown timer by building updateTimer inside update display, compute minutes and seconds with Math.floor and modulo, format with template literals and padStart to two digits.

Explain how endGame() computes final words per minute and accuracy from total typed, time, and errors, uses rounding, handles no typing, and updates the high score and username.

Save the high score to local storage with setItem and JSON.stringify, then load it on init using getItem and JSON.parse to update the high score display.

Demonstrate updateHighScoreDisplay and resetHighScore to update the header, remove stored high scores from local storage, and confirm resets while refreshing the wpm and username.

Implement the updateStats function to show real-time typing metrics—word per minute, accuracy, errors, and completed sentences—integrating with update display, end-game logic, and local storage high scores.

updateButtons() manages visual states of the start button text (start game or resume), the pause button, and the reset button, depending on whether the game is active, paused, or inactive.

Explore pauseButton() and resumeGame() in a JavaScript game, validating active and unpaused states, freezing the timer, disabling and re-enabling the typing input, and updating start and pause controls with focus.

Master resetting a JavaScript Candy Crush style game by restoring time to 120, clearing input, disabling typing, resetting sentence index and scores, and hiding the next button.

Explore the core logic of the typing game, wiring the input event to capture user keystrokes in real time, manage sentence display, and handle game state with initialization and reset.

Learn how a while loop processes each typed character in a typing game by tracking current position and typed length, comparing expected and typed characters to drive errors and termination.

Determine sentence completion by comparing current position to current sentence length with a greater than or equal to check, then show next and end the game when all sentences finish.

Learn to use nextSentence() to advance the current sentence, update stats, reset inputs, and hide the next button until typing finishes; fix resetGame() to end the game safely.

Prevent backspace and delete from working during a speed typing game by handling keydown events and calling preventDefault when the game runs and isn’t paused.

Learn to use reduce to compute the total characters in all game sentences, starting from zero, by summing sentence lengths and tracking the accumulator.

Calculate progress as typed characters divided by total characters times 100, then update the progress bar width with a template literal, using Math.mean to cap at 100%.

Learn to build a dynamic typing progress bar by tracking typed chars, current position, and completed sentences, using slice and reduce to compute the percentage of total characters.

This lecture introduces a two-player pong game. It uses name entry, start and reset, and arrow keys vs w/s as the ball speeds up.

Build the HTML structure for a pong game: create a game container with player names, timer, center line, paddles, ball, score, controls, and login and winner modals.

Style a css-driven game interface by applying border-box sizing, resetting paddings and margins, and centering content with flex; implement login and game-over modals with inputs and focus states.

Learn to style the game container for centered controls, flexbox-aligned player names and timer, and the game board with relative positioning, borders, height, width, and a centered center line.

Style the paddle and ball with precise dimensions, colors, borders, and absolute positioning; use top, left, and right offsets to align elements and manage disabled button states.

Define dom variables to interact with game elements such as player names, timer, paddles, ball, and scores. Access elements by id, update displays, and manage login model and winner model.

Explore game variables, calculate the balanced game board width and height with safe offsets, and configure paddle height, speed, and ball interactions for a JavaScript arcade game.

Define ball coordinates and delta x/delta y, set time intervals with setInterval, and store player usernames, scores, time left, and keyboard controls (w s, arrow up, arrow down).

Manage ice core high scores by storing them in the browser’s local storage, differentiating keys for each game, and resetting with a confirm dialog while updating the display.

End the game by determining a winner or tie, update the high score in local storage, and show the winner modal while re-enabling the start button.

Click the start game button reveals the login modal, clears inputs, and focuses player one. Press enter game to validate both usernames, display them in the UI, and trigger Startgame.

Learn how startGame triggers resetGame, starts the timer, sets up the game interval, moves the ball and paddles, detects collisions, and disables the start button during play.

Learn to implement startTimer in a JavaScript game: reset the game, start a timer, decrement time left, update the display, and end the game at zero.

Define resetBall to restore the ball to (x 388, y 190) and set a random starting direction. Configure stop button to clear intervals, reset game, and re-enable the start button.

Master the updateGame function and game physics by updating the ball’s x and y coordinates each frame, handling speed via ball time, and implementing wall-bounce collisions.

Apply ball collision logic with left and right paddles inside updateGame, using 24 and 752 offsets to detect edge contacts and trigger deflection that reverses horizontal direction.

The updateGame() function manages paddle collisions on the x axis, out-of-bounds scoring (five points), ball resets, and UI updates for scores and high score.

Implement keyboard controls by handling keydown and keyup events, updating a keys object for w, s, arrow up, and arrow down to true on press and false on release.

Move paddles in real time during gameplay only when the game runs, by updating paddle positions with keyboard input, enforcing boundaries, and using requestAnimationFrame for smooth animation.

Master a two-player tic tac toe game by building it with HTML, CSS, and JavaScript, tracking X, O, and tie scores, implementing restart and new game resets.

Create a tic tac toe game structure in html, link css and js, build a board with data-index cells, and display scores and status with restart and new game controls.

Explore css styling for a browser game, from fonts and background to flexbox centering, score layout, and building a three-by-three grid with grid layout and gaps.

Master css styling for a 3x3 game grid: 100px cells, 3rem bold X and O, white backgrounds, shadows, borders, hover scale, and flex controls with a winner glow animation.

Learn to set up dom variables and a gameState object for a tic tac toe game, including a nine-cell board, current player, scores, and win patterns.

Describe the restartGame function that resets the game board and state, clears all cells, removes winner animations, preserves scores, reactivates the game, and resets the status to X's turn.

Understand how the newGame() function resets the game state and scores, clears the board and the user interface, and sets X, O, and tie scores to zero.

Describe the handleCellClick(e) function that processes cell clicks using the event target and data-index to update the board and current player (X or O).

Use checkWin to detect a winner and update the status display with the current player. Terminate the game on a win or draw, animate winning cells, and update scores.

Define the updateScore function with a winner parameter; increment the score for x, o, or ties based on the winner, and update the on-screen text to display the new totals.

Explore array methods like every, some, and find to determine a winner by testing elements with callback functions, and identify the first matching value.

Determine if a clicked cell is owned by the current player using its index, then check win patterns for a winning pattern and prepare the first one for animation.

Implement the animate winning cells function to highlight the first winning pattern by using get winning pattern and applying the winner animation to cells by their data index.

Implement a checkDraw function to detect draws in tic tac toe by ensuring every cell on the board is filled, building on win checks and the get winning pattern function.