game 1 mr happy s quest n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Game 1: Mr. Happy’s Quest PowerPoint Presentation
Download Presentation
Game 1: Mr. Happy’s Quest

Loading in 2 Seconds...

play fullscreen
1 / 26

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


  • 145 Views
  • Uploaded on

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.

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

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


An Image/Link below is provided (as is) to download presentation

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
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
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
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
keyPressed() Function Example

void keyPressed() {

if (keyCode == UP) hy = hy - 20;

if (keyCode == DOWN) hy = hy + 20;

//ADD LEFT RIGHT

}

practice 1 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?)
    • And a place to return to (home?)
guiding the movements of the star
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.
slide7

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);

slide8

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

}

practice 2 20
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
Review
  • Guiding the Movements of the Star
  • Code Example
  • Code Example
  • Practice 2
car game
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).
slide12

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;

slide13

//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
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.
review1
Review
  • Car Game
  • Example Code
  • Example Code
  • Practice 3: 20%
making the plane fly with lasers
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.
slide17

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);

slide18

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
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.
review2
Review
  • Making the Plane Fly WITH LASERS!
  • Example Code
  • Example Code
  • Practice 4: 20%
improving canvas 1
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
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
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
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.
review3
Review
  • Improving Canvas 1
  • Improving Canvas 2
  • Improving Canvas 3
  • Improving Canvas 4
slide26

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