1 / 14

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….

arty
Download Presentation

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

  2. 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.

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

  4. 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

  5. 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.

  6. 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.

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

  8. <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;

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

  10. 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 }

  11. 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>

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

  13. 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.

  14. 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…

More Related