别踩白块JavaScript

别踩白块
开始游戏暂停游戏 停止游戏    
分数：  0
                                                                        

下面为script文件

var BTN_PLAY_ID = 'play';  
var BTN_PAUSE_ID = 'pause';  
var BTN_STOP_ID = 'stop';  
var MAIN_ID = 'mainID';  
var GRADE = 'grade';  var main, allRow, grade, stopFlag = false;  
window.onload = function() {  main = document.getElementById(MAIN_ID); //黑白格的容器  allRow = getAllRow(); //每一行黑白格  grade = document.getElementById(GRADE); //当前分数  //开始游戏（点击）  var play = document.getElementById(BTN_PLAY_ID);  play.onclick = startGame;  //暂停游戏（点击）  var pause = document.getElementById(BTN_PAUSE_ID);  pause.onclick = pauseGame;  //停止游戏（点击）  var stop = document.getElementById(BTN_STOP_ID);  stop.onclick = stopGame;  //按键控制  document.onkeyup = function(event) {  keyPlay(event);  };  //鼠标控制  mousePlay();  
};  //得到每一行黑白格  
function getAllRow() {  allRow = [];  var row01 = document.getElementById('row01');  var row02 = document.getElementById('row02');  var row03 = document.getElementById('row03');  var row04 = document.getElementById('row04');  var row05 = document.getElementById('row05');  //allRow[0] 到 allRow[4] ，从界面来看是从下往上的  allRow.push(row05);  allRow.push(row04);  allRow.push(row03);  allRow.push(row02);  allRow.push(row01);  initAllRowInfo();  return allRow;  
}  //初始化allRow数组的信息  
function initAllRowInfo() {  for(var i = 0; i < allRow.length; i++) {  //标识每一行是否有黑格，还有黑格的位置  allRow[i].hasBlackGrid = false;  allRow[i].blackGridPos = -1;  //把现有的黑格变成白格  var row = allRow[i].getElementsByTagName('div');  for(var j = 0; j < row.length; j++) {  row[j].style.background = '#fff';  row[j].rowPos = i; //表示在allRow的哪一位置  row[j].colPos = j; //表示在该行中的哪个位置  }  }  
}  //点击开始游戏  
function startGame() {  stopFlag = false;  main.style.borderTop = 'none';  main.style.borderBottom = 'none';  initialGame();  
}  //初始化游戏，包括黑白格  
function initialGame() {  //移动黑白格  rowMove(5,15);  
}  var timer;  
//移动黑白格（lSpeed表示位移速度（定时器每触发黑白格移动的像素），tSpeed表示时间速度（定时器隔多久触发）  
function rowMove(lSpeed, tSpeed) {  clearInterval(timer);  //让每一行黑白格进行定时移动  var n = 1; //用于延迟 黑格的加入  var hasBlack = false; //游戏中还没有黑格  timer = setInterval(function() {  var flag = false; //标识该行是否已从上往下移出了容器，如果是，则对allRow中的顺序进行调整  for(var i = 0; i < allRow.length; i++) {  var obj = allRow[i];  isGameOver(obj); //判断游戏是否结束  if(obj.offsetTop >= 530) {  flag = true; //有行移出了容器，那么该行一定是allRow[0]  obj.style.top = -120 + 'px';  //将一行白格中的一个变为黑格  //延迟时间已到 并且 该行木有黑格  if(n > 50 && !obj.hasBlackGrid) {  //随机一行中第几个白格变成黑格  var k = Math.floor(Math.random() * 4);  obj.getElementsByTagName('div')[k].style.background = '#000';  obj.hasBlackGrid = true;  obj.blackGridPos = k;  //游戏中有黑格了  hasBlack = true;  }  }  obj.style.top = obj.offsetTop + lSpeed + 'px';  }  if(!hasBlack) {  n++;  }  //对移出该容器的行在allRow中的顺序进行调整，移出容器的行移动到allRow的尾部  if(flag) {  var tempRow01 = allRow[0];  allRow.shift(); //删除数组的第一个元素  allRow.push(tempRow01); //将原来位置第一的元素加入到数组的尾部  }  }, tSpeed);  
}  //暂停游戏  
function pauseGame() {  clearInterval(timer);  stopFlag = true;  
}  //停止游戏  
function stopGame() {  //初始化分数  grade.innerHTML = '0';  //停止移动  clearInterval(timer);  stopFlag = true;  main.style.borderTop = '1px solid darkturquoise';  main.style.borderBottom = '1px solid darkturquoise';  //每一行的位置初始化  allRow[0].style.top = 400 + 'px';  allRow[1].style.top = 270 + 'px';  allRow[2].style.top = 140 + 'px';  allRow[3].style.top = 10 + 'px';  allRow[4].style.top = -120 + 'px';  initAllRowInfo();  
}  
//当踩到黑格时，黑格颜色发生“正确”变化（通知用户）  
// blackRowPos 黑格所在的行在allRow中的位置； blackGridPos 黑格在该行中的位置  
function rightChange(blackRowPos, blackGridPos) {  //修改标志  allRow[blackRowPos].hasBlackGrid = false;  allRow[blackRowPos].blackGridPos = -1;  grade.innerHTML = (parseInt(grade.innerHTML) + 1) + '';  var grid = allRow[blackRowPos].getElementsByTagName('div')[blackGridPos];  grid.style.background = 'green';  setTimeout(function() {  grid.style.background = '#fff';  }, 50);  
}  //鼠标控制  
function mousePlay() {  for(var i = 0; i < allRow.length; i++) {  var row = allRow[i].getElementsByTagName('div');  for(var j = 0; j < row.length; j++) {  row[j].onclick = function() {  var _this = this;  if(_this.style.background == 'rgb(0, 0, 0)') {  var tt = _this.parentNode;  //修改 这一行的 标记——没有黑格了  tt.hasBlackGrid = false;  tt.blackGridPos = -1;  //修改分数  grade.innerHTML = (parseInt(grade.innerHTML) + 1) + '';  _this.style.background = 'green';  setTimeout(function() {  _this.style.background = '#fff';  }, 50);  } else if(_this.style.background == 'rgb(255, 255, 255)') {  gameOver(_this);  }  };  }  }  
}  //判断游戏是否结束  
function isGameOver(obj) {  var temp1 = obj.offsetTop + obj.offsetHeight;  var temp2 = main.offsetTop + main.offsetHeight - 20;  if(temp1 > temp2) {  if(obj.hasBlackGrid) {  obj.hasBlackGrid = false;  var index = obj.blackGridPos;  obj.blackGridPos = -1;  gameOver(obj.getElementsByTagName('div')[index]);  }  }  
}  //游戏结束  
function gameOver(errorGrid) {  errorGrid.style.background = 'red';  setTimeout(function() {  errorGrid.style.background = '#fff';  setTimeout(function() {  errorGrid.style.background = 'red';  alert('游戏结束，您最后的得分是：' + grade.innerHTML + '！');  stopGame();  }, 100);  }, 100);  if(bgMusic.play) {  bgMusic.pause();  }  
}  function getClass(parent, className) {  var p = document.getElementById(parent);  var tt = p.getElementsByTagName('*');  var arr = [];  for(var i = 0; i < tt.length; i++) {  if(tt[i].className == className) {  arr.push(tt[i]);  }  }  return arr;  
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！