*js实现简单拼图小游戏**

js实现简单拼图小游戏

文章目录

  • 个人说明
  • 截图
  • 代码区
  • 结语

个人说明

大三计科学生第一次写博客,目的就是记录一下自己到底多垃圾,感觉学校里教的东西不会用,真的让自己去完成一个项目压根不知到从哪里下手。。。呃,应该是我太菜。寒假刚刚看一个视频教拼图游戏,就学一下喽。游戏很简单,拼拼图,鼠标拖动一块去和另一块互换。语言是HTML+js,注释写的有不明白的可以留言问一下。

截图

*js实现简单拼图小游戏**_第1张图片
*js实现简单拼图小游戏**_第2张图片

代码区

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			
		}
		.tu{
			background-image:url(anni.jpg);
			}
		//利用background-position给每个div添加不同的图片;即9个div组成一幅完成的图片;
		#z-1{
			background-position: 0px 0px;
		}
		#z-2{
			background-position:-200px 0px;
		}
		#z-3{
			background-position:-400px 0px;
		}
		#z-4{
			background-position:0 -200px;
		}
		#z-5{
			background-position: -200px -200px;
		}
		#z-6{
			background-position: -400px -200px;
		}
		#z-7{
			background-position: 0px -400px;
		}
		#z-8{
			background-position: -200px -400px;
		}
		#z-9{
			background-position: -400px -400px;
		}
	</style>
	<script>
	//完成两个图片拖拽后的互换;
		function over(e){
			e.preventDefault();//阻止默认
		}
		//抓起
		function drag(e){
			var id=e.target.id;
			// console.log(e.target.id);
			e.dataTransfer.setData("id",id);//设置传输的是被抓id;
		}
		//经过
		function drop(e){
			var beizhuaId=e.dataTransfer.getData("id");//接受被抓id;
			// console.log(beizhuaId);//被抓ID
			var fangID=e.target.id;//所放位置的id;
			var beizhua=document.getElementById(beizhuaId);//获取被抓对象;
			var fang=document.getElementById(fangID);//获取放的对象;
			var f_beizhua=beizhua.parentNode;//分别找到对应的父节点
			var f_fang=fang.parentNode;
			//互换儿子
			f_beizhua.appendChild(fang);
			f_fang.appendChild(beizhua);
			win();
			}
			//判断赢得方法;每个父和子id名字序号相同,循环 ,累加count;
			function win(){
				var tus=document.getElementsByClassName('tu');
				var count=0;
				for(var i=0;i<tus.length;i++){
					var tu=tus[i];
					var fu=tu.parentNode;
					var tu_id=tu.getAttribute("id");
					var fu_id=fu.getAttribute("id");
					if(tu_id.replace("z-","")==fu_id.replace("f-","")){
						count++;
						console.log(count);
					}else{
						return;
					}
				}
				
				if(count==9){
					alert("you win!");
				}
				
			}
			//打乱按钮;通过生成随机数;appenChild方法去多次互换,则为打乱;
			function daluan(){
				for(var i=0;i<100;i++){
				var tus=document.getElementsByClassName('tu');
				var m=parseInt(Math.random()*9);
				var n=parseInt(Math.random()*9);
				var tusmp=tus[m].parentNode;
				var tusnp=tus[n].parentNode;
				tusmp.appendChild(tus[n]);
				tusnp.appendChild(tus[m]);
				}
			}
	</script>
	<body>
		<table border="1">
			<tr>
				<td>
					<div id="f-1" ondragover="over(event)" ondrop="drop(event)">
						<div id="z-1" class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div id="f-2" ondragover="over(event)" ondrop="drop(event)">
						<div  id="z-2" class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div id="f-3" ondragover="over(event)" ondrop="drop(event)">
						<div  id="z-3" class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div id="f-4" ondragover="over(event)" ondrop="drop(event)">
						<div id="z-4" class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div id="f-5" ondragover="over(event)" ondrop="drop(event)">
						<div id="z-5" class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div id="f-6" ondragover="over(event)" ondrop="drop(event)">
						<div id="z-6"  class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div id="f-7" ondragover="over(event)" ondrop="drop(event)">
						<div id="z-7"  class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div id="f-8" ondragover="over(event)" ondrop="drop(event)">
						<div id="z-8" class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
				<td>
					<div id="f-9" ondragover="over(event)" ondrop="drop(event)">
						<div id="z-9" class="tu" draggable="true" ondragstart="drag(event)"></div>
					</div>
				</td>
			</tr>

		</table>
		<input type="button" value="打乱" onclick="daluan()" />
	</body>
</html>

结语

东西很少,逻辑也不算强,但是思路需要清晰。加油!

你可能感兴趣的:(*js实现简单拼图小游戏**)