最近使用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