JavaScript简单实现拼图小游戏(附源码和资源)

JavaScript简单实现拼图小游戏(附源码及资源)

JavaScript代码68行,是3年前刚学JavaScript的时候写的,思想很简单,分享一下。
拼图是4*4的,共三张图。按照命名规则添加其他图片也可以。
资源已上传,下载地址:https://download.csdn.net/download/qq_44651842/20009874
JavaScript简单实现拼图小游戏(附源码和资源)_第1张图片

JavaScript简单实现拼图小游戏(附源码和资源)_第2张图片
JavaScript简单实现拼图小游戏(附源码和资源)_第3张图片

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('
');for(var i=0;i<4;i++){ document.write("");for(var j=0;j<4;j++){ document.write('');} document.write("");} document.write("
'</span><span class=+kid+i+j+'" id="'+kid+i+j+'" src="imgs/'+kid+j+i+'.gif" onClick="change(id)">
"); document.write('步数');}functionsetImg(){ kid=document.getElementById("select").value; data=newArray(kid+"23",kid+"32"); imgend =newString(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>

代码和图片资源已上传。

你可能感兴趣的:(html,javascript)