Mr. Happy Hits the Cloud

1. 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.

2. //avoid mr cloud of doooom if (distance(hx,hy,x,100)<50) alive = false; functiondistance(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; }

3. var alive = true; //let Mr. happy move for the mouse too hy=mouseY; hx=mouseX; //change Mr. Happy if hits cloud if (!alive) fill(255,0,0); if (alive) rect(hx-40,hy-15,80,30);

4. 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.

5. Review • Mr. Happy Hits the Cloud • //avoid mr cloud of doooom • Code example • Practice 1

6. The Star Obtains Objects • Start out some variables to use for our obtainable objects such as this: vartargetX = 300; vartargetY = 300; vartargetSize = 100; • We will now have a place for the target to appear and a variable to show how big it is.

7. Baby Purple Star is Hungry! strokeWeight(3); //little pinkpink star stroke(255-random(1,80),0,255-random(1,80)); //top left part of little pink star line(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);

8. Draw the Food and Laser it! if(mousePressed && distance(targetX, targetY,mouseX,mouseY)<50){ //fire mah lasers! strokeWeight(10); stroke(random(1,255),0,0); line(mouseX+100, mouseY+200, random(1,600), random(1,600)); line(mouseX+100, mouseY, random(1,600), random(1,600)); targetSize--; if (targetSize<5){ targetX = random(1,600); targetY = random(1,600); targetSize = 100; } } //draw target fill(0,255,0); ellipse(targetX, targetY, targetSize,targetSize);

9. Practice 2: 20% • 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.

10. Review • The Star Obtains Objects • Baby Purple Star is Hungry • Draw the Food and Laser it! • Practice 2: 20%

11. Car Settings and Variables size(400, 800); //This is a larger canvas varenemyX = 0; //The bad car’s left/right varenemyY = 0; //The bad car’s up/down varenemySpeed = 10; //The bad car’s speed

12. Car Graphics and Mouse Upgrade //side of road a dark purple background(30,10,30); //make the roadway gray fill(100,100,100); rect(100,0,200,800); if(mousePressed){ keyX = mouseX-100; keyY = mouseY-100; } }

13. The Enemy Car //enemy car noStroke(); fill(140,40,40); rect(15+enemyX,200+enemyY,100,30); fill(150,50,50); rect(15+enemyX,100+enemyY,100,30); fill(100,0,0); rect(20+enemyX,50+enemyY,90,200); fill(155,255,255); rect(50+enemyX,50+enemyY,30,200); enemyY = enemyY + enemySpeed; if(enemyY > 1000){ enemyY = -200; if (enemySpeed <20) enemySpeed = enemySpeed +1; enemyX = random(1,300); }

14. Practice 3: 20% • Use the shown example to have an enemy object to avoid on the game by moving the mouse away from them. • Use what you have learned to recognize if the car collides with the enemy object and have the game respond accordingly. • Expand upon the shown example code to improve both the aesthetics and function of the game.

15. Review • Car Settings and Variables • Car Graphics and Mouse Upgrade • The Enemy Car • Practice 3: 20%

16. Airplane Shoots Balloon This part of the project will upgrade the previously created aircraft to target an object with it’s powerful LASERs. varhitBalloon = false; //target not initially hit var by=200; //target variable height in game

17. Balloon Conditional and Laser //balloon fill(random(1,200),random(1,200),random(1,200)) ellipse(tx+200,by,50,50); if(laserOn){ if(by > 175+keyY && by < 225+keyY) hitBalloon = true; } if(hitBalloon) { by = random(50,500); hitBalloon = false; }

18. if(laserOn) { stroke(255,0,0); line(0,200+keyY,1200,200+keyY); timeCount++; if (timeCount > laserTimeOut) { timeCount =0; laserOn = false; } }

19. Practice 4: 20% • 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.

20. Review • Airplane Shoots Balloon • Balloon Conditional and Laser • Example Code • Practice 4: 20%

21. 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

22. 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

23. 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

24. 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

25. Review • Improvements on Mr. Happy’s Grand Adventure • Improvements on the Star Game • Improvements on Car Game • Improvements on Airplane game

26. <head> • <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> • <center> • <body> • <script type="application/processing"> • size(800,600); • var x = 400; • var t = 5; • varhx = 200; • varhy = 200; • void draw() { • background(0,0,255); • //mr green grass • stroke(0,255,0); • strokeWeight(100); • line(1200,550,0,550); • noStroke(); • //mr clouds • fill(255,255,255); • ellipse(x,100,200,100); • fill(200,0,100+random(1,100)); • ellipse(x,450,200,100); • x=x+t; • if(x>900) x = -100; • //mr happy • noStroke(); • fill(255,255,0); • ellipse(hx,hy,100,100); • fill(0,0,0); • ellipse(hx-20,hy-20,10,10); • ellipse(hx+20,hy-20,10,10); • ellipse(hx+0,hy+15,80,50); • fill(255,255,0); • rect(hx-40,hy-15,80,30); • } • void keyPressed() { • if (keyCode == UP) hy = hy - 20; • if (keyCode == DOWN) hy = hy + 20; • if (keyCode == LEFT) hx = hx - 20; • if (keyCode == RIGHT) hx = hx + 20; • } • </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 y = 0; • var t = 5; • void draw() { • background(255,255,255); • //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> • <br> • <br> • <script type="application/processing"> • size(400, 800); • varkeyX = 0; • varkeyY = 0; • var y =100; • var x =100; • var t = .1; • void draw(){ • background(100,100,100); • //make the yellow lines • stroke(255,255,0); • strokeWeight(10); • line(200,y+0,200,y+50); • line(200,y+100,200,y+150); • line(200,y+200,200,y+250); • line(200,y+300,200,y+350); • line(200,y+400,200,y+450); • line(200,y+500,200,y+550); • line(200,y+600,200,y+650); • line(200,y+700,200,y+750); • line(200,y+800,200,y+850); • y = y + 5; • if(y>70) y = 0; • //car vrooom • noStroke(); • fill(50,50,50); • rect(keyX+x+15,keyY+200,100,30); • fill(50,50,50); • rect(keyX+x+15,keyY+100,100,30); • fill(0,0,0); • rect(keyX+x+20,keyY+50,90,200); • fill(255,255,255); • rect(keyX+x+50,keyY+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; • if (keyCode == UP) keyY = keyY - 15; • if (keyCode == DOWN) keyY = keyY + 15; • } • </script><canvas></canvas> • <br> • <br> • <script type="application/processing"> • size(1200,600); • varkeyY = 0; • varkeyX = 0; • varlaserOn = false; • varlaserTimeOut = 20; • vartimeCount = 0; • var by=200; • tx = 400; • x = 0; • void draw(){ • background(0,255,255); • //tree • noStroke(); • fill(100,75,0); • rect(tx-10,500,25,200); • fill(0,255,0); • ellipse(tx,475,100,100); • tx = tx - 10; • if (tx < 0) tx = 1400; • //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-450,100,95,77); • //LASERS!!!!! • stroke(255,0,0); • strokeWeight(3); • //jet • noStroke(); • fill(255,0,0); • triangle(keyX+x+100,100+keyY,keyX+x+100,300+keyY,keyX+x+300,200+keyY); • fill(100,75,0); • triangle(keyX+x+200,100+keyY,keyX+x+200,300+keyY,keyX+x+400,200+keyY); • fill(255,192,203); • triangle(keyX+x+300,100+keyY,keyX+x+300,300+keyY,keyX+x+500,200+keyY); • x= x+2; • if (x>1200) x = -100; • } • void keyPressed() { • if (keyCode == UP) keyY = keyY - 15; • if (keyCode == DOWN) keyY = keyY + 15; • if (keyCode == LEFT) keyX = keyX - 15; • if (keyCode == RIGHT) keyX = keyX + 15; • if (keyCode == "32")laserOn = true; • } • </script><canvas></canvas> • </body> • </center>