打造专属自己的html5拼图小游戏
时间:2022-05-06
本文章向大家介绍打造专属自己的html5拼图小游戏,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
利用canvas切出小块图片
我们知道现在的拼图游戏都是由九张小图片依次排列组成的,就是类似九宫格那样。那么以前的做法就是我们利用Photoshop这样的工具把原始大图【尺寸一般都是正方形的哦】切成九张小块的正方形小图,但是这种做法有点不灵活,如果我们要更换图片的话,就得重新去切图,好麻烦。。。 不过没关系,现在我们有了canvas!利用canvas我们可以很轻松的做到这些。核心代码如下:
var image = new Image();
image.onload = function() {
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(index-1).find('img').attr('src', canvas.toDataURL('image/jpeg'));
index++;
}
}
}
//900x900
image.src = "shanlian.jpg";
实现小块图片的随机排列
这里的核心是利用了javascript数组的随机排序,核心代码如下:
imgArr.sort(function(a, b) {
return Math.random() - Math.random();
});
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++;
}
}
相关touch事件的监听和实现
这里无非就是利用向左滑动,向右滑动这些去实现拼图的操作。核心代码如下:
//阻止手机上浏览器的弹性下拉。。。
$('body').on('touchstart', function(e) {
e.preventDefault();
});
$lis.on('swipeLeft', function(e) {
e.preventDefault();
var $this = $(this);
var index = $this.index();
var html = $this.html();
var $prev = $this.prev();
if ($.inArray(index, [3, 6]) > -1 || $prev.size() <= 0) {
return false;
}
$this.html($prev.html());
$prev.html(html);
App.check();
});
$lis.on('swipeRight', function(e) {
e.preventDefault();
var $this = $(this);
var index = $this.index();
var html = $this.html();
var $next = $this.next();
if ($.inArray(index, [2, 5]) > -1 || $next.size() <= 0) {
return false;
}
$this.html($next.html());
$next.html(html);
App.check();
});
$lis.on('swipeUp', function(e) {
e.preventDefault();
var $this = $(this);
var html = $this.html();
var index = $this.index() - 3;
var $up = $lis.eq(index);
if (index >= 0 && $up.size() > 0) {
$this.html($up.html());
$up.html(html);
App.check();
}
});
$lis.on('swipeDown', function(e) {
e.preventDefault();
var $this = $(this);
var html = $this.html();
var index = $this.index() + 3;
var $down = $lis.eq(index);
if (index < 9 && $down.size() > 0) {
$this.html($down.html());
$down.html(html);
App.check();
}
});
游戏是否完成的判断
这里的话,拼图顺序的每一次变化都要去检测一下是否完成了,原理就是获取当前小块图片的顺序和原始的图片进行比较。核心代码如下:
var resArr = [];
$('#gameBox img').each(function(k, v) {
resArr.push(v.getAttribute("data-seq"));
});
if (resArr.join("") === oriArr.join("")) {
//完成的处理。。。
}
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- PHP whois查询类定义与用法示例
- Laravel多域名下字段验证的方法
- ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
- 简单了解如何封装自己的Python包
- python求解汉诺塔游戏
- Python第三方包PrettyTable安装及用法解析
- 如何让python的运行速度得到提升
- 在keras中对单一输入图像进行预测并返回预测结果操作
- python中数字是否为可变类型
- ThinkPHP3.2.3框架实现的空模块、空控制器、空操作,跳转到错误404页面图文详解
- PHP示例演示发送邮件给某个邮箱
- PHP设计模式之观察者模式定义与用法分析
- PHP实现数组向任意位置插入,删除,替换数据操作示例
- 实例讲解Python 迭代器与生成器
- opencv 图像轮廓的实现示例