java做2048_java学习--javaScript编写2048

2048这款游戏在git上面开放源码意外走红，代码极其简单，类似于flapbird，本人试着用js代码用了三个小时完成了雏形

首先先布局

------------------------------------------------------------

2048

New Game

score: 0

----------------------------------

接着写链接的css

------------------------------------

header {

display: block;

margin: 0 auto;

width: 100%;

text-align: center;

}

header h1 {

font-family: Arial;

font-size: 40px;

font-weight: bold;

}

header #newgamebutton {

display: block;

margin: 20px auto;

width: 100px;

padding: 10px 10px;

background-color: #8f7a66;

font-family: Arial;

color: white;

border-radius: 10px;

text-decoration: none;

}

header #newgamebutton:hover {

background-color: #9f8b77;

}

header p {

font-family: Arial;

font-size: 25px;

margin: 20px auto;

}

#grid-container {

width: 460px;

height: 460px;

padding: 20px;

margin: 50px auto;

background-color: #bbada0;

border-radius: 10px;

position: relative;

}

.grid-cell {

width: 100px;

height: 100px;

border-radius: 6px;

background-color: #ccc0b3;

float: left;

margin: 7px;

color: red;

font-size: 50px;

line-height: 100px;

text-align: center;

font-weight: 900;

}

---------------------------------------

这两段都不重要

主要是js代码

先说main布局用的js

-------------------------------

var board=new Array();

var numberX;

var numberY;

$(function(){

newgame();

})

function newgame(){

initboard();

getrandomNumber();

getrandomNumber();

getandshow2();

}

function initboard(){

for (var i=0;i<4;i++) {

board[i]=new Array();

for (var j=0;j<4;j++) {

board[i][j] = 0 ;

}

}

}

function getrandomNumber(){

do{

numberX=parseInt(Math.floor(Math.random()*4));

numberY=parseInt(Math.floor(Math.random()*4));

if(board[numberX][numberY]==0){

break;

}

}while(true);

board[numberX][numberY]=2;

}

function getandshow2(){

for (var i=0;i<4;i++) {

for (var j=0;j<4;j++) {

var cell=$("#grid-cell-"+i+"-"+j);

cell.html("");

var item=board[i][j];

if(item>0){

cell.html(item);

}

}

}

}

主要使用二维数组作为model，界面的16个div作为view，而getandshow2作为controller，即使这么小的程序也有mvc的概念呢

想想其实anglarJs也是厉害，将mvc的概念放在一个个简单的标签里面

getrandomNumber方法是创建随机位置的

--------------------------------

最后就是game.js的代码了

------------------------------------