Computer Science 486 Mobile and Internet Game Development

Study Guide :: Unit 5

Introduction of HTML5 and Java Script

Overview

Before we step into the development of browser-based games, this unit first introduces different kinds of browser-based games developed in HTML5 and JavaScript to give you a better idea of what you can do later. Unit 5 also focuses on the necessary concepts and knowledge of HTML5 and JavaScript that you will need for game development.

Learning Objectives

After completing this unit, you will be able to:

• Experience playing a browser-based game.
• Use basic HTML5 tags and understand what they can do.
• Understand the necessary programming concepts of JavaScript.
• Use necessary HTML5 and JavaScript to design and develop an interactive webpage.

Learning Activities

• First, read Unit 5 notes.
• Second, read the Unit Exercise, which you will find later in this document:
  • 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.
• Third, read the Game Design Document below in this unit and discuss it with your Academic Expert, and share the approved game design with your peers on the discussion board.

Lesson Notes

1. Try the following browser-based games developed in HTML5 & JavaScript.
   1. Smarty Bubbles (https://html5games.com/Game/Smarty-Bubbles/d8f24956-dc91-4902-9096-a46cb1353b6f)
   2. Civilizations Wars (https://html5games.com/Game/Civilizations-Wars-Master-Edition/2001681a-0f53-4691-9318-04e419ac7c0c)
   3. Crokinole (https://butchersworkshop.com/crokinole/)
   4. Fairy Cards (https://html5games.com/Game/Fairy-Cards/18f4fd6f-a216-46ea-a464-b86516f7039e)
   5. SpaceJack Bowling (https://www.spacejack.ca/bowling/)
   6. Spaaace (https://spaaace.herokuapp.com/)
   7. Shifty Gears (https://www.gamesgames.com/game/shifty-gears)

2. Watch HTML Tutorial for Beginners (https://www.youtube.com/watch?v=hrZqiCUx6kg) to learn all necessary HTML concepts and tags that you need for HTML5 game development.

   There are more than 80 HTML tags; however, for browser-based game development in HTML5 and JavaScript, you need to know only a few tags.

3. Download and install Notepad++ (https://notepad-plus-plus.org/), which is a free simple editor that you need for HTML5 game development and backbone-service PHP webpages later in this course.
4. Watch What is JavaScript? (https://www.youtube.com/watch?v=nItSSTwBvSU) to know what JavaScript is and looks like.

5. Watch the JavaScript Fundamentals for Beginners (https://www.youtube.com/watch?v=vEROU2XtPR8) to know what JavaScript is and what it looks like.

   Although JavaScript is a programming language you might not have used before, you don’t have to know all the classes and functions of it but only its fundamentals like syntax, variables, operators, arithmetic, basic data types, string methods, conditions, and loops.

6. Read the JavaScript tutorial at https://www.w3schools.com/js/ for the following sections: Home, Introduction, Output, Syntax, Comments, Variables, Operators, Arithmetic, Data Types, Functions, Scope, Events, String Methods, Number Methods, Math, Random, Dates, Arrays, Conditions, Loop For, Loop While, and Debugging.
7. Watch the “HTML5 beginners” tutorials to learn what form and elements are on a webpage.
   1. Introduction to Forms (https://www.youtube.com/watch?v=QsW0cjsBf6o)
   2. Text and Password Fields (https://www.youtube.com/watch?v=AWqUHx0GcjA)
   3. Select Lists (https://www.youtube.com/watch?v=9iWBbkMNI90)
   4. Checkboxes and Radio Buttons (https://www.youtube.com/watch?v=pCa3-RdFWas)
   5. Textarea (https://www.youtube.com/watch?v=Kcn3QwFfaUM)
   6. Buttons (https://www.youtube.com/watch?v=enYp4AEAIfs)
   7. Labels and Fieldsets (https://www.youtube.com/watch?v=LuJulyokmjE)
   8. Styling Forms (https://www.youtube.com/watch?v=F7A5p2Xah0U)
8. Watch Send Email Using Web Form (https://www.youtube.com/watch?v=J5mwgNp7Z7g) and read “How to add a subject, body text and other cool stuff” (https://www.zaposphere.com/html-email-links-code/) to learn how to make a Contact Us webpage for your game.
9. Watch How to Submit and Process a Form with JavaScript (https://www.youtube.com/watch?v=TUnfb944HFI) to get a better idea of the use of JavaScript to access the form data entered by the player.

Unit Exercise

1. Create a webpage with HTML tags and open the webpage directly with your web browser.
2. With HTML form elements, create an Avatar Attribute page that shows the players their avatars’ current stats (e.g., level, gold, experiences, strength, agi, etc.) in the game.
3. Create a Contact Us webpage that includes a drop-down list for players to choose the game or game version that they are playing, a textbox for players to enter their account ID, a text area for them to enter the issues they encountered in the game, and a Send button for them to submit a ticket to the game’s customer service representative, i.e., your email address with subject “Customer Request.”
4. Enhance the above exercise with JavaScript. First, use JavaScript to check whether or not the player has entered his or her account ID as well as the message. Second, use random() and fromCharCode() to automatically generate a six-character alphanumeric ticket number in the format “AA##AA,” in which A indicates a character and # means a number (e.g., XH23OF). Third, automatically change the email subject to “Customer angela323’s Request (ticket number: XH23OF)” if the player’s account ID is angela323 and the ticket number generated is XH23OF.

Game Design Document

1. Make a game plan for Assignment 2 (browser-based game). For game planning, you will prepare a short Game Design Document (GDD) (3 to 4 pages long) of the important information about the game you wish to develop.

   Note that if you wish to extend this game further for your final project (Assignment 3), keep in mind which features of the game you wish to extend. However, you don’t have to include those features in the GDD of Assignment 2.

   In the GDD for Assignment 2, include the following sections:

   1. Game Title: Game name
   2. Backstory: Focuses the story of the game you plan to develop.
   3. Characters: Highlight the specifics of your game characters, including the main character and the enemies (if any).
   4. Gameplay: Explains how to control the objects in the game and how to make them interact with the other parts. Include subsections Gameplay Mechanics, Game Flow, Rules for the Games and/or Victory Conditions.
   5. Game World: descriptions and possible images of your planned game world, including the game’s level design and the way levels and locations are connected within the game world and for the players. Also includes a sample map and/or a flow chart to show how players navigate the world.
   6. Bonus Materials: Materials such as achievements that encourage players to replay the game.

   You can find some guidelines and samples for GDD in the following:

   • https://code.tutsplus.com/articles/effectively-organize-your-games-development-with-a-game-design-document--active-10140

Once your GDD is ready, please send it to your Academic Expert for approval before you start working on Assignment 2.