spaceColumn = divColumn;

}

until his death in 1911 that he invented it.

border: 5px solid black;

The puzzle was actually created around 1874 by Noyes Palmer Chapman,

}

return Math.abs(spaceColumn - divColumn) == 1;

}

<script src="https://www.wpmee.com/js/fifteen.js" type="text/javascript"></script>

<button>Shuffle</button>

return true;

if (moveable(this)) {

document.getElementById("select").onchange = changeSize;

div.onmouseout = function () {

}

max = Math.floor(max);

</body>

var y = row * -1 * WIDTH + "px";

// 获取指定区间的随机数

document.getElementById("puzzlearea").appendChild(div);

html代码

} else {

// sets up events for all puzzle tiles

console.log(tiles[i].id);

</head>

var divRow = parseInt(div.style.top) / WIDTH;

css代码

let allPuzzles = document.getElementsByClassName("puzzletile");

.puzzletile {

return false;

position: relative;

text-align: center;

for (let i = 0; i < allPuzzles.length; i++) {

// 获取需要移动的拼图移动之前的偏移量

var row = Math.floor(i / NUM);

// when mouse out, removes class "highlight"

}

// 实现Shuffle算法

}

The goal of the fifteen puzzle is to un-jumble its fifteen squares

spaceRow = this.value - 1;

this.classList.add("highlight"); // when mouse over, adds class "highlight"

顾名思义，十五拼图就是将游戏画面中的数字从上到下，从左到右按顺序从1到15排列下来，看起来很简单，但是玩起来不容易。

while (puzzlearea.contains(document.querySelector(".puzzletile"))) {

document.getElementById("shufflebutton").onclick = shuffle;

font-size: 14pt;

let tempTop = neigbors[ranNum].style.top;

}

NUM = this.value;

var row = Math.floor((i - 1) / NUM);

// shuffles puzzle tiles for 1000 times

}

<div>

spaceRow = parseInt(tempTop) / WIDTH;

// 设置下拉列表 默认选中 option4

div.style.left = column * WIDTH + "px";

<meta charset="UTF-8">

for (let j = 0; j < 1000; j++) {

// make one move for the given tile

div.onmouseover = function () {

}

var puzzlearea = document.getElementById("puzzlearea");

<!--

credited with creating the puzzle; indeed, Loyd claimed from 1891

}

// 设置background 的 position

// 得到一个随机的索引

// add a drop-down list to select difficulty level

}

// gets everything set when the window has loaded

min = Math.ceil(min);

}

option.id = "option" + i;

}

</p>

var column = (i - 1) % NUM;

if (spaceRow == divRow) {

function setEvents(div) {

neigbors[ranNum].style.top = spaceRow * WIDTH + "px";

// return true if all tiles are at their original positions

var select = document.createElement("select");

spaceColumn = this.value - 1;

.highlight {

function moveable(div) {

position: absolute;

for (var i = 1; i < NUM * NUM; i++) {

}

.highlight, #output {

// 更改空白图块的位置

}

// 将所有的拼图 存储到 allPuzzles中

// 减去边框的宽度 并且宽高相等

font-size: 40pt;

document.getElementById("option4").selected = "selected";

};

这篇文章主要介绍了基于JavaScript实现十五拼图代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

}

option.innerHTML = i + " * " + i;

<link href="https://www.wpmee.com/css/fifteen.css" type="text/css"/>