这节内容的效果出不来啊!!
不知道哪里敲错了,随机数字没问题,获取的number-cell也没问题,但就是不出来两个随机数字,代码太多不知道怎么贴,大家有没有遇到这种情况的?或者有哪些原因会出现这样的情况?
不知道哪里敲错了,随机数字没问题,获取的number-cell也没问题,但就是不出来两个随机数字,代码太多不知道怎么贴,大家有没有遇到这种情况的?或者有哪些原因会出现这样的情况?
2016-09-03
根据我的经验,一般这种问题都是很简单的一些错误!!!两个问题
1.showNumberWithAnimation函数里取numberCell的时候的$("#number-cell-")要加#号的亲
2.还是这个函数里面的改变背景颜色的css("",getNumberBackgroundColor());后面那个不用加引号啊亲。
PS:还有一个问题,虽然对你现在这个问题没影响,不过也是错误的。在updateBoardViwe()函数里面的那个else判断里最后没有加theNumberCell.text(board[i][j]);没有内容样式改了也是白改呀,亲。
不过居然有人同时在学这个课程。。。。看评论都是2015年的,挫败感好强
那我就贴js里的代码吧,html和css的应该没问题吧
main2018.js里的代码
var board = new Array();// 4*4方格里元素的值
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));
}
}
// board二维数组
for( i = 0; i<4;i++){
board[i] = new Array();
for (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]));
}
}
}
}
// 随机在一个格子里生成数字的函数
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数组
board[randx][randy] = randNumber;
// 在随机位置显示随机数字(动画效果)
showNumberWithAnimation(randx,randy,randNumber);
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);
alert(i);
alert(j);
alert(randNumber);
numberCell.animate({
width:"100px",
height:"100px",
top:getPosTop(i,j),
left:getPosLeft(i,j)
},50);
}
麻烦大神看一下,如果需要html和css还有support2048里的代码说一下我再贴
举报