From 29febf4680988e5b1266224b45ed721af45ac3c3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=91=E6=80=A1?= Date: Fri, 5 Sep 2014 12:00:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=9E=E7=8E=B0=E5=93=8D=E5=BA=94=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 模拟器实现，真机测试有问题 --- .idea/workspace.xml | 230 ++++++++++++++++++++++++++----------------- 2048.css | 8 +- index.html | 1 + main2048.js | 120 +++++++++++++++++++++- showAnimation2048.js | 4 +- support2048.js | 10 +- 6 files changed, 268 insertions(+), 105 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index c5a3b77..75e25ec 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,7 +1,7 @@ - + @@ -29,18 +29,18 @@ - - + + - + - - + + @@ -49,10 +49,13 @@ - - + + - + + + + @@ -61,23 +64,19 @@ - - + + - + - - - - - - - + + + @@ -93,10 +92,10 @@ @@ -132,7 +131,6 @@ - @@ -153,6 +151,7 @@ + @@ -160,6 +159,7 @@ + @@ -218,7 +218,7 @@ - + @@ -262,6 +262,59 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + @@ -283,7 +336,10 @@ - + + + + @@ -300,11 +356,7 @@ - - - - - + @@ -329,7 +381,10 @@ - + + + + @@ -346,11 +401,7 @@ - - - - - + @@ -375,7 +426,10 @@ - + + + + @@ -392,11 +446,7 @@ - - - - - + @@ -421,7 +471,10 @@ - + + + + @@ -438,11 +491,7 @@ - - - - - + @@ -467,7 +516,10 @@ - + + + + @@ -484,11 +536,7 @@ - - - - - + @@ -513,7 +561,10 @@ - + + + + @@ -530,11 +581,7 @@ - - - - - + @@ -559,7 +606,10 @@ - + + + + @@ -576,11 +626,7 @@ - - - - - + @@ -605,7 +651,10 @@ - + + + + @@ -622,60 +671,55 @@ - - - - - + - + - - + + + + + + + + + + - - + + - - + + - + + + + - + - - + + - - - - - - - - - - - - diff --git a/2048.css b/2048.css index 12c90bf..a67356e 100644 --- a/2048.css +++ b/2048.css @@ -1,13 +1,13 @@ header{ display: block; margin: 0 auto; - width: 500px; + width: 100%; text-align: center; } header h1{ font-family: Arial; - font-size: 60px; + font-size: 40px; font-weight: bold; } header p{ @@ -17,7 +17,7 @@ header p{ } header #newgamebutton{ display: bolck; - margin: 20px auto; + margin: 10px auto; width: 100px; padding: 10px 10px; background-color:#8f7a66; @@ -35,7 +35,7 @@ header #newgamebutton:hover{ width: 460px; height: 460px; padding: 20px; - margin: 50px auto; + margin: 20px auto; background-color: #bbada0; border-radius: 10px; position: relative; diff --git a/index.html b/index.html index 4d35052..f6ec8c6 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + 2048 by Mr.Harry diff --git a/main2048.js b/main2048.js index 06df530..c1c0b0a 100644 --- a/main2048.js +++ b/main2048.js @@ -5,10 +5,35 @@ var board; //保存每个格子分数 var hasConflicted; //是否发生过碰撞 var score = 0; +var startx,starty,endx,endy; //保存触控坐标 + $(document).ready(function(){ + prepareForMobile(); newGame(); }); +/** + * 应用移动端的长度方案 + */ +function prepareForMobile(){ + //当屏幕宽度大于500时应用绝对的长度 + if(documentWidth > 500){ + gridContainerWidth = 500; + cellSideLength = 100; + cellSpace = 20; + } + $('#grid-container').css({ + width: gridContainerWidth - 2*cellSpace, + height: gridContainerWidth - 2*cellSpace, + padding: cellSpace + }).css('border-radius',0.02*cellSideLength); + + $('.grid-cell').css({ + width:cellSideLength, + height:cellSideLength + }).css('border-radius',0.02*cellSideLength); +} + function newGame(){ //初始化棋盘格 init(); @@ -63,14 +88,14 @@ function updateBoardView(){ thisCell.css({ width:'0px', height:'0px', - top:getPosTop(i,j)+50, - left:getPosLeft(i,j)+50 + top:getPosTop(i,j)+0.5*cellSideLength, + left:getPosLeft(i,j)+0.5*cellSideLength }); } else{ thisCell.css({ - width:'100px', - height:'100px', + width:cellSideLength, + height:cellSideLength, top:getPosTop(i,j), left:getPosLeft(i,j), backgroundColor:getNumberBgColor(board[i][j]), @@ -82,6 +107,9 @@ function updateBoardView(){ } //刷新分数 updateScore(score); + //给新生成的number格子应用移动端长度 + $('.number-cell').css('line-height',cellSideLength+'px') + .css('font-size',0.6*cellSideLength+'px'); } /** @@ -133,6 +161,8 @@ function generateOneNumber(){ $(document).keydown(function(event){ switch (event.keyCode){ case 37: //left + //阻止默认操作 + event.preventDefault(); if(moveLeft()){ //move动画结束后生成格子 setTimeout(function(){ @@ -145,6 +175,8 @@ $(document).keydown(function(event){ } break; case 38: //up + //阻止默认操作 + event.preventDefault(); if(moveUp()){ setTimeout(function(){ generateOneNumber(); @@ -155,6 +187,8 @@ $(document).keydown(function(event){ } break; case 39: //right + //阻止默认操作 + event.preventDefault(); if(moveRight()){ setTimeout(function(){ generateOneNumber(); @@ -165,6 +199,8 @@ $(document).keydown(function(event){ } break; case 40: //down + //阻止默认操作 + event.preventDefault(); if(moveDown()){ setTimeout(function(){ generateOneNumber(); @@ -178,6 +214,82 @@ $(document).keydown(function(event){ break; } }); + +//监听触控事件 +addEventListener('touchstart',function(event){ + //touches保存了触控信息，此处使用单点触控，所以取数组第一项 + startx = event.touches[0].pageX; + starty = event.touches[0].pageY; +}); +addEventListener('touchmove',function(event){ + //取消默认事件 + event.preventDefault(); +}); +addEventListener('touchend',function(event){ + //changedTouches保存了touch改变时的坐标位置 + endx = event.changedTouches[0].pageX; + endy = event.changedTouches[0].pageY; + + //x,y向量 + var deltax = endx - startx, + deltay = endy - starty; + + //防误触操作 + if(Math.abs(deltax) < 0.05*documentWidth && Math.abs(deltay) < 0.05*documentWidth) return; + + //触控方向判断 + if(Math.abs(deltax) - Math.abs(deltay) > 0){ + //x + if(deltax > 0){ + //right + if(moveRight()){ + setTimeout(function(){ + generateOneNumber(); + },210); + setTimeout(function(){ + isGameover(); + },300); + } + }else{ + //left + if(moveLeft()){ + //move动画结束后生成格子 + setTimeout(function(){ + generateOneNumber(); + },210); + //格子生成后检测isGameover + setTimeout(function(){ + isGameover(); + },300); + } + } + }else{ + //y + if(deltay > 0 ){ + //down + if(moveDown()){ + setTimeout(function(){ + generateOneNumber(); + },210); + setTimeout(function(){ + isGameover(); + },300); + } + + }else{ + //up + if(moveUp()){ + setTimeout(function(){ + generateOneNumber(); + },210); + setTimeout(function(){ + isGameover(); + },300); + } + } + } + +}); /** * 向左移动 * @returns {boolean} diff --git a/showAnimation2048.js b/showAnimation2048.js index b5ad069..569a95b 100644 --- a/showAnimation2048.js +++ b/showAnimation2048.js @@ -20,8 +20,8 @@ function showNumAnimation(i,j,num) { //设定动画效果 numCell.animate({ - width:'100px', - height:'100px', + width:cellSideLength, + height:cellSideLength, top:getPosTop(i,j), left:getPosLeft(i,j) },50); diff --git a/support2048.js b/support2048.js index a5c1db1..5acbdb5 100644 --- a/support2048.js +++ b/support2048.js @@ -1,11 +1,17 @@ /** * Created by Administrator on 2014/8/11. */ +//按照百分比计算每一部分的长度 +var documentWidth = window.screen.availWidth, + gridContainerWidth = 0.92 * documentWidth, + cellSideLength = 0.18 * documentWidth, + cellSpace = 0.04 * documentWidth; + function getPosTop(i,j){ - return 20 + 120*i ; + return cellSpace + (cellSpace+cellSideLength)*i ; } function getPosLeft(i,j){ - return 20 + 120*j ; + return cellSpace + (cellSpace+cellSideLength)*j ; } function getNumberCellStr(i,j){