原生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>
