fifteen_puzzle

2024-03-16 06:50
文章标签 puzzle fifteen

本文主要是介绍fifteen_puzzle，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

制作一个简单的拼图游戏

这几天抽时间完成了web课程的制作拼图游戏的作业，可以给大家分享一下大致的思路。
1.通过background-position定位每一块图片，从而在CSS中实现对一整块图片被分割，而不是事先通过修图软件把图片提前进行分割，然后再放在页面里。
2.关于使用随机数打乱地图，我个人的想法是，每一次产生随机数时候先判断可不可以使用这个随机数，例如空白的那一块是第16块，那么第16块只能和左侧第15块和上侧第12块交换，和其他的块都不可以交换，这样就可以保证拼图一定可以被还原。（请参考JS的random_pos函数与pic_move函数）
3.关于自动还原，我的想法是，通过使用数组存下产生随机数打乱地图时候可行的id或者是你点击鼠标进行交换时候的id，然后需要还原时候依次弹出。（详情请参考do_find函数）
效果图

这里写图片描述

（注：点击start开始游戏，点击help自动还原拼图）

HTML文件

<!DOCTYPE html>
<html><head><title>简单拼图游戏</title><link rel = "stylesheet" href = "fifteen_puzzle.css" ><script type = "text/javascript" src = "fifteen_puzzle.js"></script></head><body><h1>SImple Jigsaw Puzzle</h1><div id = "info"><div id = "Time"><div class = "right">Time:</div><input type = "text" value = "00:00:00" id = "time" onfocus="blur()"></div><div id = "Step"><div class = "left">Step:</div><input type = "text" value = "0" id = "step" onfocus="blur()"></div></div><div id = "whole"><div id = "result"></div><div id = "picture"></div></div><div class = "divide"><div id="restart">Start</div><div id="change_image">Help</div></div></body>
</html>

CSS文件

body
{background: url("6.jpg") repeat-x;background-size: 100% 120%;
}
h1
{text-align: center ;color: #CC99FF ;font-size: 30px ;font-family: Arial ;
}
#info
{width: 150px ;height: 75px ;margin: 0px auto ;position: relative;
}
#right
{position: relative;left:-5px ;
}
#Step,#Time
{color:#CC00FF;width: 120px;height: 40px;line-height: 40px;font-size: 18px;
}
#time
{color: #CC33CC;background: transparent; text-align: center ;border-radius: 15px ;width: 100px ;position: relative;left:calc(50%);top:-38px;font-size: 18px ;border: 0px ;
}
#step
{color:#CC33CC;background:transparent; border-radius: 15px ;text-align: center ;width: 100px ;position: relative;left:calc(50%);top:-38px;font-size: 18px ;border: 0px ;
}
#picture, #restart, #result, #change_image {   margin-top: 10px;margin-left: auto;margin-right: auto; margin-bottom: 10px ;text-align: center ;
}
#change_image,#restart
{position: relative;top:45px ;
}
#picture
{border-radius:10px ;border:5px solid #CCCCFF;position: relative;width: 340px ;height: 340px ;top:20px;bottom: -50px;
}
.picture_part0{float: left;border: solid 1px #969696;opacity: 0.9;
}#result
{color: #CC00FF;border: 5px solid #CCCCFF; border-radius:15px ;position: relative;top:7px;width: 350px ;height:22px;
}
#restart, #change_image {border-radius: 15px ;cursor: pointer;width: 120px;height: 30px;line-height: 30px;background-color: #CC99FF;color: white;font-size: 18px;opacity:0.7;
}
.picture_part0 
{background: url("7.jpg") no-repeat;background-size: 400% 400% ;
}
#restart:hover, #change_image:hover 
{opacity: 1;
}
#_position_1 
{background-position: 0px 0px;
}#_position_2 
{background-position: -85px 0px; 
}#_position_3 
{background-position: -170px 0px;
}#_position_4 
{background-position: -255px 0px; 
}#_position_5 
{background-position: 0px -85px;
}#_position_6 
{background-position: -85px -85px; 
}#_position_7 
{background-position: -170px -85px;
}#_position_8 
{background-position: -255px -85px; 
}#_position_9 
{background-position: 0px -170px;
}#_position_10 
{background-position: -85px -170px; 
}#_position_11 
{background-position: -170px -170px;
}#_position_12 
{background-position: -255px -170px; 
}#_position_13 
{background-position: 0px -255px;
}#_position_14 
{background-position: -85px -255px; 
}#_position_15 
{background-position: -170px -255px;
}#_position_16 
{background-position: -255px -255px; 
}
#_position_1:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_2:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_3:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_4:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_5:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_6:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_7:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_8:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_9:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_10:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_11:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_12:hover 
{transform: scale(1.05);transition: all 250ms;
}#_position_13:hover 
{transform: scale(1.05);transition: all 250ms;
}#_position_14:hover 
{transform: scale(1.05);transition: all 250ms;
}
#_position_15:hover 
{transform: scale(1.05);transition: all 250ms;
}
.position_1 
{height: 83px;width: 83px;display: inline-block;
}
.position_2 
{height: 83px;width: 83px;display: inline-block;}
.position_3 
{height: 83px;width: 83px;display: inline-block;
}
.position_4 
{height: 83px;width: 83px;display: inline-block;
}
.position_5 
{height: 83px;width: 83px;display: inline-block;
}
.position_6 
{height: 83px;width: 83px;display: inline-block;
}
.position_7 
{height: 83px;width: 83px;display: inline-block;
}
.position_8 
{height: 83px;width: 83px;display: inline-block;
}
.position_9 
{height: 83px;width: 83px;display: inline-block;
}
.position_10 
{height: 83px;width: 83px;display: inline-block;
}
.position_11 
{height: 83px;width: 83px;display: inline-block;
}
.position_12 
{height: 83px;width: 83px;display: inline-block;
}
.position_13 
{height: 83px;width: 83px;display: inline-block;
}
.position_14 
{height: 83px;width: 83px;display: inline-block;
}
.position_15
{height: 83px;width: 83px;display: inline-block;
}
.position_16
{opacity: 0;background-image: none;height: 83px;width: 83px;display: inline-block;
}
.divide
{position: relative;top:20px;
}

