简单的js拼图小游戏

最新推荐文章于 2025-04-02 07:51:43 发布

东子Yang

最新推荐文章于 2025-04-02 07:51:43 发布

阅读量382

点赞数

本文链接：https://blog.youkuaiyun.com/weixin_43347473/article/details/103624538

版权

根据视频的思路，自己重新敲一遍
分析：

图片是怎样摆放根据背景图片的定位。
如何拖拽 === H5 新增的拖拽
怎样互换 === 找到该对应的父元素对应进行 appendChild（相互的元素）
页面布局 === 可以九宫格，12宫格。。。难度的变化
如何校验 === 是否在原来对应的父元素中设置 id的相似，然后比较
洗牌 === 随机互换两个div。进行多次。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		
		<title></title>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid white;
				background: url(img/2.jpg);
				background-size:300px 300px;
			}
			#z-1{
				background-position: 0px 0px;
			}
			#z-2{
				background-position: -100px 0px;
			}
			#z-3{
				background-position: -200px 0px;
			}
			#z-4{
				background-position: 0px -100px;
			}
			#z-5{
				background-position: -100px -100px;
			}
			#z-6{
				background-position: -200px -100px;
			}
			#z-7{
				background-position: 0px -200px;
			}
			#z-8{
				background-position: -100px -200px;
			}
			#z-9{
				background-position: -200px -200px;
			}
		</style>
		<script>
			function drag(e) {
				var id = e.target.id
				e.dataTransfer.setData("id",id)
			}
			function over(e){
				e.preventDefault()
				
			}
			function drop(e) {
				var dragId = e.dataTransfer.getData("id")
				var dropId = e.target.id
				var drag = document.getElementById(dragId)
				var drop = document.getElementById(dropId)
				var dragParent = drag.parentNode
				var dropParent = drop.parentNode
				dragParent.appendChild(drop)
				dropParent.appendChild(drag)
				gameOver()
			}
			function gameOver(){
				var count = 0
				var pics = document.getElementsByClassName("pic")
				for(var i= 0;i<pics.length;i++){
					var pic =pics[i]
					var picP = pic.parentNode
					var picId = pic.getAttribute("id")
					var picPId = picP.getAttribute("id")
					if(picId.replace("z-","") == picPId.replace("f-","")){
						count++
					}else{
						return
					}
				}
				if(count == 9){
					alert("恭喜你， 你赢 了，好厉害啊")
				}
			}
			function daluan() {
			for(var i=0;i<100;i++){
					var pics = document.getElementsByClassName("pic")
				var m = parseInt(Math.random()*9)
				var n = parseInt(Math.random()*9)
				var picmP = pics[m].parentNode
				var picnP = pics[n].parentNode
				picmP.appendChild(pics[n])
				picnP.appendChild(pics[m])
			}
			}
		</script>
	</head>
	<body>
		<table border="1">
			<tr>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-1">
						<div class="pic" id="z-1" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-2">
						<div class="pic" id="z-2" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-3"> 
						<div class="pic" id="z-3" draggable="true" ondragstart="drag(event)"> </div>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-4">
						<div class="pic" id="z-4" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-5">
						<div class="pic" id="z-5" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-6">
						<div class="pic" id="z-6" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-7">
						<div class="pic" id="z-7" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-8">
						<div class="pic" id="z-8" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div ondrop="drop(event)" ondragover="over(event)" id="f-9">
						<div class="pic" id="z-9" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
			</tr>
		</table>
		<button type="button" onclick="daluan()">打乱</button>
	</body>
	
</html>