首页 / WordPress函数讲解 / 基于JavaScript实现十五拼图代码实例介绍

基于JavaScript实现十五拼图代码实例介绍

    • 珂李斯

    发布于

    by

    这篇文章主要介绍了基于JavaScript实现十五拼图代码实例,文中通过示例代码介绍的非常详细，对大家的学习或…

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

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

    css代码

    body {

    font-family: cursive;

    font-size: 14pt;

    text-align: center;

    }

    #puzzlearea {

    height: 400px;

    margin: 0 auto;

    position: relative;

    width: 400px;

    }

    .highlight {

    border-color: red;

    cursor: pointer;

    }

    .puzzletile {

    background-image: url(“../background.jpg”);

    border: 5px solid black;

    position: absolute;

    }

    .highlight, #output {

    color: red;

    }

    .puzzletile, #output {

    font-size: 40pt;

    }

    html代码

    <!DOCTYPE html>

    <html lang=”en”>

    <head>

    <meta charset=”UTF-8″>

    <title>CSE 154 Fifteen Puzzle</title>

    <!– your files that you will write –>

    <link href=”css/fifteen.css” rel=”external nofollow” type=”text/css” rel=”stylesheet”/>

    <script src=”js/fifteen.js” type=”text/javascript”></script>

    </head>

    <body>

    <h2>Fifteen Puzzle</h2>

    <p>

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

    by repeatedly making moves that slide squares into the empty space.

    How quickly can you solve it?

    </p>

    <div id=”puzzlearea”>

    <!–

    this area holds the actual fifteen puzzle pieces

    add to it as you need to

    –>

    </div>

    <p id=”controls”>

    <button id=”shufflebutton”>Shuffle</button>

    </p>

    <div id=”output”></div>

    <p>

    American puzzle author and mathematician Sam Loyd is often falsely

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

    until his death in 1911 that he invented it.

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

    a postmaster in Canastota, New York.

    </p>

    </body>

    </html>

    JavaScript代码

    (function () {

    “use strict”;

    let NUM = 4; //拼图的行列数 the number of rows/cols in the puzzle

    let spaceRow = 3; // 空白图块所在行

    let spaceColumn = 3; // 空白图块所在列

    let WIDTH = 100; // the pixel width/height of each tile

    // gets everything set when the window has loaded

    window.onload = function () {

    setSize();

    document.getElementById(“select”).onchange = changeSize;

    document.getElementById(“shufflebutton”).onclick = shuffle;

    createSquares();

    };

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

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

    function setSize() {

    var select = document.createElement(“select”);

    select.id = “select”;

    for (var i = 3; i < 7; i++) {

    var option = document.createElement(“option”);

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

    option.value = i;

    option.id = “option” + i;

    select.appendChild(option);

    }

    document.getElementById(“controls”).appendChild(select);

    document.getElementById(“option4”).selected = “selected”;

    }

    function changeSize() {

    NUM = this.value;

    spaceRow = this.value – 1;

    spaceColumn = this.value – 1;

    WIDTH = parseInt(400 / this.value);

    var puzzlearea = document.getElementById(“puzzlearea”);

    while (puzzlearea.contains(document.querySelector(“.puzzletile”))) {

    puzzlearea.removeChild(document.querySelector(“.puzzletile”));

    }

    createSquares();

    }

    // creates 15 puzzle tiles and sets them to their initial position

    function createSquares() {

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

    var div = document.createElement(“div”);

    div.className = “puzzletile”;

    div.innerHTML = i;

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

    var column = (i – 1) % NUM;

    var x = column * -1 * WIDTH + “px”;

    var y = row * -1 * WIDTH + “px”;

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

    div.style.height = WIDTH – 10 + “px”;

    div.style.width = div.style.height;

    // 设置background 的 position

    div.style.backgroundPosition = x + ” ” + y;

    // 为每个拼图添加ID

    div.id = “square_” + row + “_” + column;

    // 设置水平和垂直方向的偏移量

    div.style.top = row * WIDTH + “px”;

    div.style.left = column * WIDTH + “px”;

    setEvents(div);

    document.getElementById(“puzzlearea”).appendChild(div);

    }

    }

    // shuffles puzzle tiles for 1000 times

    function shuffle() {

    // 实现Shuffle算法

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

    let neigbors = [];

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

    let allPuzzles = document.getElementsByClassName(“puzzletile”);

    // 将与空白图块相邻的拼图 存储到数组neigbors中

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

    // 判断拼图是否可以移动

    if (moveable(allPuzzles[i]))

    neigbors.push(allPuzzles[i]);

    }

    // 得到一个随机的索引

    let ranNum = getRandomIntInclusive(0, neigbors.length – 1);

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

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

    let tempLeft = neigbors[ranNum].style.left;

    // 将拼图移动到空白图块处

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

    neigbors[ranNum].style.left = spaceColumn * WIDTH + “px”;

    neigbors[ranNum].id = “square_” + spaceRow + “_” + spaceColumn;

    // 更改空白图块的位置

    spaceRow = parseInt(tempTop) / WIDTH;

    spaceColumn = parseInt(tempLeft) / WIDTH;

    }

    }

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

    function getRandomIntInclusive(min, max) {

    min = Math.ceil(min);

    max = Math.floor(max);

    return Math.floor(Math.random() * (max – min + 1)) + min;

    }

    // sets up events for all puzzle tiles

    function setEvents(div) {

    div.onmouseover = function () {

    if (moveable(this)) {

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

    }

    };

    div.onmouseout = function () {

    // when mouse out, removes class “highlight”

    if (moveable(this)) {

    this.classList.remove(“highlight”); // when mouse out, remove class “highlight”

    }

    };

    div.onclick = helper;

    }

    // a helper function for function “makeAMove”

    // displays “congratulations” if the player wins

    function helper() {

    if (moveable(this)) {

    makeAMove(this);

    if (win()) {

    document.getElementById(“output”).innerHTML = “Congratulations! You win!”;

    } else {

    document.getElementById(“output”).innerHTML = “”;

    }

    }

    }

    // make one move for the given tile

    function makeAMove(div) {

    div.id = “square_” + spaceRow + “_” + spaceColumn;

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

    var divColumn = parseInt(div.style.left) / WIDTH;

    div.style.top = spaceRow * WIDTH + “px”;

    div.style.left = spaceColumn * WIDTH + “px”;

    spaceRow = divRow;

    spaceColumn = divColumn;

    }

    // return true if the given tile is moveable

    function moveable(div) {

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

    var divColumn = parseInt(div.style.left) / WIDTH;

    if (spaceRow == divRow) {

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

    }

    else if (spaceColumn == divColumn) {

    return Math.abs(spaceRow – divRow) == 1;

    }

    else {

    return false;

    }

    }

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

    function win() {

    var tiles = document.querySelectorAll(“.puzzletile”);

    for (var i = 0; i < tiles.length; i++) {

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

    var column = i % NUM;

    if (tiles[i].id != “square_” + row + “_” + column) {

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

    return false;

    }

    }

    return true;

    }

    })();

    最后的效果

    基于JavaScript实现十五拼图代码实例介绍 (https://www.wpmee.com/) javascript教程 第1张

    以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

    类别：WordPress函数讲解、

    本文收集自互联网，转载请注明来源。
    如有侵权，请联系 wper_net@163.com 删除。

    【上一篇】:

    【下一篇】:

    猜你喜欢GUESS YOU LIKE

    评论 (0)COMMENT

    登录 账号发表你的看法，还没有账号？立即免费 注册


  • 还没有任何评论，赶紧来占个楼吧！