本文实例为大家分享了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();
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。