这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家分享的是一则使用 javascript 结合 Flexbox 简单实现滑动拼图游戏的代码,虽然没有实现完整的功能,但是还是推荐给大家,喜欢的朋友可以继续做完
滑动拼图就是把一张图片分成几等份,打乱顺序(下图),然后通过滑动拼凑成一张完整的图片。
要实现一个拼图游戏,需要考虑怎样随机的打乱顺序,怎样交换两张图片的位置,等等。但是,使用了 Flexbox 布局以后,这都不需要你去考虑,浏览器会帮你做,Flexbox 就是这么的强大。关于 Flexbox 的介绍可以点击这里。 这个游戏中要用的是 Flexbox 布局的 order 属性,order 属性可以用来控制 Flex 项目的顺序。 这里我用九个 canvas 元素来把图片分成九等分,也可以用其他方法,比如背景图片定位:
- <div class="wrap">
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- <canvas>
- </canvas>
- </div>
如果不仅限于九宫格,还要十六宫格等,上面的元素完全可以动态生成。 下面是生成打乱顺序的九张图代码:
- var drawImage = function(url) {
- return new Promise(function(resolve, reject) {
- var img = new Image();
- img.onload = function() {
- resolve(img);
- };
- img.src = url;
- })
- };
- drawImage("2.jpg").then(function(img) {
- var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
- var random = arr.sort(function() {
- return Math.random() > 0.5
- }); [].forEach.call(document.querySelectorAll("canvas"),
- function(item, i) {
- item.width = $(".wrap").clientWidth / 3;
- item.height = $(".wrap").clientHeight / 3;
- item.style.order = random[i];
- var ctx = item.getContext("2d");
- ctx.drawImage(img, img.width * (i % 3) / 3, img.height * Math.floor(i / 3) / 3, img.width / 3, img.height / 3, 0, 0, item.width, item.height);
- });
- });
上面的关键代码是:
- item.style.order = random[i];
通过将数字打乱顺序,随机赋值给每个 canvas 元素的 order 属性,这样浏览器就自动帮你排序了。 关于代码的其他细节就不讲了,这里说一下怎样交换两张图片的位置,真是出乎意料的简单:
- var order1 = item.style.order;
- var order2 = target.style.order;
只需要交换双方的 order 属性值就可以了。
完整代码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
- name="viewport" />
- <meta content="yes" name="apple-mobile-web-app-capable" />
- <meta content="black" name="apple-mobile-web-app-status-bar-style" />
- <meta content="telephone=no" name="format-detection" />
- <title>
- </title>
- <style>
- html, body { height: 100%; } body { margin: 0; padding: 0; overflow: hidden;
- } .wrap { display: flex; flex-wrap: wrap; width: 100%; height: 100%; overflow:
- hidden; } .wrap canvas { width: 33.3333%; height: 33.3333%; border: 1px
- solid red; box-sizing: border-box; }
- </style>
- </head>
- <body>
- <div class="wrap">
- <canvas data-value="1">
- </canvas>
- <canvas data-value="2">
- </canvas>
- <canvas data-value="3">
- </canvas>
- <canvas data-value="4">
- </canvas>
- <canvas data-value="5">
- </canvas>
- <canvas data-value="6">
- </canvas>
- <canvas data-value="7">
- </canvas>
- <canvas data-value="8">
- </canvas>
- <canvas data-value="9">
- </canvas>
- </div>
- <script>
- var $ = function(el) {
- return document.querySelector(el);
- };
- var touchMove, touchEnd;
- var drawImage = function(url) {
- return new Promise(function(resolve, reject) {
- var img = new Image();
- img.onload = function() {
- resolve(img);
- };
- img.src = url;
- })
- };
- drawImage("2.jpg").then(function(img) {
- var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
- var random = arr.sort(function() {
- return Math.random() > 0.5
- }); [].forEach.call(document.querySelectorAll("canvas"),
- function(item, i) {
- item.width = $(".wrap").clientWidth / 3;
- item.height = $(".wrap").clientHeight / 3;
- item.style.order = random[i];
- var ctx = item.getContext("2d");
- ctx.drawImage(img, img.width * (i % 3) / 3, img.height * Math.floor(i / 3) / 3, img.width / 3, img.height / 3, 0, 0, item.width, item.height);
- });
- });
- document.addEventListener("touchstart",
- function(e) {
- var target = e.target;
- if (e.target.tagName.toLowerCase() !== "canvas") {
- return;
- }
- var ctx = target.getContext("2d");
- var image = ctx.getImageData(0, 0, target.width, target.height);
- var obj = target.cloneNode(true);
- obj.getContext("2d").putImageData(image, 0, 0);
- var top = target.getBoundingClientRect().top,
- left = target.getBoundingClientRect().left;
- obj.style.CSSText = "position: absolute; top: " + top + "px; left: " + left + "px";
- document.body.appendChild(obj);
- var point = {
- "x": e.touches[0].pageX,
- "y": e.touches[0].pageY
- };
- document.addEventListener("touchmove", touchMove = function(e) {
- obj.style.cssText = "position: absolute; top:" + (e.touches[0].pageY - point.y + top) + "px; left: " + (e.touches[0].pageX - point.x + left) + "px";
- });
- document.addEventListener("touchend", touchEnd = function(e) {
- var pos = {
- "x": e.changedTouches[0].pageX,
- "y": e.changedTouches[0].pageY
- }; [].forEach.call(document.querySelectorAll(".wrap canvas"),
- function(item, i) {
- var offset = item.getBoundingClientRect();
- if (pos.x > offset.left && pos.x < (offset.left + item.width) && pos.y > offset.top && pos.y < (offset.top + item.height)) {
- var order1 = item.style.order;
- var order2 = target.style.order;
- if (obj.parentNode) {
- document.body.removeChild(obj);
- }
- item.style.order = order2;
- target.style.order = order1;
- }
- });
- document.removeEventListener("touchmove", touchMove);
- document.removeEventListener("touchend", touchEnd);
- })
- })
- </script>
- </body>
- </html>
大家做测试的时候,最好用谷歌模拟器或者手机打开,因为只支持移动端触摸事件。
代码中只实现了基本功能,并没有实现完整功能。
来源: http://www.phperz.com/article/17/0407/267096.html