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

最新推荐文章于 2022-02-15 16:35:21 发布

富兰克陈

最新推荐文章于 2022-02-15 16:35:21 发布

阅读量1.1k

点赞数

分类专栏：项目发布文章标签： angularJS angular 拼图游戏

本文链接：https://blog.csdn.net/Ant_cc/article/details/50698027

版权

项目发布专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近使用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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用angularJS做一个简单的拼图游戏

最近使用AngularJS的JS框架制作一个简单的拼图游戏,喜欢拼图游戏的朋友可以根据以下步骤自己动手制作一个,.1.到网上下载angular-1.0.1.min.js的js包,如果找不到也可以到我的云盘下载:http://pan.baidu.com/s/1beGyDK2.大概学习一下AngularJS,网上很多学习资料,也可以到以下地址学习下:http://angularjs.cn/
复制链接

扫一扫