基于JS实现简单滑块拼图游戏
作者：凌寒舞_宇 时间：2024-04-17 09:52:33
成品效果
<body>
<div id="game" style="position:relative"></div>
</body>
/**
* js配置
*/
var config = {
width: 300,
height: 300,
img: "./img/fj.jpg",
gameDom: document.getElementById("game"),
row: 3, //3行
col: 3 //3列
}
//经过计算的一些数据
var computed = {
num: config.col * config.row, //方块数量
w: config.width / config.col, //每个小方块的宽度
h: config.height / config.row //每个小方块的高度
}
//方块对象的数组，每个对象中记录了方块的正确坐标、当前坐标、dom元素、以及一些实用方法
var blocks;
/**
* 为全局变量blocks赋值
*/
function setBlocks() {
blocks = [];
var points = getPointsArray(); //该数组用于设置每个方块的正确坐标
var shuffledPoints = [...points]; //复制后的数组用于在洗牌后设置方块的当前坐标
shuffle(shuffledPoints);//洗牌
for (var i = 0; i < points.length; i++) {
const point = points[i];
//创建方块对象
var b = {
left: point.left,
top: point.top,
curLeft: shuffledPoints[i].left,
curTop: shuffledPoints[i].top,
dom: document.createElement("div"),
update() {
this.dom.style.transition = "all .5s";
this.dom.style.left = this.curLeft + "px";
this.dom.style.top = this.curTop + "px";
},
isCorrect() {
return this.curTop === this.top && this.curLeft === this.left;
},
isEmpty: i === points.length - 1 //是否应该是空白方块
}
b.dom.style.width = computed.w + "px";
b.dom.style.height = computed.h + "px";
b.dom.style.position = "absolute";
b.dom.style.border = "1px solid #fff";
b.dom.style.boxSizing = "border-box";
b.dom.style.background = `url("${config.img}")`;
b.dom.style.cursor = "pointer";
b.dom.style.backgroundPosition = `-${b.left}px -${b.top}px`;
b.dom.block = b;
b.dom.onclick = function () {
switchBlock(this.block);
}
b.update();
blocks.push(b);
}
}
/**
* 生成游戏
*/
function generateGame() {
config.gameDom.style.width = config.width + "px";
config.gameDom.style.height = config.height + "px";
config.gameDom.style.border = "2px solid #8c8c8c";
config.gameDom.innerHTML = ""; //清空区域
for (const item of blocks) {
if (!item.isEmpty) {
config.gameDom.appendChild(item.dom);
}
}
}
/**
* 获得所有方块的可取到的坐标数组
*/
function getPointsArray() {
var arr = [];
for (var i = 0; i < computed.num; i++) {
arr.push({
left: (i ％ config.col) * computed.w,
top: parseInt(i / config.col) * computed.h
});
}
return arr;
}
/**
* 将某个block对象的坐标，与空坐标交换
* @param {*} block
*/
function switchBlock(block) {
//找到空坐标
var emptyBlock = blocks.find(b=>b.isEmpty);
//判断是否相邻
if(Math.abs(block.curLeft - emptyBlock.curLeft) +
Math.abs(block.curTop - emptyBlock.curTop) !== computed.w){
return;
}
//交换
var bLeft = block.curLeft;
var bTop = block.curTop;
block.curLeft = emptyBlock.curLeft;
block.curTop = emptyBlock.curTop;
emptyBlock.curLeft = bLeft;
emptyBlock.curTop = bTop;
block.update();
emptyBlock.update();
if(isWin()){
setTimeout(() => {
alert("游戏胜利")
}, 500);
}
}
/**
* 数组洗牌
* @param {*} arr
*/
function shuffle(arr) {
for (var i = 0; i < arr.length - 1; i++) {
var targetIndex = getRandom(0, arr.length - 1);
var temp = arr[i];
arr[i] = arr[targetIndex];
arr[targetIndex] = temp;
}
}
function getRandom(min, max) {
var dec = max - min;
return Math.floor(Math.random() * dec + min);
}
/**
* 游戏是否胜利
*/
function isWin() {
for (const b of blocks) {
if (!b.isCorrect()) {
return false;
}
}
return true;
}
setBlocks();
generateGame();
总结
以上所述是小编给大家介绍的基于JS实现简单滑块拼图游戏,网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
来源：https://blog.csdn.net/qq_43420617/article/details/102474046
标签：js,拼图,游戏
0
投稿猜你喜欢
最新Listary v5.00.2843注册码 亲测可用
2022-07-04 22:20:43
Python使用正则表达式实现爬虫数据抽取
2021-01-22 15:00:24
python的继承知识点总结
2022-12-10 11:21:28
python 通过SSHTunnelForwarder隧道连接redis的方法
2021-03-08 12:58:41
PyCharm软件无法安装lxml库的问题及解决
2023-06-04 01:54:30
Python Dataframe常见索引方式详解
2023-06-21 21:03:25
NumPy 矩阵乘法的实现示例
2022-12-15 02:48:14
C#使用checkedListBox1控件链接数据库的方法示例
2024-01-24 19:15:09
python调用机器喇叭发出蜂鸣声(Beep)的方法
2022-01-09 15:17:20
必须会的SQL语句(二) 创建表、修改表结构、删除表
2024-01-19 16:51:16
vuex数据持久化的两种实现方案
2024-04-30 10:34:48
用来将对象持久化的python pickle模块
2023-11-01 02:28:45
python引入不同文件夹下的自定义模块方法
2023-04-24 18:37:22
Python Sql数据库增删改查操作简单封装
2024-01-22 14:47:37
破解 屏蔽 防框架代码 top.location != self.location
2008-11-27 12:59:00
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2023-07-12 10:50:17
Python学习笔记之解析json的方法分析
2022-01-08 05:01:28
Python实现基于KNN算法的笔迹识别功能详解
2021-06-18 13:15:08
SQL Server储过程加密和解密原理深入分析
2024-01-20 01:27:12
Python 从subprocess运行的子进程中实时获取输出的例子
2023-12-24 18:31:10