<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>2048-張靚穎版</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="My Own 2048" />
<link rel="stylesheet" href="2048style.css" />
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="support2048.js"></script>
<script type="text/javascript" src="showanimation2048.js"></script>
<script type="text/javascript" src="main2048.js"></script>
</head>
<body>
<header>
<div class="cdinf">
<p>2006.1.12 《Jane.愛》</p>
<p>2006.8.7 《我愛鄧麗君》</p>
<p>2006.10.11 《The One》</p>
<p>2007.8.2 《Update》</p>
<p>2006.12.8 《Dear Jane》</p>
<p>2009.1.16 《張靚穎@音樂》</p>
<p>2010.2.2 《我相信》</p>
<p>2011.6.1 《改變》</p>
<p>2012.6.8 《傾聽》</p>
<p>2013.6.25 《感謝》</p>
<p>2014.7.21 《第七感》</p>
<p>To Be Continue...</p>
</div>
<div class="mask"></div>
<div class="success">
<p>恭喜</p>
<p>成功解鎖第七感！</p>
</div>
<div class="fail">
<p>加油，親</p>
<p>前方就有第七感！</p>
</div>
<h1>2048-張靚穎版</h1>
<div class="inf">
<a href="javascript:newGame();" class="newGameButton">新游戲</a>
<p class="newGameButton myscore">得分 : <span id="score">0</span></p>
</div>
</header>
<div id="grid-container">
<div class="grid-cell" id="grid-cell-0-0"></div>
<div class="grid-cell" id="grid-cell-0-1"></div>
<div class="grid-cell" id="grid-cell-0-2"></div>
<div class="grid-cell" id="grid-cell-0-3"></div>
<div class="grid-cell" id="grid-cell-1-0"></div>
<div class="grid-cell" id="grid-cell-1-1"></div>
<div class="grid-cell" id="grid-cell-1-2"></div>
<div class="grid-cell" id="grid-cell-1-3"></div>
<div class="grid-cell" id="grid-cell-2-0"></div>
<div class="grid-cell" id="grid-cell-2-1"></div>
<div class="grid-cell" id="grid-cell-2-2"></div>
<div class="grid-cell" id="grid-cell-2-3"></div>
<div class="grid-cell" id="grid-cell-3-0"></div>
<div class="grid-cell" id="grid-cell-3-1"></div>
<div class="grid-cell" id="grid-cell-3-2"></div>
<div class="grid-cell" id="grid-cell-3-3"></div>
</div>
</body>
</html>
body{
background: url(http://img1.sycdn.imooc.com//53f314300001f03519201200.jpg) 170px -50px;
}
.cdinf{
position: absolute;
top: 125px;
left: 110px;
font: 14px '微軟雅黑';
color: white;
text-align: left;
z-index: 1;
}
.mask{
height: 500px;
width: 500px;
top: 131px;
margin: 0 auto;
background-color: black;
opacity: 0.5;
filter:alpha(opacity=50);
display: none;
position: absolute;
z-index: 100;
border-radius: 10px;
}
.success{
position: absolute;
top: 255px;
left: 519px;
z-index: 101;
display: none;
font: bold 40px '微軟雅黑';
color:#FF9999;
}
.fail{
position: absolute;
top: 255px;
left: 519px;
z-index: 101;
display: none;
font: bold 40px '微軟雅黑';
color:pink;
}
header{
display: block;
margin: 0 auto;
width: 500px;
text-align: center;
}
header h1{
font-family: '微軟雅黑';
font-size: 35px;
font-weight: bold;
color: #FF9999;
margin: 20px auto 10px auto;
}
.inf{
margin: 0 auto;
}
header .newGameButton{
display: inline-block;
width: 100px;
padding: 7px 8px 8px 8px;
background-color: pink;
font: 15px '微軟雅黑';
color: white;
border-radius: 10px;
text-decoration: none;
margin-right: 10px;
}
.myscore{
margin-top: 0px;
margin-bottom: 0px;
}
header .newGameButton:hover{
background-color: #FF9999;
}
#grid-container{
width: 460px;
height: 460px;
padding: 20px;
margin: 20px auto 0 auto;
background-color: pink;
border-radius: 10px;
position: relative;
}
.grid-cell{
width: 100px;
height: 100px;
border-radius: 6px;
background-color: #FFCCC9;
position: absolute;
}
.number-cell{
border-radius: 6px;
font-family: Arial;
font-size: 60px;
font-weight: bold;
line-height: 100px;
text-align: center;
position: absolute;
}
var board = new Array();
var score = 0;
var hasConflicted = new Array();
$(document).ready(function(){
newGame();
});
function newGame(){
//初始化操作
init();
//隨機產生兩個數字
generateOneNumber();
generateOneNumber();
}
function init(){
for (var i = 0; i < 4; i++) {
for (var j = 0; j < 4; j++) {
var gridCell = $("#grid-cell-" + i + "-" + j);
gridCell.css('top',getPosTop(i,j));
gridCell.css('left',getPosLeft(i,j));
}
}
for (var i = 0; i < 4; i++) {
board[i] = new Array();
hasConflicted[i] = new Array();
for(var j = 0; j < 4; j++ ){
board[i][j] = 0;
hasConflicted[i][j] = false;
}
}
updateBoardView();
score = 0;
updateScore( score );
$('.mask').css('display','none');
$('.fail').css('display','none');
$('.success').css('display','none');
}
function updateBoardView(){
$(".number-cell").remove();
for(var i = 0; i < 4; i++){
for(var j = 0; j < 4; j++){
$("#grid-container").append( '<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>' );//這里的append及里面的引號使用值得注意
var theNumberCell = $('#number-cell-'+i+'-'+j);
if(board[i][j] == 0){
theNumberCell.css('width','0px');
theNumberCell.css('height','0px');
theNumberCell.css('top',getPosTop(i,j)+50);
theNumberCell.css('left',getPosLeft(i,j)+50);
}
else{
theNumberCell.css('width','100px');
theNumberCell.css('height','100px');
theNumberCell.css('top',getPosTop(i,j));
theNumberCell.css('left',getPosLeft(i,j));
theNumberCell.css('background-image',getNumberBackgroundColor(board[i][j]));
theNumberCell.css('color',getNumberColor(board[i][j]));
//theNumberCell.text(board[i][j]);
}
hasConflicted[i][j] = false;
}
}
}
function generateOneNumber(){
if( noSpace( board ) ){
return false;
}
//隨機一個位置
var randx = parseInt(Math.floor(Math.random()*4));
var randy = parseInt(Math.floor(Math.random()*4));
var times = 0;
while( times < 50 ){
if(board[randx][randy]==0){
break;
}
randx = parseInt(Math.floor(Math.random()*4));
randy = parseInt(Math.floor(Math.random()*4));
times++;
}
if( times == 50 ){
for( var i = 0; i < 4; i++){
for( var j = 0; j < 4; j++){
if( board[i][j] == 0 ){
randx = i;
randy = j;
break;
}
}
}
}
//隨機一個數字
var randNumber = Math.random() < 0.5 ? 2 : 4;
//在隨機位置上顯示隨機數字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx,randy,randNumber);
return true;
}
$(document).keydown( function(event){
switch(event.keyCode){ //注意大小寫，keycode中C是大寫
case 37://left
if( moveLeft() ){
setTimeout("generateOneNumber()",210);
setTimeout("isGameOver()",300);
}
break;
case 38://up
if( moveUp() ){
setTimeout("generateOneNumber()",210);
setTimeout("isGameOver()",300);
}
break;
case 39://right
if( moveRight() ){
setTimeout("generateOneNumber()",210);
setTimeout("isGameOver()",300);
}
break;
case 40://down
if( moveDown() ){
setTimeout("generateOneNumber()",210);
setTimeout("isGameOver()",300);
}
break;
default:
break;
}
});
function isGameOver(){
if( noSpace(board) && noMove(board) ){
gameOver();
}
for(var i = 0; i < 4; i++){
for(var j = 0; j < 4; j++){
if( board[i][j] == 2048 ){
youWin();
}
}
}
}
function gameOver(){
$('.mask').show();
$('.fail').show();
}
function youWin(){
$('.mask').show();
$('.success').show();
}
function moveLeft(){
if(!canMoveLeft(board)){
return false;
}
//move left
for(var i = 0;i < 4;i++){
for(var j = 1;j < 4;j++){
if( board[i][j] != 0 ){
for(var k = 0; k < j; k++){
if( board[i][k] == 0 && noBlockx(i,k,j,board) ){
//move left
showMoveAnimation(i,j,i,k); //注意參數的順序
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[i][k] == board [i][j] && noBlockx(i,k,j,board) && !hasConflicted[i][k] ){
//move left
showMoveAnimation(i,j,i,k);
//add
board[i][k] += board[i][j];
board[i][j] = 0;
score += board[i][k];
updateScore( score );
hasConflicted[i][k] = true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveUp(){
if(!canMoveUp(board)){
return false;
}
//move up
for(var i = 1;i < 4;i++){
for(var j = 0;j < 4;j++){
if( board[i][j] != 0 ){
for(var k = 0; k < i; k++){
if( board[k][j] == 0 && noBlocky(j,k,i,board) ){
//move left
showMoveAnimation(i,j,k,j); //注意參數的順序
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[k][j] == board [i][j] && noBlocky(j,k,i,board) && !hasConflicted[k][j] ){
//move left
showMoveAnimation(i,j,k,j);
//add
board[k][j] += board[i][j];
board[i][j] = 0;
score += board[k][j];
updateScore( score );
hasConflicted[k][j] = true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveRight(){
if(!canMoveRight(board)){
return false;
}
//move left
for(var i = 0;i < 4;i++){
for(var j = 2;j >= 0; j--){
if( board[i][j] != 0 ){
for(var k = 3; k > j; k--){
if( board[i][k] == 0 && noBlockx(i,j,k,board) ){
//move left
showMoveAnimation(i,j,i,k); //注意參數的順序
board[i][k] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[i][k] == board [i][j] && noBlockx(i,j,k,board) && !hasConflicted[i][k] ){
//move left
showMoveAnimation(i,j,i,k);
//add
board[i][k] += board[i][j];
board[i][j] = 0;
score += board[i][k];
updateScore( score );
hasConflicted[i][k] = true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function moveDown(){
if(!canMoveDown(board)){
return false;
}
//move up
for(var i = 2;i >= 0;i--){
for(var j = 0;j < 4;j++){
if( board[i][j] != 0 ){
for(var k = 3; k > i; k--){
if( board[k][j] == 0 && noBlocky(j,i,k,board) ){
//move left
showMoveAnimation(i,j,k,j); //注意參數的順序
board[k][j] = board[i][j];
board[i][j] = 0;
continue;
}
else if( board[k][j] == board [i][j] && noBlocky(j,i,k,board) && !hasConflicted[k][j] ){
//move left
showMoveAnimation(i,j,k,j);
//add
board[k][j] += board[i][j];
board[i][j] = 0;
score += board[k][j];
updateScore( score );
hasConflicted[k][j] = true;
continue;
}
}
}
}
}
setTimeout("updateBoardView()",200);
return true;
}
function noMove( board ){
if( canMoveDown( board ) ||
canMoveRight( board )||
canMoveUp( board ) ||
canMoveLeft( board ) ){
return false;
}
return true;
}
function showNumberWithAnimation( i, j, randNumber){
var numberCell = $('#number-cell-'+i+'-'+j);
numberCell.css('background-image',getNumberBackgroundColor(randNumber));
numberCell.css('color',getNumberColor(randNumber));
//numberCell.text(randNumber);
numberCell.animate({
width:"100px",
height:"100px",
top:getPosTop(i,j),
left:getPosLeft(i,j)
},150);
}
function showMoveAnimation(fromx,fromy,tox,toy){
var numberCell = $('#number-cell-'+fromx+'-'+fromy);
numberCell.animate({
top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)
},300);
}
function updateScore( score ){
$('#score').text( score );
}
function getPosTop(i,j){
return 20 + i * 120;
}
function getPosLeft(i,j){
return 20 + j * 120;
}
function getNumberBackgroundColor( number ){
switch( number ){
case 2:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/1.jpg)";break;
case 4:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/2.jpg)";break;
case 8:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/3.jpg)";break;
case 16:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/4.jpg)";break;
case 32:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/5.jpg)";break;
case 64:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/6.jpg)";break;
case 128:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/7.jpg)";break;
case 256:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/8.jpg)";break;
case 512:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/9.jpg)";break;
case 1024:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/10.jpg)";break;
case 2048:return "url(http://www.xianlaiwan.cn/activity/2048/117139/pics/11.jpg)";break;
}
}
function getNumberColor( number ){
if( number <= 4 ){
return "#776e65";
}
return "white";
}
function noSpace( board ){
for(var i = 0; i < 4; i++){
for(var j = 0; j < 4; j++){
if(board[i][j] == 0){
return false;
}
}
}
return true;
}
function canMoveLeft( board ){
for(var i = 0; i < 4; i++){
for(var j = 1; j < 4; j++){
if( board[i][j] != 0){
if( board[i][j-1]==0 || board[i][j-1]==board[i][j] ){
return true;
}
}
}
}
return false;
}
function canMoveUp( board ){
for(var i = 1; i < 4; i++){
for(var j = 0; j < 4; j++){
if( board[i][j] != 0){
if( board[i-1][j]==0 || board[i-1][j]==board[i][j] ){
return true;
}
}
}
}
return false;
}
function canMoveRight( board ){
for(var i = 0; i < 4; i++){
for(var j = 0; j < 3; j++){
if( board[i][j] != 0){
if( board[i][j+1]==0 || board[i][j+1]==board[i][j] ){
return true;
}
}
}
}
return false;
}
function canMoveDown( board ){
for(var i = 0; i < 3; i++){
for(var j = 0; j < 4; j++){
if( board[i][j] != 0){
if( board[i+1][j]==0 || board[i+1][j]==board[i][j] ){
return true;
}
}
}
}
return false;
}
function noBlockx(row,col1,col2,board){
for(var i = col1 + 1; i < col2; i++){
if( board[row][i] != 0 ){
return false;
}
}
return true;
}
function noBlocky(col,row1,row2,board){
for(var i = row1 + 1; i < row2; i++){
if( board[i][col] != 0 ){
return false;
}
}
return true;
}
