JavaScript 拼图游戏

技术2022-07-10 123

JavaScript 拼图游戏

文章目录

JavaScript 拼图游戏html部分js部分图片

html部分

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="game">  </div> <script src="script/index2.js"></script> </body> </html>

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; /** * @param init() 初始化游戏 */ var blocks = []; function isEqual(b1,b2) { return parseInt(b1) === parseInt(b2); } 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(); //3.随机小块的下表 shuffle() //4. 注册点击事件 regEvent(); function regEvent() { var isVisibleBlock = blocks.find(function (b) { return !b.isVisible; }) blocks.forEach(function (b) { b.dom.onclick = function () { if (gameConfig.isOver) { return; } if(b.top === isVisibleBlock.top && isEqual(Math.abs(b.left - isVisibleBlock.left), gameConfig.pieceWidth) || b.left === isVisibleBlock.left && isEqual(Math.abs(b.top - isVisibleBlock.top), gameConfig.pieceHeight)){ //交换当前方块和看不见的方块的坐标位置 exchange(b, isVisibleBlock); //游戏结束判定 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"; }); } } function getRandom(min, max) { return Math.floor(Math.random() * (max + 1 - min) + min); } 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(); } function shuffle(){ for(var i = 0; i < blocks.length - 1; i ++) { var index = getRandom(0,blocks.length - 2); exchange(blocks[i],blocks[index]); } } function initBlocksArray() { for (var i = 0; i < gameConfig.rows; i++) { for (var j = 0; j < gameConfig.cols; 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();

图片

您可下载或者复制,试着写写哦!!! 但记得点赞哦! 哈哈.

Processed: 0.010, SQL: 9