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

最近使用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,源码如下:

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