你的位置:首页 > 软件开发 > Java > JavaScript写一个拼图游戏

JavaScript写一个拼图游戏

发布时间:2015-07-22 15:00:18
拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开;  因为使用canvas,所以某些浏览器是不支持的: you know;   为什么要用canvas(⊙o⊙)? 因为图片是一整张jpg或者png, 我们要用把图片导入到canvas画布, 然后再调用上 ...

JavaScript写一个拼图游戏

  拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开;

  因为使用canvas,所以某些浏览器是不支持的: you know;  

  为什么要用canvas(⊙o⊙)?  因为图片是一整张jpg或者png, 我们要用把图片导入到canvas画布, 然后再调用上下文context的getImageData方法, 把图片处理成小图, 这些小图就作为拼图的基本单位;

  如何判断游戏是否结束, 或者说如何判断用户拼成的大图是正确的? 我们就要在刚刚生成的小图上面添加自定义属性, 后期在小图被移动后再一个个判断,如果顺序是对的, 那么这张大图就拼接成功, 允许进入下一关;

  

  游戏一共有四个关卡, 不会有人通关的,真的....因为第四关把图片的宽高分别切成了6份, 看着都晕好吧(∩_∩);

    JavaScript写一个拼图游戏

  

  因为要考虑到移动端的效果, 所以主界面图片是根据屏幕适配, 拼图大图的大小是屏幕宽度和屏幕高度之间最小值的一半, 都是为了不出现滚动条。 比如:用户的手机是横屏模式, 这个横屏的宽度是1000px,高度是300px, 如果我们把主图片的宽设置为屏幕1000px的一半500, 那么垂直方向就出滚动条了;

  用户的事件只要考虑上下左右四个方向键即可, 要判断图片是否可以移动, 也要考虑到当图片移动的时候的动画效果 ,感兴趣的话考虑我的实现, 和我写的2048是一样的道理;2048的DEMO;

  如果用户觉得这些图片不好看, 甚至可以上传自己手机的图片, 浏览器要支持FileReader的API, 移动是基于webkit的内核,可以不用考虑兼容性;

 

  代码包含工具方法和一些基本的配置, 比如, 图片地址的配置, 图片要切成的块数 , 加载图片的工具方法等:

    //游戏关卡的图片和游戏每一个关卡要切成的图片快个数    var levels = ["lake.jpg","cat.jpg","follower.jpg","view.jpg"];    var numbers = [3,4,5,6];    //工具方法    var util = {      /**       * @desc 图片加载成功的话就执行回调函数       * @param 图片地址 || 图片的DataUrl数据;       */      loadImg : function(e, fn) {        var img = new Image;        if( typeof e !== "string" ) {          img.src = ( e.srcElement || e.target ).result;        }else{          img.src = e;        };        img.onload = function() {//document.body.appendChild( canvas );          //document.getElementById("content").appendChild( canvas );          fn&&fn();        };      }    };

原标题:JavaScript写一个拼图游戏

关键词:JavaScript

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。