Skip to content

Commit

Permalink
实现响应式
Browse files Browse the repository at this point in the history 
模拟器实现，真机测试有问题
  • Loading branch information
@HarryFight
HarryFight committed Sep 5, 2014
1 parent 4a93b38 commit 29febf4
Show file tree
Hide file tree
Showing 6 changed files with 268 additions and 105 deletions.
230 changes: 137 additions & 93 deletions .idea/workspace.xml
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions 2048.css
View file
Original file line number Diff line number Diff line change
@@ -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{
Expand All @@ -17,7 +17,7 @@ header p{
}
header #newgamebutton{
display: bolck;
margin: 20px auto;
margin: 10px auto;
width: 100px;
padding: 10px 10px;
background-color:#8f7a66;
Expand All @@ -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;
Expand Down
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,minimum-scale=1.0,maximum-scale=1.0,user-scale=no"/>
<title>2048 by Mr.Harry</title>
<link rel="stylesheet" type="text/css" href="2048.css"/>
</head>
Expand Down
120 changes: 116 additions & 4 deletions main2048.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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]),
Expand All @@ -82,6 +107,9 @@ function updateBoardView(){
}
//刷新分数
updateScore(score);
//给新生成的number格子应用移动端长度
$('.number-cell').css('line-height',cellSideLength+'px')
.css('font-size',0.6*cellSideLength+'px');
}

/**
Expand Down Expand Up @@ -133,6 +161,8 @@ function generateOneNumber(){
$(document).keydown(function(event){
switch (event.keyCode){
case 37: //left
//阻止默认操作
event.preventDefault();
if(moveLeft()){
//move动画结束后生成格子
setTimeout(function(){
Expand All @@ -145,6 +175,8 @@ $(document).keydown(function(event){
}
break;
case 38: //up
//阻止默认操作
event.preventDefault();
if(moveUp()){
setTimeout(function(){
generateOneNumber();
Expand All @@ -155,6 +187,8 @@ $(document).keydown(function(event){
}
break;
case 39: //right
//阻止默认操作
event.preventDefault();
if(moveRight()){
setTimeout(function(){
generateOneNumber();
Expand All @@ -165,6 +199,8 @@ $(document).keydown(function(event){
}
break;
case 40: //down
//阻止默认操作
event.preventDefault();
if(moveDown()){
setTimeout(function(){
generateOneNumber();
Expand All @@ -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}
Expand Down
4 changes: 2 additions & 2 deletions showAnimation2048.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
10 changes: 8 additions & 2 deletions support2048.js
View file
Original file line number Diff line number Diff line change
@@ -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){
Expand Down

0 comments on commit 29febf4

Please sign in to comment.