Name: PHP for Beginners: Part 4 - Build a Game
Rating: 4.8 (7 reviews)

Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Created byCoding Academy

Last updated 4/2022

English

What you'll learn

create a hangman word game using HTML, CSS, and PHP
create a HTML form to accept a user input
process user input from a HTML form using PHP
create sessions and use them to store and retrieve values
use the HTML5 canvas to draw shapes
use PHP array functions
retrieve a random word from a text file
use PHP conditional statements
use PHP foreach() loop
use CSS to style a page
use Bootstrap to style a page
create a modal popup using Bootstrap's modal functionality
Use 2-dimensional arrays to create a rating for the user's score

Course content

7 sections • 47 lectures • 4h 40m total length

The Development Environment5:53
Setting up the development environment

An Overview of Hangman3:11
In this lesson you will be provided with an overview of how we will proceed with the game development.
Grabbing the word length3:46
In this lesson you will learn how to grab the word length of the selected word
Selecting a random word from an array2:47
In this lesson you will learn how to select a word at random from an array.
Selecting a random word from a text file2:59
In this lesson you will learn how to select a random word from a text file.
Dealing with letter guesses4:10
In this lesson you will learn how to check the letter guesses against the selected word. At a very basic level, the initial functionality of the game is almost complete.
Creating the session variables7:11
In this lesson you will create the session variables.
Creating a basic HTML form4:46
In this lesson you will create a basic HTML input form for the letter guesses. You will learn how to use a simple PHP function to generate the alphabet within each select option within the form.
Checking letter guesses against the word7:20
In this lesson you will further develop the logic by checking if the submitted guessed letter:
has been guessed before
is contained in the word
When number of lives equals zero3:38
In this lesson we will deal with the logic for when the number of lives is equal to zero.
When number of lives is greater than zero7:32
In this lesson we deal with the logic for when the number of letters left to guess is greater than zero.
Dealing with a win5:10
In this lesson we will deal with the logic for a win.

Adding Bootstrap CSS files5:41
In this lesson you will be learn how to add Bootstrap CSS
Adding a menu5:27
In this lesson you will add a menu
Tidying the code - creating include files3:56
In this lesson you will learn how to create include files in order to keep the code a little clutter free.
Styling the Current State of Play5:17
In this lesson you will style the Current State of Play output
Styling the form5:21
In this lesson we will style the form using Bootstrap.
Creating a row and columns to hold the canvas and scoreboard2:44
In this lesson we will create the row and columns for the canvas and scoreboard
Styling the scoreboard10:22
In this lesson we will style the scoreboard.
Styling the You Won message with an alert box2:50
In this lesson we will style the "You Won!" message with a Bootstrap alert box.
Styling the You Lost message with an alert box9:07
In this lesson we will style the "You Lost" message with a Bootstrap alert box.

Setting up the canvas3:57
In this lesson you will learn how to create the HTML canvas.
Setting up the functions for the javascript7:56
In this lesson you will set up the functions for the javascript. Doing this will make it easier for you to change the drawing.
Setting up the javascript logic3:48
In this lesson you will set up the javascript logic.
Drawing on the canvas10:00
In this lesson you will draw on the HTML canvas.

Moving the dropdown and form button using Bootstrap CSS rules3:34
In this lesson you will move the input form and button to the middle under the current state of play output.
Adding a Dismissible Alert Box6:48
In this lesson you will learn how to add a dismissible alert box.
CHALLENGE - Add tracking for incorrect and correct guesses0:41
In this challenge you will need to add tracking for the total number of correct and incorrect guesses.
CHALLENGE SOLUTION - Add tracking for incorrect and correct guesses3:49
In this challenge you will learn how to add tracking for the total number of correct and incorrect guesses.
CHALLENGE - Add a scoreboard reset button0:24
In this challenge you need to create a scoreboard reset button.
CHALLENGE SOLUTION - Add a scoreboard reset button6:04
In this lesson you will learn one of many methods for creating a scoreboard reset button
CHALLENGE - Adding a modal popup to confirm scoreboard reset0:59
In this challenge you will add a modal popup to confirm the scoreboard reset.
CHALLENGE SOLUTION - Adding a modal popup to confirm scoreboard reset8:54
This challenge solution will show you how to add the modal popup to confirm the scoreboard reset.
CHALLENGE - Add a rating option2:56
In this challenge you need to add a rating option. Note that this challenge is significantly harder than the previous challenges.
CHALLENGE SOLUTION - Add a rating option18:02
This solution will show you how to add a rating option.
CHALLENGE - Replacing the dropdown with buttons0:46
In this challenge you will need to replace the dropdown letter selector with some buttons.
CHALLENGE SOLUTION Part 1 - Replacing the dropdown with buttons13:21
This is the first part of the solution to the challenge. We will take care of creating the buttons.
CHALLENGE SOLUTION Part 2 - Replacing the dropdown with buttons12:22
In this part of the solution we will deal with the AJAX call.
CHALLENGE SOLUTION Part 3 - Replacing the dropdown with buttons4:54
The final part of the challenge where we complete the functions and test to see if everything is working.

