Difference: AdmittedStudentVisitDay (2 vs. 3)

Revision 32017-04-10 - JimSkon

Line: 1 to 1
 
META TOPICPARENT name="WebHome"
Canvas not supported in this brower
Line: 380 to 380
  <canvas id="myCanvas" width="300" height="300" > </canvas> </body>
Added:
>
>

Try it out

 
  • How can we test this out?
Changed:
<
<
  • We need an editor to write and save a code file. Go to the Start menu, find Assessories, and then the NotePad editor.
>
>
  • We need an editor to write and save a code file. Go to the Start menu, find type notepad, and then select either the Notepad editor or the Notepad++ editor. (Nodepad++ is nicer, but Notepad is on every Windows computer)
 
  • Copy the code shown in blue above and paste it into the editor.
  • Save the file as "Ball1.html" on the desktop. Note: Change "Save as type" from (*.txt) to "All Files".
Changed:
<
<
  • Go to the desktop, right click on the new file named Ball1.html, and open with FireFox.
>
>
  • Go to the desktop, right click on the new file named Ball1.html, and open with Google Chrome.
 
  • A page should appear showing a simple blue circle.

Simple static ball:
example1.png

Step 2 - Move the ball

Line: 501 to 502
 
  • This bouncing ball illustrates some fundamental methods used in programs to simulate moving objects. Similar animations are used in movies and game development, and this program could be rather easily extended to build a ping-pong game or a breaker-type of game.

Step 5

Changed:
<
<
Can you try to add some more features?
  • Change the size of the ball, or the dimensions of the area.
  • Change the color of the ball whenever it hits the wall.
  • Draw more than one ball.
>
>
Can you try to make it better?
  • Notice how the goes partway off the canvas before bouncing. What is happening? How can we fix this?
  • Change the size of the ball, or the dimensions of the canvas area.
  • Change the color of the ball whenever it hits the wall. (see getRandomColor below. Use getRandomColor() in place of "#0000FF":)
  • Draw and move more than one ball.
 
  • Simulate the effects of gravity and friction (the ball's height decreases with each bounce, and the side to side motion slows down)
  • Whatever you can think of! See the links below for some more ideas.
Added:
>
>
<-- SyntaxHighlightingPlugin -->
function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}
<-- end SyntaxHighlightingPlugin -->
 

Links

 
This site is powered by the TWiki collaboration platform Powered by PerlCopyright © 2008-2019 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding TWiki? Send feedback