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

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

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 hitvar 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

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

•

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

• 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;• }• </script><canvas></canvas>

• <br>• <br>

• <script type="application/processing">• 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;•

•

•

• }• </script><canvas></canvas>

• </body>• </center>