就是利用canvas画圆和擦除，利用setInterval
<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">
<html xmlns="http;//www.w3.org/1999/xhtml">
<head>
<title>啊干牌弹弹球</title>
<meta http--equiv="Content--Type" content="text/html;charset=gb2312">
<script language = "JavaScript">
<!--
var ballr = 15; //球的半径
var recwidth = 400;
var recheight = 400;
var ballx = 600; //球心的横坐标
var bally = 235; //球心的纵坐标
var ballvx = 20; //水平速度
var ballvy = 5; //垂直速度
function myinit()
{
var context = document.getElementById('mycanvas').getContext('2d');
context.linewidth = 5;
context.strokeRect(400,50,recwidth,recheight);
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.fill();
setInterval(moveball,50);
}
function moveball()
{
var context = document.getElementById('mycanvas').getContext('2d');
context.clearRect(390,40,recwidth+20,recheight+20);
var temp = check();
ballx = ballx + 0.1*ballvx;
bally = bally + 0.1*ballvy;
context.beginPath();
context.arc(ballx,bally,ballr,0,Math.PI*2,true);
context.strokeRect(400,50,recwidth,recheight);
context.closePath();
context.fill();
}
function check()
{
if(ballx - ballr <= 400)ballvx = -ballvx;
if(ballx + ballr >= 800)ballvx = -ballvx;
if(bally - ballr <= 50)ballvy = -ballvy;
if(bally + ballr >= 450)ballvy = -ballvy;
}
function change()
{
var x = Number(document.form1.xspeed.value);
var y = Number(document.form1.yspeed.value);
if(x>=-50 && x<=50)ballvx = x;
else alert("速度不能超50！");
if(y>=-50 && y<=50)ballvy = y;
else alert("速度不能超50！");
return false;
}
//-->
</script>
<body onload = "myinit();">
<canvas id = "mycanvas" name = "mycanvas" width = "1000" height = "500">
</canvas>
<form id = "form1" name = "form1" onSubmit ="return change();">
水平速度:<input type = "number" id = "xspeed" name = "xspeed" value = "" min = "-50" max = "50"/>
竖直速度:<input type = "number" id = "yspeed" name = "yspeed" value = "" min = "-50" max = "50"/>
<input type = "submit" value = "CHANGE"/>
</form>
</body>
</html>
扫一扫
766
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
