通过JS实现小球碰撞运动和图片归位

最新推荐文章于 2024-09-10 14:15:01 发布

mt-6087

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量271

点赞数 3

文章标签： html 前端

本文链接：https://blog.csdn.net/m0_72267895/article/details/131582201

版权

这篇文章展示了如何使用HTML和JavaScript创建一个碰撞运动的模拟，包括小球在边界上的反弹以及图片的归位功能。通过点击事件和键盘控制，可以操纵元素的移动。核心技术涉及到CSS定位和JavaScript的动态更新。

摘要由CSDN通过智能技术生成

碰撞运动

首先建一个父盒子来装小球，设border来模拟小球碰壁

核心就是小球的运动轨迹

body和style部分

<style type="text/css">
			.f{
				width: 1200px;
				height: 600px;
				border: 1px solid skyblue;
				position: relative;
				margin: 0 auto;
			}
			.z{
				width: 100px;
				height: 100px;
				border-radius: 50%;
				background-color: yellow;
				position: absolute;
				left: 550px;
				top: 250px;
			}
		</style>
	</head>
	<body>
		<div class="f" onclick="startGame()">
			<div id="ball" class="z"></div>
		</div>
		
	</body>

script部分

<script>
		//生成0~1200的随机数
		let r =Math.floor(Math.random()*1200)
		//小球球心着落的随机坐标是(r,50)
		//小球球心的坐标
		let x=600,y=300
		//计算x和y之间运动的倍数关系
		let x_y=(x-r)/(y-50)
		let dy=-1//表示 单位时间 沿着Y轴向上运动1
		let dx=x_y*dy//表示 单位时间 沿着x轴运动
		//获取小球
		let ball=document.getElementById('ball')
		

		//点击父元素任意位置开始游戏
		function startGame(){
			
			let s=setInterval(()=>{
				//上下碰撞
				if(y<50||y>550){
					dy=-dy
				}
				//左右碰撞
				if(x<50||x>1150){
					dx=-dx
				}
				
				//把单位时间的位移作用在坐标上
				x+=dx
				y+=dy
				
				//把坐标作用在实际的定位上
				ball.style.left=x-50 +'px'
				ball.style.top=y-50 +'px'
				console.log(x0,y0)
				
			},10)

		}
		
	</script>

要注意的是运动轨迹是通过小球球心进行的，所以在定位时要减去半径

以下是效果图

图片归位

图片归位和小球运动一样核心是图片的中心和指定位置的中心

body和style部分

<style>
			.f{
				width: 1000px;
				height: 600px;
				border: 1px solid navajowhite;
				position: relative;
			}
			.z ul{
				width: 1000px;
				height: 250px;
				position: absolute;
				margin: 0 auto;
			}
			li{
				float: left;
				
				width: 150px;
				height: 200px;
				list-style-type: none;
				margin-left: 5px;
			}
			img{
				width: 150px;
				height: 200px;
				position: absolute;
				z-index: 2;
				}
			.z2{
					width: 1000px;s
					height: 250px;
					position: absolute;
					top: 250px;
					font-size: 50px;
					text-align: center;
					line-height: 150px;
					color: purple;
					z-index: 0;
				}
				.z2 ul li{
					border: 1px solid black;
				}
			
		</style>
	</head>
	<body>
		<div class="f">
			<div class="z"><ul>
			<li><img src="./imgs/刘备.jpg" alt="" id="p1" onclick="pp()" ></li>
			<li><img src="./imgs/曹操.jpg" alt="" id="p2" onclick="pp2()"></li>
			<li><img src="./imgs/关羽.webp" alt="" id="p3" onclick="pp3()"></li>
			<li><img src="./imgs/刘协.webp" alt="" id="p4" onclick="pp4()"></li>
			<li><img src="./imgs/孙权.webp" alt="" id="p5" onclick="pp5()"></li>
			<li><img src="./imgs/貂蝉.webp" alt="" id="p6" onclick="pp6()"></li>
			</ul></div>
			<div class="z2">
				<ul>
					<li>孙权</li>
					<li>貂蝉</li>
					<li>曹操</li>
					<li>关羽</li>
					<li>刘备</li>
					<li>刘协</li>
				</ul>
			</div>
		</div>
	</body>

script部分

可以通过鼠标点击归位和键盘移动

鼠标点击

<script>
		let p1=document.getElementById('p1')
		let p2=document.getElementById('p2')
		let p3=document.getElementById('p3')
		let p4=document.getElementById('p4')
		let p5=document.getElementById('p5')
		let p6=document.getElementById('p6')
		let x=105,y=100
		let x1=672,y1=300
		function p(x,p1,x1){
			let yc=setInterval(()=>{
				while(x<x1){
					x++
				}
				while(x>x1){
					x--
				}
				if(y<y1){
					y++
				}
				p1.style.top=y+'px'
				p1.style.left=x+'px'
			},10)
			console.log(x,y)
			
		}
		function pp(){
			p(x,p1,x1)
		}
		function pp2(){
			p(160,p2,360)
		}
		function pp3(){
			p(310,p3,520)
		}
		function pp4(){
			p(460,p4,830)
		}
		function pp5(){
			p(510,p5,45)
		}
		function pp6(){
			p(160,p6,200)
		}
	</script>

执行效果

键盘控制

<script>
		let p1=document.getElementById('p1')
		let p2=document.getElementById('p2')
		let p3=document.getElementById('p3')
		let p4=document.getElementById('p4')
		let p5=document.getElementById('p5')
		let p6=document.getElementById('p6')
		let x=105,y=100
		function p(x,p1){
			
			//感知键盘 keycode 下40 上38 左 37 右39
			document.onkeydown=function(e){
				// console.log(e.keyCode)
				switch (e.keyCode){
					case 38:
						console.log('上')
						y-=l
						p1.style.top=y+'px'
						break;
					case 40:
						console.log('下')
						y+=l
						p1.style.top=y+'px'
						break;
					case 37:
						console.log('左')
						x-=l
						p1.style.left=x+'px'
						break;
					case 39:
						console.log('右')
						x+=l
						p1.style.left=x+'px'
						break;
				}
			}
			
		}
		function pp(){
			p(x,p1)
		}
		function pp2(){
			p(160,p2)
		}
		function pp3(){
			p(310,p3)
		}
		function pp4(){
			p(460,p4)
		}
		function pp5(){
			p(510,p5)
		}
		function pp6(){
			p(160,p6)
		}
	</script>