Mr. Happy’s Score

1. Mr. Happy’s Score Our old friend Mr. Happy needs a way to keep track of his success. We can do this by declaring, displaying and changing a score variable. //DECLARE THE VARIABLE var score = 1;

2. Using text and textFont The textFont command enables a programmer to decide what text and what font to use. Try visiting MSWord to see some common font names. //SHOW THE SCORE textFont("Arial", 30); fill(255, 255, 0); text("SCORE: "+ score , 30, 30);

3. Incrementing the Score Variable You could say score = score + 1 or you could say score++. It means the same thing and it is up to the programmer to choose. //GIVE A POINT FOR GETTING THE CLOUD! if (distance(hx,hy,x,100)<50) { alive = false; score++; }

4. Practice 1: 20% • Make Mr. Happy have a score that is displayed and increased based on game graphic collisions. • Change the game so that it makes some sense and has a purpose that a player can enjoy. • Increase the graphics of the game to make it look awesome.

5. Review • Mr. Happy’s Score • Using text and textFont • Incrementing the Score Variable • Practice 1:20%

6. The Star Feeds to get Power In some games, the character’s have a health bar that determines their strength. For this example we will use a variable called power and a rectangle that changes size. //USE THE POWER VARIABLES var power = 600; var lost = false;

7. //SHOW THE POWER!!! //SHOW THE POWER!!! fill(0,255,0); rect(0,0,power,20); power=power-.5; if (power<0) lost = true;

8. if (lost){ fill(255,0,0); rect(0,0,700,700); textFont("Arial", 60); fill(255, 255, 0); text("GAME OVER", 130, 200); }

9. Practice 2: 20% Use the examples shown to have the power bar show up on the screen. Expand upon the given information to make the game more fun for players. Make the game challenging, but not impossible.

10. Review • The Star Feeds to Get Power • //SHOW THE POWER!!! • Code example • Practice 2: 20%

11. Recognizing a Car Collision • We can start the game by recognizing that the driver is still doing well by declaring a variable. The variable is set to false and is called collision. If the variable is changed to true, that means that we consider the car to have crashed or collided with another object. var collision = false;

12. As an easy, but imperfect way to recognize a collision, we can use the distance function. This code should be executed in the main loop of the draw function. Take caution: programmers must retrieve the distance function and place it correctly. if (distance(keyX+x,keyY+y,enemyX,enemyY) <70) collision = true;

13. We have previously created a collision variable and assigned it as true. Then, we made it false if the car variables were close. Now, we can use the variable to disable the game if there was a collision. if (collision) { fill(255,0,0); rect(0,0,1000,1000); }

14. Practice 3: 20% • Improve the function of the game to more accurately show if the cars crash into each other. Add other objects for the car to avoid. • Improve the aesthetics of the game by making the cars look more realistic. Improve how the road looks and how the side of the road looks.

15. Review • Recognizing a Car Collision • Code Example • Code Example • Practice 3

16. Keeping a Score Our game already has a flying object and an object that can be shot with a laser. To improve how a player will enjoy the game, we can keep track of the player’s success with a score. The score will start at 0 and increase when the user hits their target. var score = 0;

17. Increasing the Score • Increasing the score is a simple task. However, it takes more work to decide when and by how much the score can increase. The game player will want to see a recognition of success, but it must be balanced. Getting a higher score can’t be too hard or too easy. score++;

18. Mouse Input and Text Output The following code adapts the pre-established keyY variable to the built in mouseY variable and lets the player move with the mouse. The text command outputs to the screen with the number stored inside the score variable to let the user know how well they are doing. keyY = mouseY-200; textFont("Arial", 60); fill(255, 255, 0); text("score "+ score, 130, 200);

19. Practice 4: 20% • Improve the aesthetics by making the airplane look like it should really be able to fly. Improve the background looks to make it look like it is really flying through air and over ground.

20. Review • Keeping a Score • Increasing the Score • Mouse Input and Text Output • Practice 4: 20%

21. Improving the Mr. Happy Game • The Mr. Happy game has to make sense. Improve the example so that the score increase and unhappy graphic work when they are supposed to. • The game will need adjustments to be fun. Add more things to avoid, change where the “clouds of doom” appear and MAKE THE GAME CHALLENGING!

22. Improving the Star Game • If the example was followed then we should have a game that has a star eating food sources and a power rectangle that slowly reduces. • Make the game challenging (but not impossible) so that some one can enjoy trying to win. • Give the player opportunities to restore their power.

23. Improving the Car Game • If a student followed the directions, the game should already be partially responsive to collisions. There should be additional upgrades. • Make better car/road/roadside graphics. Improve what happens in the game when the car hits another car so it isn’t just a red screen. • Make the game challenging.

24. Improving the Aircraft Game • After following the directions, the aircraft should increase its score in a challenging way. • The aircraft its self should look like it can really fly. • The background, landscape and other worldly objects should look realistic and interesting. • Make the game challenging.

25. Review • Improving the Mr. Happy Game • Improving the Star Game • Improving the Car Game • Improving the Aircraft 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> • <img id="scream" src="heart.png" alt="The Scream" width="0" height="0"> • <script type="application/processing"> • size(800,600); • var x = 400; • var t = 5; • varhx = 200; • varhy = 200; • var alive = true; • //var c=document.getElementById("test"); • //varctx=c.getContext("2d"); • //varimg=document.getElementById("scream"); • void draw() { • background(0,0,255); • //SHOW THE SCORE • //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); • if (!alive) fill(255,0,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); • if (alive) rect(hx-40,hy-15,80,30); • //avoid mr cloud of doooom • if (distance(hx,hy,x,100)<50) alive = false; • //let mr happy move for the mouse too • hy=mouseY; • hx=mouseX; • //ctx.drawImage(img,10,10); • } • 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; • } • 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="test" 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; • vartargetX = 300; • vartargetY = 300; • vartargetSize = 100; • 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; • 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); • //top right part of little pink star • line(mouseX,mouseY+-100,mouseX+0,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+00,mouseX+200,mouseY+00); • //bottom left part of little pink star • line(mouseX,mouseY+100,mouseX+00,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+00,mouseX+-100,mouseY+00); • //bottom right part of little pink star • line(mouseX,mouseY+100,mouseX+00,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+00,mouseX+100,mouseY+00); • strokeWeight(1); • 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); • } • 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; • } • 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; • varenemyX = 0; • varenemyY = 0; • varenemySpeed = 10; • void draw(){ • //side of road a dark purple • background(30,10,30); • //make the roadway gray • fill(100,100,100); • rect(100,0,200,800); • //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; • //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); • } • //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; • if(mousePressed){ • keyX = mouseX-100; • keyY = mouseY-100; • } • } • 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; • varhitBalloon = false; • 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; • //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; • } • //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); • if(laserOn) • { • line(0,200+keyY,1200,200+keyY); • timeCount++; • if (timeCount > laserTimeOut) { • timeCount =0; • laserOn = false; • } • } • //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>