初学俄罗斯方块，完美注释--欢迎指出bug

最新推荐文章于 2022-09-03 16:55:33 发布
最新推荐文章于 2022-09-03 16:55:33 发布
阅读量727 收藏 3
点赞数 1
分类专栏： 每日小练习 文章标签： 俄罗斯方块 注释 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Naro7L/article/details/77256470
版权

第一次写小游戏，参考了很多个俄罗斯方块的版本！自我感觉逻辑上很复杂，代码不够优雅！欢迎指正

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习--俄罗斯方块</title>
    <style type="text/css">
        #board{margin-top:10px;}
        #board tr td{ 
        background: black;
        width: 20px; 
        height: 20px; 
        } 
    </style>
</head>
<body>

<input type="button" value="开始" name="" onclick="begin(this)"> Score: <span id="score"> 0</span>
<table id="board" cellspacing=0 cellpadding=0 border=1 style="border-collapse: collapse;">
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
    <tr>
        <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>
    </tr>
</table>


<script language="javascript">
var tbl;//游戏主面板
var status=0;游戏状态 0: 未开始;1 运行; 2 中止; 
var timer;//定时器
var score = 0; //分数
//board是一个18*10的数组
var board= new Array(18);
for (var i = 0; i <18; i++) {
    board[i]=new Array(10);
 }
 // console.log(board);
 //用来标注那些方格已经被占据. 初始时都为0, 如果被占据则为1
 for (var i = 0; i <18; i++) {
    for (var j = 0; j < 10; j++) {
        board[i][j]=0;
    }
 }
 // console.log(board);

 //定义一个当前活动的方块
 var activeBlock;
 //定义方块的基本形状--7个