JS文件

var judge = false; //设置开始前不可以点击图片
var stop_judge = true; //设置按钮可否点击
var timeFun = 0; //设置图像变量问题
var solution = []; //设立一个存入解决方案的栈
var count = 0;
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时
var show_time = document.getElementById("time"); //插入显示时间变量
var step_show = document.getElementById("step"); //插入显示步数变量
/*使用onload解决页面显示问题*/
window.onload = function() {create_pic();document.getElementById("restart").addEventListener("click", random_pos);document.getElementById("change_image").addEventListener("click", findSolution);
};
/*创立二维数组时事更新id与类的位置*/
var n_timer = timer();
var creat_array = new Array(); //设置最初的数组
var build_array = new Array(); //设置判断数组
function create_pic() {picture = document.getElementById("picture");for (var i = 1; i <= 16; i++) {var part = document.createElement("div");part.addEventListener("click", pic_move);part.className = "picture_part" + count + " position_" + i;picture.appendChild(part);part.id = "_position_" + i;creat_array[i - 1] = part;}build_two_array();
}function build_two_array() {for (var i = 0; i < 4; i++) {build_array[i] = new Array();}var count = 0;for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {build_array[i][j] = creat_array[count];count++;}}
}
/*检查函数*/
function check() {var count = 1;for (var i = 0; i < 4; i++) {for (var j = 0; j < 4; j++) {var partId = "_position_" + count;if (build_array[i][j].id != partId) {document.getElementById("result").innerText = "Playing";return;}count++;}}document.getElementById("result").innerText = "You win";judge = false;return;
}
/*还原图形的函数*/
function do_find() {document.getElementById("result").innerText = "Playing";if (solution.length > 0) {var step_first = document.getElementById("step");var now_step = parseInt(step_first.value);now_step += 1;var temp = now_step.toString();step.value = temp;var tmp = solution.pop();var target_pic_offset = document.getElementById(tmp);var blank_pic_offset = document.getElementById("_position_16");var str = blank_pic_offset.className;blank_pic_offset.className = target_pic_offset.className;target_pic_offset.className = str;var strId = blank_pic_offset.id;blank_pic_offset.id = target_pic_offset.id;target_pic_offset.id = strId;}if (solution.length == 0) {check();clearInterval(timeFun);document.getElementById("restart").addEventListener("click", random_pos);document.getElementById("change_image").addEventListener("click", findSolution);}
}function findSolution() {document.getElementById("restart").removeEventListener("click", random_pos);document.getElementById("change_image").removeEventListener("click", findSolution);timeFun = setInterval("do_find()", 200);judge = false;
}
/* 产生随机数列定义位置 */
function random_pos(event) {judge = true; //标记拼图已经开始，防止未开始图片就发生移动clearInterval(n_timer);n_sec = 0;n_min = 0;n_hour = 0;n_timer = timer(); //让时间函数开始运行step.value = "0";/* 产生随机数列前先将拼图块对应的位置复位 */for (var k = 1; k <= 16; k++) {document.getElementById("_position_" + k).className = "picture_part" + count + " position_" + k;}var part = document.getElementById("picture").childNodes;random_arr = [];for (var j = 0; j < 15; j++) {random_arr[j] = j + 1;}/* 通过更改ID名类名来改变位置 *//*使用先判断能否交换的方法，可以保证图一定能被还原*/for (var i = 0; i < 500; i++) {var random_value = parseInt(Math.random() * 16 + 1); //产生一个1-16的随机数var blank_pic_offset = document.getElementById("_position_16"); //找到第十六个被移动的块var blank_pic_offset_top = blank_pic_offset.offsetTop;var blank_pic_offset_left = blank_pic_offset.offsetLeft;var target_pic_offset = document.getElementById("_position_" + random_value); //找到随机数对应的块，判断能否移动var _offset_top = target_pic_offset.offsetTop;var _offset_left = target_pic_offset.offsetLeft;if ((Math.abs(blank_pic_offset_top - _offset_top) > 80) && (Math.abs(blank_pic_offset_top - _offset_top) < 90 && blank_pic_offset_left == _offset_left) ||(Math.abs(blank_pic_offset_left - _offset_left) > 80 && Math.abs(blank_pic_offset_left - _offset_left) < 90 && blank_pic_offset_top == _offset_top)) {if (solution[solution.length - 1] == target_pic_offset.id) {solution.pop();} else {solution.push(target_pic_offset.id);}var str = blank_pic_offset.className;blank_pic_offset.className = target_pic_offset.className;target_pic_offset.className = str;var strId = blank_pic_offset.id;blank_pic_offset.id = target_pic_offset.id;target_pic_offset.id = strId;}}
}
/* 点击图片触发的事件处理器 */
function pic_move(event) {if (judge == false) {return;}var blank_pic_offset = document.getElementById("_position_16");var blank_pic_offset_top = blank_pic_offset.offsetTop;var blank_pic_offset_left = blank_pic_offset.offsetLeft;var _offset_top = this.offsetTop;var _offset_left = this.offsetLeft;if ((Math.abs(blank_pic_offset_top - _offset_top) > 80) && (Math.abs(blank_pic_offset_top - _offset_top) < 90 && blank_pic_offset_left == _offset_left) ||(Math.abs(blank_pic_offset_left - _offset_left) > 80 && Math.abs(blank_pic_offset_left - _offset_left) < 90 && blank_pic_offset_top == _offset_top)) {if (solution[solution.length - 1] == this.id) {solution.pop();} else {solution.push(target_pic_offset.id);}var step_first = document.getElementById("step");var now_step = parseInt(step_first.value);now_step += 1;var temp = now_step.toString();step.value = temp;var str = blank_pic_offset.className;blank_pic_offset.className = this.className;this.className = str;var strId = blank_pic_offset.id;blank_pic_offset.id = this.id;this.id = strId;check();}
}
/*时间函数*/
function timer() {var ele_timer = document.getElementById("time");return setInterval(function() {var str_sec = n_sec;var str_min = n_min;var str_hour = n_hour;if (n_sec < 10) {str_sec = "0" + n_sec;}if (n_min < 10) {str_min = "0" + n_min;}if (n_hour < 10) {str_hour = "0" + n_hour;}var time = str_hour + ":" + str_min + ":" + str_sec;ele_timer.value = time;n_sec++;if (n_sec > 59) {n_sec = 0;n_min++;}if (n_min > 59) {n_sec = 0;n_hour++;}}, 1000);
}

