Mr. Happy Hits the Cloud • It is important that the canvas has a game that is challenging to the user. Thus far, Mr. Happy has been able to move around and ignore the objects. We will enable recognition of Mr. Happy’s collision and respond accordingly.
26
Embed
Mr. Happy Hits the Cloud It is important that the canvas has a game that is challenging to the user. Thus far, Mr. Happy has been able to move around and.
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Mr. Happy Hits the Cloud
• It is important that the canvas has a game that is challenging to the user. Thus far, Mr. Happy has been able to move around and ignore the objects. We will enable recognition of Mr. Happy’s collision and respond accordingly.
//avoid mr cloud of doooom
if (distance(hx,hy,x,100)<50) alive = false;
function distance(x1,y1,x2,y2){var d = 0;d = (x2-x1)*(x2-x1) + (y2-y1)*(y2-y1);d = Math.sqrt(d);//text(d,10,10);return d;}
var alive = true;
//let Mr. happy move for the mouse toohy=mouseY;hx=mouseX;
//change Mr. Happy if hits cloudif (!alive) fill(255,0,0);if (alive) rect(hx-40,hy-15,80,30);
Practice 1: 20%
• Use the example code to have the drawing of Mr. Happy react to having a collision with a game object.
• Expand upon the current state of the canvas to make the game look more interesting and improve aesthetics.
• Improve the game functionally by having more responses to impacts.
Review
• Mr. Happy Hits the Cloud• //avoid mr cloud of doooom• Code example• Practice 1
The Star Obtains Objects
• Start out some variables to use for our obtainable objects such as this:
var targetX = 300;var targetY = 300;var targetSize = 100;• We will now have a place for the target to
appear and a variable to show how big it is.
Baby Purple Star is Hungry!
strokeWeight(3);//little pinkpink starstroke(255-random(1,80),0,255-random(1,80));//top left part of little pink starline(mouseX,mouseY+-100,mouseX,mouseY+00);line(mouseX,mouseY+-80,mouseX-20,mouseY+00);line(mouseX,mouseY+-60,mouseX-40,mouseY+00);line(mouseX,mouseY+-40,mouseX-60,mouseY+00);line(mouseX,mouseY+-20,mouseX-80,mouseY+00);line(mouseX,mouseY+0,mouseX-100,mouseY+00);
• Create a game piece such as the baby purple star.
• Have something for the star to eat appear.• Use the distance function from the pervious
practice so the star knows if it is close enough to eat.
• Improve the game to make it more fun and interesting for a player.
Review
• The Star Obtains Objects• Baby Purple Star is Hungry• Draw the Food and Laser it!• Practice 2: 20%
Car Settings and Variablessize(400, 800); //This is a larger canvasvar enemyX = 0; //The bad car’s left/rightvar enemyY = 0; //The bad car’s up/downvar enemySpeed = 10; //The bad car’s speed
Car Graphics and Mouse Upgrade//side of road a dark purple
background(30,10,30);
//make the roadway grayfill(100,100,100);rect(100,0,200,800);
• Use the example code as shown to have a simple balloon appear on the screen for the pilot to use lasers on.
• Expand upon both the functional game play and the graphical elements to produce a game that end users, such as high school students, could enjoy playing.
Review
• Airplane Shoots Balloon• Balloon Conditional and Laser• Example Code• Practice 4: 20%
Improvements on Mr. Happy’s Grand Adventure
• More clouds• Helpful clouds• Clouds that are more difficult to avoid or to
obtain• A score, health bar, or timer• Recognition of winning the game or losing the
game
Improvements on Star Game
• A health bar, life bar or score bar• More than one food to obtain• Food is more challenging to obtain• The big star gets involved in the game • A way to win/lose the game
Improvements on Car Game
• The car should responds during an impact• Other objects to avoid or to obtain besides the
enemy car• Weapons for the car• Better graphics for the car, road, roadside• Lights for the car
Improvements on Airplane Game
• More interesting objects to shoot • Objects to avoid• A way to keep track of success and/or levels• A more realistic looking airplane• Other weapons and/or defense systems
Review
• Improvements on Mr. Happy’s Grand Adventure
• Improvements on the Star Game• Improvements on Car Game• Improvements on Airplane game
• //top left part of star• stroke(255,0,0);• line(x,y+0,300,300);• line(x,y+20,280,300);• line(x,y+40,260,300);• line(x,y+60,240,300);• line(x,y+80,220,300);• line(x,y+100,200,300);• line(x,y+120,180,300);• line(x,y+140,160,300);• line(x,y+160,140,300);• line(x,y+180,120,300);• line(x,y+200,100,300);• line(x,y+220,80,300);• line(x,y+240,60,300);• line(x,y+260,40,300);• line(x,y+280,20,300);• line(x,y+300,0,300);• line(x,y+0,300,300);• //top right part of star• stroke(255,255,0);• line(x,y+20,320,300);• line(x,y+40,340,300);• line(x,y+60,360,300);• line(x,y+80,380,300);• line(x,y+100,400,300);• line(x,y+120,420,300);• line(x,y+140,440,300);• line(x,y+160,460,300);• line(x,y+180,480,300);• line(x,y+200,500,300);• line(x,y+220,520,300);• line(x,y+240,540,300);• line(x,y+260,560,300);• line(x,y+280,580,300);• line(x,y+300,600,300);• //bottom left part of star• stroke(0,255,0);• line(x,y+600,300,300);• line(x,y+580,320,300);• line(x,y+560,340,300);• line(x,y+540,360,300);• line(x,y+520,380,300);• line(x,y+500,400,300);• line(x,y+480,420,300);• line(x,y+460,440,300);• line(x,y+440,460,300);• line(x,y+420,480,300);• line(x,y+400,500,300);• line(x,y+380,520,300);• line(x,y+360,540,300);• line(x,y+340,560,300);• line(x,y+320,580,300);• line(x,y+300,600,300);• //bottom right part of star• stroke(0,0,255);• line(x,y+600,300,300);• line(x,y+580,280,300);• line(x,y+560,260,300);• line(x,y+540,240,300);• line(x,y+520,220,300);• line(x,y+500,200,300);• line(x,y+480,180,300);• line(x,y+460,160,300);• line(x,y+440,140,300);• line(x,y+420,120,300);• line(x,y+400,100,300);• line(x,y+380,80,300);• line(x,y+360,60,300);• line(x,y+340,40,300);• line(x,y+320,20,300);• line(x,y+300,0,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;• if (keyCode == UP) y = y - 25;• if (keyCode == DOWN) y = y + 25;• }• </script><canvas></canvas>