怎么也找不出问题所在。。。随机数字没有出现
index.html
<!DOCTYPE html>
<html>
<head>
<title>2048</title>
<link rel="stylesheet" type="text/css" href="2048.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>
<h1>2048</h1>
<a href="javascript:newgame();" id="newgamebutton">New Game</a>
<p>score:<span id ="score">0</span></p>
</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>
main2048.js
var board=new Array();//一维的数组
var score=0;
$(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();//循环里再定义一个数组，使其变成二维数组
for (var j = 0; j <4; j++) {
board[i][j]=0;
}
}
updateBoardView();
}
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(board[i][j]);
}
}
}
}
function generateOneNumber(){
//用一个函数nospace来判断这个棋盘是否还有格子
if (nospace(board)) {
return false;
}
//random取的是0~1的浮点数
//随机一个位置（x，y）
var randx=parseInt(Math.floor(Math.random()*4));
var randy=parseInt(Math.floor(Math.random()*4));
//不能在有数字的格子上生成数字
while(true){
if (board[randx][randy]==0) //没有数字的格子
break;
else//随机生成的坐标对应的是有数字的格子
{
randx=parseInt(Math.floor(Math.random()*4));
randy=parseInt(Math.floor(Math.random()*4));
}
}
//随机生成一个数字
//要生成2或4
var randNumber=Math.random()<0.5?2:4;
//在随机位置上显示随机数字
board[randx][randy]=randNumber;
showNumberWithAnimation(randx,randy,randNumber);
return true;
}
showanimation2048.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(randNumber);
numberCell.animate({
width:"100px",
height:"100px",
top:getPosTop(i,j),
left:getPosLeft(i,j)
},50);
}
support2048.js
//得到纵坐标
function getPosTop(i,j){
return 20+i*120;
}
//得到横坐标
function getPosLeft(i,j){
return 20+j*120;
}
//获得有数字的格子的颜色
function getNumberBackgroundColor(number){
switch(number){
case 2:return "#eee4da" ;break;
case 4:return "#ede0c8";break;
case 8:return "#f2b179";break;
case 16:return "#f59563";break;
case 32:return "#f67c5f";break;
case 64:return "#f65e3b";break;
case 128:return "#edcf72";break;
case 256:return "#edcc61";break;
case 512:return "#9c0";break;
case 1024:return "#33b5e5";break;
case 2048:return "#09c";break;
case 4096:return "#a6c";break;
case 8192:return "#93c";break;
}
return "black";
}
//获得数字的颜色
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;
}
2048.css
header{
display: block;
margin: 0 auto;
width: 500px;
text-align: center;
}
header h1{
font-family: Arial;
font-size: 60px;
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;
position: absolute;/*绝对定位*/
}
.number-cell{
border-radius: 6px;
font-family: Arial;
font-weight: bold;
font-size:60px;
line-height: 100px;
text-align: center;
position: absolute;
}
