【代码已附】随机数出不来，求指教T.T
跌丝哇
2019-10-29 21:08
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() {
//初始化棋盘格
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() {
if (nospace(board))
return false;
//随机一个位置
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));
}
//随机一个数字
var randNumber = Math.random() < 0.5 ? 2 : 4;
//在随机位置显示随机数字
board[randx][randy] = randNumber;
showNumberWithAnimation(randx, randy, randNumber);
return true;
}
6回答
-
- Toast2721747
- 2021-04-08 22:23:12
你在newgame（）里面没有电泳 updateboardview（）
-
- qq_慕前端5112846
- 2021-01-16 17:35:33
自己一行一行对啊
-
- 慕后端3418592
- 2020-09-01 09:43:18
可能是updateBoardView中添加的div元素没有正确生成
-
- 慕工程1093731
- 2020-03-20 23:06:21
111
-
- qq_慕斯3079560
- 2020-01-23 17:45:18
我的也是出现了这种情况 你后来有解决吗
-
- 跌丝哇
- 2019-10-29 21:15:03
控制台也没问题。。。
慕课网2048私人订制
70004 学习 · 588 问题
相似问题