拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开; 因为使用canvas,所以某些浏览器是不支持的: you know; 为什么要用canvas(⊙o⊙)? 因为图片是一整张jpg或者png, 我们要用把图片导入到canvas画布, 然后再调用上 ...
拼图游戏的代码400行, 有点多了, 在线DEMO的地址是:打开;
因为使用canvas,所以某些浏览器是不支持的: you know;
为什么要用canvas(⊙o⊙)? 因为图片是一整张jpg或者png, 我们要用把图片导入到canvas画布, 然后再调用上下文context的getImageData方法, 把图片处理成小图, 这些小图就作为拼图的基本单位;
如何判断游戏是否结束, 或者说如何判断用户拼成的大图是正确的? 我们就要在刚刚生成的小图上面添加自定义属性, 后期在小图被移动后再一个个判断,如果顺序是对的, 那么这张大图就拼接成功, 允许进入下一关;
游戏一共有四个关卡, 不会有人通关的,真的....因为第四关把图片的宽高分别切成了6份, 看着都晕好吧(∩_∩);
因为要考虑到移动端的效果, 所以主界面图片是根据屏幕适配, 拼图大图的大小是屏幕宽度和屏幕高度之间最小值的一半, 都是为了不出现滚动条。 比如:用户的手机是横屏模式, 这个横屏的宽度是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
(#换成@)。