大佬教程收集整理的这篇文章主要介绍了HTML5技术之图像处理：一个滑动的拼图游戏（转），大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<canvas width="480px" height="480px"></canvas>@H_696_4@ @H_696_4@canvas的宽和高使用像素为单位。如果这两个属于没有被指定，他们的默认的宽度为：300px，高度为：150px。 在图板画图需要使用canvas的上下文环境，通过脚本调用getContext()方法获取上下文环境。W3C定义它为二维，更确切的说是2d。所以初始化上下文环境如果如下方法:
drawImage(image,x,y);@H_696_4@
drawImage(image,y,width,height);
<div id="slider">
<form>
<label>Easy</label>
<input type="range" id="scale" value="4" min="3" max="5" step="1">
<label>Hard</label>
</form>
<br>
</div>
<div id="main" class="main">
<canvas id="puzzle" width="480px" height="480px"></canvas>
</div>
@H_696_4@var context = document.getElementById("puzzle").getContext("2d");@H_696_4@
var img = new Image(); img.src = 'http://www.brucealdeRMAN.info/Images/dimetrodon.jpg'; img.addEventListener('load',drawTiles,falsE);@H_696_4@
var boardSize = document.getElementById('puzzle').width;
var tileCount = document.getElementById('scale').value;
@H_696_4@var tileSize = boardSize / tileCount;@H_696_4@
var boardParts = new Object; setBoard();
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; }
var clickLoc = new Object; clickLoc.x = 0; clickLoc.y = 0; var emptyLoc = new Object; emptyLoc.x = 0; emptyLoc.y = 0;
var solved = false;
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)
{
alert("You solved it!");
}
};
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; }
function drawTiles() { context.clearRect ( 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 * tileSize,y * tileSize,tileSize,i * tileSize,j * tileSize,tileSizE); } } } }
以上是大佬教程为你收集整理的HTML5技术之图像处理：一个滑动的拼图游戏（转）全部内容，希望文章能够帮你解决HTML5技术之图像处理：一个滑动的拼图游戏（转）所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。