Advance Web Design

TQS22QWD

Final Project – Game Design

~ Web design

Objective
At the end of this project, students will:

  • Create the game (original or modified) for the final group project.

There will be short lesson during the week as you progress.

Requirements:
Provide link or code to the original game.
Comments are needed in the game to for each step.

IMPORTANT
Most of the work should be done in class.
Group/team members not in attendance in class will be graded differently for their participation in the project.
I will be taking account of the team members actively working on the project.

Folder name: Team_Name-Game Design
DUE: Moday, June 10, 2019

Final Project – Game Concept Design

~ Web design

Objectives

  • Plan and design the layout for the design of the game.

During the next week, you will meet with your group and research and develop a concept /idea for your final group project.

  • Part 1 (Thursday and  Friday) – Based on the game you have chosen, research images that can be used. Sketch some idea of how it can be used.
  • Part 2 (Monday) – Sketch ideas for the game’s look.
    (Name of game, placement on the stage, icons/images used).
  • Part 3 (Tuesday and Wednesday) – Create the intro page (Promo design) in Photoshop (JPG or PNG).
     The intro page must contain a description of the game and the rules in the layout.
  • Submit sketches at the end of the design concept.
  • Part 4 (Thursday and Friday) – Code the Ad design of the game based on your Photoshop design.
    Take advantage of the knowledge of using web fonts, CSS3 styles, and animation.

Look at the concept for the Alien Attack as a reference.
Note: The concept idea needs to be in the design.

Content in Folder:
– Promo/Intro Design Layout (JPG or PNG)
– Coded the Intro Page (Ad/Promo Design) (HTML/CSS) intro.html
– Directory Structure

Folder name: Team_Name-Game_Concept_Design 
Share folder link to the Google Classroom > Final Project Game Design.

Upload at the end of class.
DUE: Friday, May 17, 2019

Final Project Game Concept

~ Web design

Meet with your group and research and develop a concept /idea for your final group project.

Look at the concept of the Alien Attack and BreakOut as a reference and write a minimum two paragraphs and submit at the end of class.

Things to do:

  1. Brainstorm ideas for a new game.
  2. Assess the ideas and select the concept for your game.
  3. Name your game.
  4. Decide on the game’s field or board
    1. What images and designs appear on your board?
    2. What are the dimensions?
  5. Determine the number of player/s and develop the players’ roles.
  6. Summarize your game.
    1. Provide the context for the objective and rules that follow
  7. State the game’s objective.
  8. List the rules

File name: Team_Name-Concept
Upload the file to the Google Classroom > Final Project Concept.

Upload at the end of the class.
DUE: Wednesday, May 8, 2019

Resources
How to Invent a Game

Breakout Modified

~ Web design

Complete Breakout Tutorial.

Play the game long enough to understand the directions and the overall objective(s) of the game.

Think creatively and make changes to the game visually:

  • What can be changed in the game?
  • It needs to look different from the original game.

File name: Last_First-BreakOut_Modified

Upload at Google Classroom > Breakout Modified

Breakout Game – Brick field and Collision detection

~ Web design

Objective
In this lesson, students will learn:

  • How to render bricks, using a nested loop that works through a two-dimensional array
  • How to add a collision detection so it can bounce off the bricks and break them

Array
JavaScript arrays are used to store multiple values in a single variable.

SyntaxExample:


Loops
Loops can execute a block of code a number of times. Loops are handy, if you want to run the same code over and over again, each time with a different value. There are a few different kinds of loops you can create in JavaScript but the most common is the for loop.

The For Loop: It lets you repeat a section of code “for any number of times”.

Syntax:

Statement 1: Creates a variable called i (“index”), which is initialized to 0.

Statement 2 defines the condition statement. How many times it should repeat “while the index variable is less than 5.” It starts at 0: 0, 1, 2, 3, 4.

Statement 3 increases the index value by 1 each time the loop runs:  i++

Example:

How for Loops Work

Reference
Build the brick field
Collision Detection