//设置tableid，设置线条的大小为1
javascript实现的网页版俄罗斯方块
第一学习这些东西，虽然有一些思想是借鉴别人的，但是还是全部都是自己打，用了21天做这个东西，虽然完成质量一般般，但是毕竟是第一次，纪念一下
总结比较一般文采不好：
总结
1、 初步接触了html，css，javascript的东西，初步了解了什么是html，css，javascript，算是对这些东西有一点了解
2、 在学习中发现只有一边学习一边实践才能够学得更快
3、 更加学会了去网上找资源学习，以前都只是看书，比如去w3school学习，在网上找一些交流群请教
4、 html学起来不难，主要是一些标签的使用跟标签属性的应用，还有就得
跟的使用差别，总之学习html记笔记很重要
//设置预览区间的id，绘制一个4*4的预览区间表格
| 预览区间 |
//设置一个用于开始跟计算分数的div
//按键，控制begin函数开始 分数: 0 | //设置节单元 score，用于后面更新分数的时候可以修改
游戏规则→：向右 ←：向左 // ↑：变形 ↓：向下 空格：暂停 |
css代码：
body{text-align:center;}
#center
{width:335px;margin:0 auto;text-align:left;}//设置center的效果，使宽度为335像素，设置样式为居左
#mainBoard tr td{
width:20px;//表格一个空格是20*20像素
height:20px;
}
#main {
float:left; //主显示界面居左，如果不居左的话，下面的预览区间会在main的下面
}
#preBoard tr td{
width:20px;
height:20px;
}
#attention tr td{
width:83px; //调整位置，除了表格里面的像素，线条也有像素，这个要自己操作调试
height:172px;
}
#begin tr td{
width:83px;
height:120px;
}
#preview tr td{
width:83px;
height:38px;
}
#mainBoard tr td{
border-color:#F00;//设置线条颜色
}
/* CSS Document */
javascript代码：
// JavaScript Document
var activeTb;//用来存储主显示界面的id
var preTb;//用来存储预览界面的id
var score = 0;
var time;
var flag = 1;
var downTime = 1000;//时间为一秒，可以通过改变这数值来改变下降的速度
var activeBoard;//当前的方块
var nextBoard;//下一个方块
var preBoard;//下一个方块转换成预览方块
var table = new Array (20);//设置一个20*12的数组，初始值为0.用来表格是否有方块
for(var i=0;i<20;i++){
table[i] = new Array(12);
}
for(var i=0;i<20;i++){
for(var j = 0;j<12;j++)
table[i][j] = 0;
}
//随见产生一个形状的方块
function generalBoard(){
var board = new Array (4);
var t = (Math.floor(Math.random()*20)+1)%7;//0到19随见取整，之后加1，可以随即长生0到6的数字
switch(t){
case 0:{
board[0] = {x:0,y:5};//设置图形中每一个方块出现的初始坐标
board[1] = {x:1,y:5};
board[2] = {x:0,y:6};
board[3] = {x:1,y:6};
break;
}
case 1:{
board[0] = {x:0,y:4};
board[1] = {x:0,y:5};
board[2] = {x:0,y:6};
board[3] = {x:0,y:7};
break;
}
case 2:{
board[0] = {x:0,y:4};
board[1] = {x:0,y:5};
board[2] = {x:0,y:6};
board[3] = {x:1,y:5};
break;
}
case 3:{
board[0] = {x:0,y:4};
board[1] = {x:0,y:5};
board[2] = {x:0,y:6};
board[3] = {x:1,y:4};
break;
}
case 4:{
board[0] = {x:0,y:4};
board[1] = {x:0,y:5};
board[2] = {x:0,y:6};
board[3] = {x:1,y:6};
break;
}
case 5:{
board[0] = {x:0,y:5};
board[1] = {x:1,y:6};
board[2] = {x:0,y:6};
board[3] = {x:1,y:7};
break;
}
case 6:{
board[0] = {x:0,y:6};
board[1] = {x:1,y:5};
board[2] = {x:0,y:7};
board[3] = {x:1,y:6};
break;
}
}
return board;//返回一个方块的值
}
//通过一个方块生成一个可以在预览区间表示的方块，之后在预览区间显示，需要改变下一个方块的坐标
function copyBoard(borad){
var o = new Array (4);
for(var i = 0;i<4;i++){
o[i] = {x:0,y:0};
}
for(var i = 0;i<4;i++){
o[i].x = borad[i].x ;
o[i].y = borad[i].y - 4;//由于刚开始都是y坐标在4到7之间，而预览区间的只能在0到3.所以减去3就可以
}
return o;
}
//擦除整个显示界面
function whiteTable(){
for(var i=0; i<20; i++){
for(var j=0; j<12; j++){
activeTb.rows[i].cells[j].style.backgroundColor = "white"; 将表格里面的背景颜色改变为白色
}
}
}
//通过board数组把显示界面中的方块用红色显示出来
function redTable(){
for(var i=0; i<20; i++){
for(var j=0; j<12; j++){
if(table[i][j]==1)//判断是否有方块
activeTb.rows[i].cells[j].style.backgroundColor = "blue";//改变背景颜色为蓝色
}
}
}
//擦除整一个的预览界面
function preWhiteBoard(){
for(var i = 0;i<4;i++)
for(var j = 0;j<4;j++){
preTb.rows[i].cells[j].style.backgroundColor = "white";
}
}
//显示当前的图形位置
function view (){
for(var i = 0;i<4;i++){
activeTb.rows[activeBoard[i].x].cells[activeBoard[i].y].style.backgroundColor="blue";
}
}
//显示当前的预览图形的形状
function preView(){
for(var i = 0;i<4;i++){
preTb.rows[preBoard[i].x].cells[preBoard[i].y].style.backgroundColor="blue";
}
}
//擦除显示图形方块
function chancWhite(){
for(var i = 0;i<4;i++){
activeTb.rows[activeBoard[i].x].cells[activeBoard[i].y].style.backgroundColor="white";
}
}
//检查下边界
function checkDown(){
for(var i = 0; i<4;i++){
if(activeBoard[i].x==19){
return false;
}
//alert("haha");
if(isBoard(activeBoard[i].x+1,activeBoard[i].y)){
return false;
}
}
return true;
}
//检查是否已经有方块了
function isBoard(x,y){
if(x>19||x<0||y>11||y<0)
return true;
if(table[x][y]==1)
return true;
return false;
}
//更新数组
function writeTable(){
for(var i=0; i<4; i++){
table[activeBoard[i].x][activeBoard[i].y]=1;
}
}
//消行
function deleteLines(){
var lines = 0;
for(var i = 0;i<20;i++){
//alert(i);
var j;
for(j = 0;j<12;j++){
if(table[i][j]==0)
break;
}
if(j ==12){
lines ++;
for(var k = i-1;k>=0;k--){
table[k+1] =table[k];
}
for(var l = 0;l<12;l++){
table[0][l] = 0;
}
}
}
//redTable();
return lines;
}
//通过键盘控制
document.onkeydown = function(event){
var e = event||window.event;
switch(e.keyCode){
case 37:{
moveLeft();
break;
}
case 38:{
chance();
break;
}
case 39:{
moveRight();
break;
}
case 40:{
moveDown();
break;
}
case 32:{
alert("游戏暂停，按确定键后继续！");
break;
}
}
}
//下落函数
function moveDown(){
//检查是否下边界
if(checkDown()){
chancWhite();//擦除当前图形
for(var i = 0;i<4;i++){
activeBoard[i].x++;
}
view ();//重绘改变后图形
}
else{
clearInterval(time);//停止时间，不停止的话在计算时候还会有方块下落
writeTable();//更新数组
//redTable();
var lines = deleteLines();
if(lines!=0){
if(lines == 1)
score +=100;
if(lines == 2)
score +=300;
if(lines ==3)
score +=600;
if(lines ==4)
score +=1000;
document.getElementById("score").innerHTML = score;//改变分数
whiteTable();//擦除显示界面
redTable();//重新绘制改变后的界面
}
//alert(table[19][5]);
//alert("haha");
preWhiteBoard();//擦除预览界面
//判断下一个图形时候不能继续
for(var i=0; i<4; i++){
if(isBoard(nextBoard[i].x,nextBoard[i].y)){
view ();
alert("游戏结束");
flag = 2;//结束标志
return false;
}
}
activeBoard = nextBoard;//下一个图形赋值给当图形
nextBoard = generalBoard();//下一个图形随机产生
preBoard = copyBoard(nextBoard);//设置预览图形
view();
preView();
time = setInterval(moveDown,downTime);//控制图形下落为1秒下落一次
}
}
//改变图形形状
function chance(){
var newBoard = new Array(4);
for(var i =0;i<4;i++){
newBoard[i] = {x:0,y:0};
}
for(var i =0;i<4;i++){
newBoard[i].x = activeBoard[i].x;
newBoard[i].y = activeBoard[i].y;
}
var x = Math.round((newBoard[0].x + newBoard[1].x + newBoard[2].x + newBoard[3].x)/4); //旋转90度算法
var y = Math.round((newBoard[0].y + newBoard[1].y + newBoard[2].y + newBoard[3].y)/4);
for(var i = 0;i<4;i++){
newBoard[i].x = x + y - activeBoard[i].y;
newBoard[i].y = y - x + activeBoard[i].x;
}
for(var i=0; i<4; i++){
if(isBoard(newBoard[i].x,newBoard[i].y)){
return;
}
}
chancWhite();
for(var i=0; i<4; i++){
activeBoard[i].x = newBoard[i].x;
activeBoard[i].y = newBoard[i].y;
}
view ();
}
//判断左边界
function moveLeft(){
var k = true;
for(var i = 0;i<4;i++){
if(activeBoard[i].y==0)
k = false;
if(isBoard(activeBoard[i].x,activeBoard[i].y-1))
k = false;
}
if(k){
chancWhite();
for(var i = 0;i<4;i++){
activeBoard[i].y--;
}
view ();
}
}
//判断右边界
function moveRight(){
var k = true;
for(var i = 0;i<4;i++){
if(activeBoard[i].y==11)
k = false;
if(isBoard(activeBoard[i].x,activeBoard[i].y+1))
k = false;
}
if(k){
chancWhite();
for(var i = 0;i<4;i++){
activeBoard[i].y++;
}
view ();
}
}
//开始函数
function begin(e){
e.disabled = true;//将按钮设置为不可按
flag = 1;
activeTb = document.getElementById("mainBoard");//取id
preTb = document.getElementById("preBoard");
activeBoard = generalBoard();
nextBoard = generalBoard();
preBoard = copyBoard(nextBoard);
view();
preView();
time = setInterval(moveDown,downTime);
}