Final Project Game Team

In this period, you will choose a group member and name your team.
Fill out the form below Final Project Team.
DUE: Friday, Aprily 12, 2018

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

Look at the concept of the Alien Attack as a reference.

We will be looking at another game next week.

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

Fill out form and submit at the end of class
Final Project Team


Resources
How to Invent a Game

Canvas Exercise

Objectives

In this exercise, students will apply:

  • How to create the canvas
  • How to draw different shapes on it (square, rectangle, circle, semi-circle, lines, and triangle)

Draw an image to the canvas similar to the illustration of the board.
Feel free to improve and add to the drawing. (Extra Credit)

Canvas size: 
Width 640px and Height 480px

FIle name: LastName_FirstName-Canvas.html
Upload to the Google Classroom > Canvas

Canvas – Drawing Text and Loading Images

Objectives

In this lesson, students will learn:

  • How to draw text to canvas
  • How to load an image into canvas

Drawing text

The canvas rendering context provides two methods to render text:

fillText(text, x, y [, maxWidth])
Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.

strokeText(text, x, y [, maxWidth])
Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

Create the Canvas and draw on it

Objectives

In this lesson, students will learn:

  • How to create the canvas
  • How to draw different shapes on it (square, rectangle, circle, semi-circle, lines, and text)

Drawing rectangles

fillRect(x, y, width, height) Draws a filled rectangle.
strokeRect(x, y, width, height) Draws a rectangular outline.
clearRect(x, y, width, height) Clears the specified rectangular area, making it fully transparent.

Colors

fillStyle = color Sets the style used when filling shapes.
strokeStyle = olor Sets the style for shapes’ outlines.

// these all set the fillStyle to 'indigo'

ctx.fillStyle = 'indigo';
ctx.fillStyle = '#4B0082';
ctx.fillStyle = 'rgb(75, 0, 130)';
ctx.fillStyle = 'rgba(75, 0, 130, 1)';

Arc / Circles

arc(x, y, radius, startAngle, endAngle, anticlockwise)
Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by anticlockwise (defaulting to clockwise).

Lines / Paths

beginPath() Creates a new path. Once created, future drawing commands are directed into the path and used to build the path up.
Path methods Methods to set different paths for objects.
closePath() Adds a straight line to the path, going to the start of the current sub-path.
stroke() Draws the shape by stroking its outline.
fill() Draws a solid shape by filling the path’s content area.

Line Type

lineWidth = value Sets the width of lines drawn in the future.

Drawing text

The canvas rendering context provides two methods to render text:

fillText(text, x, y [, maxWidth])
Fills a given text at the given (x,y) position. Optionally with a maximum width to draw.

strokeText(text, x, y [, maxWidth])
Strokes a given text at the given (x,y) position. Optionally with a maximum width to draw.

Styling Text

font = value The current text style being used when drawing text.
This string uses the same syntax as the CSS font property. The default font is 10px sans-serif.
textAlign = valueText alignment setting.
Possible values: startendleftright or center. The default value is start.

Erasing Previously Drawn Content

Syntax: ctx.clearRect(x, y, width, height);

clearRect() method sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black, erasing any previously drawn content.


Resources
Drawing shapes with canvas
Applying styles and colors
Drawing text
CanvasRenderingContext2D.clearRect()