原生js完成拼图小游戏

废话不说,看代码,图片可以自己找,我这直接引用了百度的了

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  6     <meta name="apple-mobile-web-app-capable" content="yes" />
  7 <title>智能拼图</title>
  8 <style>
  9     body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,button,textarea,p,blockquote,th,td{
 10         padding:0;
 11         margin:0;
 12     }
 13     body{
 14         font-family: "Helvetica Neue", "Hiragino Sans GB", "Segoe UI", "Microsoft Yahei", "微软雅黑", Tahoma, Arial, STHeiti, sans-serif;
 15         font-size:12px;
 16         background:#f3f3f3;
 17         color:#333;
 18     }
 19     a{
 20         outline:none;
 21         -moz-outline:none;
 22         text-decoration:none;
 23     }
 24     .play_wrap{
 25         width:300px;
 26         float:left;
 27         padding:20px;
 28         margin:0px auto;
 29     }
 30     #play_area{
 31         position:relative;
 32         width:300px;
 33         height:300px;
 34         margin:auto;
 35         background:#f8f8f8;
 36         border-radius:2px;
 37         color: black;
 38         box-shadow: 0px 0px 8px #09F;
 39         border:1px solid #fff;
 40         *border:1px solid #e5e5e5;
 41         cursor:default;
 42     }
 43     #play_area .play_cell{  /*小方块*/
 44         width:73px;
 45         height:73px;
 46         border:1px solid #fff;
 47         border-radius:4px;
 48         position:absolute;
 49         cursor: default;
 50         z-index:80;
 51         box-shadow:0px 0px 8px #fff;
 52     }
 53     .play_menu{
 54         float:left;
 55         margin-left:60px;
 56         font-size:14px;
 57     }
 58     .play_menu p{
 59         line-height:200%;
 60         padding-right: 2em;
 61         clear:both;
 62     }
 63     .play_menu a.play_btn{
 64         display:inline-block;
 65         margin-bottom:20px;
 66         width:80px;
 67         height:28px;
 68         line-height:28px;
 69         text-align:center;
 70         text-decoration:none;
 71         color:#333;
 72         background:#fefefe;
 73         border:1px solid #eee;
 74         border-radius: 2px;
 75         box-shadow: 1px 1px 2px #eee;
 76         border-color: #ddd #d2d2d2 #d2d2d2 #ddd;
 77         outline:none;
 78         -moz-outline:none;
 79     }
 80     .play_menu a.play_btn:hover{
 81         background-color: #f5f5f5;
 82         border-color: #ccc;
 83         box-shadow: inset 0 -2px 6px #eee;
 84     }
 85     .play_menu a#play_btn_level{
 86         position:relative;
 87     }
 88     .level_text{
 89         margin-left:-10px;
 90     }
 91     .level_icon{
 92         display:block;
 93         position:absolute;
 94         top:12px;
 95         right:16px;
 96         width:0;
 97         height:0;
 98         overflow:hidden;
 99         border:5px solid #FFF;
100         border-color:#999 transparent transparent transparent;
101     }
102     .level_menu{
103         position:absolute;
104         margin:-8px 0 0px 104px;
105         display:none;
106     }
107     .level_menu ul{
108         list-style:none;
109     }
110     .level_menu li{
111         float:left;
112     }
113     .level_menu li a{
114         display:block;
115         padding:3px 10px;
116         border:1px solid #64c2ce;
117         margin-left:-1px;
118         color:#09c;
119     }
120     .level_menu li a:hover{
121         background:#09c;
122         color:#fefefe;
123     }
124 </style>
125  <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
126 <script type="text/javascript">
127     var puzzleGame = function(options){
128         this.img = options.img || "";
129         this.isSize = options.isSize || false;
130         this.e_playArea = $("#play_area");
131         this.e_startBtn = $("#play_btn_start");
132         this.e_playScore = $("#play_score");
133         this.e_playCount = $("#play_count");
134         this.e_levelBtn = $("#play_btn_level");
135         this.e_levelMenu = $("#play_menu_level");
136         this.areaWidth = parseInt(this.e_playArea.css("width"));
137         this.areaHeight = parseInt(this.e_playArea.css("height"));
138         this.offX = this.e_playArea.offset().left;
139         this.offY = this.e_playArea.offset().top;
140         this.grade = 4;
141         this.playCellWidth = this.areaWidth/this.grade;;
142         this.arrNum = [];
143         this.boxsLen = Math.pow(this.grade,2);;
144         this.playCell = null;
145         this.arrBox = [];
146         this.count = 0;
147         this.lunArr = [];
148         this.over = true;
149         this.start();
150     };
151     puzzleGame.prototype = {
152         start:function(){
153             this.init();
154             this.mune();
155         },
156         mune:function(){
157             var self = this;
158             this.e_levelBtn.click(function(){
159                 self.e_levelMenu.toggle();
160             });
161             this.e_startBtn.bind("click",function(){ //开始按钮
162                 self.e_levelBtn.unbind("click");
163                 self.randomFun();
164                 self.changeStyle();
165                 self.touchFun();
166             })
167             this.e_levelMenu.find("a").click(function(){ //等级选择按钮
168                 self.e_levelMenu.hide();
169                 self.e_levelBtn.find(".level_text").html($(this).html())
170                 self.grade = parseInt($(this).attr("title"));
171                 self.playCellWidth = self.areaWidth/self.grade;
172                 self.boxsLen = Math.pow(self.grade,2);
173                 self.init();
174             });
175         },
176         init:function(){
177             this.e_playArea.html("");
178             this.arrBox = [];
179             for(var i=0;i<this.boxsLen;i++){
180                 this.arrNum[i] = i; //给定数组,添加元素 
181                 this.playCell =  document.createElement("div");
182                 this.playCell.className = "play_cell";
183                 if(this.isSize){
184                     $(".play_cell").css({"backgroundSize":this.areaWidth+"px" + " auto"});
185                 }
186                 var lef = parseInt(i%this.grade);
187                 var top = parseInt(i/this.grade);
188                 this.e_playArea.append(this.playCell)
189                 // $(this.playCell).attr("data",i)   //data;
190                 this.arrBox.push(this.playCell);
191                 $(this.arrBox[i]).css({
192                     "background":"url("+this.img+")",
193                     "width":this.playCellWidth+"px",
194                     "height":this.playCellWidth+"px",
195                     "left" : (lef*this.playCellWidth)+"px",
196                     "top"  : (top*this.playCellWidth)+"px"
197                 })
198             }
199             this.changeStyle()
200         },
201         changeStyle:function(){
202             this.over = false;
203             for(var x in this.arrBox){
204                 var data = this.arrNum[x];
205                 $(this.arrBox[x]).attr("idx",data);  //idx
206                 var a = parseInt(data%this.grade);
207                 var b = parseInt(data/this.grade);
208                 $(this.arrBox[x]).css({
209                     "backgroundPosition":(a*-this.playCellWidth)+ "px " +( b*-this.playCellWidth) + "px"
210                 })
211                 if(data == 0){
212                     $(this.arrBox[x]).css("opacity","0.1")
213                 }
214             }
215         },
216         randomFun:function(){
217             this.arrNum = [];
218             this.arrNum[0] = 0;
219             var isHave = true;
220             while(true){
221                 var num = parseInt(Math.random()*this.boxsLen);
222                 for(var d in this.arrNum){
223                     if(this.arrNum[d] == num){
224                         isHave = false;
225                         break;
226                     }else{
227                         isHave = true;
228                     }
229                 }
230                 if(isHave){
231                     this.arrNum.push(num)
232                 }
233                 if(this.arrNum.length >= this.boxsLen){
234                     break;
235                 } 
236             }
237             return this.arrNum;
238         }, 
239         touchFun:function(){
240             var that = this;
241             that.e_playArea.children("div").bind("click",function(e){
242                 if(that.over){
243                     return;
244                 }
245                 var e = e || event;
246                 e.preventDefault()
247                 var idx = $(that.arrBox).index(this);
248                 var oIdx = (function(){
249                     for(var x in that.arrNum){
250                         if(that.arrNum[x] == 0){
251                             return x;
252                         }
253                     }
254                 })()
255                 var c = idx-oIdx;
256                     switch(c){
257                         case 1 :
258                                 if(that.arrNum[idx-1] != 0){return;}
259                                 $(this).css("left",(parseInt($(this).css("left"))-that.playCellWidth)<0?0:(parseInt($(this).css("left"))-that.playCellWidth)+"px");
260                                 $(that.arrBox[idx-1]).css("left",parseInt($(that.arrBox[idx-1]).css("left"))+that.playCellWidth+"px");
261                                 var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[idx-1];that.arrNum[idx-1] = temp;
262                                 var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[idx-1];that.arrBox[idx-1] = temp_box;
263                                 break;
264                         case -1:
265                                 if(that.arrNum[idx+1] != 0){return;}
266                                 $(this).css("left",(parseInt($(this).css("left"))+that.playCellWidth)>(that.areaWidth-that.playCellWidth)?(that.areaWidth-that.playCellWidth):(parseInt($(this).css("left"))+that.playCellWidth)+"px");
267                                 $(that.arrBox[idx+1]).css("left",parseInt($(that.arrBox[idx+1]).css("left"))-that.playCellWidth+"px");
268                                 var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[idx+1];that.arrNum[idx+1] = temp;
269                                 var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[idx+1];that.arrBox[idx+1] = temp_box;
270                                 break;
271                         case that.grade   :
272                                 var curIdx = parseInt(idx-that.grade)
273                                 if(that.arrNum[curIdx] != 0){return;}
274                                 $(this).css("top" ,(parseInt($(this).css("top"))-that.playCellWidth)<0?0:(parseInt($(this).css("top"))-that.playCellWidth)+"px");
275                                 $(that.arrBox[curIdx]).css("top",parseInt($(that.arrBox[curIdx]).css("top"))+that.playCellWidth+"px");
276                                 var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[curIdx];that.arrNum[curIdx] = temp;
277                                 var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[curIdx];that.arrBox[curIdx] = temp_box;
278                                 break;
279                         case that.grade*-1 :
280                                 var curIdx_1 = parseInt(idx+that.grade)
281                                 if(that.arrNum[curIdx_1] != 0){return;}
282                                 $(this).css("top" ,(parseInt($(this).css("top"))+that.playCellWidth)>(that.areaWidth-that.playCellWidth)?(that.areaWidth-that.playCellWidth):(parseInt($(this).css("top"))+that.playCellWidth)+"px");                               
283                                 $(that.arrBox[curIdx_1]).css("top",parseInt($(that.arrBox[curIdx_1]).css("top"))-that.playCellWidth+"px");
284                                 var temp = that.arrNum[idx];that.arrNum[idx] = that.arrNum[curIdx_1];that.arrNum[curIdx_1] = temp;
285                                 var temp_box = that.arrBox[idx];that.arrBox[idx] = that.arrBox[curIdx_1];that.arrBox[curIdx_1] = temp_box;
286                                 break;
287                     }
288                     that.count ++ ;
289                     that.e_playCount.text(that.count);
290                     that.e_startBtn.unbind("click");
291                     that.gameOver();
292                     if(that.over){
293                         alert("恭喜过关!");
294                     }
295             })
296         },
297         gameOver:function(){
298             var a = false;
299             for(var i =0 ;i<this.boxsLen;i++){
300                 if(i != $(this.arrBox[i]).attr("idx")){
301                     a = true;
302                 }
303             }
304             if(a){
305                 this.over = false;
306             }else{
307                 this.over = true;
308             }
309         }
310     }
311 window.onload = function(){
312     var game_ = new puzzleGame({
313         img: "http://h.hiphotos.baidu.com/zhidao/wh%3D600%2C800/sign=77e869ddef24b899de69713e5e3631ad/50da81cb39dbb6fd0db6a6fb0f24ab18962b3779.jpg", //图片文件路径
314     });
315     $("#play_btn_local").click(function(){
316         location.reload();
317     })
318 }
319 </script>
320 
321 </head>
322 <body>
323 <div class="wrap">
324     <div class="play_wrap">
325         <div id="play_area"></div>
326     </div>
327     <div class="play_menu">
328         <a id="play_btn_start" class="play_btn" href="#" unselectable="on">开始</a>
329         <a id="play_btn_local" class="play_btn" href="#" unselectable="on">重置</a>
330         <a id="play_btn_level" class="play_btn" href="javascript:void(0);" unselectable="on">
331             <span class="level_text">4 x 4</span>
332             <span class="level_icon"></span>
333         </a>
334         <div class="level_menu" id="play_menu_level">
335             <ul>
336                 <li>
337                     <a href="javascript:void(0);" title="3" >3 x 3</a>
338                 </li>
339                 <li>
340                     <a href="javascript:void(0);" title="4" >4 x 4</a>
341                 </li>
342                 <li>
343                     <a href="javascript:void(0);" title="6" >6 x 6</a>
344                 </li>
345             </ul>
346         </div>
347         <p>步数:<span id="play_count">0</span></p>
348         <p>说明:-请先选择等级,然后点击开始,小图片将随机打乱,向空白方向滑动,顺序完全正确后则成功;
349         </p>
350     </div>
351 </div>
352 </body>
353 </html>

 

posted @ 2016-11-21 19:25  chengJun—  阅读(336)  评论(0编辑  收藏  举报