拖了一个假期的2048，今天终于完成网页版本的了
开心！！！
刚开始觉得挺难的，无从下手
但是imooc老师特别仔细的讲每一个细节，怎么想，怎么写
一步一步，虽然经常被自己蠢哭，但是还是完成了！开心！！
遇到了很多坑。。。
1.跟着老师一步步走还好，老师写完moveleft之后，让我们自己写其他三个move函数
本以为自己都理解了，可以写，但是！！！right根本就运行不出来，直接死机！
后来，看老师的代码，发现其实自己根本没有弄清楚循环的细节，一步步仔细看原来少了个=。蠢哭！
2.有个bug，说重复移动。这是个很抽象的问题，我一开始根本不知道怎么办，老师说可以转化成很多小问题，如果它累加移动，那我们就设个函数记录累加的次数就可以啊。原来！感觉写代码就是天马行空的写，怎么写都可以。哈哈哈哈哈
3.写完还要考虑性能的问题，比如当初就写了个死循环生成随机位置。后来就会比较慢，怎么解决呢？设函数，记录次数！如果好多次都没有找到，就手动生成。
4.用户体验也是我们需要考虑的问题，比如你生成太快，没有过渡，那么动画效果就不好，那么我们就settimeout。代码不只是写出功能来就大功告成了，用户体验也很重要！
5.就是自己改的bug啦～score设计的是全局变量，所以newgame之后还会是原来的score，怎么办？设函数！自己加了个clearscore，清零分数值，再告诉前台要改就OK啦，就是一些语法要熟练用啊
6.把数字改成“小白-》实习生-》程序猿-》。。。。”这个我原来以为很难啊，其实，很简单！怎么改？设函数！增加了一个getnumbercontent，把首先把randnumber用这个函数转化一下，再用switch转化一下，最后别忘记告诉前台去改展示的文字，大功告成！
<!DOCTYPE html>
<html>
<head>
<title>2048 GAME</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="2048.css">
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js" ></script>
<link href="http://libs.baidu.com/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/bootstrap/2.3.2/js/bootstrap.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 >
<div id="background">
<header>
<h1>2048</h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<h4>score:<span id="score">0</span></h4>
</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>
</div>
</body>
</html>
main.js
var board = new Array();
var score =0;
var hasConflicted=new Array();
$(document).ready(function(){
newgame();
});
function newgame(){
//初始化棋盘格
init();
// clear score
clearscore();
//随机产生数字
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;
}
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>');
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-color',getNumberBackgroundColor(board[i][j]));
theNumberCell.css('color',getNumberColor(board[i][j]));
theNumberCell.text(getNumberContent(board[i][j]));
}
hasConflicted[i][j]=false;
}
}
function generateOneNumber(){
if(nospace(board)){
return false;
}else{
//随机一个positon
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;
}else {
var randx =parseInt(Math.floor(Math.random()*4) );
var randy =parseInt(Math.floor(Math.random()*4) );
times++;
}
}
//优化循环 自动生成超过50次，就手动生成位置
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;
}
}
}
}
//随机一个number
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) {
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();
}else {
return false;
}
}
function gameover(){
alert("gameover!");
}
function moveLeft(){
if(!canMoveLeft(board)){
return false;
}
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 && noBlockHorizontal(i,k,j,board)){
//move
showMoveAnimation(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
continue;
}else if(board[i][k]==board[i][j] && noBlockHorizontal(i,k,j,board) && !hasConflicted[i][k]){
//move
showMoveAnimation(i,j,i,k);
//add
board[i][k]+=board[i][j];
board[i][j]=0;
//add score
score += board[i][k];
updateScore(score);
hasConflicted[i][k]=true;
continue;
}
}
}
}
updateBoardView();
return true;
}
function moveRight(){
if(!canMoveRight(board)){
return false;
}
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 && noBlockHorizontal(i,j,k,board)){
//move
showMoveAnimation(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
continue;
}else if(board[i][k]==board[i][j] && noBlockHorizontal(i,j,k,board) && !hasConflicted[i][k]){
//move
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;
}
}
}
}
updateBoardView();
return true;
}
function moveUp(){
if(!canMoveUp(board)){
return false;
}
for(var j=0;j<4;j++)
for(var i=1;i<4;i++){
if(board[i][j]!=0){
for(var k=0;k<i;k++){
if(board[k][j]==0 && noBlockVertical(j,k,i,board)){
//move
showMoveAnimation(i,j,k,j);
board[k][j]=board[i][j];
board[i][j]=0;
continue;
}else if(board[k][j]==board[i][j] && noBlockVertical(j,k,i,board) && !hasConflicted[k][j]){
//move
showMoveAnimation(i,j,k,j);
//add
board[k][j]+=board[i][j];
board[i][j]=0;
score+=board[k][j];
updateScore(score);
hasConflicted[i][k]=true;
continue;
}
}
}
}
updateBoardView();
return true;
}
function moveDown(){
if(!canMoveDown(board)){
return false;
}
for(var j=0;j<4;j++)
for(var i=2;i>=0;i--){
if(board[i][j]!=0){
for(var k=3;k>i;k--){
if(board[k][j]==0 && noBlockVertical(j,k,i,board)){
//move
showMoveAnimation(i,j,k,j);
board[k][j]=board[i][j];
board[i][j]=0;
continue;
}else if(board[k][j]==board[i][j] && noBlockVertical(j,k,i,board) && !hasConflicted[k][j]){
//move
showMoveAnimation(i,j,k,j);
//add
board[k][j]+=board[i][j];
board[i][j]=0;
score+=board[k][j];
updateScore(score);
hasConflicted[i][k]=true;
continue;
}
}
}
}
updateBoardView();
return true;
}
support2048.js
function getPosTop(i,j) {
return 20+120*i;
}
function getPosLeft(i,j) {
return 20+120*j;
}
function getNumberBackgroundColor(number) {
switch(number){
case 2:return '#FCD6BC';break;
case 4:return '#F8A1B2';break;
case 8:return '#EF4E88';break;
case 16:return '#FBD75E';break;
case 32:return '#A8C065';break;
case 64:return '#76A2B5';break;
case 128:return '#47183E';break;
case 256:return '#1C4150';break;
case 512:return '#88CAD0';break;
case 1024:return '#405DAD';break;
case 2048:return '#C7C47B';break;
case 4096:return '#008080';break;
case 8192:return '#FF0000';break;
}
return "black";
}
function getNumberContent(number){
switch(number){
case 2:return "小白";break;
case 4:return "实习生";break;
case 8:return "程序猿";break;
case 16:return "项目经理";break;
case 32:return "构架师";break;
case 64:return "技术经理";break;
case 128:return "高级经理";break;
case 256:return "技术总监";break;
case 512:return "副总裁";break;
case 1024:return "CTO";break;
case 2048:return "总裁";break;
}
return "无业游民";
//console.log('number');
}
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;
}else{
return true;
}
}
}
function nomove(board){
if(canMoveLeft(board)||canMoveRight(board)||canMoveUp(board)||canMoveDown(board)){
return false;
}else {
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 canMoveRight(board){
for(var i=0;i<4;i++)
for(var j=2;j>=0;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 j=0;j<4;j++)
for(var i=1;i<4;i++){
if(board[i][j]!=0){
if(board[i-1][j]==0||board[i-1][j]==board[i][j]){
return true;
}
}
}
return false;
}
function canMoveDown(board){
for(var j=0;j<4;j++)
for(var i=2;i>=0;i--){
if(board[i][j]!=0){
if(board[i+1][j]==0||board[i+1][j]==board[i][j]){
return true;
}
}
}
return false;
}
function noBlockHorizontal(row,col1,col2,board){
for(var i=col1+1;i<col2;i++ ){
if(board[row][i]!=0){
return false;
}
}
return true;
}
function noBlockVertical(col,row1,row2,board){
for(var i=row1+1;i<row2;i++ ){
if(board[i][col]!=0){
return false;
}
}
return true;
}
showanimation.js
function showNumberWithAnimation(i,j,randNumber){
var numberCell = $("#number-cell-"+i+'-'+j);
numberCell.css('background-color',getNumberBackgroundColor(randNumber));
numberCell.css('color',getNumberColor(randNumber));
numberCell.text(getNumberContent(randNumber) );
numberCell.animate({
width:"100px",
height:"100px",
top:getPosTop(i,j),
left:getPosLeft(i,j)
},50);
}
function clearscore(){
score=0;
$("#score").text(score);
}
function showMoveAnimation(fromx,fromy,tox,toy){
var numberCell=$("#number-cell-"+fromx+'-'+fromy);
numberCell.animate({
top:getPosTop(tox,toy),
left:getPosLeft(tox,toy)
},200);
}
function updateScore(score){
$("#score").text(score);
}
2048.css
#background {
position:fixed;
top:0;
left:0;
z-index:-10;
width:100%;
height:100%;
background: #ffa5a5;
background: -moz-linear-gradient(top, #ffa5a5 20%, #fff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,#ffa5a5), color-stop(100%,#fff));
background: -webkit-linear-gradient(top, #ffa5a5 20%,#fff 100%);
background: linear-gradient(top, #ffa5a5 20%,#fff 100%);
}
header{
display: block;
width: 500px;
margin: 0 auto;
text-align: center;
}
#newgamebutton{
border-radius: 5px;
padding: 5px;
background-color: #EF4E88;
font-size: 25px;
color: #fff;
display: inline-block;
}
#grid-container{
width: 460px;
height: 460px;
padding: 20px;
margin: 10px auto;
background: #E6E6E6;
border-radius: 10px;
position: relative;
}
.grid-cell{
width: 100px;
height: 100px;
border-radius: 6px;
position: absolute;
background-color: #ffffff;
}
.number-cell{
border-radius: 6px;
position: absolute;
line-height: 100px;
font-size: 20px;
text-align: center;
}
扫一扫
612
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
