Programming games

22
Programming games Context of what we are doing. Drawing on canvas. Homework: [Complete coin toss examples.] Do your own drawings. Upload files to website.

description

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 - PowerPoint PPT Presentation

Transcript of Programming games

Page 1: Programming games

Programming gamesContext of what we are doing.

Drawing on canvas. Homework: [Complete coin toss examples.]

Do your own drawings. Upload files to website.

Page 2: Programming games

RecallSource of diagram: Coursera course Programming for Everyone, (Python), Charles Severance, U of Michigan

Page 3: Programming games

Computer can be connected to other computers….

Page 4: Programming games

Software• A browser can open files on secondary storage OR

go to the Internet (using the Purchase server).• An editor creates and/or opens and modifies a file

on the local file system.• An ftp program uploads or downloads from your

account on a Purchase server.

Your program

Page 5: Programming games

Correct terminology• We use the Filezilla program—it runs file

transfer protocol– to upload and download our work. We do NOT store our files on Filezilla.

• We use Google (on google.com or the google ap) to find web sites. These are mainly NOT google web sites.

• BUT, later in the course, we will use google sites for information on the Google Maps API.

Page 6: Programming games

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.

Page 7: Programming games

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.

Page 8: Programming games

Drawings

• Default color is black.• Drawing done for stroke versus fill.• Colors are set using

– Names: for 16 specific colors and othershttp://www.tutorialspoint.com/html5/html5_color_names.htm.

– red-green-blue values, each as numbers 0 to 255

– hexadecimal

Page 9: Programming games

0,0, default color, 10 by 10, stroke

0,300,green,30 by 30, stroke

500,300, 50 by 50, fill

500,0,default color,20 by 20, fill

rgb(200,0,100)

Page 10: Programming games

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

Page 11: Programming games

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

Page 12: Programming games
Page 13: Programming games

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.

Page 14: Programming games

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.

Page 15: Programming games

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.

Page 16: Programming games

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>

Page 17: Programming games

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

Page 18: Programming games

Notice• Compare img and Image

– img is the html element type– Image is the built-in JavaScript object

• In html document:– Elements: <html >, <body >, <a >, <img >– Elements are

• Singletons: <img > Proper way is <img … />

• or pairs: <a…>…. </a>

– Elements can contain attributes• <a href=….>, <img src=….>, <body onLoad=…>

– Elements can contain text and/or other elements– html document contains head and body

• head contains title, style, script• body contains

Write in notebook

Page 19: Programming games

Advice: Take notes• Key concepts

• Questions & clarifications

• Ideas– Drawings– Combining what you know

• Random choice• Changing img src• Changing input values in a form• Drawing on canvas

– More drawing tools coming

Page 20: Programming games

From now on…

• Modify (add to) your index.html file.

• Using Filezilla,– Upload new programs

• The .html file and any other files

– Upload modified index.html file

• Also, can use web space or FILE space for unfinished work

Page 21: Programming games

Filezilla

• Demonstration

Page 22: Programming games

Classwork / homework

• [Finish basic coin toss, biased coin, counts]• 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.