原神九宫格拼图游戏ES6+bootstrap+cookie

最新推荐文章于 2024-05-24 15:22:37 发布

「已注销」

最新推荐文章于 2024-05-24 15:22:37 发布

阅读量3.1k

点赞数

分类专栏： Web集训2021 文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_44453019/article/details/121534423

版权

这是一个结合ES6语法、解构、Bootstrap和Cookie的九宫格拼图游戏项目。功能包括：计时开始、图片移动、随机重置、更换图片、查看最快记录以及查看项目说明。通过逆序数判断确保每次拼图位置可还原。

摘要由CSDN通过智能技术生成

项目说明：
本项目是一个拼图游戏项目，使用了ES6语法、解构、Bootstrap、Cookie ，完成的功能如下：

1、点击「开始游戏」按钮，计时开始并能点击图片进行移动

2、点击「再次挑战」按钮，可以随机重置本次拼图

3、点击「更换图片」按钮，可以切换拼图图片

4、点击「查看记录」按钮，可以查看当前最快记录

5、点击「项目说明」按钮，就能看到这些字了

6、拼图位置由随机生成的二维数组决定，对该数组进行了是否可以被还原的判断，确保每次拼图的位置都是可以还原的

7、判断拼图是否可还原算法简单说明：　　对于九宫格拼图，如果随机打乱的话，有50%的概率会出现不可还原的情况。可以采用求逆序数的方法避免不可还原的情况。三阶拼图的图块标号构成的数列，其逆序数为偶数，这个拼图就是可以还原的。例如：

[7, 2, 1, 5, 3, -1, 4, 8, 6]，排除-1不考虑，该数组逆序数为10，是偶数，所以该拼图可以还原

[3, 4, 7, 5, -1, 1, 8, 6, 2]，排除-1不考虑，该数组逆序数为11，是奇数，所以该拼图无法还原

具体游戏界面：
请添加图片描述

主要代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>拼图游戏</title>
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="./css/bootstrap/css/bootstrap.css" />
	</head>
	<body>
		<div class="container">
			<div class="time-box">00:00.00</div>
			<div class="top-box">
				<div class="reference-picture-box">
					<img  src="" id="reference-picture"/>
				</div>
				<div class="game-box"></div>
				
			</div>
			<div class="btn-box">
				<button type="button" class=