Battleships Recognize Impact

In this example, we will establish a Boolean variable (true or false) to decide if the boat has been hit. Then, we will adjust graphics to a hit.

//keep track of the status of boat 3var boat3Alive = true;

//change the color to black if boat 3 is not aliveif(!boat3Alive) fill(0,0,0);

if(mousePressed){keyX = mouseX;keyY = mouseY;}

//change boat3Alive to false if the explosion is on the boat

if(boomX > 350 && boomX < 350 + 30 && boomY > 50 && boomY < 50 + 150){

boat3Alive = false; }

Practice 1: 20%

• Use the examples given to have the boats change to a charred out husk after being destroyed by the player.

• Be sure to make all of the boats capable of being destroyed.

• Continue to improve on boat movement, the game functionality and aesthetics.

Review

• Battleships recognize Impact • Code example• Code example• Practice 1

Target for Pong Game

Our game has previously enabled the ball to bounce around the sides of the screen and off the paddle.

We will now add a target balloon for the ball to impact.

var balloonX = 200;var balloonY = 200;

if (distance(x,y,balloonX,balloonY)<100){balloonX = random(100,600);balloonY = random(100,600);}

fill(100,100,random(200,255));ellipse(balloonX,balloonY,100,100);//disable game if ball gets below canvasif(y>700)b =0; keyX = mouseX;

Practice 2: 20%

• Apply the suggested changes to enable the mouse to move the paddle and the balloon to appear and reappear on impact.

• Using your own ideas, improve the game’s function and/or aesthetics to create a truly awesome online project.

Review

• Target for Pong Game• Code example• Code example• Practice 2

Hugmaster 5000 Recognize Collisions

For this practice, we will expand on our previous stick figure program to enable one of the characters to respond to a close proximity of the user controlled character.

var blueRangerX = 700;var blueRangerY = 200;

//enable the mouse with previous established variables

keyX = mouseX-200;keyY = mouseY-200;//respawn the blue ranger if press mouse near itif(mousePressed &&

distance(keyX+200,keyY+200,blueRangerX,blueRangerY)<100){blueRangerX = random(100,1000);blueRangerY = random(0,400);}

//THE BLUE RANGERstroke(0,0,255);//bodyline(blueRangerX+yHand,blueRangerY +

40,blueRangerX+yHand,blueRangerY + 140);//headellipse(blueRangerX+yHand,blueRangerY,80+yHand,80);//legsline(blueRangerX+yHand,blueRangerY + 140,blueRangerX -30

+yHand,blueRangerY + 260);line(blueRangerX+yHand,blueRangerY + 140,blueRangerX +

30+yHand,blueRangerY + 260);//upper armsline(blueRangerX+yHand,blueRangerY + 40,blueRangerX -30-

yHand,blueRangerY + 100-yHand);line(blueRangerX+yHand,blueRangerY + 40,blueRangerX + 25-

yHand,blueRangerY + 100-yHand);

Assignment 3: 20%

• Use the examples shown to enable a stickfigure to respawn when the mouse is clicked and the player’s stickfigure is close.

• Improve functionality such as make other figures also respond if clicked on.

• Improve aesthetics such as showing the hug, better colors, better figure limbs and general improvements on graphics.

Review

• Hugmaster 5000 Recognize Collisions• Code Example• Code Example• Assignment 3 20%

var targetX = 50;var targetY = 225;//respawn if spaceship get space happy

if(distance(targetX,targetY,mouseX,275) <70){targetX = random(20,500);}

//don’t forget to copy the distance function

//UFOnoStroke();fill(100,100,100);ellipse(mouseX + 25,275,100,100);fill(50,50,50);ellipse(mouseX + 50,325,50,50);ellipse(mouseX,325,50,50);fill(50,75,50);quad(mouseX+125,325,mouseX+75,275,mouseX -25,275,mouseX-75,325);fill(100,100,100);text("USS Gabrielle",mouseX-10,300);

//mr space happy targetfill(100,100,255);ellipse(targetX,targetY,50,50);fill(0,0,0);ellipse(targetX-10,targetY-15,5,5);ellipse(targetX+10,targetY-15,5,5);ellipse(targetX,targetY+5,25,25);fill(100,100,255);rect(targetX-20,targetY-10,35,12);

