Computer Science 486 Mobile and Internet Game Development

Study Guide :: Unit 7

Graphics, Canvas, and Game

Overview

Unit 7 introduces the basic skills of using graphics and canvas with both HTML and JavaScript. By going through this unit, you will be able to know how to create canvas and components for a game, handle player’s actions, display message in the game, and understand the life cycle of a game, i.e., from the start of the game to its end.

Learning Objectives

After completing this unit, you will be able to:

• Create a canvas on the browser as the game area.
• Put components and graphics into the game area.
• Control components based on a player’s actions.
• Show message in the game.
• Play sounds for the game play.

Learning Activities

• First, read Unit 7 notes.
• Second, read the unit exercise below in this unit:
  • Choose any exercise and try to complete it.
  • Use the course discussion board to post your experience and solution to any one of the exercises.
  • Comment and make suggestions on another student’s posting.
  • Answer any questions posed to you.

Lesson Notes

1. On a webpage, in addition to text, image, url, and other objects, we can also create scalable vector graphics (SVG) according to our needs. Read “What is SVG?” (https://www.lifewire.com/svg-file-4120603) to get an idea about SVG and its advantages.
2. Let’s learn how to create and put different SVG shapes on the webpage. Please read the SVG Shapes at https://www.w3schools.com/graphics/svg_rect.asp for only the following sections: Rectangle, Circle, Ellipse, Line, Polyline, and Polygon.
3. You may use the <canvas> HTML tag to create a canvas on a webpage. Basically, a canvas can be used to represent a game area. You may try it based on https://www.w3schools.com/graphics/canvas_intro.asp.
4. With JavaScript’s help, we can draw and put graphics, text, and components on a canvas. Please read the following articles to get better ideas of how to do it:
   1. Draw on the Canvas with JavaScript (https://www.w3schools.com/graphics/canvas_drawing.asp)
   2. Canvas Coordinates (https://www.w3schools.com/graphics/canvas_coordinates.asp)
   3. Drawing Text on the Canvas (https://www.w3schools.com/graphics/canvas_text.asp)
   4. Drawing an Image on a Canvas (https://www.w3schools.com/graphics/canvas_images.asp)
5. Now, it is time to write your first browser-based game prototype with HTML5 and JavaScript step by step:
   1. First of all, let’s create a game area on the webpage and start the game. You may read Game Canvas. (https://www.w3schools.com/graphics/game_canvas.asp) for details.
   2. Since we have the game area, we can put a red block to represent the player’s avatar. Please refer to Game Components (https://www.w3schools.com/graphics/game_components.asp) if you need to.
   3. Players want to control their avatar in the game. We can add four buttons on the webpage to allow them to control the avatar, going up, right, left, and down. Read Game Controllers (https://www.w3schools.com/graphics/game_controllers.asp) to get an idea of how to do that, if you like.
   4. It would be better to have animations and obstacles for players; otherwise, it wouldn’t be called a game! Let’s add some moving bars in the game area and stop the game (i.e., game over) when the avatar touches any of the bars. Refer to Game Obstacles (https://www.w3schools.com/graphics/game_obstacles.asp) to see how to do this.
   5. In a game, usually some message may be shown for players to understand the goal and limitations as well as their performance. We can add a text component to the game area and make it show the points the player gets for making his or her avatar survive from not touching the moving bars. Read Game Score (https://www.w3schools.com/graphics/game_score.asp) to learn how to add a text component and update it during the game play.
   6. We were using a block to represent an avatar that is not user friendly at all. We can use an existing image to replace the block component. You may try it according to the instructions here  (https://www.w3schools.com/graphics/game_images.asp)
   7. Last but not least, having sound effects in a game is extremely important. How about we add an audio component and play the audio when the avatar controlled by the player hits a moving bar? Refer to Game Sound (https://www.w3schools.com/graphics/game_sound.asp) to see how it works.

Unit Exercise

1. Try a similar game that the unit teaches step by step, but this time, allow players to use the keyboard to control their avatars.
2. Let the player enter his or her name when the game is over and store his or her name and score in the database with JavaScript and PHP.
3. In the beginning of the game, have a ranked list link that allows players to click and see all players’ scores and ranks with JavaScript, Ajax, and PHP.
4. Add some moving “transparent buff” components with which the player can control his or her avatar to consume/pick up. When the avatar gets the buff, it won’t get hurt if the player hits the moving bar for ten seconds.
5. Similar to the above exercise #4, but this time, the player can use the X key to enable the buff effect manually any time he or she wants.
6. Try to make the bars move more quickly every 90 seconds and add “levels” to the game message and ranking list.