1 / 14

Programming games

Programming games. Drawing on canvas. Homework: [Complete coin toss examples.] Do your own drawings. Upload files to website. HTML5 drawing on canvas. canvas is a new type of element drawing is done using what is termed the 2d context of a drawing element

noam
Télécharger la présentation

Programming games

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. Programming games Drawing on canvas. Homework: [Complete coin toss examples.] Do your own drawings. Upload files to website.

  2. HTML5 drawing on canvas • canvas is a new type of element • drawing is done using what is termed the 2d context of a drawing element • This requires statement done AFTER the body is loaded • can draw rectangles, paths (lines and arcs), images, text, and image from a video! • can also display video element directly.

  3. Screen geometry • Origin is upper left corner!!!! • units are pixels (very small) • Sometimes the terms top or y is used for vertical • vertical values increase going down the screen • Sometimes the terms left or x is used for horizontal • horizontal values increase going to the right. • Screen geometry holds for Flash and Processing and some, though not all, programming languages/environments.

  4. Drawings • Default color is black. • Drawing done for stroke versus fill. • Colors are set using • names (for 16 specific colorshttp://www.tutorialspoint.com/html5/html5_color_names.htm. • red-green-blue values, each as numbers 0 to 255 • hexadecimal

  5. 500,0,default color,20 by 20, fill 0,0, default color, 10 by 10, stroke rgb(200,0,100) 0,300,green,30 by 30, stroke 500,300, 50 by 50, fill

  6. <!DOCTYPE html> <html> <head> <title>Four rectangles</title> <script> var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 2; ctx.strokeRect(0,0,10,10); ctx.fillRect(500,0,20,20); ctx.strokeStyle = "green"; ctx.fillStyle = "rgb(200,0,100)"; ctx.strokeRect(0,300,30,30); ctx.fillRect(500,300,50,50); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas.</canvas> </body> </html>

  7. Classwork Do this now even if you haven't finished the coin toss programs. • After you get my example working, change it! • Put rectangles of different sizes in different places. • Change colors. Confirm that your code does what you intended.

  8. Errors • JavaScript is scripting language: interpret statements at execution time. • NOT compiled, with error messages • Semantic errors (errors of meaning) are more difficult to detect and fix! • Syntactic errors are errors of form, analogous to grammatical errors • FireFox Tools/Error Console can help • Most common: bad bracketing • ctx.fillStyle("rgb(200,0,100)"); fillStyle is attribute,not method

  9. Comments • The drawing is done by the init function which is called when the body element is loaded. The canvas element with id="canvas" does not exist until the body is loaded. • if there was more than one canvas element, we would use different names for the ids. • Default color is black. Red green blue values each are 0 to 255 (8 bits of intensity). The strokeStyle and the fillStyle are attributes, not methods. • GO: experiment with colors (by name) and rgb (note the quotation marks) and location and width and height.

  10. More comments • Drawings are …paint on the canvas. • These rectangles are not objects to be moved or referenced later. • Use ctx.clearRect method to erase. • Need to do calculations to detect hits. • See memory game in book. • Alternative is dynamic placement of html markup • See quiz, hangman.

  11. Reading code: sketch <html> <head> <title> Stuff </title> <script> var ctx; function init() { ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 10; ctx.fillStyle = "green"; ctx.fillRect(500,10,150,300); ctx.strokeStyle = "pink"; ctx.strokeRect(10,320,650,30); } </script> </head> <body onLoad="init();"> <canvas id="canvas" width="900" height="600"> Your browser doesn't support the HTML5 element canvas.</canvas> </body> </html>

  12. Images var himg = new Image(); himg.src = "head.jpg"; var timg = new Image(); timg.src = "tail.jpg"; … ctx.drawImage(himg,100,200, 60,60); //or if you set x, y, w, h variables set appropriately drawImage(himg, x, y, w, h);

  13. Classwork / homework • [Finish basic coin toss, biased coin.] • Practice drawings (your drawings). • Preview (more in next class): coin toss drawing images on canvas. • Saving it as new file, change your basic coin toss to draw images on the canvas. • consult tutorial. • You can do this. You can look at other examples. Look online for help. • The logic is pretty much the same. • The body element needs to hold a canvas element and a button element. The script element sets the ctx variable.

More Related