function genBlock(){
    activeBlock = new Array(4);
    //产生随机整数0-6
    var t= (Math.floor(Math.random()*20)+1)%7;
    switch(t){ 
        case 0:{ 
            activeBlock[0] = {x:0, y:4}; 
            activeBlock[1] = {x:1, y:4}; 
            activeBlock[2] = {x:0, y:5}; 
            activeBlock[3] = {x:1, y:5}; 
            break; 
        } 
        case 1:{ 
            activeBlock[0] = {x:0, y:3}; 
            activeBlock[1] = {x:0, y:4}; 
            activeBlock[2] = {x:0, y:5}; 
            activeBlock[3] = {x:0, y:6}; 
            break; 
        } 
        case 2:{ 
            activeBlock[0] = {x:0, y:5}; 
            activeBlock[1] = {x:1, y:4}; 
            activeBlock[2] = {x:1, y:5}; 
            activeBlock[3] = {x:2, y:4}; 
            break; 
        } 
        case 3:{ 
            activeBlock[0] = {x:0, y:4}; 
            activeBlock[1] = {x:1, y:4}; 
            activeBlock[2] = {x:1, y:5}; 
            activeBlock[3] = {x:2, y:5}; 
            break; 
        } 
        case 4:{ 
            activeBlock[0] = {x:0, y:4}; 
            activeBlock[1] = {x:1, y:4}; 
            activeBlock[2] = {x:1, y:5}; 
            activeBlock[3] = {x:1, y:6}; 
            break; 
        } 
        case 5:{ 
            activeBlock[0] = {x:0, y:4}; 
            activeBlock[1] = {x:1, y:4}; 
            activeBlock[2] = {x:2, y:4}; 
            activeBlock[3] = {x:2, y:5}; 
            break; 
        } 
        case 6:{ 
            activeBlock[0] = {x:0, y:5}; 
            activeBlock[1] = {x:1, y:4}; 
            activeBlock[2] = {x:1, y:5}; 
            activeBlock[3] = {x:1, y:6}; 
            break; 
        } 
    } 
  //检查小方块的位置是否可以放在初始位置
  for (var i = 0; i <4; i++) {
    if (!isCellValid(activeBlock[i].x,activeBlock[i].y)) {
        return false;
    }else{
        return true;
    }
  }
}
//向下移动
function moveDown(){
//首先检查底边界 看有没有触底
 if (checkBottomBorder()) {
    //没有
    erase();
    for (var i = 0; i <4; i++) {
        activeBlock[i].x=activeBlock[i].x+1;
    }
    paint();
 }else{
    //触底
    //停止自动向下移动
    clearInterval(timer);
    //更新数组
    updateBoard();
    //消行
    var lines=deleteLine();
    //有消行就刷新分数
    if (lines!=0) {
        score=score+lines*10;
        updateScore();
        //擦除面板
        eraseBoard();
        //重绘面板
        paintBoard();
    }
   //产生新图行。并判断是否可以放在最初位置
   if (!genBlock()) {
       alert("Game over!")
       status=2;
       return;
   }
   paint();
   //定时器
   timer=setInterval(moveDown,1000);
 }
}
//左移动
function moveLeft(){
    if (checkLeftBorder()) {
        erase();
        for (var i = 0; i <4; i++) {
            activeBlock[i].y=activeBlock[i].y-1;
        }
        paint();
    }
}
//右移动
function moveRight(){
    if (checkRightBorder()) {
        erase();
        for (var i = 0; i <4; i++) {
            activeBlock[i].y=activeBlock[i].y+1;
        }
        paint();
    }
}
//旋转
//因为旋转之后可能会有方格覆盖已有的方格. 
//先用一个tmpBlock,把activeBlock的内容都拷贝到tmpBlock, 
//对tmpBlock尝试旋转,如果旋转后检测发现没有方格产生冲突
//再把旋转后的tmpBlock的值给activeBlock. 
function rotate(){
    var tmpBlock=new Array(4);
    for (var i = 0; i <4; i++) {
        tmpBlock[i]={x:0,y:0};
    }
    for (var i = 0; i <4; i++) {
        tmpBlock[i].x=activeBlock[i].x;
        tmpBlock[i].y=activeBlock[i].y;
    }
//先算四个点的中心点，则这四个点围绕中心旋转90度。 
var cx = Math.round((tmpBlock[0].x + tmpBlock[1].x + tmpBlock[2].x + tmpBlock[3].x)/4); 
var cy = Math.round((tmpBlock[0].y + tmpBlock[1].y + tmpBlock[2].y + tmpBlock[3].y)/4); 
//先假设围绕源点旋转。然后再加上中心点的坐标。 
for (var i = 0; i <4; i++) {
    tmpBlock[i].x=cx+cy-activeBlock[i].y; 
    tmpBlock[i].y=cy-cx+activeBlock[i].x; 
}
//检查旋转后方格是否不重叠
for (var i = 0; i < 4; i++) {
    if (!isCellValid(tmpBlock[i].x,tmpBlock[i].y)) {
        return;
    }
}       
erase();


for (var i = 0; i < 4; i++) {
    activeBlock[i].x=tmpBlock[i].x;
    activeBlock[i].y=tmpBlock[i].y;
}
paint();
}
//检查方块(x，y)是否已经存在在border中
function isCellValid(x,y){
    if (x>17||x<0||y>9||y<0) {
        return false;
    }else if (board[x][y]==1) {
        return false;
    }else{
        return true;
    }
}
//检查底边界
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)){ 
            return false; 
        } 
    } 
    return true; 
}
//检查左边界
function checkLeftBorder(){
    for (var i = 0; i < activeBlock.length; i++) {
        if (activeBlock[i].y==0) {
            return false;
        }
        if (!isCellValid(activeBlock[i].x,activeBlock[i].y-1)) {
            return false;
        }

    }
    return true;
}
//检查右边界
function checkRightBorder(){ 
    for(var i=0; i<activeBlock.length; i++){ 
        if(activeBlock[i].y==9){ 
            return false; 
        } 
        if(!isCellValid(activeBlock[i].x, activeBlock[i].y+1)){ 
            return false; 
        } 
    } 
    return true; 
} 
//擦除
function erase(){
    for (var i = 0; i <4; i++) {
    tbl.rows[activeBlock[i].x].cells[activeBlock[i].y].style.backgroundColor="black";
    }
}
//擦除整个面板
function eraseBoard(){
    for (var i = 0; i <18; i++) {
        for (var j = 0; j < 10; j++) {
            tbl.rows[i].cells[j].style.backgroundColor = "black"; 
        }
    }
}

