HTML5拼图游戏 | 易学教程

3 月，跳不动了？>>>

拼图游戏介绍拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图（游戏结束）。在“游戏”中，单击滑块选择游戏难易，“容易”为3行3列拼图游戏，中间为一个4行4列拼图游戏，“难”为5行5列拼图游戏。拼块以随机顺序排列，玩家用鼠标单击空白块的四周来交换它们的位置，直到所有拼块都回到原位置。拼图游戏运行结果如图所示。

sliding.js代码:


var img = new Image();
img.src = 'defa.jpg';
img.addEventListener('load',drawTiles,false);

var boardSize = document.getElementById('puzzle').width;
var tileCount = document.getElementById('scale').value;

var titleSize = boardSize / tileCount;

var clickLoc = new Object;
clickLoc.x = 0;
clickLoc.y = 0;

var emptyLoc = new Object;
emptyLoc.x = 0;
emptyLoc.y = 0;

var solved = false;

var boardParts = new Object;
setBoard();

document.getElementById('scale').onchange = function() {
    tileCount = this.value;
    titleSize = boardSize / tileCount;
    setBoard();
    drawTiles();
};

document.getElementById('puzzle').onmousemove = function(e) {
    clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / titleSize);
    clickLoc.y = Math.floor((e.pageY - this.offsetTop) / titleSize);
};

document.getElementById('puzzle').onclick = function() {
    if (distance(clickLoc.x, clickLoc.y,emptyLoc.x,emptyLoc.y)==1) {
        slideTile(emptyLoc, clickLoc);
        drawTiles();
    }
    if (solved) {
        setTimeout(function (){alert("You solved it!"); },500)
    }
};

function setBoard() {
    boardParts = new Array(tileCount);
    for (var i = 0; i < tileCount; ++i) {
     boardParts[i] = new Array(tileCount);
     for (var j = 0; j < tileCount; ++j) {
      boardParts[i][j] = new Object;
      boardParts[i][j].x = (tileCount - 1) - i;
      boardParts[i][j].y = (tileCount - 1) - j;
     }
 }
    emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;
    emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;
    solved = false;
}
function drawTiles() {
    context.clearRect ( 0 , 0 , boardSize , boardSize );
    for (var i = 0; i < tileCount; ++i) {
        for (var j = 0; j < tileCount; ++j) {
            var x = boardParts[i][j].x;
            var y = boardParts[i][j].y;
            if(i != emptyLoc.x || j != emptyLoc.y || solved == true) {
                context.drawImage(img, x * titleSize, y * titleSize, titleSize, titleSize,
                     i * titleSize, j * titleSize, titleSize, titleSize);
            }
        }
    }
function distance(x1, y1, x2, y2) {
    return Math.abs(x1 - x2) + Math.abs(y1 - y2);
}

function slideTile(toLoc, fromLoc) {
    if (!solved) {
        boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x;
        boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y;
        boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1;
        boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1;
        toLoc.x = fromLoc.x;
        toLoc.y = fromLoc.y;
        checkSolved();
    }
}
function checkSolved() {
    var flag = true;
    for (var i = 0; i < tileCount; ++i) {
        for (var j = 0; j < tileCount; ++j) {
            if (boardParts[i][j].x != i || boardParts[i][j].y != j) {
                flag = false;
            }
        }
    }
    solved = flag;
}
}

sliding.html代码：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>拼图游戏</title>
    <style>
        .picture{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="title">
        <h2>拼图游戏</h2>
    </div>
    <div id="slider">
        <form>
            <label>低</label>
            <input type="range" id="scale" value="4" min="3" max="15" step="1">
            <label>高</label>
        </form>
        <br>
    </div>
    <div id="main" class="main">
        <canvas id="puzzle" width="480px" height="480px"></canvas>
    </div>
    <script src="sliding.js"></script>
</body>
</html>```

来源：oschina

链接：https://my.oschina.net/u/4460892/blog/3209379

标签

html5

var