1 / 26

Responsive Battleships

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

aitana
Télécharger la présentation

Responsive Battleships

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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.

  2. Targeting Sequence varkeyX = 100; varkeyY = 200; varboomX = 100; //show target designator stroke(random(1,150),0,0); strokeWeight(3); line(keyX-30,keyY,keyX+30,keyY); line(keyX,keyY-30,keyX,keyY+30);

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

  4. 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.

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

  6. 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.

  7. Input Commands varkeyX = 550; //put me with my variable friends void keyPressed() { if (keyCode == LEFT) keyX = keyX - 100; if (keyCode == RIGHT) keyX = keyX + 100; if (keyCode == "32") { } }

  8. Player Controlled Game Piece //replace bottom bounce conditional if (y >= 640 && x > keyX && x < keyX +150) b = -b; //paddle for the draw function fill(50,50,50); rect(keyX,680,250,20);

  9. 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)

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

  11. 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!

  12. 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") { } }

  13. Dancing Hugger //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);

  14. 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.

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

  16. 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.

  17. 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") { } }

  18. UFO //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);

  19. 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.

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

  21. 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.

  22. 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.

  23. 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.

  24. 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.

  25. Review • Continue Improvement: Battleship • Continue Improvement: Paddleball • Continue Improvement: Hugmaster 5000 • Continue Improvement: Space Adventure

  26. <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); • varxAll = 0; • varyHand = 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>

More Related