JavaScript简单实现拼图小游戏（附源码和资源）

程大白丶

已于 2023-01-31 09:27:07 修改

阅读量4.1k

点赞数 6

文章标签： JavaScript 拼图游戏 4*4 源码游戏开发

于 2021-07-03 19:44:32 首次发布

本文链接：https://blog.youkuaiyun.com/qq_44651842/article/details/118444152

版权

JavaScript简单实现拼图小游戏（附源码及资源）

JavaScript代码68行，是3年前刚学JavaScript的时候写的，思想很简单，分享一下。
拼图是4*4的，共三张图。按照命名规则添加其他图片也可以。
资源已上传，下载地址：https://download.youkuaiyun.com/download/qq_44651842/20009874
在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>游戏</title>
</head>
<script language="javascript">
	var kid = new String("img3");
	var  data= new Array(kid+"23",kid+"32");
	var imgend = new String(kid+"33");
	var bushu=0;
	function upData(){
		var i= parseInt(imgend.charAt(4));
		var j= parseInt(imgend.charAt(5));
		var str;
		data.length=0;
		var t=0;
		t=parseInt(t);
		if(i!=0){
			t=i-1;
			str=kid+t+j;
			data.push(str);
		}
		if(i!=3){
			t=i+1;
			str=kid+t+j;
			data.push(str);
		}
		if(j!=0){
			t=j-1;
			str=kid+i+t;
			data.push(str);
		}
		if(j!=3){
			t=j+1;
			str=kid+i+t;
			data.push(str)
		}
		bushu++;
		document.getElementById("jj").value=bushu;
	}
	function change(iid){
		for(var i=0;i<data.length;i++){
			if(data[i]==iid){
				document.getElementById(imgend).src=document.getElementById(iid).src;
				document.getElementById(iid).src="imgs/"+kid+"33.gif";
				imgend=iid;
				upData();
			}
		}
	}
	function creatTable(){
		var i,j;
		setImg();
		document.write('<div align="center"><table border="1" bgcolor="#10CAF3" cellspacing="0">');
		for(var i=0;i<4;i++){
			document.write("<tr>");
			for(var j=0;j<4;j++){
				document.write('<td><img alt="'+kid+i+j+'" id="'+kid+i+j+'" src="imgs/'+kid+j+i+'.gif" onClick="change(id)"></td>');
			}
			document.write("</tr>");
		}
		document.write("<table/>");	
		document.write('<font>步数</font><input type="text" id="jj" size="5"><a href="game.html" target="zhu"><input type="button" value="重新开始"/></a><input type="button" value="停止" /></div>');
	}
	function setImg(){
		kid=document.getElementById("select").value;
		data= new Array(kid+"23",kid+"32");
		imgend = new String(kid+"33");
	}

</script>

<body background="images/bkground.gif">
	<div align="center">
	这是一个游戏。
    <select name="zhaopian" size="1"  id="select">
    	<option value="img1" >松鼠</option>
        <option value="img2" >企鹅</option>
		<option value="img3" >华晨宇</option>
    </select>
	<input type="button"  value="确定" onclick="creatTable()"/>
    <!--表格-->
	</div>
</body>
</html>