使用angularJS做一个简单的拼图游戏

来源：互联网发布：移动网络打不开黄页编辑：程序博客网时间：2024/05/21 20:30

最近使用AngularJS的JS框架制作一个简单的拼图游戏,喜欢拼图游戏的朋友可以根据以下步骤自己动手制作一个,.

1.到网上下载angular-1.0.1.min.js的js包,如果找不到也可以到我的云盘下载:http://pan.baidu.com/s/1beGyDK

2.大概学习一下AngularJS,网上很多学习资料,也可以到以下地址学习下:http://angularjs.cn/tag/AngularJS

3.新建一个文件夹,命名为myPingTu,把angular-1.0.1.min.js放到里面,找一张自己喜欢的图片,最好是大于1000X800的图片,重命名为:img2.jpg,放入到myPingTu文件夹中

4.在myPingTu文件夹中新建HTML文件,名称为:PingTu.html,源码如下:

<!doctype html><html  ng-app="drag">    <head>        <script src="angular-1.0.1.min.js"></script> <script src="pingTuScript.js"></script>      </head><style type="text/css">.imgClass1{background-image:url(img2.jpg);width:100px;height:100px;}.imgClass2{background-image:url(img2.jpg);width:1000px;height:800px;}</style>    <body>      <div  ng-repeat="yp in [0,1,2,3,4,5,6,7]" ><div  ng-repeat="xp in [0,1,2,3,4,5,6,7,8,9]" ><div id="div{{xp*10+yp}}" class="imgClass1" style="position:absolute;top:{{random*yp*ph}}px;left:{{random*xp*pw}}px;background-position:-{{xp*pw}}px -{{yp*ph}}px;" draggable></div></div></div> <img src="img2.jpg" width="500" height="400" style="position:absolute;top:1000px;left:0px;"/>     </body></html>

5.在myPingTu文件夹中新建JS文件,名称为:pingTuScript.js,源码如下:

angular.module('drag', []).directive('draggable', function($document) {   return function(scope, element, attr) {        scope.pw=100;    scope.ph=100;    scope.random=Math.random();//生成一个随机数,用于打乱拼图 if(!element.x)  element.x=0;if(!element.y)  element.y=0;      element.bind('click', function(event) {               $document.unbind('mousemove', mousemove);        $document.unbind('mouseup', mouseup);      });      element.bind('mousedown', function(event) {      element.startX = element.x==0?scope.pw-        (event.clientX-parseInt(event.target.style.left)):event.screenX - element.x;        element.startY = element.y==0?(event.clientY-        parseInt(event.target.style.top))+scope.ph:event.screenY - element.y;                $document.bind('mousemove', mousemove);        $document.bind('mouseup', mouseup);      });      function mousemove(event) {        element.y = event.screenY - element.startY;        element.x = event.screenX - element.startX;        element.css({          top: element.y + 'px',          left:  element.x + 'px'        });      }      function mouseup() {  element.css({          top: Math.round(element.y/scope.pw)*scope.pw + 'px',          left:  Math.round(element.x/scope.ph)*scope.ph + 'px'        });        $document.unbind('mousemove', mousemove);        $document.unbind('mouseup', mouseup);      }      mouseup();    } });

6.使用支持HTML5的火狐浏览器和谷歌浏览器打开,即可以开始玩拼图了,当然你也可以根据自己学习Angular的知识进行改进.

另外,懒得自己写的可到这里下载源码:http://pan.baidu.com/s/1beGyDK

0 0