├── .gitignore ├── README.md └── src ├── 1010.js ├── animate.js ├── countUp.min.js ├── index.html ├── style.css └── support1010.js /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | *.xml 3 | 4 | *.iml 5 | 6 | .idea/.name 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Description 2 | 3 | Just a 《1010!》 self-adaption game that you can play on browser. 4 | 5 | You can play the game [here](https://altair21.org/demo/1010/) 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/1010.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by altair21 on 15/4/1. 3 | */ 4 | var board = new Array(10); 5 | var score = 0; 6 | var blockColor = new Array(3); //下面三个拖拽方块的颜色索引记录 7 | var canClick = new Array(3); //下面三个方块是否已填充入棋盘的记录 8 | var alreadyFill = 0; //当前已填充入棋盘的方块个数，为3时生成新的拖拽方块 9 | var dragBoard = new Array(3); //记录三个拖拽方块的数组 10 | var fillPoint = {x:0,y:0}; //记录填充棋盘的坐标 11 | var touchX = 0; //记录触摸点 12 | var touchY = 0; 13 | var touchDeltaX = 0; //记录偏移量 14 | var touchDeltaY = 0; 15 | var touchId = 0; //记录触摸div的id 16 | var touching = false; 17 | var lastEvent = { 18 | x: "", 19 | y: "" 20 | }; 21 | var dragFalse = [ //记录拖拽方块的位置，拖拽失败时调用 22 | { 23 | left:0, 24 | top:0, 25 | width:0, 26 | height:0 27 | }, 28 | { 29 | left:0, 30 | top:0, 31 | width:0, 32 | height:0 33 | }, 34 | { 35 | left:0, 36 | top:0, 37 | width:0, 38 | height:0 39 | } 40 | ]; 41 | var overlapPoint = [ //记录三个方块某一个有颜色的位置（在标记时存储，省去了查找位置的时间） 42 | { 43 | x:0, 44 | y:0 45 | }, 46 | { 47 | x:0, 48 | y:0 49 | }, 50 | { 51 | x:0, 52 | y:0 53 | } 54 | ]; 55 | 56 | var statusOfBlock = [1, 2, 2, 2, 2, 4, 4, 1, 1]; //0-一块、1-长两块、2-长三块、3-长四块、4-长五块、5-长L形、6-短L形、7-方四块、8-方九块 57 | var Factory = { 58 | maps: 59 | [ 60 | [ //一块 61 | [0,0,0,0,0, 0,0,1,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0] 62 | ], 63 | [ //长两块 64 | [0,0,1,0,0, 0,0,1,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0], 65 | [0,0,0,0,0, 0,0,1,1,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0] 66 | ], 67 | [ //长三块 68 | [0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,0,0,0, 0,0,0,0,0], 69 | [0,0,0,0,0, 0,1,1,1,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0] 70 | ], 71 | [ //长四块 72 | [0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,0,0,0], 73 | [0,0,0,0,0, 1,1,1,1,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0] 74 | ], 75 | [ //长五块 76 | [0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0, 0,0,1,0,0], 77 | [0,0,0,0,0, 1,1,1,1,1, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0] 78 | ], 79 | [ //长L形 80 | [0,1,0,0,0, 0,1,0,0,0, 0,1,1,1,0, 0,0,0,0,0, 0,0,0,0,0], 81 | [0,1,1,1,0, 0,1,0,0,0, 0,1,0,0,0, 0,0,0,0,0, 0,0,0,0,0], 82 | [0,1,1,1,0, 0,0,0,1,0, 0,0,0,1,0, 0,0,0,0,0, 0,0,0,0,0], 83 | [0,0,0,1,0, 0,0,0,1,0, 0,1,1,1,0, 0,0,0,0,0, 0,0,0,0,0] 84 | ], 85 | [ //短L形 86 | [0,1,0,0,0, 0,1,1,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0], 87 | [0,1,1,0,0, 0,1,0,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0], 88 | [0,0,1,1,0, 0,0,0,1,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0], 89 | [0,0,0,1,0, 0,0,1,1,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0] 90 | ], 91 | [ //方四块 92 | [0,1,1,0,0, 0,1,1,0,0, 0,0,0,0,0, 0,0,0,0,0, 0,0,0,0,0] 93 | ], 94 | [ //方九块 95 | [0,1,1,1,0, 0,1,1,1,0, 0,1,1,1,0, 0,0,0,0,0, 0,0,0,0,0] 96 | ] 97 | ], 98 | index:0, //方块索引号 99 | status:0, //方块状态号 100 | createBlock: function(){ //生成一个新方块 101 | this.index = Math.floor(Math.random() * this.maps.length); 102 | this.status = Math.floor(Math.random() * this.maps[this.index].length); 103 | return this.getCurrentBlock(); 104 | }, 105 | getCurrentBlock: function(){ 106 | return this.maps[this.index][this.status]; 107 | } 108 | }; 109 | 110 | $(document).ready(function(){ 111 | prepareForMobile(); 112 | newgame(); 113 | 114 | //alert($(window).width()); 115 | //alert(window.screen.availWidth); 116 | resizeTo(document.body.clientWidth, window.screen.availHeight); 117 | }); 118 | 119 | function prepareForMobile(){ 120 | var isMobile = { 121 | Android: function () { 122 | return navigator.userAgent.match(/Android/i) ? true : false; 123 | }, 124 | BlackBerry: function () { 125 | return navigator.userAgent.match(/BlackBerry/i) ? true : false; 126 | }, 127 | iOS: function () { 128 | return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false; 129 | }, 130 | Windows: function () { 131 | return navigator.userAgent.match(/IEMobile/i) ? true : false; 132 | }, 133 | any: function () { 134 | return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows()); 135 | } 136 | }; 137 | if (isMobile.any()) { //判断是否为android,BlackBerry,ios,windows 138 | //要执行的代码 139 | } else { 140 | gridContainerWidth = 422; 141 | cellSideLength = 40; 142 | cellSpace = 2; 143 | dragContainerWidth = 358; 144 | dragCellSideLength = 20; 145 | dragCellSpace = 1; 146 | } 147 | 148 | $('#grid-container').css('width',gridContainerWidth - 2 * cellSpace); 149 | $('#grid-container').css('height',gridContainerWidth - 2 * cellSpace); 150 | $('#grid-container').css('padding',cellSpace); 151 | $('#grid-container').css('border-radius',0.02 * gridContainerWidth); 152 | 153 | $('.grid-cell').css('width',cellSideLength); 154 | $('.grid-cell').css('height',cellSideLength); 155 | $('.grid-cell').css('border-radius',0.15 * cellSideLength); 156 | 157 | $('#drag-container').css('width',dragContainerWidth - 2 * dragCellSpace); 158 | $('#drag-container').css('height',5 * dragCellSideLength + 6 * dragCellSpace); 159 | $('#drag-container').css('padding',dragCellSpace); 160 | $('#drag-container').css('border-radius',0.02 * dragContainerWidth); 161 | 162 | $('.drag-cell').css('width',dragCellSideLength); 163 | $('.drag-cell').css('height',dragCellSideLength); 164 | $('.drag-cell').css('border-radius',0.15 * dragCellSideLength); 165 | } 166 | 167 | function newgame(){ 168 | //初始化棋盘 169 | init(); 170 | //产生三个随机方块 171 | generateBlock(); 172 | // 重置score 173 | score = 0; 174 | } 175 | 176 | function init(){ //棋盘初始化 177 | for(var i = 0; i < 10; i++){ 178 | board[i] = new Array(10); 179 | for(var j = 0; j < 10; j++){ 180 | board[i][j] = 0; 181 | var gridCell = $('#grid-cell-'+i+'-'+j); 182 | gridCell.css('top',getTop(i, j)); 183 | gridCell.css('left',getLeft(i, j)); 184 | gridCell.css('zIndex',"1"); 185 | gridCell.css('background-color',"#e1e1e1"); 186 | 187 | $('#grid-container').append( '
' ); 188 | var theBlockCell = $('#block-cell-'+i+'-'+j); 189 | theBlockCell.css('line-height',cellSideLength); 190 | theBlockCell.css('top',getTop(i, j)); 191 | theBlockCell.css('left',getLeft(i, j)); 192 | theBlockCell.css('width',cellSideLength); 193 | theBlockCell.css('height',cellSideLength); 194 | theBlockCell.css('zIndex',"2"); 195 | theBlockCell.css('border-radius',0.15 * cellSideLength); 196 | theBlockCell.css('background-color',"#e1e1e1"); 197 | } 198 | } 199 | 200 | touching = false; 201 | animateNum(score, 0); 202 | } 203 | 204 | function generateBlock(){ //生成拖拽方块 205 | alreadyFill = 0; 206 | 207 | for(var i = 0; i < 3; i++){ 208 | var dragBlock = $('#drag-block-'+i); 209 | dragBlock.css('left',getDragBlockLeft(i)); 210 | dragBlock.css('top',"0px"); 211 | dragBlock.css('width',"0px"); 212 | dragBlock.css('height',"0px"); 213 | dragBoard[i] = new Array(25); 214 | for(var j = 0; j < 5; j++){ 215 | for(var k = 0; k < 5; k++){ 216 | var dragCell = $('#drag-cell-'+i+'-'+j+'-'+k); 217 | dragCell.css('top',getDragTop(j, k)); 218 | dragCell.css('left',getDragLeft(j, k)); 219 | dragCell.css('background-color',"#ffffff"); 220 | dragCell.css('width',dragCellSideLength); 221 | dragCell.css('height',dragCellSideLength); 222 | dragCell.css('border-radius',0.15*dragCellSideLength); 223 | } 224 | } 225 | } 226 | 227 | for(var i = 0; i < 3; i++){ 228 | var block = Factory.createBlock(); 229 | var flag = true; 230 | blockColor[i] = Factory.index; 231 | canClick[i] = true; 232 | for(var j = 0; j < 5; j++){ 233 | for(var k = 0; k < 5; k++){ 234 | var dragCell = $('#drag-cell-'+i+'-'+j+'-'+k); 235 | var dragCellColor = getDragCellColor(blockColor[i]); 236 | 237 | dragBoard[i][j*5+k] = block[j*5+k]; 238 | 239 | if(block[j*5+k] == 1){ 240 | dragCell.css('background-color', dragCellColor); 241 | dragCell.css('opacity',1); 242 | if(flag){ 243 | overlapPoint[i].x = j; 244 | overlapPoint[i].y = k; 245 | flag = false; 246 | } 247 | } else{ 248 | dragCell.css('opacity',0); 249 | } 250 | } 251 | } 252 | showDragBlock(i); 253 | 254 | dragFalse[i].left = getDragBlockLeft(i); 255 | dragFalse[i].top = "0px"; 256 | dragFalse[i].width = 5 * dragCellSideLength + 6 * dragCellSpace; 257 | dragFalse[i].height = 5 * dragCellSideLength + 6 * dragCellSpace; 258 | 259 | } 260 | } 261 | 262 | function drag(elementToDrag, id, event){ //拖拽动作 263 | if(touching) return ; 264 | if(!canClick[id]) return ; 265 | dragFalse[id].left = elementToDrag.style.left; 266 | dragFalse[id].top = elementToDrag.style.top; 267 | dragFalse[id].width = elementToDrag.style.width; 268 | dragFalse[id].height = elementToDrag.style.height; 269 | dragCellBigger(elementToDrag, id, event.clientX, event.clientY); 270 | var startX = event.clientX; 271 | var startY = event.clientY; 272 | var origX = elementToDrag.offsetLeft; 273 | var origY = elementToDrag.offsetTop; 274 | var deltaX = startX - origX; 275 | var deltaY = startY - origY; 276 | touchX = startX; 277 | touchY = startY; 278 | 279 | if(document.addEventListener){ 280 | document.addEventListener("mousemove",moveHandler,true); 281 | document.addEventListener("mouseup",upHandler,true); 282 | } else { 283 | elementToDrag.setCapture(); 284 | elementToDrag.attachEvent("onmousemove",moveHandler); 285 | elementToDrag.attachEvent("onmouseup",upHandler); 286 | elementToDrag.attachEvent("onlosecapture",upHandler); 287 | } 288 | 289 | if(event.stopPropagation) event.stopPropagation(); 290 | else event.cancelBubble = true; 291 | if(event.preventDefault) event.preventDefault(); 292 | else event.returnValue = false; 293 | 294 | function moveHandler(e){ 295 | if(!e) e = window.event; 296 | 297 | elementToDrag.style.left = (e.clientX - deltaX) + "px"; 298 | elementToDrag.style.top = (e.clientY - deltaY) + "px"; 299 | elementToDrag.style.zIndex = "10"; 300 | 301 | if(e.stopPropagation) e.stopPropagation(); 302 | else e.cancelBubble = true; 303 | } 304 | 305 | function upHandler(e){ 306 | if(!e) e = window.event; 307 | elementToDrag.style.zIndex = "1"; 308 | 309 | if(document.removeEventListener){ 310 | document.removeEventListener("mouseup",upHandler,true); 311 | document.removeEventListener("mousemove",moveHandler,true); 312 | } else { 313 | elementToDrag.detachEvent("onlosecapture",upHandler); 314 | elementToDrag.detachEvent("onmouseup",upHandler); 315 | elementToDrag.detachEvent("onmousemove",moveHandler); 316 | elementToDrag.releaseCapture(); 317 | } 318 | 319 | if(e.stopPropagation) e.stopPropagation(); 320 | else e.cancelBubble = true; 321 | 322 | if(dragSuccess(id)){ 323 | fillGrid(id); 324 | flushDragCell(id); 325 | canClick[id] = false; 326 | alreadyFill++; 327 | if(alreadyFill == 3) generateBlock(); 328 | 329 | checkClear(); 330 | } else{ 331 | elementToDrag.style.width = dragFalse[id].width; 332 | elementToDrag.style.height = dragFalse[id].height; 333 | elementToDrag.style.left = dragFalse[id].left; 334 | elementToDrag.style.top = dragFalse[id].top; 335 | elementToDrag.style.zIndex = "2"; 336 | for(var i = 0; i < 5; i++){ 337 | for(var j = 0; j < 5; j++){ 338 | var dragCell = $('#drag-cell-'+id+'-'+i+'-'+j); 339 | dragCell.css('left',getDragLeft(i, j)); 340 | dragCell.css('top',getDragTop(i, j)); 341 | dragCell.css('width',dragCellSideLength); 342 | dragCell.css('height',dragCellSideLength); 343 | dragCell.css('border-radius',0.15*dragCellSideLength); 344 | } 345 | } 346 | } 347 | touching = false; 348 | } 349 | } 350 | 351 | document.addEventListener('touchstart',function(event){ 352 | event.preventDefault(); 353 | touchX = event.touches[0].pageX; 354 | touchY = event.touches[0].pageY; 355 | var btn = $('#newgamebtn'); 356 | if(touchX >= btn.offset().left && touchX <= btn.offset().left + btn.width() && 357 | touchY >= btn.offset().top && touchY <= btn.offset().top + btn.height()){ 358 | newgame(); 359 | return; 360 | } 361 | 362 | for(var i = 0; i < 3; i++){ 363 | if(!canClick[i]) continue; 364 | var dragBlock = $('#drag-block-'+i); 365 | if(touchX >= dragBlock.offset().left && touchX <= dragBlock.offset().left + dragBlock.width() && 366 | touchY >= dragBlock.offset().top && touchY <= dragBlock.offset().top + dragBlock.height()){ 367 | touching = true; 368 | touchId = i; 369 | var elementToDrag = document.getElementById("drag-block-"+i); 370 | dragCellBigger(elementToDrag, i, event.touches[0].pageX, event.touches[0].pageY); 371 | 372 | touchDeltaX = touchX - elementToDrag.offsetLeft; 373 | touchDeltaY = touchY - elementToDrag.offsetTop; 374 | break; 375 | } 376 | } 377 | }); 378 | 379 | document.addEventListener('touchmove',function(event){ 380 | event.preventDefault(); 381 | if(!touching) return; 382 | 383 | var elementToDrag = document.getElementById("drag-block-"+touchId); 384 | var offsetX = event.touches[0].pageX - lastEvent.x; 385 | var offsetY = event.touches[0].pageY - lastEvent.y; 386 | lastEvent.x = event.touches[0].pageX; 387 | lastEvent.y = event.touches[0].pageY; 388 | elementToDrag.style.left = parseInt(elementToDrag.style.left) + offsetX + "px"; 389 | elementToDrag.style.top = parseInt(elementToDrag.style.top) + offsetY + "px"; 390 | 391 | elementToDrag.style.zIndex = "10"; 392 | }); 393 | 394 | document.addEventListener('touchend',function(event){ 395 | event.preventDefault(); 396 | if(!touching) return ; 397 | touching = false; 398 | if(dragSuccess(touchId)){ 399 | fillGrid(touchId); 400 | flushDragCell(touchId); 401 | canClick[touchId] = false; 402 | alreadyFill++; 403 | if(alreadyFill == 3) generateBlock(); 404 | 405 | checkClear(); 406 | } else{ 407 | var dragBlock = $('#drag-block-'+touchId); 408 | dragBlock.css('width',dragFalse[touchId].width); 409 | dragBlock.css('height',dragFalse[touchId].height); 410 | dragBlock.css('left',dragFalse[touchId].left); 411 | dragBlock.css('top',dragFalse[touchId].top); 412 | dragBlock.css('z-index',"2"); 413 | for(var i = 0; i < 5; i++){ 414 | for(var j = 0; j < 5; j++){ 415 | var dragCell = $('#drag-cell-'+touchId+'-'+i+'-'+j); 416 | dragCell.css('left',getDragLeft(i, j)); 417 | dragCell.css('top',getDragTop(i, j)); 418 | dragCell.css('width',dragCellSideLength); 419 | dragCell.css('height',dragCellSideLength); 420 | dragCell.css('border-radius',0.15*dragCellSideLength); 421 | } 422 | } 423 | } 424 | 425 | }); 426 | 427 | function dragCellBigger(elementToDrag, id, eventX, eventY){ //点击时放大方块 428 | var elementLeft = getElementLeft(elementToDrag); 429 | var elementWidth = parseInt(elementToDrag.style.width); 430 | var centerX = elementLeft + elementWidth / 2; 431 | elementToDrag.style.width = 5 * cellSideLength + 6 * cellSpace + "px"; 432 | elementToDrag.style.height = 5 * cellSideLength + 6 * cellSpace + "px"; 433 | var newLeft = eventX - parseInt(elementToDrag.style.width) / 2 + "px"; 434 | var newWidth = parseInt(elementToDrag.style.width); 435 | var offset = Math.abs(newLeft - elementLeft); 436 | var centerOffset = Math.abs(eventX - centerX); 437 | if (eventX > centerX) { 438 | elementToDrag.style.left = parseInt(elementToDrag.style.left) + elementWidth / 2 + centerOffset - newWidth / 2 + "px"; 439 | } else { 440 | elementToDrag.style.left = parseInt(elementToDrag.style.left) + elementWidth / 2 - centerOffset - newWidth / 2 + "px"; 441 | } 442 | elementToDrag.style.top = parseInt(elementToDrag.style.top) - newWidth / 2 + "px"; 443 | lastEvent.x = eventX; 444 | lastEvent.y = eventY; 445 | elementToDrag.style.zIndex = "10"; 446 | for(var i = 0; i < 5; i++){ 447 | for(var j = 0; j < 5; j++){ 448 | var dragCell = $('#drag-cell-'+id+'-'+i+'-'+j); 449 | dragCell.css('left',getLeft(i, j)); 450 | dragCell.css('top',getTop(i, j)); 451 | dragCell.css('width',cellSideLength); 452 | dragCell.css('height',cellSideLength); 453 | dragCell.css('border-radius', 0.15*cellSideLength); 454 | } 455 | } 456 | } 457 | 458 | function dragSuccess(id){ //判断填充是否成功 459 | var X = overlapPoint[id].x; 460 | var Y = overlapPoint[id].y; 461 | for(var i = 0; i < 10; i++){ 462 | for(var j = 0; j < 10; j++){ 463 | if(isOverlap($('#drag-cell-'+id+'-'+X+'-'+Y), $('#grid-cell-'+i+'-'+j))){ 464 | fillPoint.x = i; 465 | fillPoint.y = j; 466 | for(var p = 0; p < 5; p++){ 467 | for(var q = 0; q < 5; q++){ 468 | if(dragBoard[id][p*5+q] == 1){ 469 | if((i-X+p)>=0 && (i-X+p)<10 && (j-Y+q)>=0 && (j-Y+q)<10 && board[i-X+p][j-Y+q] == 0 && 470 | isOverlap($('#drag-cell-'+id+'-'+p+'-'+q), $('#grid-cell-'+(i-X+p)+'-'+(j-Y+q)))){ 471 | continue; 472 | } 473 | else return false; 474 | } 475 | } 476 | } 477 | return true; 478 | } 479 | } 480 | } 481 | return false; 482 | } 483 | 484 | function isOverlap(aCell, bCell){ //判断两个方块是否重叠（即可填充） 485 | if(((aCell.offset().left<=bCell.offset().left+bCell.width()*0.44) && (aCell.offset().top<=bCell.offset().top+bCell.height()*0.44) && 486 | (aCell.offset().left>=bCell.offset().left) && (aCell.offset().top>=bCell.offset().top)) || 487 | ((aCell.offset().left<=bCell.offset().left+bCell.width()*0.44) && (aCell.offset().top>=bCell.offset().top-bCell.height()*0.44) && 488 | (aCell.offset().left>=bCell.offset().left) && (aCell.offset().top<=bCell.offset().top)) || 489 | ((aCell.offset().left>=bCell.offset().left-bCell.width()*0.44) && (aCell.offset().top<=bCell.offset().top+bCell.height()*0.44) && 490 | (aCell.offset().left<=bCell.offset().left) && (aCell.offset().top>=bCell.offset().top)) || 491 | ((aCell.offset().left>=bCell.offset().left-bCell.width()*0.44) && (aCell.offset().top>=bCell.offset().top-bCell.height()*0.44) && 492 | (aCell.offset().left<=bCell.offset().left) && (aCell.offset().top<=bCell.offset().top))) 493 | return true; 494 | return false; 495 | } 496 | 497 | function fillGrid(id){ //方块填充 498 | var X = overlapPoint[id].x; 499 | var Y = overlapPoint[id].y; 500 | var i = fillPoint.x; 501 | var j = fillPoint.y; 502 | var color = getDragCellColor(blockColor[id]); 503 | var addScore = 0; 504 | for(var p = 0; p < 5; p++){ 505 | for(var q = 0; q < 5; q++){ 506 | if(dragBoard[id][p*5+q] == 1){ 507 | addScore++; 508 | board[i-X+p][j-Y+q] = 1; 509 | $('#block-cell-'+(i-X+p)+'-'+(j-Y+q)).css('top',getTop(i-X+p, j-Y+q)); 510 | $('#block-cell-'+(i-X+p)+'-'+(j-Y+q)).css('left',getLeft(i-X+p, j-Y+q)); 511 | $('#block-cell-'+(i-X+p)+'-'+(j-Y+q)).css('width',cellSideLength); 512 | $('#block-cell-'+(i-X+p)+'-'+(j-Y+q)).css('height',cellSideLength); 513 | $('#block-cell-'+(i-X+p)+'-'+(j-Y+q)).css('background-color', color); 514 | } 515 | } 516 | } 517 | animateNum(score, score + addScore); 518 | score += addScore; 519 | } 520 | 521 | function flushDragCell(id){ //填充后刷新拖拽方块的状态 522 | $('#drag-block-'+id).css('width',"0px"); 523 | $('#drag-block-'+id).css('height',"0px"); 524 | for(var i = 0; i < 5; i++){ 525 | for(var j = 0; j < 5; j++){ 526 | $('#drag-cell-'+id+'-'+i+'-'+j).css('opacity',0); 527 | $('#drag-cell-'+id+'-'+i+'-'+j).css('width',"0px"); 528 | $('#drag-cell-'+id+'-'+i+'-'+j).css("height","0px"); 529 | } 530 | } 531 | } 532 | 533 | function checkClear(){ //检查是否可消除 534 | var canClear = false; 535 | for(var i = 0; i < 10; i++){ 536 | var flag = 0; 537 | for(var j = 0; j < 10; j++){ 538 | if(board[i][j] != 0) flag++; 539 | } 540 | if(flag == 10){ 541 | canClear = true; 542 | for(var j = 0; j < 10; j++){ 543 | board[i][j] = 2; 544 | } 545 | } 546 | } 547 | for(var i = 0; i < 10; i++){ 548 | var flag = 0; 549 | for(var j = 0; j < 10; j++){ 550 | if(board[j][i] != 0) flag++; 551 | } 552 | if(flag == 10){ 553 | canClear = true; 554 | for(var j = 0; j < 10; j++){ 555 | board[j][i] = 2; 556 | } 557 | } 558 | } 559 | if(!canClear){ 560 | setTimeout("checkGameOver()",310); 561 | return ; 562 | } 563 | var addScore = 0; 564 | for(var i = 0; i < 10; i++){ 565 | for(var j = 0; j < 10; j++){ 566 | if(board[i][j] == 2){ 567 | addScore++; 568 | showBlockClear(i, j); 569 | board[i][j] = 0; 570 | } 571 | } 572 | } 573 | animateNum(score, score + addScore); 574 | score += addScore; 575 | 576 | setTimeout("checkGameOver()",310); 577 | 578 | } 579 | 580 | function checkGameOver(){ //检查是否无路可走 581 | for(var i = 0; i < 3; i++){ 582 | if(!canClick[i]) continue; 583 | if(canDrag(i)){ 584 | return false; 585 | } 586 | } 587 | if(alreadyFill > 0) alert("哈哈哈！挂了吧！"); 588 | else alert("很遗憾你挂了，有时候运气也很重要"); 589 | newgame(); 590 | return true; 591 | } 592 | 593 | function canDrag(id){ //检查第id个方块是否可以填充 594 | var X = overlapPoint[id].x; 595 | var Y = overlapPoint[id].y; 596 | for(var i = 0; i < 10; i++){ 597 | for(var j = 0; j < 10; j++){ 598 | if(board[i][j] == 0){ 599 | var flag = true; 600 | for(var p = 0; p < 5; p++){ 601 | for(var q = 0; q < 5; q++){ 602 | if(dragBoard[id][p*5+q] == 1){ 603 | if((i-X+p)>=10 || (i-X+p)<0 || (j-Y+q)>=10 || (j-Y+q)<0 || board[i-X+p][j-Y+q] == 1){ 604 | flag = false; 605 | break; 606 | } 607 | } 608 | } 609 | if(!flag) break; 610 | } 611 | if(flag) return true; 612 | } 613 | } 614 | } 615 | return false; 616 | } 617 | 618 | function animateNum(startVal, endVal) { 619 | var numAnim = new CountUp("score", startVal, endVal, 0, 0.3); 620 | numAnim.start(); 621 | } -------------------------------------------------------------------------------- /src/animate.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by altair21 on 15/4/4. 3 | */ 4 | function showBlockClear(i, j){ 5 | var blockCell = $('#block-cell-'+i+'-'+j); 6 | blockCell.animate({ 7 | width:"0px", 8 | height:"0px", 9 | left:getLeft(i, j) + 0.5 * cellSideLength + "px", 10 | top:getTop(i, j) + 0.5 * cellSideLength + "px" 11 | },250); 12 | } 13 | 14 | function showDragBlock(id){ 15 | var dragBlock = $('#drag-block-'+id); 16 | dragBlock.animate({ 17 | left:getDragBlockLeft(id), 18 | top:"0px", 19 | width:5 * dragCellSideLength + 6 * dragCellSpace, 20 | height:5 * dragCellSideLength + 6 * dragCellSpace 21 | },300); 22 | } -------------------------------------------------------------------------------- /src/countUp.min.js: -------------------------------------------------------------------------------- 1 | !function(a,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t(require,exports,module):a.CountUp=t()}(this,function(a,t,n){var e=function(a,t,n,e,i,r){for(var o=0,s=["webkit","moz","ms","o"],m=0;mu.endVal,u.frameVal=u.startVal,u.decimals=Math.max(0,e||0),u.dec=Math.pow(10,u.decimals),u.duration=1e3*Number(i)||2e3,u.formatNumber=function(a){a=a.toFixed(u.decimals),a+="";var t,n,e,i;if(t=a.split("."),n=t[0],e=t.length>1?u.options.decimal+t[1]:"",i=/(\d+)(\d{3})/,u.options.useGrouping)for(;i.test(n);)n=n.replace(i,"$1"+u.options.separator+"$2");return u.options.prefix+n+e+u.options.suffix},u.easeOutExpo=function(a,t,n,e){return n*(-Math.pow(2,-10*a/e)+1)*1024/1023+t},u.easingFn=u.options.easingFn?u.options.easingFn:u.easeOutExpo,u.formattingFn=u.options.formattingFn?u.options.formattingFn:u.formatNumber,u.version=function(){return"1.7.1"},u.printValue=function(a){var t=u.formattingFn(a);"INPUT"===u.d.tagName?this.d.value=t:"text"===u.d.tagName||"tspan"===u.d.tagName?this.d.textContent=t:this.d.innerHTML=t},u.count=function(a){u.startTime||(u.startTime=a),u.timestamp=a;var t=a-u.startTime;u.remaining=u.duration-t,u.options.useEasing?u.countDown?u.frameVal=u.startVal-u.easingFn(t,0,u.startVal-u.endVal,u.duration):u.frameVal=u.easingFn(t,u.startVal,u.endVal-u.startVal,u.duration):u.countDown?u.frameVal=u.startVal-(u.startVal-u.endVal)*(t/u.duration):u.frameVal=u.startVal+(u.endVal-u.startVal)*(t/u.duration),u.countDown?u.frameVal=u.frameValu.endVal?u.endVal:u.frameVal,u.frameVal=Math.round(u.frameVal*u.dec)/u.dec,u.printValue(u.frameVal),tu.endVal,u.rAF=requestAnimationFrame(u.count)},u.printValue(u.startVal)};return e}); -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 1010 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 新游戏 18 |

得分：0

19 |
20 | 21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | 33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 | 66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | 99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 | 110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 | 121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 | 133 |
134 | 135 |
136 |
137 |
138 |
139 |
140 |
141 | 142 |
143 |
144 |
145 |
146 |
147 | 148 |
149 |
150 |
151 |
152 |
153 | 154 |
155 |
156 |
157 |
158 |
159 | 160 |
161 |
162 |
163 |
164 |
165 |
166 | 167 |
168 |
169 |
170 |
171 |
172 |
173 | 174 |
175 |
176 |
177 |
178 |
179 | 180 |
181 |
182 |
183 |
184 |
185 | 186 |
187 |
188 |
189 |
190 |
191 | 192 |
193 |
194 |
195 |
196 |
197 |
198 | 199 |
200 |
201 |
202 |
203 |
204 |
205 | 206 |
207 |
208 |
209 |
210 |
211 | 212 |
213 |
214 |
215 |
216 |
217 | 218 |
219 |
220 |
221 |
222 |
223 | 224 |
225 |
226 |
227 |
228 |
229 |
230 |
231 | 232 | -------------------------------------------------------------------------------- /src/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow: hidden; 3 | } 4 | 5 | header{ 6 | display: block; 7 | margin: 0 auto; 8 | width: 100%; 9 | text-align: center; 10 | } 11 | 12 | header h1{ 13 | font-family: Arial; 14 | font-size: 40px; 15 | font-weight: bold; 16 | margin: 0 auto; 17 | } 18 | 19 | header #newgamebtn{ 20 | display: block; 21 | margin: 5px auto; 22 | 23 | width: 100px; 24 | padding: 5px 5px; 25 | background-color: #8f7a66; 26 | 27 | font-family: Arial; 28 | color: white; 29 | 30 | border-radius: 10px; 31 | text-decoration: none; 32 | } 33 | 34 | header #newgamebtn:hover{ 35 | background-color:#9f8b77; 36 | } 37 | 38 | header p{ 39 | font-family: Arial; 40 | font-size: 15px; 41 | margin: 10px auto; 42 | } 43 | 44 | #grid-container{ 45 | width: 422px; 46 | height: 422px; 47 | /*padding: 20px;*/ 48 | 49 | margin: 5px auto; 50 | background-color: #ffffff; 51 | 52 | border-radius: 10px; 53 | position: relative; 54 | } 55 | 56 | .grid-cell{ 57 | width:40px; 58 | height: 40px; 59 | border-radius: 5px; 60 | background-color: #e1e1e1; 61 | 62 | position: absolute; 63 | } 64 | 65 | .block-cell{ 66 | border-radius: 4px; 67 | position: absolute; 68 | } 69 | 70 | #drag-container{ 71 | width: 354px; 72 | height: 106px; 73 | padding: auto 10px; 74 | 75 | margin: 5px auto; 76 | background-color: #ffffff; 77 | 78 | border-radius: 10px; 79 | position: relative; 80 | } 81 | 82 | .drag-block{ 83 | width: 106px; 84 | height: 106px; 85 | 86 | background: rgba(244,219,187, 0); 87 | filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#0F4DBBB, endColorstr=#0F4DBBB); 88 | 89 | border-radius: 10px; 90 | position: absolute; 91 | 92 | z-index: 3; 93 | 94 | } 95 | 96 | .drag-cell{ 97 | width: 20px; 98 | height: 20px; 99 | border-radius: 2px; 100 | background-color: #ffffff; 101 | 102 | position: absolute; 103 | } -------------------------------------------------------------------------------- /src/support1010.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by altair21 on 15/4/1. 3 | */ 4 | documentWidth = Math.min(window.screen.availWidth, $(window).width()); 5 | gridContainerWidth = 0.855 * documentWidth; 6 | cellSideLength = 0.08 * documentWidth; 7 | cellSpace = 0.005 * documentWidth; 8 | dragContainerWidth = 0.94 * documentWidth; 9 | dragCellSideLength = 0.05 * documentWidth; 10 | dragCellSpace = 0.005 * documentWidth; 11 | 12 | function getElementLeft(element){ 13 | var actualLeft = element.offsetLeft; 14 | var current = element.offsetParent; 15 | while (current !== null){ 16 | actualLeft += current.offsetLeft; 17 | current = current.offsetParent; 18 | } 19 | return actualLeft; 20 | } 21 | 22 | function getElementTop(element){ 23 | var actualTop = element.offsetTop; 24 | var current = element.offsetParent; 25 | while (current !== null){ 26 | actualTop += current.offsetTop; 27 | current = current.offsetParent; 28 | } 29 | return actualTop; 30 | } 31 | 32 | function getTop(i, j){ 33 | return cellSpace + i * (cellSpace + cellSideLength); 34 | } 35 | 36 | function getLeft(i, j){ 37 | return cellSpace + j * (cellSpace + cellSideLength); 38 | } 39 | 40 | function getDragBlockLeft(i){ 41 | return (dragCellSideLength + dragCellSpace) * 6 * i; 42 | } 43 | 44 | function getDragTop(j, k){ 45 | return dragCellSpace + j * (dragCellSpace + dragCellSideLength); 46 | } 47 | 48 | function getDragLeft(j, k){ 49 | return dragCellSpace + k * (dragCellSpace + dragCellSideLength); 50 | } 51 | 52 | function getDragCellColor(index){ 53 | switch (index){ 54 | case 0: return "#7e8ed5";break; 55 | case 1: return "#ffc63e";break; 56 | case 2: return "#ed954a";break; 57 | case 3: return "#e76a82";break; 58 | case 4: return "#dc6555";break; 59 | case 5: return "#5cbee4";break; 60 | case 6: return "#59cb86";break; 61 | case 7: return "#98dc55";break; 62 | case 8: return "#4dd5b0";break; 63 | default : return "black"; 64 | } 65 | } 66 | --------------------------------------------------------------------------------