网站 选项卡 图标,顺德手机网站设计价位,wordpress主页访客记录,个人互联网创业项目拼图游戏介绍 拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时#xff0c;就完成了拼图(游戏结束)。 在“游戏”中#xff0c;单击滑块选择游戏难易#xff0c;“容易”为3行3列拼图游戏#xff0c;中间为一个4行4列拼图游戏#xff0…拼图游戏介绍 拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时就完成了拼图(游戏结束)。 在“游戏”中单击滑块选择游戏难易“容易”为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代码拼图游戏.picture{border: 1px solid black;}拼图游戏低高
