var ctx;
var r=10;
var x=200;
var y=200;
var tevent;
var spx;
var spy;
function init()
{
ctx = document.getElementById("canvas").getContext("2d");
ctx.lineWidth = 10;
ctx.strokeRect(0,0,400,400);
}
function drawBall()
{
clearBall();
checkBall();
ctx.fillStyle = "rgb(255,0,0)";
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI,true);
ctx.fill();
}
function checkBall()
{
x+=spx;
y+=spy;
if(x<10)
{
spx *= -1;
x = 10;
}
if(x>390)
{
spx *= -1;
x = 390;
}
if(y<10)
{
spy *= -1;
y=10;
}
if(y>390)
{
spy *= -1;
y=390;
}
}
function clearBall()
{
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(5,5,390,390);
}
function runBall()
{
spx=Number(document.f.xsp.value);
spy=Number(document.f.ysp.value);
tevent=setInterval("drawBall();",50);
}
function stopBall()
{
clearInterval(tevent);
clearBall();
x=200;
y=200;
ctx.fillStyle = "rgb(255,0,0)";
ctx.beginPath();
ctx.arc(x,y,r,0,2*Math.PI,true);
ctx.fill();
}
水平速度:
垂直速度:
运行
停止
巧合下发现小球碰撞后可以给墙壁染色,还挺有意思的