CHALLENGE - Add multiple categories of words3:58
In this challenge you need to implement multiple categories of words.
The challenge suggests 3 categories:
fruits
vegetables
science
However, you can implement whatever you wish.
The text files containing some words are attached as a download to this lecture.
CHALLENGE SOLUTION Part 1 - Adding the category icons7:55
In this lesson you will learn how to add the category icons.
CHALLENGE SOLUTION Part 2 - Adding the dropdown list of categories8:55
In this lesson you will learn how to add the dropdown list of categories
CHALLENGE SOLUTION Part 3 - Dealing with the functions12:40
In this lesson you will learn how to create the functions.
CHALLENGE SOLUTION Part 4 - Tweaking the icon output and form defaults5:55
In this lesson you will learn how to change the icons based on the category.
Bonus Lecture6:04

Requirements

Although every line of code is explained, some experience of HTML, CSS and PHP would be useful
You will need access to a web browser with an internet connection

Description

This course is intended for those students who would like to complete a simple project. You should be familiar with PHP code, HTML, and CSS. However, each step is fully explained in detail. If you are a proficient PHP coder then this course is probably not right for you! If you are familiar with my other courses then you should really enjoy this one as you will create a full project.

As an experienced teacher, I often find that some courses are just too long and students lose interest. By keeping this course short (around 4 hours of content) and targeted, you should learn some valuable skills quickly and effectively without the need to sit through hours of code. You will follow along as you and I work together to develop scripts. You will learn about my thought processes as we develop the hangman game. You will also see how I avoid many errors that plague beginner coders.

In this course I will show you how to create a simple hangman game using PHP, HTML, CSS, Bootstrap, and Javascript.

You will learn the basic code structure and then begin to enhance the game by adding HTML5 canvas graphics and some Bootstrap styling. You will continue to develop the game as the lessons progress and learn how to integrate PHP code with HTML, CSS and jQuery.

At the end of the course you will find a series of challenges with full solutions. These are intended to help you advance the game with some new features.

I strongly recommend that you watch the free course preview videos to see if this course will be suitable for your level of ability as it is aimed at beginners. If you like the previews, then join today.

I look forward to welcoming you to the course.

THE DEVELOPMENT ENVIRONMENT

IMPORTANT: Please read carefully

You are free to use ANY development environment including the one that you are already using (if any). In this course, I show you how to download and install Visual Studio Code and MAMP (both of which are FREE and available for Mac and Windows).

If you are unsure about which code editor option is best for you then I encourage you to contact me and I will be happy to discuss the options with you.

You can also follow this course using your own preferred code editor.

Once again, using Visual Studio Code with MAMP is OPTIONAL. You can use ANY suitable development environment of your choosing.

MY PROMISES TO YOU

As a registered teacher (yes, I teach in a real classroom every day), I strongly believe it is my job to ensure you feel totally supported when taking my classes. I therefore promise the following:

to respect you as a student and individual with your own learning needs
to be courteous and polite in our interactions
to answer your questions about the course content promptly
to fix any issues you may encounter with the lessons
to respond promptly to feedback

I really do look forward to welcoming you to this course. I am confident you will enjoy the approach of learning what each line of code actually means.

Join the course today.

Who this course is for:

This course is a short fun course intended to provide you with practical experience in developing a simple online word game.
This course is NOT a full web development course.
This course is NOT intended for advanced coders.

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 6min

Setting up the basic logic11 lectures • 53min

Styling the Game - HTML, CSS, and Bootstrap9 lectures • 51min

Drawing on the HTML Canvas4 lectures • 26min

Refactoring the Code2 lectures • 16min

Further Enhancements14 lectures • 1hr 24min

Extension Challenge: Adding Word Categories6 lectures • 45min

Requirements

Description

Who this course is for: