溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
成品效果
<body>
<div id="game" ></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實現簡單滑塊拼圖游戲,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