//产生一个空白行
function generateBlankLine(){
    var line=new Array(10);
    for (var i = 0; i <10; i++) {
        line[i]=0;
    }
    return line;
}
//消除行,改变数组border
function updateBoard(){ 
for(var i=0; i<4; i++){ 
board[activeBlock[i].x][activeBlock[i].y]=1; 
} 
} 
//消除行
function deleteLine (){
    var lines=0;
    for (var i = 0; i <18; i++) {
        var j = 0
        for (; j <10; j++) {
            if (board[i][j]==0) {
                break;
            }
        }
        if (j==10) {
            lines++
             if(i!=0) {
                for (var k =i-1; k>=0; k--) {
                    board[k+1]=board[k];
                }
            }
            board[0]=generateBlankLine();

      }
    }
    return lines;
}
//更新分数
function updateScore(){
    document.getElementById('score').innerText=""+score;
}
//重绘整个面板
var arrColor=['pink','pink','pink','pink'];
var num=0;
function paintBoard(){
    for (var i = 0; i <18; i++) {
        for (var j = 0; j <10; j++) {
                num++;
                num%=arrColor.length;
                if (board[i][j]==1) {
                    tbl.rows[i].cells[j].style.backgroundColor =arrColor[num];

           }
        }
    }
}

//键盘事件
function keyControl(){
    if (status!=1) {
        return;
    }
    var code=event.keyCode;
    switch(code){
        case 37:{
            moveLeft();
            break;
        }
        case 38:{ 
            rotate(); 
            break; 
        } 
        case 39:{ 
            moveRight(); 
            break; 
        } 
        case 40:{ 
            moveDown(); 
            break; 
        } 
    }
}
//活动方块
function paint(){
for(var i=0; i<4; i++){ 
        num++;
        num%=arrColor.length;
        tbl.rows[activeBlock[i].x].cells[activeBlock[i].y].style.backgroundColor=arrColor[num]; 


} 
} 
//开始
function begin(e){
    e.disabled=true;
    status=1;
    tbl=document.getElementById('board');
    if(!genBlock()){ 
       alert("Game over!"); 
       status = 2; 
       return; 
} 
    paint();
    timer=setInterval(moveDown,1000);
}
document.onkeydown=keyControl;
</script>
</body>
</html>
Naro7L
关注
专栏目录
初学JAVA项目（六、俄罗斯方块）
weixin_43878913的博客
03-07 481
初学JAVA项目（六、俄罗斯方块）Java AI Tetris前言一、Tetris(俄罗斯方块)二、项目完成后的一些反思1.测试程序里的`@Test`是个什么东西？2.测试程序既没有main也没有run，究竟是如何运行的呢？2.听说测试分为单元测试、集成测试，还要考虑测试覆盖率。这都是些什么玩意？ Java AI Tetris 前言 本次项目学习目标： 主要通过以项目为导向学习继承、多态、人工智能等内容 一、Tetris(俄罗斯方块) 经典游戏Tetris(俄罗斯方块)，利用基本的人工智能实现机机对战。
俄罗斯方块（含注释）
07-12
这是一个俄罗斯方块的游戏，用c++写的，含大量的注释，欢迎参考，指出BUG
俄罗斯方块，C语言源文件，带有详细的注释
xzlscui的专栏
09-03 730
【代码】俄罗斯方块，C语言源文件。
最简单实现俄罗斯方块（清晰注释版）
07-13
最基本的实现俄罗斯方块，用纯javascript代码写；分享给大家相互交流学习。<html></body><a>eeeeee</a><body></html>
俄罗斯方块88行 代码注释版 （三）
title = get_a_title()
07-06 1075
if (k == 'S' || k == 's' || gt.t             if (trsCopy(gt.tmap[gt.s][gt.st], gt.x, gt.y+1, 0))++gt.y,gt.t=50; //下面没有障碍，还可以继续下落。自动降落一格的时间间隔为gt.t*delay()，刷新一次的时间为delay()             else {
俄罗斯方块修复BUG版
恒持此志成永志
07-12 498
//*********************************************////**************  头文件  *********************////*********************************************//#include &lt;windows.h&gt;#include &lt;time.h&gt;#includ...
应用源码俄罗斯方块注释超详细版.zip
04-20
这份“应用源码俄罗斯方块注释超详细版”提供了丰富的注释，可以帮助初学者逐步理解代码背后的逻辑，是学习Android游戏开发的宝贵资源。在阅读和实践过程中，你不仅可以掌握Android应用开发的基础，还能提升问题解决...
60行js代码实现俄罗斯方块
10-24
本文介绍了一个通过60行JavaScript代码实现的俄罗斯方块游戏，游戏的核心逻辑包括基本的方块移动、旋转、下落以及碰撞检测。在这个简短的代码实现中，虽然可能存在一些小bug，但整体运行效果是值得肯定的，因此鼓励...
控制台俄罗斯方块 C++
02-08
《控制台俄罗斯方块——C++实现解析》 在编程世界中，俄罗斯方块是一款经典的电子游戏，它的简单规则和无限挑战性使其成为学习游戏开发的绝佳起点。本篇文章将聚焦于一个用C++语言在控制台实现的俄罗斯方块项目，...
用最简单的C++实现的简易俄罗斯方块
03-12
这是我自己初学C++时写的一个简易C++俄罗斯方块，很多注释都不详尽，但是基本可以实现俄罗斯方块功能，甚至连面向对象也都没有用到，有少许BUG，没有修改，但是不影响初学者的参考作用，仅仅上传供初学者试用，。
VC俄罗斯方块源码带详细注释.
07-22
源码可以自己改，很牛逼的东西，自己写的发出来分享一下
俄罗斯方块PYTHON完整源码
07-24
国外网站上看到的俄罗斯方块PYTHON+pyqt实现 http://zetcode.com/tutorials/pyqt4/thetetrisgame/
Windows创建窗口详解+代码---十天教会你俄罗斯方块
恒持此志成永志
07-09 850
代码地址：https://blog.csdn.net/qq_41603898/article/details/80968266以VS为例解析：先创建项目，主函数，再写窗口结构体 //一.创建窗口结构体 WNDCLASSEX wc; wc.cbClsExtra = 0;//紧跟在窗口类尾部的一块额外空间 wc.cbSize = sizeof(wc);//结构体大小 wc.cbWndExtra = 0...
《俄罗斯方块》项目采用技术
Tetris__的博客
06-23 794
创建Cell类 定义基本的元素:小方块(cell)的基本参数:行,列,小方块图片 提供无参有参构造器 提供get/set方法 定义本游戏最基本的行为:左移一格;右移一格;下落一格 Tetromino类,提供方块的各种行为方法 将一个四个方块视为一个数组 将一个四个方块的四种状态也定义为数组 添加一个作为旋转计数器的量 定义cell的各种行为:下落;左移;右移;旋转以及旋转的方法 然后定义内部类state，此类用来描述方块旋转的四种状态,首先定义八个整型变量,用来描述四个方块的位置.0,1,2,3分别代表四个
JS写俄罗斯方块完美注释版
热门推荐
sunxing007的专栏
11-19 2万+
JS写俄罗斯方块完美注释版/************************************************************* JS俄罗斯方块完美注释版 v 1.01* 作者: sunxing007* 转载请说明来自: http://blog.csdn.net/sunxing007*********************************************
非常经典的俄罗斯方块源码！HTML5，可直接运行！
红旺永福
02-12 9084
整理自己的360仓库时发现的，非常经典，HTML5，可直接运行，强力推荐！！
俄罗斯方块算法及其实现
PGRMer的博客
11-28 5056
//Spawner.cs using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class Spawner : MonoBehaviour { //建立储存方块组的数组 public GameObject[] Blo...
Matlab界面面板版车牌识别系统设计实现[Matlab界面面板版].zip
最新发布
10-20
zip
SLAM-基于深度特征的实时SLAM算法实现-效果好于ORB-优质项目实战.zip
10-20
SLAM_基于深度特征的实时SLAM算法实现_效果好于ORB_优质项目实战
200行代码打造Python版俄罗斯方块游戏
资源摘要信息: "本资源为使用Python编写的俄罗斯方块游戏源代码，文件压缩包中包含一个名为‘eluosifangkuai-master’的文件夹。该游戏实现了俄罗斯方块的所有基本功能，包括方块的生成、移动、旋转、消除行以及计分...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值