javascript实现的网页版俄罗斯方块

原创 2013年12月04日 19:05:55

第一学习这些东西,虽然有一些思想是借鉴别人的,但是还是全部都是自己打,用了21天做这个东西,虽然完成质量一般般,但是毕竟是第一次,纪念一下

总结比较一般文采不好:

总结

1、  初步接触了html,css,javascript的东西,初步了解了什么是html,css,javascript,算是对这些东西有一点了解

2、  在学习中发现只有一边学习一边实践才能够学得更快

3、  更加学会了去网上找资源学习,以前都只是看书,比如去w3school学习,在网上找一些交流群请教

4、  html学起来不难,主要是一些标签的使用跟标签属性的应用,还有就得<div>跟<table>的使用差别,总之学习html记笔记很重要

5、  css可以说是网页的ps,对网页进行布局,这个时候需要用到模块化<div>跟id地址进行定位。

6、  javascript的语法比较简单,很容易上手,只是里面的一些类的方法不熟悉,用起来跟c语言没什么差别,一遇到不会的基本都是上网找或者看别人的代码,这一点还需要加大学习

7、  感觉虽然做这个东西有一点了解,但是只是很容易的东西,自己还要很大的学习,这一次的东西很多都还很不懂,还有更加深层次的学习,如何布局,如何使得自己的想法可以用程序实现,有些时候想得到但是发现实现不了,这是很痛苦的事情!

8、  觉得还是需要一个身边的人指引,自己身边没有什么人弄前端的东西,所以要加入一个工作室或者老师的项目,更多认识一下志同道合的人,一起做项目一起学习,这样学习交流的时候可以学习到更多,自己也有学习的动力,一个人学习跟辛苦很无聊!

计划安排:

1、继续学习,继续打好基础,多打代码,多多思考一些东西

2、浏览一些网站学习,比如w3cfuns,csdn,跟博客园,找一些人的博客阅读,最好是那种笔记记录的,可以看别人是怎么走过来的!

3、争取寒假把<javascript程序设计>第三版 <css禅意花园>,<head in thehtml>浏览一遍,不要求全部掌握,起码要认识有这些东西,想用的时候可以知道在哪里可以查得到。

4、了解一下CSS  bootstrap框架,寒假这个过程中试着把老师给我的考验完成

5、把数据结构看一遍,要写出好的代码,没有数据结构的知识很难搞定。


实现代码如下:

HTML代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>俄罗斯方块档</title>
<script type type="text/javascript" src="俄罗斯方块.js"></script>//导入javascript文件
<link type="text/css" rel="stylesheet" href="俄罗斯方块.css">//导入css文件
</head>

<body >
<div id="center">//用于整体居中
    <h1 align="center">俄罗斯方块</h1>//浏览页面的标题

    <div id="main" style="text-align:center">//设置显示页面的id,便于后面获取id修改table里面的内容
    //设置tableid,设置线条的大小为1
    <table id="mainBoard" cellspacing="0" cellpadding="0" border="1" style="border-collapse:collapse" >
               //绘制一个20*12的表格
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>      
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>            
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>
            <tr>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>      
                <td></td>
                <td></td>
                <td></td>     
            </tr>                        
    </table>
</div>

    <div id="pre">  //设置预览区间的id,绘制一个4*4的预览区间表格
        <table id="preBoard" cellspacing=0 cellpadding=0 border=1 style="border-collapse:collapse;">    
                <tr>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                </tr>    
                <tr>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                </tr>    
                <tr>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                </tr>    
                <tr>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                    <td></td>    
                </tr>    
            </table>    
        </div>

    <table id="preview" border=1 cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
        <tr align="center">//行居中
            <td>预览区间</td>
        </tr>
    </table>

    <div id="controlScore" >//设置一个用于开始跟计算分数的div
         <table id="begin" cellspacing=0 cellpadding=0 border=1 style="border-collapse:collapse;">
            <tr align="center">
                <td><Input type="button" value="开始" onclick="begin(this);"/><br><br>//按键,控制begin函数开始
                    <b>分数<b>: <span id="score">0</span></td>//设置节单元 score,用于后面更新分数的时候可以修改
            </tr>
        </table>
    </div>

    <table id="attention"  cellspacing=0 cellpadding=0 border=1 style="border-collapse:collapse;">
        //设置一个提示div
        <tr>
            <td>
                <h3><b>游戏规则</b></h3>
                →:向右
                   ←:向左<br>//<ba>标签可以使后面为空,可以使到分行的效果
                 ↑:变形<br>
                 ↓:向下<br>
                   空格:暂停
            </td>
        </tr>
    </table>  
</div>
</body>
</html>

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);
    }



相关文章推荐

原生JS实现网页版俄罗斯方块

  • 2017年05月06日 22:41
  • 26KB
  • 下载

网页版游戏(俄罗斯方块)

body { background:#000; font:25px/25px 宋体;}#box { float:left;width:252px;border:#999 20px ridge;colo...

JavaScript实现俄罗斯方块代码

俄罗斯方块 body{ width:530px; background:#006030; margin:20px auto} table#gameBoard{ border:1...

JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码

原文:JavaScript jQuery实现Tetris(俄罗斯方块)游戏代码 源代码下载地址:http://www.zuidaima.com/share/1882054152457216....

javascript实现俄罗斯方块

以前一直想写俄罗斯方块,连连看,坦克大战等经典的小游戏,不过本人太浮躁,每次写一半遇到问题就放弃了。 这次是自己第一次坚持写完了这个俄罗斯方块。 对javascript不是很熟,所以一些编程的格式,用...

JavaScript, 实现俄罗斯方块小游戏

俄罗斯方块 body{ width:530px; background:#F7F7F7; margin:20px auto} table#gameBoard{ border:1px solid ...

javascript 实现的俄罗斯方块游戏 经典

javascript 实现的俄罗斯方块游戏 经典

全位运算实现的俄罗斯方块 J2ME版

import java.util.Random; import javax.microedition.lcdui.Canvas; import javax.microedition.lcdui.Di...

Android版俄罗斯方块的实现

学习Android的基本开发也有一段时间了,但是因为没有经常使用Android渐渐的也就忘记了。Android编程学的不深,仅仅是为了对付逆向,但是有时还是会感到力不从心的。毕竟不是一个计算机专业毕业...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript实现的网页版俄罗斯方块
举报原因:
原因补充:

(最多只允许输入30个字)