怎么也找不出問題所在。。。隨機數字沒有出現
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();//循環(huán)里再定義一個數組，使其變成二維數組
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;
}
2018-11-19
不好意思，，，，，，我在showanimation2048.js上的var numberCell= $('#number-cell'+i+"-"+j);中number-cell后面沒有加-，所以沒有顯示