您的位置：首页 > Web前端 > HTML5

html5 方框内的小球

2016-04-11 18:03 525 查看

html5 方框内的小球

版本一

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var x=10,y=10,WIDTH,HEIGHT,RADIUS=10;
canvas=$("#canvas").get(0);
d=canvas.getContext("2d");
//小球方向，默认为1，向右下
var direction=1;
WIDTH= canvas.width;
HEIGHT= canvas.height;

//小球走
setInterval(function () {
//1.判断方向，决定小球的横纵坐标
//2.判断方向变化
if(direction==1){
//                    右下
x++;
y++;
if(y>=HEIGHT-RADIUS){
direction=2;
}
if(x>=WIDTH-RADIUS){
direction=4;
}
}else if(direction==2){
//右上
x++;
y--;
if(x>=WIDTH-RADIUS){
direction=3;
}
if(y<=RADIUS){
direction=1;
}
}else if(direction==3){
//                    左上
x--;
y--;
if(y<=RADIUS){
direction=4;
}
if(x<=RADIUS){
direction=2;
}
}else if(direction==4){
//                    左下
x--;
y++;
if(x<=RADIUS){
direction=1;
}
if(y>=HEIGHT-RADIUS){
direction=3;
}
}
d.clearRect(0,0,WIDTH,HEIGHT);  // 清除之前的canvas
d.fillStyle="blue";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
},20);

});
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>

版本二

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.js"></script>
<script>
$(function () {
var x=10,y=10; //  圆坐标
var WIDTH,HEIGHT,RADIUS=10;
xx=1;yy=1; // 步长
canvas=$("#canvas").get(0);
d=canvas.getContext("2d");
WIDTH= canvas.width;
HEIGHT= canvas.height;
//小球走
setInterval(function () {
if(x < RADIUS || x >= WIDTH-RADIUS){   // 一开始坐标就相等了，要去掉=号 x = radius
xx *= -1;
}
//判断小球纵向边界
if(y < RADIUS || y >= HEIGHT-RADIUS){
yy *= -1;
}
x += xx;
y += yy;
d.clearRect(0,0,WIDTH,HEIGHT);  // 清除之前的canvas
d.fillStyle="blue";
d.beginPath(); // 从新开始画，防止 冲突重叠
d.arc(x,y,RADIUS,0,Math.PI*2,true); // x y 坐标 半径30
d.closePath(); // 结束画布，防止冲突重叠
d.fill(); // 结束渲染
},20);

});
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300" style="border:1px solid green"></canvas>
<span><img src="direction.png" width="400"></span>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航