Review: Rough Structure

Size: px

Start display at page:

Download "Review: Rough Structure"

Oswin Norton
6 years ago
Views:

Break Out Canvas Tutorial con/nue Simple Game: Break Out Animate, Game Elements ª Breakout ª Bill Mill Modified Tutorial So?

DOCTYPE html> <html> Review: Rough Structure <head> <style type="text/css"> canvas border: 3px solid black; </style> <script type="text/javascript"> </script> </head> <body> <canvas

Shapes Ball in Break out (a circle), Bricks rectangle ) // Global variables // Initialization methods // Mouse & Keyboard specifications // Shapes // draw routines more course grained

1 Break Out Canvas Tutorial con/nue Simple Game: Break Out Animate, Game Elements ª Breakout ª Bill Mill Modified Tutorial So?ware developer in Maryland Elements: ª Color ª Collision Detec/on ª Interac/on with User Mouse Keyboard 11bricks-really-preMyhtml What it Looks Like <!DOCTYPE html> <html> Review: Rough Structure <head> <style type="text/css"> canvas border: 3px solid black; </style> <script type="text/javascript"> </script> </head> <body> <canvas id="canvas" width="300" height="300"> Your browser does not support the canvas element </canvas> </body> </html> JavaScript Structure (Finished Code) Review: Step 1 : JavaScript Simple Shapes Ball in Break out (a circle), Bricks rectangle ) // Global variables // Initialization methods // Mouse & Keyboard specifications // Shapes // draw routines more course grained // Game logic <script type="text/javascript"> var x=200; var y=200; windowonload=function() var c = documentgetelementbyid( "canvas" ); var ctx = cgetcontext( "2d" ); //draw a circle ctxarc(75, 75, 10, 0, MathPI*2, true); </script> 1introhtml // draw a rectangle ctxrect( x, y, 20, 20);

2 Adding Ac/on Create a func/on that (1) clears canvas, and (2) then draws objects in a repeatable manner (eg, a draw() func/on) Primi/ve: ª setinterval(func/on, /meout) in the init() Using : SetInterval() for now CAVEAT: HW read below links (use RequestAnima/onFrame()) hmp://stackoverflowcom/ques/ons/ /segmeout-or-se/nterval-or-requestanima/onframe hmp://crea/vejscom/resources/requestanima/onframe/ var x = 150; var y = 150; var dx = 2; var dy = 4; var ctx; function init() ctx = $('#canvas') [0]getContext("2d"); return setinterval(draw, 10); Example Anima/on function draw() ctxclearrect(0,0,300,300); ctxarc(x, y, 10, 0, MathPI*2, true); init(); 3ac/onhtml Exercises: How would you make it con/nue to animate? How about changing dx, dy? //BEGIN LIBRARY CODE var x = 150; var y = 150; var dx = 2; var dy = 4; var WIDTH; var HEIGHT; var ctx; function init() ctx = $('#canvas') [0]getContext("2d"); WIDTH = $("#canvas")width(); HEIGHT = $("#canvas")height(); return setinterval(draw, 10); Modularize Circle Code Rectangle Code Clear Bounce Detect when the ball is beyond the canvas boundaries function draw() clear(); circle(x,y,10); 6bounce-millshtml function circle(x,y,r) ctxarc(x, y, r, 0, MathPI*2, true); function rect(x,y,w,h) ctxrect(x,y,w,h); function clear() ctxclearrect(0, 0, WIDTH, HEIGHT); //END LIBRARY CODE function draw() clear(); circle(x, y, 10); init() 3libraryhtml // if outside the width canvas, change direction of ball if (x + dx > WIDTH x + dx < 0) dx = -dx; if (y + dy > HEIGHT y + dy < 0) dy = -dy; // -5; Linear Mo/on ª More realis/c accelerates while descending, (b/c of gravity, and slows down while bouncing up) Gravity add Paddle Reading Assignment: ª Rishabh s Code Theory Web Site ª Freelance Web & Mobile Developer from India: hmp://codetheoryin/basics-of-implemen/ng-gravity-with-html5-canvas/ Add a non-moving `paddle (rectangle) ª Allow ball only to bounces off the paddle, otherwise ball is out of bound (only beyond floor )

3 add User Interac+on: KeyBoard Control Allow the paddle to move ª Le? Arrow Input ª Right Arrow Input hmp://wwww3schoolscom/jsref/ event_key_charcodeasp hmp://wwwasquarenet/javascript/tests/ KeyCodehtml Key UP, Key Down Who monitors input: ª Canvas, Browser, Window Manager 8keyboard-pxaddlehtml add User Interac+on: Mouse Control mousemove event to a user specified func/on: ª onmousemove func/on, ª 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 Brick and Collisions ª See code, simple `collision detec/on (looks for overlaps) ª More in-depth collision discussion next week Features: ª Color ª Anima/on What Game Looks Like ª Collision Detec/on ª Interac/on with User Mouse Keyboard 11bricks-really-preMyhtml Collision Will return to this with more fancy collision Sprite: ª What is a sprite? ª Sprite movements Next Up Parallax: ª What is a parallax ª From Simple Parallaxing to

Sprite Step 1: Load Image from disk ª Need a reference so it can load it in, not possible to use URL path to them ª Create image

using: ª DrawImage() reference image on sheet and canvas Step 3: Animate Sprite ª Sprites are typically on a sprite sheet so you

Animate Sprite Tutorial ª We want this: file:///users/ingrid/desktop/cls/4070/00a- HTML5-2014/animate-sprite/indexhtml

corner in sheet sheight // game canvas CHAR_START_X, // game canvas loca/on CHAR_START_Y, CHAR_WIDTH, CHAR_HEIGHT ); // for scaling

4 Sprite Step 1: Load Image from disk ª Need a reference so it can load it in, not possible to use URL path to them ª Create image object in java script, then give a reference to the image (eg, name of file using full path name) Step 2: Draw Image onto Canvas by using: ª DrawImage() reference image on sheet and canvas Step 3: Animate Sprite ª Sprites are typically on a sprite sheet so you need to animate over the sprite sheet as well Sprite Sheet Reference 120-spritesheet ª (don t worry how this is implemented Yet) Animate Sprite Tutorial ª We want this: file:///users/ingrid/desktop/cls/4070/00a- HTML5-2014/animate-sprite/indexhtml ctxdrawimage( charimage, // sprite sheet currx, curry, CHAR_WIDTH, CHAR_HEIGHT, // top le? corner in sheet sheight // game canvas CHAR_START_X, // game canvas loca/on CHAR_START_Y, CHAR_WIDTH, CHAR_HEIGHT ); // for scaling drawimage(image, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) Example: ctxdrawimage(img,j*50,i*38,50,38); Parallax hmp://enwikipediaorg/wiki/parallax_scrolling hmp://javacoffeede/?p=866

5 Layers Next week func/on Layer ( s, // path to image x, y ) thisimg = new Image(); thisimgsrc = s; thisx = x; thisy = y; More about collision (elas/c, non elas/c) Physics Modularizing data with Javascript (Kandijs)

<script type="text/javascript" src="breakout.js"> </script>