Game 1: Mr. Happy’s Quest

1 / 26

# Game 1: Mr. Happy’s Quest - PowerPoint PPT Presentation

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about 'Game 1: Mr. Happy’s Quest' - enrico

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
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;

varhx = 200;

varhy = 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;

}

Practice 1: 20%
• 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?)
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;

}

Practice 2: 20%
• 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
Car Game
• 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);

varkeyX = 0;

varkeyY = 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;

}

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.
Review
• 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);

varkeyY = 0;

varlaserOn = false;

varlaserTimeOut = 20;

vartimeCount = 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;

}

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.
Review
• 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.
Improving Canvas 2
• 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.”
Improving Canvas 4
• 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

• <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>
• <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);
• strokeWeight(1);
• var x = 300;
• 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);
• line(x,80,220,300);
• line(x,100,200,300);
• line(x,120,180,300);
• line(x,140,160,300);
• line(x,160,140,300);
• line(x,180,120,300);
• line(x,200,100,300);
• line(x,220,80,300);
• line(x,240,60,300);
• line(x,260,40,300);
• line(x,280,20,300);
• line(x,300,0,300);
• line(x,0,300,300);
• //top right part of star
• stroke(255,255,0);
• line(x,20,320,300);
• line(x,40,340,300);
• line(x,60,360,300);
• line(x,80,380,300);
• line(x,100,400,300);
• line(x,120,420,300);
• line(x,140,440,300);
• line(x,160,460,300);
• line(x,180,480,300);
• line(x,200,500,300);
• line(x,220,520,300);
• line(x,240,540,300);
• line(x,260,560,300);
• line(x,280,580,300);
• line(x,300,600,300);
• x=x+t;
• if(x>600) t = -t;
• if(x<0) t = -t;
• }
• </script><canvas tabindex="0" id="__processing2" width="600" height="600"></canvas>
• <br>
• <br>
• <script type="application/processing">
• size(300, 800);
• var y = 0;
• var x = 0;
• var t = .05;
• void draw(){
• background(100,100,100);
• stroke(255,255,0);
• strokeWeight(10);
• line(150,y+0,150,y+50);
• line(150,y+100,150,y+150);
• y = y + 3;
• if(y>80) y = 0;
• noStroke();
• fill(50,50,50);
• rect(x+15,100,100,30);
• fill(0,0,0);
• rect(x+20,50,90,200);
• fill(255,255,255);
• rect(x+50,50,30,200);
• x = x + t;
• if(x>5) t = -t;
• if(x<0) t = -t;
• }
• </script><canvas tabindex="0" id="__processing1" width="300" height="800" style="image-rendering: -webkit-optimize-contrast !important;"></canvas>
• <br>
• <br>
• <script type="application/processing">
• size(800,600);
• 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);
• ellipse(tx-150,100,95,77);
• ellipse(tx-350,100,95,77);
• ellipse(tx-350,90,166,127);
• ellipse(tx-275,100,95,77);
• ellipse(tx-450,100,95,77);
• //jet
• noStroke();
• fill(255,0,0);
• triangle(x+100,100,x+100,300,x+300,200);
• fill(150,75,0);
• triangle(x+200,100,x+200,300,x+400,200);
• fill(255,192,203);
• triangle(x+300,100,x+300,300,x+500,200);
• x= x+3;
• if (x>800) x = -300;
• }
• </script><canvas tabindex="0" id="__processing0" width="800" height="600" style="image-rendering: -webkit-optimize-contrast !important;"></canvas>
• <br>
• <br>
• </center><span style="position: absolute; top: 0px; left: 0px; opacity: 0; font-family: PjsEmptyFont, fantasy;">AAAAAAAA</span></body></html>