这篇关于fifteen_puzzle的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/814652。

相关文章

HDU 1097 A hard puzzle（规律）

HDU 1097 A hard puzzle（规律）

题目： http://acm.hdu.edu.cn/showproblem.php?pid=1097 题意： 求a的b次方的最后一位。 题解： 直接从例子入手， 第一组数据 7 66，结果如下（只要最后一位所以模10） 7 9 3 1 7 9··· 循环节为4，即结果在4个数值内循环出现。 第二组数据 6 800，结果如下 6 6 6 6··· 循环节为1 ···
阅读更多...
uva519 - Puzzle (II)（回溯）

uva519 - Puzzle (II)（回溯）

题目：uva519 - Puzzle (II) 题目大意：给出拼图，要求将给出的拼图拼成 n行m列的矩形，可以输出yes，不行输出no。 解题思路：直接dfs，但是需要剪枝。 1、判断 F 的出现个数是否等于 2 * ( n + m) , 还有IO的个数是否匹配，不匹配就直接剔除，。 2、边界问题要处理，例如第一行第N行，第一列第M列，这些地方的拼图是有要求的，这些边界拼图的的外围都
阅读更多...
Vue - 详细介绍 vue-monoplasty-slide-verify vue3-puzzle-vcode 滑动验证组件

Vue - 详细介绍 vue-monoplasty-slide-verify vue3-puzzle-vcode 滑动验证组件

