JavaScript 拼圖遊戲
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">
<!-- <img src="img/lol.png" alt=""> -->
</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();
圖片
您可下載或者複製,試着寫寫哦!!! 但記得點贊哦! 哈哈.
