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

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

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

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.

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

Car Settings and Variables size(400, 800); //This is a larger canvas var enemyX = 0; //The bad car’s left/right var enemyY = 0; //The bad car’s up/down var 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 gray fill(100,100,100); rect(100,0,200,800); if(mousePressed){ keyX = mouseX-100; keyY = mouseY-100; }

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

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.

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

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

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

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

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.

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

Gabrielle's Fun Games size(800,600); var x = 400; var t = 5; var hx = 200; var hy = 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; } 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; } size(400, 800); var keyX = 0; var keyY = 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; } size(1200,600); var keyY = 0; var keyX = 0; var laserOn = false; var laserTimeOut = 20; var timeCount = 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; }