Vue - 详细介绍 vue-monoplasty-slide-verify & vue3-puzzle-vcode 滑动验证组件 在日常的账号登录所需要的大部分是滑动验证来检验人为操作，免于字母验证码的繁琐输入，下面介绍在Vue2和Vue3中适用的滑动验证组件。 1、vue-monoplasty-slide-verify（Vue2） 安装： npm install --save vue-
阅读更多...
【PAT】【Advanced Level】1128. N Queens Puzzle (20)

【PAT】【Advanced Level】1128. N Queens Puzzle (20)

1128. N Queens Puzzle (20) 时间限制 300 ms 内存限制 65536 kB
阅读更多...
ZOJ 2836 Number Puzzle 容斥、lcm

ZOJ 2836 Number Puzzle 容斥、lcm

这题和HDU 1796差不多。 code： #include <cstring>#include <iostream>#include <cstdlib>#include <cstdio>#include <vector>#include <algorithm>using namespace std;typedef long long LL;const int MAXN =
阅读更多...
hdu 5456 Matches Puzzle Game(记忆化搜索)

hdu 5456 Matches Puzzle Game(记忆化搜索)

题目链接:hdu 5456 Matches Puzzle Game 解题思路 式子可以变换成A=B+C，从低位处理到高位， dp[i][j][b][c] dp[i][j][b][c]表示到第i位，j有没进位，b为数字B是否已经到达最高为，c为数字C是否已经到达最高位。 代码 #include <cstdio>#include <cstring>#include <algorithm>u
阅读更多...
Fifteen Day 2024年5月11日

Fifteen Day 2024年5月11日

Dense adj.密集的 稠密的 浓密的 茂密的 Dense crowd. 密集的人群。 Crowd n.人群 群众 一群 v.聚集 挤满 Shanghai has a dense population. 上海的人口密度很大. Population n.人口 Pass through a dense jungle. 穿过一片茂密的丛林。 Through pre
阅读更多...
AtCoder Beginner Contest 332 D题 Swapping Puzzle

AtCoder Beginner Contest 332 D题 Swapping Puzzle

D题：Swapping Puzzle 标签：全排列、深度优先搜索题意：给定两个行数和列数分别是 H H H和 W W W的二维矩阵 A A A和 B B B。可以对 A A A矩阵的相邻两行或者相邻两列进行交换，求最少的交换次数能够使得 A A A矩阵变成 B B B矩阵。（ 2 < = H , W < = 5 2<=H,W<=5 2<=H,W<=5）题解：看到这个数据这么小，很容易想到暴搜。对
阅读更多...
Scala 04 —— Scala Puzzle 拓展

Scala 04 —— Scala Puzzle 拓展

Scala 04 —— Scala Puzzle 拓展 文章目录 Scala 04 —— Scala Puzzle 拓展一、占位符二、模式匹配的变量和常量模式三、继承 成员声明的位置结果初始化顺序分析`BMember` 类`BConstructor` 类 四、缺省初始值与重载五、Scala的集合操作和集合类型保持一致性第一部分代码解释第二部分代码解释 六、for和map的区别
阅读更多...
Scala 03 —— Scala Puzzle 拓展

Scala 03 —— Scala Puzzle 拓展

Scala 03 —— Scala Puzzle 拓展 文章目录 Scala 03 —— Scala Puzzle 拓展一、占位符二、模式匹配的变量和常量模式三、继承 成员声明的位置结果初始化顺序分析`BMember` 类`BConstructor` 类 四、缺省初始值与重载五、Scala的集合操作和集合类型保持一致性第一部分代码解释第二部分代码解释 六、for和map的区别
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2