Responsive Battleships

• The battleship animation we created needs to respond to user input to be considered a game. The user will be able to launch an attack at any place on the game board. Lines will be use to designate where the user is aiming. The arrow keys and spacebar will function.

Targeting Sequence

var keyX = 100;var keyY = 200;var boomX = 100;

//show target designatorstroke(random(1,150),0,0);strokeWeight(3);line(keyX-30,keyY,keyX+30,keyY);line(keyX,keyY-30,keyX,keyY+30);

Weapons Launch

//modify ellipses in draw function ellipse(boomX, boomY,w*60,w*60);

void keyPressed() {if (keyCode == RIGHT) keyX = keyX + 15;

//press spacebar to fire if (keyCode == "32") {

boomX = keyX;boomY = keyY;}

}

Practice 1: 20%

• Use the example code given to create the targeting and firing system.

• Use the examples given to have the boats move in different directions, independently.

• Improve the boats so they are not just rectangles and look like battleships.

Review

• Responsive Battleships• Targeting Sequence• Weapons Launch• Practice 1: 20%

Responsive Paddleball

• Our rainbow bouncy ball animation can be modified into a game where the player tries to keep the ball on the screen. By adding a paddle and modifying the conditional, a programmer can make the ball only stay on the screen if the player correctly catches the ball.

Input Commands

var keyX = 550; //put me with my variable friends

void keyPressed() {if (keyCode == LEFT) keyX = keyX - 100;

if (keyCode == RIGHT) keyX = keyX + 100; if (keyCode == "32") {

}}

Player Controlled Game Piece

//replace bottom bounce conditionalif (y >= 640 && x > keyX && x < keyX +150) b = -b;

//paddle for the draw functionfill(50,50,50);rect(keyX,680,250,20);

Practice 2: 20%

• Use the example code to modify the animation so that it bounces back up on the paddle and not on the bottom of the canvas.

• Make something interesting happen when the player presses the space bar.

• Increase the game complexity by adding multiple game rainbow balls. (slow them down to make it possible to play)

Review

• Responsive Paddleball• Input Commands• Player Controlled Game Piece• Practice 2: 20%

Hugmaster 5000

• For this canvas programmers will enable a stick figure to walk around the screen. Instead of weapons or machines, this animation will create a game where one of the stick figures will go and hug the other players!

Input Commands

void keyPressed() { 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") {

}}

Dancing Hugger

//bodyline(200-yHand+keyX,240+keyY,200-yHand+keyX,340+keyY);//headellipse(200-yHand+keyX,200+keyY,80-yHand,80);//legsline(200-yHand+keyX,340+keyY,170-yHand+keyX,460+keyY);line(200-yHand+keyX,340+keyY,230-yHand+keyX,460+keyY);//upper armsline(200-yHand+keyX,240+yHand+keyY,170+keyX,300-yHand+keyY);line(200-yHand+keyX,240+yHand+keyY,225+keyX,300-yHand+keyY);

Practice 3: 20%

• Use the example code to enable the Hugmaster to move around the screen.

• Make something appropriate and interesting happen when the player presses the spacebar.

• Design a game that will be fun for children to play.

• Hugmaster 5000• Input Commands• Dancing Hugger• Practice 3: 20%

Review

Space Adventure

• This animation will enable objects in our space animation to be controlled by the player. Programmers should pick an object that will move from keyboard commands such as the alien space ship.

• The ship will try to get things, avoid things or any combination that the programmer chooses for a great game.

Input Commands

void keyPressed() { 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") {

}}

UFO

//UFOnoStroke();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);

Practice 4: 20%

• Make the UFO or any other game piece fly around the screen with user input from the arrow keys using the example.

• Create some other game objects for the UFO to either capture or avoid such as stopping missiles/astroids or obtaining powerups/coins/treasure.

Review

• Space Adventure• Input Commands• UFOs• Practice 4: 20%

Continue Improvement: Battleship

• The battleship game has to be designed to be fun in order to attract users to want to play.

• Improve the graphics by having the game field, boats, targeting device, look more realistic and/or more attractive.

• Improve the function of the game by having enough game pieces move better and for the player to shoot at and/or to capture and/or to avoid.

Continue Improvement: Paddleball

• Improve the aesthetics of the PaddleBall game by having the game field look more realistic/attractive the ball look nicer and the paddle look nice.

• Improve the function of the game by having something happen when the player looses, making the paddle work better, adding other bouncy rainbow balls.

Continue Improvement: Hugmaster 5000

• Improve the function of the game by having the player move in a way that will enable to encounter multiple ways of obtaining a hug and/or avoiding unwanted obstacles.

• Improve the aesthetics of the game by having the moveable game piece do more realistic functions and having super happy fun things appear such as hearts, diamonds etc.

Continue Improvement: Space Adventure

• Improve the aesthetics of the solar system by having the planets, orbits, sun and game pieces look more original and/or realistic.

• Improve the function of the game by having many objects appear to either destroy or to rescue. Have nice happy fun things appear such as rainbows, stars, diamonds etc.

Review

• Continue Improvement: Battleship• Continue Improvement: Paddleball• Continue Improvement: Hugmaster 5000• Continue Improvement: Space Adventure

• <head>• <title>Gabrielle's 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>

• <body>• <center>

• <script type="application/processing">• size(500,500);

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

• 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(100,100,w*30,w*30);• fill( 255,165,0);• ellipse(100,100,w*20,w*20);• fill( 255,255,0);• ellipse(100,100,w*10,w*10);• w = w + t;• if (w>2) t = -t ;• if (w<.2) t = -t ;•

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

• <br>• <br>

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

• void draw() {•

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

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

• if (y >= 640) b = -b;• 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);• }

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

• <br>• <br>

• <script type="application/processing">• size(1100, 600) ;

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

• 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,240,200-yHand,340);• //head• ellipse(200-yHand,200,80-yHand,80);• //legs• line(200-yHand,340,170-yHand,460);• line(200-yHand,340,230-yHand,460);• //upper arms• line(200-yHand,240+yHand,170,300-yHand) ;• line(200-yHand,240+yHand,225,300-yHand) ;

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

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

• <br>• <br>

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

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

• <br>• <br>

• <a href="file:///C:/Users/student/Documents/Gabrielle/index.htm"> CLICK HERE TO SEE MY OTHER PROJECTS</a>

• </center>• </body>