html5弹跳球

最新推荐文章于 2022-03-16 20:53:52 发布

weixin_30376323

最新推荐文章于 2022-03-16 20:53:52 发布

阅读量112

点赞数

文章标签： java

原文链接：http://www.cnblogs.com/java20130725/p/3215824.html

版权

<html>
<head>
<meta charset =utf-8 >
<title> 跳跳球 </title>

<script>
// box
var box_x=0;
var box_y=0;
var box_width=300;
var box_height=300;

// 注意:定位球采用球的中心
var ball_x=10;
var ball_y=10;
var ball_radius=10;
var ball_vx=5;
var ball_vy=3;

var box_bound_left=box_x+ball_radius;
var box_bound_right=box_x+box_width-ball_radius;
var box_bound_top=box_y+ball_radius;
var box_bound_bottom=box_y+box_height-ball_radius;
// ball

// context
var ctx;

function init()
{
    ctx=document.getElementById( 'canvas' ).getContext( '2d' );
    ctx.lineWidth=ball_radius;
    ctx.fillStyle= "rgb(200,0,50)" ;
    move_ball();
    setInterval(move_ball,100); // note
}
function move_ball()
{
    ctx.clearRect(box_x,box_y,box_width,box_height);
    move_and_check();
    ctx.beginPath();
    ctx.arc(ball_x,ball_y,ball_radius,0,Math.PI*2,true);
    ctx.fill();
    ctx.strokeRect(box_x,box_y,box_width,box_height);
}
function move_and_check()
{
    var cur_ball_x=ball_x+ball_vx;
    var cur_ball_y=ball_y+ball_vy;
    if(cur_ball_x < box_bound_left)
    {
    ball_vx=-ball_vx;
    cur_ball_x=box_bound_left;
    }
    if(cur_ball_x > box_bound_right)
    {
    ball_vx=-ball_vx;
    cur_ball_x=box_bound_right;
    }
    if(cur_ball_y < box_bound_top)
    {
    ball_vy=-ball_vy;
    cur_ball_y=box_bound_top;
    }
    if(cur_ball_y > box_bound_bottom)
    {
    ball_vy=-ball_vy;
    cur_ball_y=box_bound_bottom;
    }
    ball_x=cur_ball_x;
    ball_y=cur_ball_y;
}
</script>
</head>

<body onLoad = "init()" >
<canvas id = "canvas" width = "400" height = "400" />
</body>
</html>

转载于:https://www.cnblogs.com/java20130725/p/3215824.html

weixin_30376323

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5弹跳球

<html><head><metacharset=utf-8><title>跳跳球</title><script>//boxvarbox_x=0;varbox_y=0;varbox_width=300;varbox_height=300;//注意...
复制链接

扫一扫