javascript写的俄罗斯方块（无级次）
日期：2014-05-16 浏览次数：20373 次
javascript写的俄罗斯方块（无等级）
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>俄罗斯方块Demo</title>
<style>
#board tr td {
width: 20px;
height: 20px;
background-Color: #cccccc;
border: 1px solid #6B78A9;
}
#main {
margin: auto;
width: 360px;
height: 400px;
}
#mainLeft {
margin: 0;
padding: 0;
float: left;
}
#mainRight {
margin: 0;
float: left;
}
#preBoard tr td {
width: 20px;
height: 20px;
background-color: #cccccc;
border: 1px solid #6B78A9;
}
body {
background-color: #FFFF99;
}
input {
border: 1px solid #6B78A9;
background: #66FF66
}
</style>
<script language="javascript">
var tbl; //主窗口
var preTbl; //预览窗口
var status = 0; //游戏的状态：0表示未开始；1表示游戏进行中； 2表示游戏结束；3表示游戏暂停
var timer; //定时器
var interval = 1000; // 下落时间间隔
var bgColor = "#cccccc"; //面板背景色，可以根据喜好更改
var cuteColor = "green"; //方块颜色，也可以根据喜好更改
var score = 0; //总得分数
var lineScore = 100; //单位得分数，这里以行为单位
//定义一个主面板数组board,它和页面的table对应，0--表示都没有被占领；1--表示该方格已经被占领
var board = new Array(18);
//初始化该面板的状态数组，该数组的元素都是一个2维的数组
for(var i = 0; i < 18; i++){
board[i] = new Array(10);
}
for(var i = 0; i < 18; i++){
for(var j = 0; j < 10; j++){
board[i][j]=0;
}
}
var activeBlock; //定义变量activeBlock表示当前活动方块
var previewBlock; //定义变量previewBlock表示预览方块
var nextBlock; //下一个方块
var nowBlock ; //暂停记录窗口数组
var preBlock; //暂停记录预览数组
//生成方块；方块有7中基本的形状
function createBlock(){
//定义一个表示方块的四个元素的数组；因为一个方块由4个方格造成
var block = new Array(4);
//生成一个0-6的随机数，即随机生成一个方块
var tempNum = (Math.floor(Math.random()*20) + 1)%7;
switch(tempNum){
case 0:
block = [{x:0,y:5},{x:1,y:4},{x:1,y:5},{x:2,y:4}];
break;
case 1:
block = [{x:0,y:4},{x:1,y:4},{x:1,y:5},{x:2,y:4}];
break;
case 2:
block = [{x:0,y:5},{x:1,y:4},{x:1,y:5},{x:2,y:5}];
break;
case 3:
block = [{x:0,y:4},{x:0,y:5},{x:1,y:4},{x:1,y:5}];
break;
case 4:
block = [{x:0,y:4},{x:0,y:5},{x:1,y:4},{x:2,y:4}];
break;
case 5:
block = [{x:0,y:4},{x:0,y:5},{x:1,y:5},{x:2,y:5}];
break;
case 6:
block = [{x:0,y:5},{x:1,y:5},{x:2,y:5},{x:3,y:5}];
break;
}
return block; //将生成的方块返回
}
//给方块着色--填充色或者原始颜色，由参数确定颜色
function paintColor(color){
//根据方块中方格的个数来决定循环的次数
for(var i = 0; i < activeBlock.length; i++){
tbl.rows[activeBlock[i].x].cells[activeBlock[i].y].style.backgroundColor = color;
}
}
//显示或者擦除预览方块，由参数确定颜色
function paintPreview(color){
for(var i = 0; i < 4; i++){
preTbl.rows[previewBlock[i].x].cells[previewBlock[i].y].style.backgroundColor = color;
}
}
//绘制主面板或者删除颜色
function paintBoard(color){
for(var i = 0 ; i < 18; i++){
for(var j = 0; j < 10; j++){
if(board[i][j] == 1){
tbl.rows[i].cells[j].style.backgroundColor = color;
}
}
}
}
//更新分数
function updateScore(){
document.getElementById("score").innerHTML = score;
}
//该方法主要是检查是否已经触边或者被占了
function isCellValid(x, y){
if(x > 17 || x < 0 || y > 9 || y < 0){
return false;
}
if(board[x][y]==1){
return false;
}
return true;
}
//检查下一个方格是否还可以放到主面板中
function validateBlock(block){
//注意：这里block并没有指定具体的类型，它的实际内容由传入的nextBlock来决定
if(!block){ // 判断传进来的block对象是否为空
return false;
}
//遍历下个方块的每一个方格，看是否有不符合条件的方格
for(var i = 0 ; i < 4; i++){
if(!isCellValid(block[i].x,block[i].y)){
return false;
}
}
return true;
}
//逻辑上的修改面板显示状态
function updateBoard(){
for(var i = 0; i < 4; i++){
board[activeBlock[i].x][activeBlock[i].y] = 1;
}
}
//该方法主要是检查方块是否已经触底，并且检查方块向下移动一个空格是否有效
function checkBottomBorder(){
for(var i = 0; i < activeBlock.length; i++){
if(activeBlock[i].x==17){
return false;
}
if(!isCellValid(activeBlock[i].x+1, activeBlock[i].y)){
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
