Cut And
Paste Code For Lesson 6
Simple Bouncing Circle Animation
<!DOCTYPE html>
<html>
<body>
<canvas
id="myCanvas" width="100" height="300" style="border:1px
solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var height = 43;
var move
= 1;
var i = setInterval(function(){
var c =
document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.arc(50,height,40,0,2*Math.PI);
ctx.clearRect(0, 0, 100, 300); //rem this out
for illusion
ctx.stroke();
height= height+move;
if (height > 256)
{
// clearInterval(i);
move
= -1
ctx.clearRect(0,
0, 100, 300);
}
if (height < 43)
{
// clearInterval(i);
move
= 1
ctx.clearRect(0,
0, 100, 300);
}
}, 1);
</script>
</body>
</html>
Better Bouncing Circle Animation
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="500" height="300"
style="border:1px solid #d3d3d3;">
Your browser does not support
the HTML5 canvas tag.</canvas>
<script>
var xpos = 43;
var ypos = 50;
var ymove = 1;
var
xmove = 1;
var i = setInterval(function(){
var c = document.getElementById("myCanvas");
var
ctx = c.getContext("2d");
ctx.strokeStyle = "blue";
ctx.beginPath();
ctx.arc(ypos,xpos,40,0,2*Math.PI);
ctx.clearRect(ypos-43,
xpos-43, 100, xpos+43); //rem this out for illusion
ctx.stroke();
xpos=
xpos+ymove;
ypos = ypos+xmove;
if (xpos > 256)
{
ymove = -1
}
if
(xpos < 43) {
ymove
= 1
}
if (ypos > 455)
{
xmove = -1
}
if
(ypos < 43) {
xmove
= 1
}
}, 1);
</script>
</body>
</html>
Lesson 6 Notes:
More on creating a delay in your program
There are two ways to create a delay:
setTimeout(doSomething,500); // calls doSomething() 500 miliseconds from
now
setInterval(doSomething,500); // calls doSomething() every 500 miliseconds
until stopped
To clear a rectangular
space:
ctx.clearRect(0, 0, 100, 300)
If Else Statements:
<!DOCTYPE html>
<html>
<body>
<button
onclick="myFunction()">Click to compare numbers to 12</button>
<p
id="demo"></p>
<script>
function myFunction()
{
var person = prompt("Enter a number to compare
to 12", "");
if
(person != null) {
if (person < 12) {
document.write("
your number is less than 12");
}
if (person > 12) {
document.write("Your
number is greater than 12");
}
if (person == 12) {
document.write("Trying
to trick me eh!?! Your number IS 12!! :-)");
}
}
}
</script>
</body>
</html>