得益于liuyubobobo老师的canvas课程和思路指点,做了一版简单的 html5拼图小游戏,下面就简单介绍一下实现的原理。。。
//核心代码如下:
var index = 1;
for (var i=0; i<3; i++) {
for (var j=0; j<3; j++) {
ctx.drawImage(image, 300*j, 300*i, 300, 300, 0, 0, 300, 300);
$lis.eq(imgArr[index-1]-1).find('img').data('seq', index).attr('src', canvas.toDataURL('image/jpeg'));
index++;
}
}
//核心代码如下:
var imgArr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
imgArr.sort(function(a, b) {
return Math.random() - Math.random();
});
//组织手机上浏览器的弹性下拉。。。
$('body').on('touchstart', function(e) {
e.preventDefault();
});
$lis.on('swipeLeft', function(e) {
//....
});
$lis.on('swipeRight', function(e) {
//....
});
$lis.on('swipeUp', function(e) {
//....
});
$lis.on('swipeDown', function(e) {
//....
});
var resArr = [];
$('#gameBox img').each(function(k, v) {
resArr.push(v.getAttribute("data-seq"));
});
//oriArr:原始的顺序数组
if (resArr.join("") === oriArr.join("")) {
//成功后的处理。。。
}
核心代码和思路就是上面这些,其实整个过程走下来还是蛮简单的,接下来无非要做的就是再加一下花哨的东西了(时间,难度等级,排名等等)。如果有同学感兴趣的话,完整版代码猛戳 这里 了。
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123