【代碼已附】隨機(jī)數(shù)出不來(lái)，求指教T.T
index.html
<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">
????<meta?http-equiv="X-UA-Compatible"?content="ie=edge">
????<title>2048</title>
????<link?rel="stylesheet"?href="./css/2048.css">
????<script?src="./lib/jquery-1.12.4.min.js"></script>
????<script?src="./lib/support2048?-?副本.js"></script>
????<script?src="./lib/showanimation2048?-?副本.js"></script>
????<script?src="./lib/main2048?-?副本.js"></script>
</head>
<body>
????<header>
????????<h1>2048</h1>
????????<a?href="javascript:newgame();"??id="newGameBtn">New?Game</a>
????????<p>Score:?<span?id="score">0</span></p>
????</header>
????<div?class="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>
support.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;
}
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(randNumber);
????numberCell.animate({
????????width:?"100px",
????????height:?"100px",
????????top:?getPosTop(i,?j),
????????left:?getPosLeft(i,?j)
????},?50);
}
main.js
var?board?=?new?Array();
var?score?=?0;
$(document).ready(function?()?{
????newgame();
});
function?newgame()?{
????//初始化棋盤(pán)格
????init();
????//在隨機(jī)兩個(gè)格子生成數(shù)字
????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()?{
????if?(nospace(board))
????????return?false;
????//隨機(jī)一個(gè)位置
????var?randx?=?parseInt(Math.floor(Math.random()?*?4));
????var?randy?=?parseInt(Math.floor(Math.random()?*?4));
????while?(true)?{
????????if?(board[randx][randy]?==?0)
????????????break;
????????randx?=?parseInt(Math.floor(Math.random()?*?4));
????????randy?=?parseInt(Math.floor(Math.random()?*?4));
????}
????//隨機(jī)一個(gè)數(shù)字
????var?randNumber?=?Math.random()?<?0.5???2?:?4;
????//在隨機(jī)位置顯示隨機(jī)數(shù)字
????board[randx][randy]?=?randNumber;
????showNumberWithAnimation(randx,?randy,?randNumber);
????return?true;
}
2021-04-08
你在newgame（）里面沒(méi)有電泳 updateboardview（）
2021-01-16
自己一行一行對(duì)啊
2020-09-01
可能是updateBoardView中添加的div元素沒(méi)有正確生成
2020-03-20
111
2020-01-23
我的也是出現(xiàn)了這種情況 你后來(lái)有解決嗎?
2019-10-29
控制臺(tái)也沒(méi)問(wèn)題。。。