Programming games Recap. Upload work (Filezilla, index.html). Drawing lines. Drawing stars....
31
Programming games Recap. Upload work (Filezilla, index.html). Drawing lines. Drawing stars. Homework: Drawing exercises.
-
Upload
drusilla-brenda-mathews -
Category
Documents
-
view
226 -
download
2
Transcript of Programming games Recap. Upload work (Filezilla, index.html). Drawing lines. Drawing stars....
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
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>
variables (in script element)
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 successionvar c=0; // points to next color
variables (in script element)
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 successionvar c=0; // points to next color
variables (in script element)
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 successionvar c=0; // points to next color
variables (in script element)
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 successionvar c=0; // points to next color
variables (in script element)
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 successionvar c=0; // points to next color
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 statementsalert("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).
![[FileZilla 다운로드 [FileZilla 다운로드] 1. 무료FTP 프로그램(FileZilla) 다운로드하기 1 2 Step1. 클릭 Step2. 클릭File Size: 1MBPage Count: 6](https://static.fdocuments.net/doc/165x107/5ecea9966e9bf35ca305821f/filezilla-eeoeeoe-filezilla-eeoeeoe-1-eeoeftp-eoeeefilezilla.jpg)
