HTML and CSS Reference
In-Depth Information
context . closePath ();
context . fill ();
iif ( ball . x > theCanvas . width || ball . x < 0 ) {
angle = 180 - angle ;
updateBall ();
} else
else iif ( ball . y > theCanvas . height || ball . y < 0 ) {
angle = 360 - angle ;
updateBall ();
}
}
function
function updateBall () {
radians = angle * Math . PI / 180 ;
xunits = Math . cos ( radians ) * speed ;
yunits = Math . sin ( radians ) * speed ;
}
var
var speed = 5 ;
var
var p1 = { x : 20 , y : 20 };
var
var angle = 35 ;
var
var radians = 0 ;
var
var xunits = 0 ;
var
var yunits = 0 ;
var
var ball = { x : p1 . x , y : p1 . y };
updateBall ();
theCanvas = document . getElementById ( "canvasOne" );
context = theCanvas . getContext ( "2d" );
function
function gameLoop () {
window . setTimeout ( gameLoop , 20 );
drawScreen ()
}
gameLoop ();
}
< /script>
</head>
</head>
<body>
<body>
<div
<div style= "position: absolute; top: 50px; left: 50px;" >
<canvas
<canvas id= "canvasOne" width= "500" height= "500" >
Your browser does not support HTML5 Canvas.
Search WWH ::




Custom Search