Programming games

Programming games Show work on site. Work on slide show. Timed event for bouncing ball. Homework: [Finish slide show and upload to site.] Acquire a short video clip.

ftp • We will go around to check that you have uploaded something…. • Preference is that you set up an index.html file so I (and anyone else) just goes tostudents.purchase.edu/john.doe • index.html files can bein any folder / multiple folders students.purchase.edu/john.doe/pg Your userid.

Game Review • Design screen (game board) • static elements • dynamic elements • image changes • position changes • Identify events and program event handlers • Determine data (global variables)

HTML/JavaScript Review • HTML head element contains • style element • script for functions and global variables • setInterval used for timed events • HTML body element contains • images • a element for javascript code as value of • href, onMouseOver, onMouseOut, onClick • forms • javascript code for onSubmit • input elements for input from player AND output (display) to player • canvas element or elements

General hints • Syntax (punctuation for code) counts! Watch for correct 'pairing up' of parentheses, curly brackets, quotation marks. • HTML and JavaScript names must be correct. Your names (for functions, variables, images, etc.) must be consistent.

Debugging • Put in alert("Here in code, variable x is "+X ); statements • Use Firefox (or Mozilla or Netscape) and under Tools Error Console • Remember to Clear old messages • Be sure you are testing the file you are correcting…. • Work slowly: add functionality one 'thing' at a time. • Read the whole tutorial. Don't (just) copy and paste all the code. Think where the code goes.

Timed events • Once a timed event is set up, you can do anything…. • Better said: write code for setting up timed event. Write code to do anything. • Example: bouncing ball • Strategy: use init function as done in other drawing examples. Use setInterval. Erase and re-draw circle and box.

<script> var ctx; var cwidth = 900; var cheight = 600; var ballrad = 50; var boxx = 20; var boxy = 30; var boxwidth = 850; var boxheight = 550; var boxboundx = boxwidth+boxx-ballrad; var boxboundy = boxheight+boxy-ballrad; var inboxboundx = boxx+ballrad; var inboxboundy = boxy+ballrad; var ballx = 150; var bally = 160; var ballvx = 2; var ballvy = 4;

function init(){ ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = ballrad; setInterval(drawscene,50); }

function drawscene(){ ctx.clearRect(boxx,boxy,boxwidth,boxheight); moveandcheck(); ctx.beginPath(); ctx.arc(ballx,bally,ballrad,0,2*Math.PI,true); ctx.fill(); ctx.strokeStyle ="rgb(200,0,50)"; ctx.strokeRect(boxx,boxy,boxwidth,boxheight); //box }

function moveandcheck() { var nballx = ballx + ballvx; var nbally = bally +ballvy; if (nballx > boxboundx) { ballvx =-ballvx; nballx = boxboundx; } if (nballx < inboxboundx) { nballx = inboxboundx ballvx = -ballvx; } if (nbally > boxboundy) { nbally = boxboundy; ballvy =-ballvy; } if (nbally < inboxboundy) { nbally = inboxboundy; ballvy = -ballvy; } ballx = nballx; bally = nbally; } </script> </head>

<body onLoad="init();"> <canvas id="canvas" width="900" height="600"> This browser doesn't support the HTML5 canvas element. </canvas> </body> </html>

After slide show • You can bounce anything! • In the drawscene function replace ctx.beginPath(); ctx.arc(ballx,bally,ballrad,0,2*Math.PI,true); ctx.fill(); • You can change dimensions of box, ball, speed, etc. You can change colors. • You can add code to start and stop, using slide show as a model.

Class work / Homework • Catch up and continue uploading work to your site • Complete slide show. • upload to site. This means the html file and all the image files for the slide show. • Acquire short video clip. • Will start bouncing something…

Programming games