Practice 4: 20%

• Use the example code create a spaceship that responds to the mouse and a happy space smiley.

• Expand on the example and enable the space smile and ship to go all around the canvas.

• Introduce student designed functional and aesthetic improvements to make the game awesome.

Review

• code example• code example• code example• Practice 4

Battleship Improvements

• Make ALL the boats respond to the explosion• Start the variable explosion off the screen• Have the color of a destroyed ship more

interesting than black• Have sunk ships respawn after time

Paddleball Game Improvements

• Have more colorful objects in the game• Have more than one target balloon• Improve the background with awesome

graphics• Make something better happen when the

player looses

Stick Figure Improvement

• Have the stick figures reappear when clicked on

• Make all the figures different colors• Make the figures look more realistic• Decorate the background with something

interesting

Space Adventure Improvement

• Make the target and the space ship move to other places on the screen

• Add other stellar stuff such as other ships, comets, asteroids etc.

• Improve the ship graphic to look more realistic• Give the ship LASERS!

Review

• Battleship Improvement• Paddleball Improvement• Stick figure improvement• Space adventure improvement

• <head>• <title>Gabrielle's Games </ title>• <s cript type="text/javascript" src="http:// www.scottbunin.com/processing.js "></s cript>• <s cript type="text/javascript" src="http:// www.scottbunin.com/init.js "></s cript>• </ head>

• <body>• <center>

• <s cript type="application/proces sing">• size(500,500);

• var a = 1;• var b = 1;• var x = 60;• var y = 60;• • var w = .1;• var t = .1;

• var keyX = 100;• var keyY = 200;

• var boomX = 100;• var boomY = 100;

• void draw(){

• background(64,224,208);• stroke(0,0,0);• strokeWeight(1);

• // horizontal grid• line(0,50,800,50);• line(0,100,800,100);• line(0,150,800,150);• line(0,200,800,200);• line(0,250,800,250);• line(0,300,800,300);• line(0,350,800,350);• line(0,400,800,400);• line(0,450,800,450);• line(0,500,800,500);

• // vertical grid• line(50,0,50,800);• line(100,0,100,800);• line(150,0,150,800);• line(200,0,200,800);• line(250,0,250,800);• line(300,0,300,800);• line(350,0,350,800);• line(400,0,400,800);• line(450,0,450,800);• line(500,0,500,800);•

• // boat 3• strokeWeight(3);• stroke(205,205,0);• fill(255,255,0);• rect(350,50,30,150);

• // boat 4• strokeWeight(3);• stroke(0,205,0);• fill(0,255,0);• rect(300,350,150,30);

• // boat 5• strokeWeight(3);• stroke(0,205,205);• fill(0, 255, 255);• rect(250,180,30,150);

• // boat 6• strokeWeight(3);• stroke(0,0,205);• fill(0,0,255);• rect(320,260,150,30);

• // boat 7• strokeWeight(3);• stroke(78,0,78);• fill(128, 0, 128);• rect(160,100,30,150);

• // boat 8• strokeWeight(3);• stroke(205,142,153);• fill(255,192,203);• rect(30,270,150,30);•

• // moving boats• strokeWeight(3);• stroke(205,0,0);• fill(255,0,0);• rect(x,y,30,150);• if (x < 300) x = x + a;• if (x > 299) y = y + b;• if (y > 200) y = 200;•

• strokeWeight(3);• stroke(205,115,0);• fill(255,165,0);• rect(x,y,150,30);• if (x < 300) x = x + a;• if (x > 299) y = y + b;• if (y > 200) y = 200;

• //explosions• noStroke();• fill(255,0,0);• ellipse(350,350,w*40,w*40);• fill(255,165,0);• ellipse(350,350,w*30,w*30);• fill(255,255,0);• ellipse(350,350,w*20,w*20);• w = w + t;• if (w>2) t = -t;• if (w<.2) t = -t;•

• noStroke();• fill(255,0,0);• ellipse(350,100,w*30,w*30);• fill(255,165,0);• ellipse(350,100,w*20,w*20);• fill(255,255,0);• ellipse(350,100,w*10,w*10);• w = w + t;• if (w>2) t = -t;• if (w<.2) t = -t;•

• noStroke();• fill(255,0,0);• ellipse(boomX, boomY,w*60,w*60);• fill(255,165,0);• ellipse(boomX, boomY,w*40,w*40);• fill(255,255,0);• ellipse(boomX, boomY,w*20,w*20);• w = w + t;• if (w>2) t = -t;• if (w<.2) t = -t;•

• //show target des ignator• stroke(random(1,150),0,0);• strokeWeight(3);• line(keyX-30,keyY,keyX+30,keyY);• line(keyX,keyY-30,keyX,keyY+30);•

• }

