HTML5拼图游戏代码.docVIP

sliding.html!doctype htmlhtmlheadmeta http-equiv=content-type content=text/html;charset=utf-8 /meta name=viewportcontent=width=device-width,initial-scale=1.0,user-scalable=yes /meta name=HandheldFriendly content=true /link rel=stylesheet href=jquery.mobile-1.4.3.min.css / script src=jquery-2.1.1.min.js/script script src=jquery.mobile-1.4.3.min.js/script script type=text/javascript/script title拼图游戏 /title style .picture { border: 1px solid black; } /style/headbody div id=title h2拼图游戏/h2 /div div id=slider form label简单/label input type=range id=scale value=4 min=3 max=5 step=1 label困难/label div data-role=controlgroupa data-ajax=false href=menu.html data-role=button返回菜单/a/div /form br /div div id=main class=main canvas id=puzzle width=480px height=480px/canvas /div script src=sliding.js/script/body/htmlSliding.jsvar context = document.getElementById(puzzle).getContext(2d);var img = new Image();img.src = fizz2.jpg;img.addEventListener(load, drawTiles, false);var boardSize = document.getElementById(puzzle).width;var tileCount = document.getElementById(scale).value;var tileSize = 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; tileSize = boardSize / tileCount; setBoard(); drawTiles();};document.getElementById(puzzle).onmousemove = function(e) { clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / tileSize); clickLoc.y = Math.floor((e.pageY - this.offsetTop) / tileSize);};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;