本文实例为大家分享了js实现简单拼图游戏的具体代码，供大家参考，具体内容如下
html仅有一个id为game的div，并且没有编写css样式，只需要在img文件夹中放置一个图片文件就行，此处我放置的是lol皇子的图片，图片名为'lol.png'
<div id="game"> </div>
以下为实现后的效果图
多的不说，直接上js代码
/**
* 游戏配置
*/
var gameconfig = {
width: 500,
height: 500,
rows: 3, //行数
cols: 3, //列数
isover: false, //游戏是否结束
imgurl: "img/lol.png", //图片路径，注意：相对的是页面路径
dom: document.getelementbyid("game") //游戏的dom对象
};
//每一个小块的宽高
gameconfig.piecewidth = gameconfig.width / gameconfig.cols;
gameconfig.pieceheight = gameconfig.height / gameconfig.rows;
//小块的数量
gameconfig.piecenumber = gameconfig.rows * gameconfig.cols;
var blocks = []; //包含小方块信息的数组
function isequal(n1, n2) {
return parseint(n1) === parseint(n2);
}
/**
* 小方块的构造函数
* @param {*} left
* @param {*} top
* @param {*} isvisible 是否可见
*/
function block(left, top, isvisible) {
this.left = left; //当前的横坐标
this.top = top; //当前的纵坐标
this.correctleft = this.left; //正确的横坐标
this.correcttop = this.top; //正确的纵坐标
this.isvisible = isvisible; //是否可见
this.dom = document.createelement("div");
this.dom.style.width = gameconfig.piecewidth + "px";
this.dom.style.height = gameconfig.pieceheight + "px";
this.dom.style.background = `url("${gameconfig.imgurl}") -${this.correctleft}px -${this.correcttop}px`;
this.dom.style.position = "absolute";
this.dom.style.border = "1px solid #fff";
this.dom.style.boxsizing = "border-box";
this.dom.style.cursor = "pointer";
// this.dom.style.transition = ".5s"; //css属性变化的时候，在0.5秒中内完成
if (!isvisible) {
this.dom.style.display = "none";
}
gameconfig.dom.appendchild(this.dom);
this.show = function () {
//根据当前的left、top，重新设置div的位置
this.dom.style.left = this.left + "px";
this.dom.style.top = this.top + "px";
}
//判断当前方块是否在正确的位置上
this.iscorrect = function () {
return isequal(this.left, this.correctleft) && isequal(this.top, this.correcttop);
}
this.show();
}
/**
* 初始化游戏
*/
function init() {
//1. 初始化游戏的容器
initgamedom();
//2. 初始化小方块
//2.1 准备好一个数组，数组的每一项是一个对象，记录了每一个小方块的信息
initblocksarray();
//2.2 数组洗牌
shuffle();
//3. 注册点击事件
regevent();
/**
* 处理点击事件
*/
function regevent() {
//找到看不见的方块
var invisibleblock = blocks.find(function (b) {
return !b.isvisible;
});
blocks.foreach(function (b) {
b.dom.onclick = function () {
if (gameconfig.isover) {
return;
}
//判断是可以交换
if (b.top === invisibleblock.top &&
isequal(math.abs(b.left - invisibleblock.left), gameconfig.piecewidth)
||
b.left === invisibleblock.left &&
isequal(math.abs(b.top - invisibleblock.top), gameconfig.pieceheight)) {
//交换当前方块和看不见的方块的坐标位置
exchange(b, invisibleblock);
//游戏结束判定
iswin();
}
//交换当前方块和看不见的方块的坐标位置
// exchange(b, invisibleblock);
// //游戏结束判定
// iswin();
}
})
}
/**
* 游戏结束判定
*/
function iswin() {
var wrongs = blocks.filter(function (item) {
return !item.iscorrect();
});
if (wrongs.length === 0) {
gameconfig.isover = true;
//游戏结束，去掉所有边框
blocks.foreach(function (b) {
b.dom.style.border = "none";
b.dom.style.display = "block";
});
}
}
/**
* 随机数，能取到最大值
* @param {*} min
* @param {*} max
*/
function getrandom(min, max) {
return math.floor(math.random() * (max + 1 - min) + min);
}
/**
* 交换两个方块的left和top
* @param {*} b1
* @param {*} b2
*/
function exchange(b1, b2) {
var temp = b1.left;
b1.left = b2.left;
b2.left = temp;
temp = b1.top;
b1.top = b2.top;
b2.top = temp;
b1.show();
b2.show();
}
/**
* 给blocks数组洗牌
*/
function shuffle() {
for (var i = 0; i < blocks.length - 1; i++) {
//随机产生一个下标
var index = getrandom(0, blocks.length - 2);
//将数组的当前项与随机项交换left和top值
exchange(blocks[i], blocks[index]);
}
}
/**
* 初始化一个小方块的数组
*/
function initblocksarray() {
for (var i = 0; i < gameconfig.rows; i++) {
for (var j = 0; j < gameconfig.cols; j++) {
//i 行号，j 列号
var isvisible = true;
if (i === gameconfig.rows - 1 && j === gameconfig.cols - 1) {
isvisible = false;
}
var b = new block(j * gameconfig.piecewidth, i * gameconfig.pieceheight, isvisible);
blocks.push(b);
}
}
}
/**
* 初始化游戏容器
*/
function initgamedom() {
gameconfig.dom.style.width = gameconfig.width + "px";
gameconfig.dom.style.height = gameconfig.height + "px";
gameconfig.dom.style.border = "2px solid #ccc";
gameconfig.dom.style.position = "relative";
}
}
init();
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