• void keyPres sed() {• 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") {• boomX = keyX;• boomY = keyY;• }• • }•

•

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

• <br>• <br>

• <s cript type="application/proces sing">• size(700, 700);• background(100,255,255);• stroke(255,255,255);• strokeWeight(1);

• var x = 100;• var y = 100;• var a = 15;• var b = 15;• var keyX = 550;• var t = "" ;

• void draw(){• background(100,255,255);•

• x = x + a;• y = y + b;•

• if (x >= 640) a = -a + (random(-50,50))/30;• if (x <= 60) a = -a;•

• if (y >= 640 && x > keyX && x < keyX +250) • {• y=630;• b = -b;• }•

• if(y>640)t = t + "you los t!" ;• •

• if (y <= 60) b = -b;•

• fill(random(1,255),255,255);• ellipse(x,y,120,120);• fill(0,0,250);• ellipse(x,y,100,100);• fill(0,0,200);• ellipse(x,y,80,80);• fill(0,0,150);• ellipse(x,y,60,60);• fill(0,0,100);• ellipse(x,y,40,40);• fill(0,0,50);• ellipse(x,y,20,20);

• fill(50,50,50);• rect(keyX,680,250,20);

• text(t,50,50);•

• }

• void keyPres sed() {• if (keyCode == LEFT) keyX = keyX - 100;• if (keyCode == RIGHT) keyX = keyX + 100;• if (keyCode == "32") {• }• }•

•

•

•

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

• <br>• <br>

• <s cript type="application/proces sing">• size(1100, 600);

• var xAll = 0;• var yHand = 0;• var t=-1;

• var keyX =0;• var keyY = 0;

• void draw(){• if (xAll < 500) xAll = xAll + 5;• if (xAll >= 500) yHand = yHand + t;• if (yHand >= 30) t = -t;• if (yHand <= 0) t = -t;

• stroke(255,0,0);• strokeWeight(5);

• background(100,100,100);• // body• line(200-yHand+keyX,240+keyY,200-yHand+keyX,340+keyY);• // head• ellipse(200-yHand+keyX,200+keyY,80-yHand,80);• // legs• line(200-yHand+keyX,340+keyY,170-yHand+keyX,460+keyY);• line(200-yHand+keyX,340+keyY,230-yHand+keyX,460+keyY);• // upper arms• line(200-yHand+keyX,240+yHand+keyY,170+keyX,300-yHand+keyY);• line(200-yHand+keyX,240+yHand+keyY,225+keyX,300-yHand+keyY);

• stroke(255,165,0);

• // body• line(300-yHand,240,300-yHand,340);• // head• ellipse(300-yHand,200,80-yHand,80);• // legs• line(300-yHand,340,270-yHand,460);• line(300-yHand,340,330-yHand,460);• // upper arms• line(300-yHand,240,270+yHand,300-yHand);• line(300-yHand,240,325+yHand,300-yHand);

• stroke(255,255,0);

• // body• line(400,240,400-yHand,340);• // head• ellipse(400,200,80-yHand,80);• // legs• line(400-yHand,340,370-yHand,460);• line(400-yHand,340,430-yHand,460);• // upper arms• line(400,240,370+yHand,300-yHand);• line(400,240,425+yHand,300+yHand);

• stroke(0,255,0);

• // body• line(500,240,500-yHand,340);• // head• ellipse(500,200,80-yHand,80);• // legs• line(500-yHand,340,470-yHand,460);• line(500-yHand,340,530-yHand,460);• // upper arms• line(500,240,470+yHand,300+yHand);• line(500,240,525+yHand,300-yHand);

• stroke(0, 255, 255);

• // body• line(600+yHand,240,600+yHand,340);• // head• ellipse(600+yHand,200+yHand,80+yHand,80);• // legs• line(600+yHand,340,570+yHand,460);• line(600+yHand,340,630+yHand,460);• // upper arms• line(600+yHand,240+yHand,570-yHand,300-yHand);• line(600+yHand,240+yHand,625-yHand,300-yHand);

• stroke(0,0,255);

• // body• line(700+yHand,240,700+yHand,340);• // head• ellipse(700+yHand,200,80+yHand,80);• // legs• line(700+yHand,340,670+yHand,460);• line(700+yHand,340,730+yHand,460);• // upper arms• line(700+yHand,240,670-yHand,300-yHand);• line(700+yHand,240,725-yHand,300-yHand);

• stroke(128, 0, 128);

• // body• line(800+yHand,240,800+yHand,340);• // head• ellipse(800+yHand,200,80+yHand,80);• // legs• line(800+yHand,340,770+yHand,460);• line(800+yHand,340,830+yHand,460);• // upper arms• line(800+yHand,240+yHand,770,300-yHand);• line(800+yHand,240+yHand,825,300-yHand);

• stroke(255,192,203);

• // body• line(900+yHand,240,900+yHand,340);• // head• ellipse(900+yHand,200,80+yHand,80);• // legs• line(900+yHand,340,870+yHand,460);• line(900+yHand,340,930+yHand,460);• // upper arms• line(900+yHand,240+yHand,870,300-yHand);• line(900+yHand,240+yHand,925,300-yHand);

• }

• void keyPres sed() {• if (keyCode == LEFT) keyX = keyX - 50;• if (keyCode == RIGHT) keyX = keyX + 50;• if (keyCode == UP) keyY = keyY - 50;• if (keyCode == DOWN) keyY = keyY + 50;• if (keyCode == "32") {• }• }

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

• <br>• <br>

• <s cript type="application/proces sing">• size(800,515);

• var t = .01• var x = 1.0;• void draw(){• background(10,10,10);

• x = x - t;• if(x < 0.0) t = -t;• if(x > 1.0) t = -t;•

• //stars• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);• stroke(random(1,255),random(1,255),random(1,255));• fill(random(1,255),random(1,255),random(1,255));• ellipse(random(1,800),random(1,500),1,1);•

• //sun• noStroke();• fill(255,255,00);• ellipse(400,255,100,100);•

• // planet orbits• noFill();• stroke(255,255,255);• ellipse(400,255,x*200,150); / /x is a percentage • ellipse(400,255,(1-x)*250,200); //oppos ite path of other orbit• ellipse(400,255,x*300,250);• ellipse(400,255,(1-x)*350,300);• ellipse(400,255,x*400,350);• ellipse(400,255,(1-x)*450,400);• ellipse(400,255,x*500,450);• ellipse(400,255,(1-x)*550,500);•

• // planets• noStroke();• fill(255,0,0);• ellipse(400-x*100,255,15,15);• fill(255,165,0);• ellipse(525-x*125,255,20,20);• fill(205,205,0);• ellipse(400+x*150,255,25,25);• fill(0,255,0);• ellipse(225+x*175,255,15,15);• fill(0,255,255);• ellipse(400-x*200,255,20,20);• fill(0,0,255);• ellipse(625-x*225,255,25,25);• fill(128,0,128);• ellipse(400+x*250,255,30,30);• fill(255,192,203);• ellipse(125+x*275,255,35,35);•

• // UFO• noStroke();• fill(100,100,100);• ellipse(125+x*700,275,100,100);• fill(50,50,50);• ellipse(150+x*700,325,50,50);• ellipse(100+x*700,325,50,50);• fill(50,75,50);• quad(225+x*700,325,175+x*700,275,75+x*700,275,25+x*700,325);

• }

• void keyPres sed() {• if (keyCode == LEFT) keyX = keyX - 50;• if (keyCode == RIGHT) keyX = keyX + 50;• if (keyCode == UP) keyY = keyY - 50;• if (keyCode == DOWN) keyY = keyY + 50;• if (keyCode == "32") {• }• }

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

• <br>• <br>

• <a href="file:// /C:/Us ers /s tudent/Documents /Gabrielle/ index.htm"> CLICK HERE TO SEE MY OTHER PROJECTS</a>

• </center>• </ body>