在画布范围内移动的圆点

使用HTML和JavaScript创建简单的互动球体动画

最新推荐文章于 2024-09-04 23:10:53 发布

原创最新推荐文章于 2024-09-04 23:10:53 发布 · 996 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #360

HTML5 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何利用HTML和JavaScript实现一个基本的互动球体动画，包括球体绘制、键盘控制以及边界碰撞处理。通过设置球体初始位置、大小、速度等参数，用户可以通过键盘操作控制球体在预设区域内移动，实现简单的交互体验。

<!DOCTYPE html>

<html>
<head><meta charset="utf-8"/></head>
<body onkeydown="test()">
	<canvas id="can" width="400px" height="300px" style="background:black"></canvas>
</body>
<script type="text/javascript">
	var canvas=document.getElementById("can");
	var cxt=canvas.getContext("2d");

	var ballx=20;//x轴坐标
	var bally=20;//y轴坐标
	var banjing=20;//半径
	var bu_x=400;//画布的x轴长
	var bu_y=300;//画布的y轴长
	//步长，步长不能随便定义，必须根据画布的长，宽和半径这三者综合考虑，要不就出屏
	//步长x轴范围=bu_x-2*banjing的公因子  buchang_x=400-2*20=360=1*2*2*2*3*3*5
	//步长y轴范围=bu_y-2*banjing的公因子  buchang_y=300-2*20=260=1*2*5*2*13
	//然后综合这两个公有的取出作为步长,所以公有因子为1,2,5
	var buchang=5;
	drawBall();
	function drawBall(){
		cxt.beginPath();
		cxt.arc(ballx,bally,banjing,0,360,true);
		cxt.fillStyle="red";
		cxt.fill();
		cxt.closePath();
	} 
	//a,s,d,w分别控制左，下，右，上,当触发onkeydown()事件时，
	function test(){
		var code=event.keyCode;//通过事件获取键盘ASC码的值
		switch(code){
			case 87:
				if(bally>banjing){
					bally-=buchang;break;
				}else{
					break;
				}//w,上，上边界封住
			case 68:
				if(ballx+banjing<bu_x){
					ballx+=buchang;break;
				}else{
					break;
				}//d,右,右边界封住
			case 83:
				if(bally+banjing<bu_y){
					bally+=buchang;break;
				}else{
					break;
				}//s,下
			case 65:
				if(ballx>banjing){
					ballx-=buchang;break;
				}else{
					break;
				}//a,左,左边界封住
			default:break;
		}
		cxt.clearRect(0,0,bu_x,bu_y);//清除画布，不加这句话，是另一个效果，哈哈
		drawBall();
	}

</script>
</html>