Break Out • Animate, Game Elements Canvas Tutorial – Breakout – Bill Mill con$nue • Modified Tutorial Simple Game: Break Out • So=ware developer in Maryland What it Looks Like Review: Rough Structure <!DOCTYPE html> <!DOCTYPE html> <html> <html> • Elements: <head> <head> – Color <style type="text/ <style type="text/css css"> "> canvas { border: 3px solid black; } canvas { border: 3px solid black; } – Collision DetecEon </style> </style> <script type="text/javascript <script type="text/ javascript"> "> • Simple . . – InteracEon with User . </script> </script> • Mouse </head> </head> • Keyboard <body> <body> <canvas id="canvas" width="300" height="300"> Your browser does not support the canvas element. Your browser does not support the canvas element. </canvas> </canvas> </body> </body> </html> </html> Abstracted: 1.intro.html 11.bricks-really-preMy.html Circle JavaScript Structure (Finished Code) • ctx.beginPath() // Global variables // Global variables // Initialization methods // Initialization methods // Mouse & Keyboard specifications // Mouse & Keyboard specifications // Basic Shapes // Basic Shapes • ctx.arc(75, 75, 10, 0, Math.PI*2, true); // Game logic // Game logic center Start End CCW angle angle False is default and is CW • ctx.endPath() • ctx.stroke(); • ctx.fill(); hMp://www.w3schools.com/tags/canvas_arc.asp
Review: Step 1 : JavaScript Simple Shapes Color Fun Ball in Break out (a circle), Bricks ‘rectangle’) <script type="text/ <script type="text/javascript javascript"> "> • 3 Circles var var x=200; x=200; var var y=200; y=200; • ctx.fillStyle = "#FF1C0A"; window.onload window.onload=function() =function() { var var c = c = document.getElementById document.getElementById( "canvas" ); ( "canvas" ); • ctx.fillStyle = "#0FB2BB"; var ctx var ctx = = c.getContext c.getContext( "2d" ); ( "2d" ); //draw a circle //draw a circle ctx.beginPath ctx.beginPath(); (); • ctx.fillStyle = "rgba(255, 255, 0, .5 )” ctx.arc ctx.arc(75, 75, 10, 0, (75, 75, 10, 0, Math.PI Math.PI*2, true); *2, true); ctx.closePath ctx.closePath() (); // draw a rectangle ctx.fill ctx.fill(); // actually draws it (); // actually draws it – 0 is completely transparent ctx.beginPath(); </script> </script> ctx.rect( x, y, 20, 20); – 1 is completely opaque ctx.fill(); ctx.closePath(); – 0.5 half transparent 1.intro.html 2.color.html 2.color-fun-with-alpha.html BuMons: onclick • < bu5on onclick="fillrectangle()">Fill Rectangle</buMon> • Stroke. • Move to. • 2-mozilla-face.html 2.RectCircle-BuMons.html Example AnimaEon Adding AnimaEon var var x = 0; x = 0; var y = 0; var y = 0; • Create a funcEon that Exercises: How would you var dx = 2; var dx = 2; make it conEnue to var var dy dy = 2; = 2; (1) clears canvas, and animate? var var interval interval =10; =10; var var ctx ctx; (2) then draws objects 1) draw() - Draws a ball function function init init() () { // set ctx { // set ctx here // here // in a repeatable manner (e.g., a draw() funcEon). 2) Then that draw return return setInterval setInterval( d ( draw, i , interval ) l ); funcEon needs to be } called periodically. • PrimiEve: function draw() { ctx.fillStyle function draw() { ctx.fillStyle = "red" = "red" How about changing dx, ctx.clearRect ctx.clearRect(0,0,300,300); (0,0,300,300); – setInterval(funcEon, Emeout) in the init() dy? At each Eme draw is ctx.beginPath ctx.beginPath(); (); ctx.arc ctx.arc(x, y, 10, 0, (x, y, 10, 0, Math.PI Math.PI*2, true); *2, true); called • Using : SetInterval() for now ctx.closePath ctx.closePath(); (); – CAVEAT: HW read the below links (use RequestAnimaEonFrame()) ctx.fill ctx.fill(); (); x += dx; x += dx; y += dy y += dy; hMp://stackoverflow.com/quesEons/13935262/sepmeout-or-seEnterval-or-requestanimaEonframe } 3.acEon.html hMp://creaEvejs.com/resources/requestanimaEonframe/
Modularize Bounce //BEGIN ---- LIBRARY CODE //BEGIN ---- LIBRARY CODE • Add Some Physics : Collision and Gravity var x = 150; var x = 150; var var y = 150; y = 150; var var dx = 2; dx = 2; var var dy dy = 4; = 4; var WIDTH; var WIDTH; var var HEIGHT; HEIGHT; Circle Code • Detect when the ball is ‘beyond’ the canvas var var ctx ctx; Rectangle Code boundaries. function init function init() () Clear { ctx ctx = = document.getElementById('canvas'). document.getElementById ('canvas').getContext getContext('2d'); ('2d'); function draw() function draw() WIDTH = ctx.canvas.width WIDTH = ctx.canvas.width; ; 6.bounce.html { HEIGHT = ctx.canvas.height HEIGHT = ctx.canvas.height; clear(); clear(); return setInterval return setInterval( draw, interval ); ( draw, interval ); circle(x,y,10); circle(x,y,10); } // if outside the width canvas, change direction of ball. // if outside the width canvas, change direction of ball. function circle( function circle(x,y,r x,y,r) ) if (x + dx > WIDTH || x + dx < 0) if (x + dx > WIDTH || x + dx < 0) { dx = -dx; dx = -dx; ctx.beginPath ctx.beginPath(); (); if (y + if (y + dy dy > HEIGHT || y + > HEIGHT || y + dy dy < 0) < 0) ctx.arc(x, y, r, 0, ctx.arc (x, y, r, 0, Math.PI Math.PI*2, true); *2, true); dy = - dy = -dy dy; // -.5; ; // -.5; ctx.closePath ctx.closePath(); (); x += dx; x += dx; ctx.fill ctx.fill(); (); y += dy y += dy; } } function draw() function draw() function function rect rect(x,y,w,h x,y,w,h) ) { { • Linear MoEon (speed depends on direcEon up or clear(); clear(); ctx.beginPath(); ctx.beginPath (); circle(x, y, 10); circle(x, y, 10); ctx.rect ctx.rect(x,y,w,h x,y,w,h); ); down) ctx.closePath(); ctx.closePath (); x += dx; x += dx; ctx.fill(); ctx.fill (); y += y += dy dy; – More realisEc accelerates while descending, (b/c of } } gravity, and slows down while bouncing up). function clear() function clear() { ctx.clearRect ctx.clearRect(0, 0, WIDTH, HEIGHT); (0, 0, WIDTH, HEIGHT); } 3.library.html //END ----- LIBRARY CODE //END ----- LIBRARY CODE Gravity • Reading Assignment: • Gravity – hMp://codetheory.in/basics-of-implemenEng- – Force affecEng the speed of ball’s ‘y’ coordinate gravity-with-html5-canvas/ • Slows the ball as it goes up – Rishabh’s Code Theory Web Site • Speeds up the ball as it goes down. – Check the code – Freelance Web & Mobile Developer from India: • Exercise: – Debug it so it doesn’t fully sink down beyond the floor. ¥ Let’s try it : Skim it for now… later on, on your own recreate some of the ideas at home. ¥ Simple example for now : Lets look at it: ¥ 6.bounce-gravity.html … add User Interac$on : … adding an Paddle KeyBoard Control • BuMons & links have onClick event handlers • Add a non-moving `paddle’ (rectangle) • Keyboard handlers have to install handler manually, as keyboard – Allow ball only to bounces off the paddle, listener. otherwise ball is out of bound. – addEventListener( event_type, event_handler, capture addEventListener( event_type, event_handler, capture ) https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases https://www.w3.org/TR/2003/NOTE-DOM-Level-3-Events-20031107/events.html#Events-phases – • (only ‘beyond floor’) • Allow the paddle to move • init_paddle(); // sets the paddle’s variables – Le= Arrow Input • In draw funcEon add code that decides whether to – Right Arrow Input bounce, or ‘disappear’ • Resources: – when it hits (ball bounces) or misses (ball disappears) the paddle • hMp://www.asquare.net/javascript/tests/KeyCode.html • hMp://www.w3schools.com/jsref/event_key_charcode.asp • Key UP, Key DOWN 7.paddle.html • ‘Who’ monitors the input? 8-1.keyboard-simple.html 8-2.keyboard-purple-ball-keyboard-SHIFT.html – Canvas, Browser, Window Manager 8-3.keyboard-paddle.html
… add User Interac$on : Firefox Debugger Mouse Control • mouseMove event to a user specified funcEon: – onMouseMove funcEon, – Checks to see if the mouse is within the borders of the paddle, and move the paddle if it is. – Movement and Distance of paddle 9.mouse.html hMps://developer.mozilla.org/en-US/docs/Tools/Debugger … Brick and Collisions What Game Looks Like … – See code, simple `collision detecEon’ (looks for • Features: overlaps) – Color – More in-depth collision discussion next week. – AnimaEon – Collision DetecEon – InteracEon with User • Mouse • Keyboard 11.bricks-really-preMy.html Next Up Sprite • Sprite: • Load Image – What is a sprite? • Draw Image onto Canvas – Sprite movements. • Animate Sprite • Parallax: – What is a parallax – From Simple Parallaxing to …
Recommend
More recommend
