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

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

JavaScript代码68行,是3年前刚学JavaScript的时候写的,思想很简单,分享一下。
拼图是4*4的,共三张图。按照命名规则添加其他图片也可以。
资源已上传,下载地址:https://download.csdn.net/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>

代码和图片资源已上传。

  • 6
    点赞
  • 41
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
实现拼图游戏的基本思路是将一张完整的图片分割成若干个小块,然后打乱这些小块的顺序,让玩家通过交换小块的位置来还原原始图片。以下是一个简单实现示例: HTML: ```html <div id="puzzle"></div> ``` CSS: ```css #puzzle { width: 300px; height: 300px; border: 1px solid #ccc; display: flex; flex-wrap: wrap; } #puzzle div { width: 100px; height: 100px; background-size: 300px 300px; background-repeat: no-repeat; cursor: pointer; } ``` JavaScript: ```javascript const ROWS = 3; // 行数 const COLS = 3; // 列数 const IMG_URL = 'https://picsum.photos/300'; // 图片地址 const puzzle = document.getElementById('puzzle'); let emptyRow = ROWS - 1; // 空白块所在行 let emptyCol = COLS - 1; // 空白块所在列 // 初始化拼图 function initPuzzle() { for (let i = 0; i < ROWS; i++) { for (let j = 0; j < COLS; j++) { const piece = document.createElement('div'); piece.style.backgroundImage = `url(${IMG_URL})`; piece.style.backgroundPosition = `-${j * 100}px -${i * 100}px`; piece.dataset.row = i; piece.dataset.col = j; piece.addEventListener('click', movePiece); puzzle.appendChild(piece); } } } // 移动小块 function movePiece() { const row = parseInt(this.dataset.row); const col = parseInt(this.dataset.col); if (row === emptyRow && Math.abs(col - emptyCol) === 1 || col === emptyCol && Math.abs(row - emptyRow) === 1) { this.style.transform = `translate(${emptyCol - col}00%, ${emptyRow - row}00%)`; this.dataset.row = emptyRow; this.dataset.col = emptyCol; emptyRow = row; emptyCol = col; } } initPuzzle(); ``` 该示例使用了 flex 布局和 transform 属性来实现小块的布局和移动。具体实现过程中,我们可以根据需要添加更多的交互效果和游戏逻辑。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程大白丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值