Game 1: Mr. Happy’s Quest
• For our original canvas, we had designed a
child’s background using simple shapes.
• For this project, we will add objects that a
game player (child) can move around using
the arrow keys on the keyboard.
• In the example, a smiley face has begun to be
created
The Draw Function and Mr. Happy
size(800,600);
var x = 400;
var t = 5;
var hx = 200;
var hy = 200;
//draw mr happy
noStroke();
fill(255,255,0);
ellipse(hx,hy,100,100);
stroke(0,0,0);
ellipse(hx-20,hy-20,10,10);
ellipse(hx+20,hy-20,10,10);
//ADD A MOUTH WITH A BLACK ELIPSE AND A RECTANGLE TO ERASE THE TOP HALF OF THE ELLIPSE
}
Bouncy Obstacles Example
void draw() {
background(100,100,100);
//bouncy ball designs
fill(255,255,255);
ellipse(x,150,200,200);
fill(0,0,0);
ellipse(x,450,200,200);
x=x+t;
if(x>800) t = -t;
if(x<0) t = -t;
text("Hello!", 50, 50);
keyPressed() Function Example
void keyPressed() {
if (keyCode == UP) hy = hy - 20;
if (keyCode == DOWN) hy = hy + 20;
//ADD LEFT RIGHT
}
 Take
what has been done in project 31 and
expand upon it to add a figure, character
and/or face that moves around the screen
with the keyboard arrow keys.
 Make certain that the screen:




Has moving objects that the character must
avoid
An aesthetically pleasing background
A goal to get to (golden treasure?)
And a place to return to (home?)
Guiding the Movements of the Star
• For the second example, the end user (game
player) will use keys to adjust the path of the
star.
• The game will need something for the star to
attack, gather, and/or avoid.
• Use the work done in our previous unit and
expand upon the canvas with examples and
original designs.
var x = 300;
var y = 0;
var t = 5;
void draw() {
background(255,255,255);
//top left part of star
stroke(255,0,0);
line(x,0,300,300);
line(x,20,280,300);
line(x,40,260,300);
line(x,60,240,300);
x=x+t;
if(x>600) t = -t;
if(x<0) t = -t;
}
void keyPressed() {
if (keyCode == LEFT) x = x - 25;
if (keyCode == RIGHT) x = x + 25;
//ADD UP AND DOWN
}
 Implement
an improved and fully capable
keyPress function that will enable the star to
move in all 4 directions based on the game
players use of the arrow keys.
 Add game objects that the player should
move the star towards and/or avoid so that
there is an eventual obtainable goal for the
game player.
Review
•
•
•
•
Guiding the Movements of the Star
Code Example
Code Example
Practice 2
 The
car has already been designed to be
drawn with simple shapes and the illusion of
movement based on the roadway’s
movement in the opposite direction.
 Our goal for this part of the project will be
to enable the car to move around the road in
4 directions and to add objects that can be
obtained and/or avoided for points (to be
implemented in a later version).
size(300, 800);
var keyX = 0;
var keyY = 0;
var y = 0;
var x = 0;
var t = .1;
void draw(){
background(100,100,100);
stroke(255,255,0);
strokeWeight(10);
line(150,y+0,150,y+50);
y = y + 3;
if(y>50) y = 0;
//car vrooom
noStroke();
fill(0,0,0);
rect(keyX+x+20,50,90,200);
fill(255,255,255);
rect(keyX+x+50,50,30,200);
x = x + t;
if(x>8) t = -t;
if(x<0) t = -t;
}
void keyPressed() {
if (keyCode == LEFT) keyX = keyX - 15;
if (keyCode == RIGHT) keyX = keyX + 15;
//ADD UP AND DOWN
}
Practice 3: 20%
• Create a keypress function that enables the
game player to move the car around the
screen in a way that looks realistic.
• Add moving objects that the car can obtain
and objects that the car must avoid to create a
game.
 Car
Game
 Example Code
 Example Code
 Practice 3: 20%
Making the Plane Fly (WITH LASERS!)
• In the previous project animations were
created that enabled an object to appear to fly
across the screen.
• In this section, the animation will be expanded
upon to have the keyboard move the plane.
• The plane will also have a LASER that is fired
with the spacebar.
size(800,600);
var keyY = 0;
var laserOn = false;
var laserTimeOut = 20;
var timeCount = 0;
tx = 400;
x = 0;
void draw(){
background(0,255,255);
//tree
noStroke();
fill(150,75,0);
rect(tx-10,500,25,200);
fill(0,255,0);
ellipse(tx,475,150,100);
tx = tx - 10;
if (tx < 0) tx = 1200;
//cloud
noStroke();
fill(255,255,255);
ellipse(tx-250,90,166,127);
//jet
strokeWeight(5);
noStroke();
fill(255,0,0);
//LASERS!!!!!
stroke(255,0,0);
if(laserOn)
{
line(x+300,300+keyY, x+300+233,300+keyY);
timeCount++;
if (timeCount > laserTimeOut) {
timeCount =0;
laserOn = false;
}
}
x= x+3;
if (x>800) x = -200;
}
void keyPressed() {
if (keyCode == UP) keyY = keyY - 15;
if (keyCode == DOWN) keyY = keyY + 15;
if (keyCode == LEFT) laserOn = true;
if (keyCode == 32) laserOn = true;
//ADD UP AND DOWN
}
Practice 4: 20%
• The airplane should look like it is really flying.
It should be controllable in all 4 directions.
• The airplane should have a functional and
aesthetically pleasing weapon (the laser).
• Objects should move around the screen that
can either help the plane or provide
something for the plane to shoot at.
 Making
the Plane Fly WITH LASERS!
 Example Code
 Example Code
 Practice 4: 20%
Improving Canvas 1
• Make certain that the canvas has something
to get, a place to take it and a nice design of
the avatar (thing the player moves).
• The canvas should have items moving around
that are both good for the avatar and bad for
the avatar such as treasure and slime.
• Choose your own ideas and make it into an
original looking game.
 The
star has to be part of a game that can
enable the user to interact in a meaningful
way.
 Make the star bigger or smaller.
 Make more than one star.
 There should be objects for the game player
to obtain and/or avoid.
Improving Canvas 3
• The car game has a lot of room for
improvement.
• The car its self can be more realistic.
• More drawings can accompany the side of the
road to move by quickly and more drawings
can be on the road.
• The car will need moving objects to obtain
and avoid such as other cars and “power ups.”
 The
aircraft its self can be made to look
more modern, sleek or realistic.
 The items in the sky and ground can become
more varied and more detailed.
 The aircraft has a laser: give it something to
shoot at!
 Objects to avoid and/or shoot and/or obtain
should be added.
Review
•
•
•
•
Improving Canvas 1
Improving Canvas 2
Improving Canvas 3
Improving Canvas 4
•
•
•
<html><head><meta http-equiv="Content-Type" content="text/html;
charset=ISO-8859-1">
<title>Gabrielle's Fun Games</title>
<script type="text/javascript"
src="http://www.scottbunin.com/processing.js"></script>
<script type="text/javascript"
src="http://www.scottbunin.com/init.js"></script>
</head>
<body><center>
•
•
•
•
<script type="application/processing">
size(800,600);
var x = 400;
var t = 5;
•
•
•
•
•
•
•
void draw() {
•
•
•
background(0,255,255);
fill(0,0,0);
ellipse(x,450,200,200);
x=x+t;
if(x>800) t = -t;
if(x<0) t = -t;
•
•
•
•
•
•
•
stroke(255,0,0);
strokeWeight(5);
line(0,0,800,600);
stroke(255,255,0);
strokeWeight(5);
line(800,0,0,600);
}
•
</script><canvas tabindex="0" id="__processing3" width="800"
height="600" style="image-rendering: -webkit-optimize-contrast
!important;"></canvas>
•
•
<br>
<br>
•
•
<script type="application/processing">
size(600, 600);