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

最新推荐文章于 2024-04-21 11:04:37 发布

唯有努力

最新推荐文章于 2024-04-21 11:04:37 发布

阅读量870

点赞数 1

分类专栏：移动前端文章标签： javascript

本文链接：https://blog.csdn.net/ptjiedian/article/details/17123781

版权

移动前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一学习这些东西，虽然有一些思想是借鉴别人的，但是还是全部都是自己打，用了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="开始" οnclick="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);
   }

唯有努力

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript实现的网页版俄罗斯方块

第一学习这些东西，虽然有一些思想是借鉴别人的，但是还是全部都是自己打，用了21天做这个东西，虽然完成质量一般般，但是毕竟是第一次，纪念一下总结比较一般文采不好：总结1、初步接触了html，css，javascript的东西，初步了解了什么是html，css，javascript，算是对这些东西有一点了解2、在学习中发现只有一边学习一边实践才能够学得更快3、更加学
复制链接

扫一扫