Introduction To HTML Games | Build a Game with HTML Tutorial

Why is the game simple?

The game is easy because it is made up of HTML, CSS, and Javascript only with very few lines of code. It uses easy CSS animation property to make the logo move and HTML DOM to do some actions like counting the number of taps made by the player to estimate the score and display it.

Game Components:

Add a Component,Made a component constructor, which adds components onto the game area.The object constructor is called component, and we made first component, called myGamePiece:

Example:

The components have properties and methods to control the appearances and movements.

Frames:

• To make the game ready for action, it will update the show 50 times per second, which is more like frames in a movie.
• First, make a new function called updateGameArea().
• In the myGameArea object, add an interval which runs the updateGameArea() function every 20th millisecond.
• Also add a function called clear(), that clears the full canvas.
• In the component constructor, add the function called update(), to handle the drawing of the component.
• The updateGameArea() function calls the clear() and the update() method.
• The result is that the component is drawn and cleared fifty times per second:

Example

Make it Move:

To prove that the red square is being drawn fifty times per second, we will modify the x position (horizontal) by one pixel every time we update the game area:

Example

Game Controllers

Need to control the red square. Add 4 buttons, up, down, left, and right. Write a function for every button to move the component in the selected direction. Made two new properties in the component constructor, and call the speedX and speedY. These properties are used as speed indicators. Add a function in the component constructor, called newPos(), which uses the speedX and speedY properties to modify the component’s position. The newpos function is called from the updateGameArea function before draw the component:

Stop Moving: If you want, you can make the square stop when you release a button. Add a function that will set speed indicators to 0. To deal with both normal screens and touch screens, will add the code for both devices.

Keyboard as Controller:Can also control the square by using the arrow keys on the keyboard.Create a method that clarifies if a key is pressed, and set the key property of the myGameArea object to the key code.When the key is released, set the key property to the false.

Multiple Keys Pressed:What if more than one key is pressed at the time?The component can only move horizontally or vertically.Now ,the component also moves diagonally.Make a keys array for the myGameArea object, and insert single element for each key that is pressed, and give it the value true , the value remains true until the key is no longer pressed, the value becomes false in the keyup event listener function.

Using The Mouse Cursor as a Controller:If you want to control the square by using the mouse cursor, add a method in myGameArea object that updates the x and y coordinates of the mouse cursor Touch The Screen to Control The Game.Can also control the square on a touch screen. Add a method in the myGameArea object that used the x and y coordinates of where the screen is touched.

Game Images

How to Use Images?

To add images on a canvas, the getContext(“2d”) object has built-in image properties and methods.To create the game piece as an image, use the component constructor, instead of referring to a color, must refer to the url of the image. And must tell the constructor that this component is of type “image”.

In the component constructor, test if the component is of type “image”, and make an image object by using the built-in “new Image()” object constructor.When we are ready to draw the image, we use the drawImage method instead of the fillRect method.

Change Images: Also can change the image whenever like by changing the src property of the image object of the component. If want to change the smiley everytime it moves, change the image source when the user clicks a button, and back to the normal when the button is not clicked.

Background Images: Add a background image to the game area by adding it as a component, and also update the background in each frame.

Moving Background:Change the background component’s speedX property to made the background move.

Background Loop:To make the same background loop forever, you must use a particular technique.Start by telling the component constructor that it is a background.The component constructor will then add the image 2 times, placing the second image immediately after the first image.

Advantages of using HTML5 in game development.

Optimized for Mobile Devices:Mobile traffic now made up more than half of how to connect to the Internet.It is important that everything created by developers is mobile friendly. HTML5 has the advantage of being wholly mobile-ready and means that websites can be built and apps can be produced that are fully optimized for every individual mobile device available.

Cross-Browser Support: Another thing that users have a choice over is the browser they used.Mac users tend to use safari, and there is Google Chrome, Firefox, Opera, Internet Explorer, etc.It is vital for developers to take this to consideration and make sure that everything they design is going to work on each browser.HTML5 doctype is explicitly designed with thisIt even provides access ability to users who might be using IE6 or a simple installation of JavaScript as these users will still be afforded access to the site .

Simple Audio and Video Implementation: It is almost without saying that a good game is going to need video and audio support.Would have the slightly frustrating needed for Flash Player or some other third-party media player, and often this meant that games would grind to a halt until users had installed it onto their system.HTML5 has brought in lots of new elements.

Geolocation API

• Everything we do in-app and game development is about catering to the requirement of the user.
• With the HTML5 Geolocation API, able to automatically place where the user is in the world and ensure that the content is catered to them.
• There are some consent problems here in order to track the location, but due to the benefits of web browsing with Geolocation on, most people will be happy for this to take place.

Doctype

• This is a backend improvement for the developer, it cuts down on the coding and tags.
• Using the doctype tag <"!DOCTYPE html"> means you can get away without copying and pasting sections of code that look horrendous and are virtually unreadable.
• It worked with legacy versions of all browsers, including IE6.

Accessibility Enhancements

Another aspect of designing a good game or website is to ensure that access ability is available to all.This means that no matter what the screen size, Resolution orientation of the device being used, the experience will be the same to all users.Screen readers are more simple to access the sections they require without any effort.

Code is Cleaner:Maintaining the code clean is something that has been taught in classrooms around the world for web programming languages across every genre.HTML5 now makes it simpler to do this as any semantic and descriptive code can be written cleanly and separated off in style form without any complex effort.

Specific Gaming Tag: There is also a specific <"canvas"> tag that has been added to HTML5 specifically for game development to offer things that are accessible and exciting to code.

Engagement: Also, within the new features, there is a drawing element that brings about the facility for animation and other necessary user engagement elements.This means that HTML5 is now even better when it comes to marketing and selling the game.

Storage Improvements: storage is another prominent feature of game design, and HTML5 has made improvements here too.Whether its client-side database storage or cookie style storage get a more better level of security and also have capabilities for simultaneous storage.