Programming games

Programming games Recap. Upload work (Filezilla, index.html). Drawing lines. Drawing stars. Homework: Drawing exercises.

Recap • Drawing done using what is termed the 2d context of the canvas element. My code sets a variable called ctx. This is my name. • Can draw filled-in rectangles or outlines of rectangles • Can draw paths, including arcs. The fill and stroke calls close the path. Also, can close a path with closePath() NOTE: can draw non-circular ovals using transformations: scale. Check out the hangman game in book! • Using variables makes code more flexible and easier to see relationships.

Uploading work • Please upload all your work to your students.purchase.edu website. • Use filezilla (or equivalent) ftp (file transfer protocol) program to upload and download work. • Create a pg (or games or programminggames) folder. • In that folder, create an index.html file with links to your work.

index.html <html><head><title>Games</title></head> <body> <a href="sites.html">My favorite sites</a> <br> <a href="cointoss.html">Fair coin toss </a> and <a href="bias.html">Weighted coin</a> <br> … </body></html>

More on index.html • Can make as fancy as you wish. • Can use <article> and style • Caution: you do need to upload all the image files. • You do need to use the correct names. • Make file names simple: no spaces, no special symbols.

Reminder • You may use your web space as storage space for incomplete work. • Someone can look at it, but only if they know the name.

Coordinate system Keep in mind that drawing requires attention to the coordinate system of the canvas. The coordinate system is upside down! That is, vertical values start with zero at the top and get bigger moving DOWN the screen. Each point on the screen requires 2 numbers: a horizontal (x) number and a vertical (y) number.

Exercises • http://faculty.purchase.edu/jeanine.meyer/html5/drawtriangle.html • This draws one triangle. See if you can draw a different triangle somewhere else on the screen, say the lower right corner. • http://faculty.purchase.edu/jeanine.meyer/html5/drawtriangles.html • This draws 2 triangles. See if you can draw two different triangles. Again, change this example. Draw 3 triangles. Draw other combinations of lines. • http://faculty.purchase.edu/jeanine.meyer/html5/drawtrianglesfilled.html • This draws two filled triangles. Change the triangle dimensions, location on the screen, AND color. There are 16 named colors. You can look at the rectangles example to see other ways to set the color. Remember there is a color for the stroke and for the fill. • http://faculty.purchase.edu/jeanine.meyer/html5/drawtrianglespink.html • This draws triangles using fill and stroke. Experiment with the order of the fill and stroke, the color (change the strokeStyle and the fillStyle and the lineWidth). • http://faculty.purchase.edu/jeanine.meyer/html5/drawguy.html • This draws a figure. Experiment with this. Maybe you don’t want the body to be a triangle but something else. You also can use the methods you learned in the drawing rectangle and drawing smile-y and frown-y faces. Review those examples now!

Next drawing: star • For drawing lines (and arcs), think of moving a pencil versus drawing (preparing to draw) a line segment • nothing is drawn until the stroke or fill • Use an array with coordinates for 5 points • Use an array to hold names of 3 colors • button element • http://faculty.purchase.edu/jeanine.meyer/html5workshop/wkshopdrawingstars.html

opening screen

after 1st press of button

after next press

show body first <body onLoad="init();"> <canvas id="canvas" width="600" height="400"> Your browser doesn't support the HTML5 element canvas. </canvas> <button onClick="makestar();">Make Star </button> </body> </html>

var ctx; var pts=[ //5 points for star: rough drawing [100,35], [60,10], [20,35], [35,100], [85,100] ]; var colors=["red","white","blue"]; //used in succession var c=0; // points to next color variables (in script element)

function init() { ctx = document.getElementById('canvas').getContext('2d'); } function makestar() { ctx.clearRect(0,0,600,400); ctx.fillStyle=colors[c]; c = c +1; // can reduce to one line using colors[c++] c = (c<3)?c:0; ctx.beginPath(); ctx.moveTo(pts[0][0],pts[0][1]); ctx.lineTo(pts[3][0],pts[3][1]); ctx.lineTo(pts[1][0],pts[1][1]); ctx.lineTo(pts[4][0],pts[4][1]); ctx.lineTo(pts[2][0],pts[2][1]); ctx.lineTo(pts[0][0],pts[0][1]); ctx.stroke(); //outline (necessary for white star! ctx.fill(); }

Assignment • Use what you have learned: drawing rectangles and paths • a path can include arcs and lines. • Try stroke and fill • Can include multiple moveTo • think of picking up your pen and moving to a new spot on the paper/canvas.

HTML with JavaScript • The statement: return false; • is necessary [sometimes] to prevent the browser from refreshing the screen, which would restore the original images.

Watch out • Spelling of HTML & javascript tags and commands must be correct. • You must save the file as filename.html • For the name: all one word, lowercase. • Make sure you are saving as .html • remember where you are saving it • same folder/directory as any images. • Your names must be consistent. • You can spell how you like. • Punctuation (called syntax) must be correct • Missing quotation marks and missing or misplaced brackets matter. • Image files must really be of indicated type. • Be careful of large images pushing button off-screen. • Anything else??????

Names File names, variable names, function names • Simple, short, but clear enough for you to remember • Consistency helps • NOT: head.gif, tails.gif Einstein said: explanations / theories "should be as simple as possible, but no simpler."

Debugging • Make sure you are testing latest version • you can make a small visible change • Insert alert statements alert("at start of toss function"); alert("xxx is "+xxx); • NOTE: if a function is not well-formed (for example, bracket problem), the browser does not display a message—it just doesn't work! • Firefox: Tools/Error consoleChrome: wench symbol/Tools/JavaScript Console

Debugging • In TextWrangler (PC: TextPad) use Find command • Check if dthrow defined AND called • Check on consistent spelling of names • Can use for brackets, closing </a>, etc. though you may need to print out and use pencil. Also use opening and closing….

For curiousity Try: xxx = Math.random(); alert("xxx is " + xxx); Remember two meanings of + (operator overloading)

JavaScript if & if/else if ( logicalexpression ) { statements } if ( logicalexpression ) { statements } else { statements }

Switch statement switch (expression) { case value1: statements case value2: statements default: statements } • If you do NOT want execution to continue (flow into) the next case, you need to insert a break statement. optional

Notation • { and } are used to group statements together • function definition, if and else clauses, and other statements we haven't done yet: switch, for, do while. • ( and ) are used • condition part of an if statement • if (Math.random()>.5) • set order of operations in a calculation • total = total + (total*taxrate); • specify arguments in a function definition and parameters in a function call • Math.random()

Homework • Continue with drawings • The next game will be the dice game (craps).

Programming games