小球定时碰撞

最新推荐文章于 2019-03-01 14:23:24 发布

aikinlaile

最新推荐文章于 2019-03-01 14:23:24 发布

阅读量274

点赞数 1

本文链接：https://blog.csdn.net/aikinlaile/article/details/50589871

版权

<html>
<head>
<title>Bouncing Ball with inputs</title>
<style>
form{
width:330px;
margin:20px;
background-color:brown;
padding:20px;
}
</style>
<script type="text/javascript">
var boxx=20;//盒子左上角的x位置
var boxy=30;//盒子左上角的y位置
var boxwidth=350;//盒子宽度
var boxheight=250;//盒子高度
var ballrad=10;//球的半径
var boxboundx=boxx+boxwidth-ballrad;//右边界
var boxboundy=boxy+boxheight-ballrad;//下边界
var inboxboundx=boxx+ballrad;//左边界
var inboxboundy=boxy+ballrad;//上边界
var ballx=50;//球的初始x位置
var bally=60;//球的初始y位置
var ctx;
var ballvx=4;//初始水平位移
var ballvy=8;//初始垂直位移

function init(){
ctx=document.getElementById('canvas').getContext('2d');
ctx.lineWidth=ballrad;
ctx.fillStyle="rgb(200,200,200)";
moveball();//第一次调用moveball来移动、检查和显示球
setInterval(moveball,60);//建立定时事件
}

function moveball(){
ctx.clearRect(boxx,boxy,boxwidth,boxheight);//清除盒子，包括球
moveandcheck();
ctx.beginPath();
ctx.arc(ballx,bally,ballrad,0,Math.PI*2,true);
ctx.fill();
ctx.strokeRect(boxx,boxy,boxwidth,boxheight);//绘制矩形轮廓
}

function moveandcheck(){
var nballx=ballx+ballvx;//设置试探的下一个x位置
var nbally=bally+ballvy;
if(nballx>boxboundx){
ballvx=-ballvx;
nballx=boxboundx;
}
if(nballx<inboxboundx){
nballx=inboxboundx;
ballvx=-ballvx;
}
if(nbally>boxboundy){
ballvy=-ballvy;
nbally=boxboundy;
}
if(nbally<inboxboundy){
nbally=inboxboundy;
ballvy=-ballvy;
}
ballx=nballx;
bally=nbally;
}

function change(){
ballvx=Number(f.hv.value);
ballvy=Number(f.vv.value);
return false;//返回false,确保不重新加载页面
}
</script>
</head>
<body οnlοad="init();">
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HT
</canvas>
<br/>
<form name="f" id="f" onSubmit="return change();">
Horizontal velocity<input name="hv" id="hv" value="4" type="number" min="-10" max="10"></input>
<br/>
Vertical velocity<input name="vv" id="vv" value="8" type="number" min="-10" max="10"></input>
<input type="submit" value="CHANGE"></input>
</form>
</body>
</html>