故此VB6写的一个简易俄罗斯方代码。JAVASCRIPT代码编写俄罗斯方块网页版。

网络直达闹那么些俄罗斯方块代码。它们大多为了视觉效果,程序比较复杂,不便民学习玩乐编程。所以我写了单简单俄罗斯四方代码,尽量用VB本身的效果,没有复杂的DirectX。

俄罗斯方方块是小时候之一个回忆,从最开始之掌上的黑白游戏机,到电视机游戏机,到电脑,无不有它的痕迹,今天咱们来平等由再其的一模一样种植实现方式,也算整理一下自之笔触吧……

下载(注意修改下充斥后底壮大名)

HTML+CSS+JS实现俄罗斯四方完整版本,素材只有图片,想如果的下载图片以提示名字保存,css中之所以底时节注意路径!!主要在JS中!JS附有详细注解

Betway必威 1

效果:

mBlock.bas
Attribute VB_Name = "mBlock"
Option Explicit

Private m_Inited As Boolean '是否初始化过

'== 单个方块的信息
Public Const BlockSize As Long = 4
Public Type BlockInfo
    Box(0 To BlockSize - 1, 0 To BlockSize - 1) As Byte
    '        X            ,      Y
End Type

'== 所有方块的数据
Public Const RotateStatusCount As Long = 4

Public Const BlockCount As Long = 5
Public Blocks(0 To RotateStatusCount - 1, 0 To BlockCount - 1) As BlockInfo

'设置方块数据
Private Sub SetBlock(ByRef Item As BlockInfo, ByRef Value As String)
    Dim I As Long
    Dim J As Long
    Dim Idx As Long '字符串位置

    Idx = 1
    With Item
        For I = 0 To BlockSize - 1
            For J = 0 To BlockSize - 1
                .Box(J, I) = Val(Mid$(Value, Idx, 1))

                Idx = Idx + 1 '指向下一个字符

            Next J
        Next I
    End With

End Sub

Public Sub InitBlock()
    If m_Inited Then Exit Sub
    m_Inited = True

    SetBlock Blocks(0, 0), "0100" & _
                           "0100" & _
                           "0100" & _
                           "0100"
    SetBlock Blocks(1, 0), "0000" & _
                           "1111" & _
                           "0000" & _
                           "0000"
    SetBlock Blocks(2, 0), "0100" & _
                           "0100" & _
                           "0100" & _
                           "0100"
    SetBlock Blocks(3, 0), "0000" & _
                           "1111" & _
                           "0000" & _
                           "0000"

    SetBlock Blocks(0, 1), "0100" & _
                           "1110" & _
                           "0000" & _
                           "0000"
    SetBlock Blocks(1, 1), "0100" & _
                           "0110" & _
                           "0100" & _
                           "0000"
    SetBlock Blocks(2, 1), "0000" & _
                           "1110" & _
                           "0100" & _
                           "0000"
    SetBlock Blocks(3, 1), "0100" & _
                           "1100" & _
                           "0100" & _
                           "0000"

    SetBlock Blocks(0, 2), "0000" & _
                           "1110" & _
                           "0010" & _
                           "0000"
    SetBlock Blocks(1, 2), "0100" & _
                           "0100" & _
                           "1100" & _
                           "0000"
    SetBlock Blocks(2, 2), "1000" & _
                           "1110" & _
                           "0000" & _
                           "0000"
    SetBlock Blocks(3, 2), "0110" & _
                           "0100" & _
                           "0100" & _
                           "0000"

    SetBlock Blocks(0, 3), "0010" & _
                           "1110" & _
                           "0000" & _
                           "0000"
    SetBlock Blocks(1, 3), "0100" & _
                           "0100" & _
                           "0110" & _
                           "0000"
    SetBlock Blocks(2, 3), "0000" & _
                           "1110" & _
                           "1000" & _
                           "0000"
    SetBlock Blocks(3, 3), "1100" & _
                           "0100" & _
                           "0100" & _
                           "0000"

    SetBlock Blocks(0, 4), "0000" & _
                           "0110" & _
                           "0110" & _
                           "0000"
    SetBlock Blocks(1, 4), "0000" & _
                           "0110" & _
                           "0110" & _
                           "0000"
    SetBlock Blocks(2, 4), "0000" & _
                           "0110" & _
                           "0110" & _
                           "0000"
    SetBlock Blocks(3, 4), "0000" & _
                           "0110" & _
                           "0110" & _
                           "0000"

End Sub

Betway必威 2

FrmMain.frm
VERSION 5.00
Begin VB.Form FrmMain 
   BorderStyle     =   1  'Fixed Single
   Caption         =   "俄罗斯方块"
   ClientHeight    =   6255
   ClientLeft      =   150
   ClientTop       =   840
   ClientWidth     =   5190
   HasDC           =   0   'False
   Icon            =   "FrmMain.frx":0000
   KeyPreview      =   -1  'True
   LinkTopic       =   "Form1"
   LockControls    =   -1  'True
   MaxButton       =   0   'False
   ScaleHeight     =   6255
   ScaleWidth      =   5190
   StartUpPosition =   3  '窗口缺省
   Begin VB.Timer TmrGame 
      Enabled         =   0   'False
      Interval        =   1000
      Left            =   2010
      Top             =   2880
   End
   Begin VB.CommandButton CmdRun 
      Caption         =   "开始"
      Default         =   -1  'True
      Height          =   540
      Left            =   3630
      TabIndex        =   9
      Top             =   5250
      Width           =   1200
   End
   Begin VB.Frame FraValue 
      Caption         =   "得分"
      Height          =   795
      Left            =   3330
      TabIndex        =   7
      Top             =   4020
      Width           =   1800
      Begin VB.TextBox TxtValue 
         Alignment       =   1  'Right Justify
         BackColor       =   &H8000000F&
         BeginProperty Font 
            Name            =   "Fixedsys"
            Size            =   12
            Charset         =   134
            Weight          =   400
            Underline       =   0   'False
            Italic          =   0   'False
            Strikethrough   =   0   'False
         EndProperty
         Height          =   360
         Left            =   150
         Locked          =   -1  'True
         TabIndex        =   8
         Text            =   "0"
         Top             =   300
         Width           =   1500
      End
   End
   Begin VB.Frame FraSpeed 
      Caption         =   "当前速度"
      Height          =   795
      Left            =   3330
      TabIndex        =   5
      Top             =   3060
      Width           =   1800
      Begin VB.TextBox TxtSpeed 
         Alignment       =   1  'Right Justify
         BackColor       =   &H8000000F&
         BeginProperty Font 
            Name            =   "Fixedsys"
            Size            =   12
            Charset         =   134
            Weight          =   400
            Underline       =   0   'False
            Italic          =   0   'False
            Strikethrough   =   0   'False
         EndProperty
         Height          =   360
         Left            =   150
         Locked          =   -1  'True
         TabIndex        =   6
         Text            =   "0"
         Top             =   300
         Width           =   1500
      End
   End
   Begin VB.Frame FraMax 
      Caption         =   "最高分"
      Height          =   795
      Left            =   3300
      TabIndex        =   3
      Top             =   2100
      Width           =   1800
      Begin VB.TextBox TxtMax 
         Alignment       =   1  'Right Justify
         BackColor       =   &H8000000F&
         BeginProperty Font 
            Name            =   "Fixedsys"
            Size            =   12
            Charset         =   134
            Weight          =   400
            Underline       =   0   'False
            Italic          =   0   'False
            Strikethrough   =   0   'False
         EndProperty
         Height          =   360
         Left            =   150
         Locked          =   -1  'True
         TabIndex        =   4
         Text            =   "0"
         Top             =   300
         Width           =   1500
      End
   End
   Begin VB.Frame FraNext 
      Caption         =   "下一个"
      Height          =   1800
      Left            =   3300
      TabIndex        =   1
      Top             =   150
      Width           =   1800
      Begin VB.PictureBox PicNext 
         AutoRedraw      =   -1  'True
         BackColor       =   &H00FFFFFF&
         Height          =   1260
         Left            =   240
         ScaleHeight     =   1200
         ScaleWidth      =   1200
         TabIndex        =   2
         Top             =   300
         Width           =   1260
      End
   End
   Begin VB.PictureBox PicGame 
      AutoRedraw      =   -1  'True
      BackColor       =   &H00FFFFFF&
      Height          =   6060
      Left            =   120
      ScaleHeight     =   6000
      ScaleWidth      =   3000
      TabIndex        =   0
      Top             =   120
      Width           =   3060
   End
   Begin VB.Menu mnuGame 
      Caption         =   "游戏(&G)"
      Begin VB.Menu mnuOption 
         Caption         =   "选项(&O)..."
      End
      Begin VB.Menu mnuAbout 
         Caption         =   "关于(&A)..."
      End
      Begin VB.Menu mnuSep0_0 
         Caption         =   "-"
      End
      Begin VB.Menu mnuExit 
         Caption         =   "退出(&X)"
      End
   End
End
Attribute VB_Name = "FrmMain"
Attribute VB_GlobalNameSpace = False
Attribute VB_Creatable = False
Attribute VB_PredeclaredId = True
Attribute VB_Exposed = False
Option Explicit

Private Declare Sub InitCommonControls Lib "comctl32.dll" ()

'== 图格信息
Private Const m_Line As Long = 20   '行数
Private Const m_Col As Long = 10    '列数

'游戏网格
Private m_Grid(0 To m_Col - 1, 0 To m_Line - 1) As Byte

Private m_BoxWidth As Long  '格子的宽度
Private m_BoxHeight As Long '格子的高度

'== 游戏状态

Private m_Playing As Boolean '是否正在运行游戏

Private m_Speed As Long '游戏速度
Private m_Value As Long '当前分数

Private m_Max As Long '最高分数

Private m_ClipTop As Boolean '用于pvHitTest,表示是否超过上边缘

'当前方块的信息
Private m_CurIndex As Long              '方块类型
Private m_CurStatus As Long             '方块旋转状态
Private m_CurColor As Long              '颜色(QBColor索引)
Private m_CurX As Long, m_CurY As Long    '当前位置。单位:图格

'下一个方块的信息
Private m_NextIndex As Long     '方块类型
Private m_NextStatus As Long    '方块旋转状态
Private m_NextColor As Long     '颜色(QBColor索引)

'== 设置信息
Public FastDown As Boolean  '快速下降。False:按一次“下”只下降一行;True:按一次“下”直接落到底
Public RotMode As Boolean   '旋转模式。为假表示顺时针,为真表示逆时针
Public ShowNext As Boolean  '是否显示下一个方块

'键盘定义(按键的KeyDown编码)
Public KeyLeft As Integer   '左移
Public KeyRight As Integer  '右移
Public KeyRot As Integer    '旋转
Public KeyDown As Integer   '落下

'计算得分
Private Function pvValueFormLine(ByVal nLine As Long) As Long
    Debug.Assert nLine >= 0 And nLine <= m_Line

    '-- 得分计算方法
    '计算过程:
    ' 100 + 200
    ' 300 + 400
    ' 700 + 800
    '1500 +1600
    '......
    '正好是(2^n-1)*100的形式
    pvValueFormLine = (2 ^ nLine - 1) * 100

End Function

'绘制单个格子
'oOut:目的图片框
'nIndex:颜色编号。0表示没有,色彩为QBColor(nIndex)
Private Sub pvDrawBox(ByRef oOut As PictureBox, _
        ByVal nIndex As Long, _
        ByVal X As Single, ByVal Y As Long, _
        ByVal Width As Single, ByVal Height As Single)
    Dim PixelX As Single, PixelY As Single  '1像素所占空间

    '利用断言检查参数
    Debug.Assert Not (oOut Is Nothing)          '对象不能为空
    Debug.Assert oOut.ScaleMode <> vbUser       '不能是自定义坐标系
    Debug.Assert nIndex >= 0 And nIndex <= 15   '索引必须在规定的范围内
    Debug.Assert Width > 0 And Height > 0       '大小判断

    With oOut
        '计算1像素所占空间
        PixelX = .ScaleX(1, vbPixels, .ScaleMode)
        PixelY = .ScaleY(1, vbPixels, .ScaleMode)

        If nIndex = 0 Then
            '绘制白色背景
            oOut.Line (X, Y)-Step(Width, Height), vbWhite, BF
            '绘制边线
            oOut.Line (X + PixelX, Y + PixelY)-Step(Width - PixelX * 2, Height - PixelY * 2), QBColor(nIndex), B
        Else
            '绘制白色边线
            oOut.Line (X, Y)-Step(Width, Height), vbWhite, B
            '绘制填充区域
            oOut.Line (X + PixelX, Y + PixelY)-Step(Width - PixelX * 2, Height - PixelY * 2), QBColor(nIndex), BF
            '绘制白色内边线
            oOut.Line (X + PixelX * 2, Y + PixelY * 2)-Step(Width - PixelX * 4, Height - PixelY * 4), vbWhite, B
        End If

    End With

End Sub

'绘制游戏画面
Private Sub pvPaint(ByVal hDC As Long)
    Dim I As Long
    Dim J As Long
    Dim X As Single
    Dim Y As Single

    Y = 0
    For I = 0 To m_Line - 1
        X = 0
        For J = 0 To m_Col - 1
            '绘制格子
            Call pvDrawBox(PicGame, m_Grid(J, I), X, Y, m_BoxWidth, m_BoxHeight)
            '下一个格子
            X = X + m_BoxWidth

        Next J

        '下一行格子
        Y = Y + m_BoxHeight

    Next I

End Sub

'刷新游戏画面
Private Sub pvRefresh()
    With PicGame
        If .AutoRedraw Or .HasDC Then
            Call pvPaint(.hDC)
        End If
        If .AutoRedraw Or .HasDC = False Then
            Call .Refresh
        End If
    End With
End Sub

'更新PicNext的图像
Private Sub pvRefreshNext()
    Dim I As Long, J As Long
    Dim X As Single, Y As Single
    Dim Idx As Long

    Debug.Assert m_NextIndex >= -1 And m_NextIndex < BlockCount
    Debug.Assert m_NextStatus >= 0 And m_NextStatus < RotateStatusCount
    Debug.Assert m_NextColor >= 0 And m_NextColor <= 15
    Debug.Assert PicNext.AutoRedraw '自动重画必须为真

    If ShowNext And m_NextIndex >= 0 Then '有下一个项目
        With Blocks(m_NextStatus, m_NextIndex)
            Y = 0
            For I = 0 To BlockSize - 1
                X = 0
                For J = 0 To BlockSize - 1
                    '计算颜色
                    If .Box(J, I) Then
                        Idx = m_NextColor
                    Else
                        Idx = 0
                    End If

                    '绘制格子
                    Call pvDrawBox(PicNext, Idx, X, Y, m_BoxWidth, m_BoxHeight)

                    '下一个格子
                    X = X + m_BoxWidth

                Next J

                '下一行格子
                Y = Y + m_BoxHeight

            Next I
        End With

    Else '没有下一个项目
        Idx = 0

        Y = 0
        For I = 0 To BlockSize - 1
            X = 0
            For J = 0 To BlockSize - 1
                '绘制格子
                Call pvDrawBox(PicNext, Idx, X, Y, m_BoxWidth, m_BoxHeight)

                '下一个格子
                X = X + m_BoxWidth

            Next J

            '下一行格子
            Y = Y + m_BoxHeight

        Next I

    End If

End Sub

'更新状态显示
Private Sub pvUpdataStatus()
    TxtValue.Text = CStr(m_Value)
    TxtMax.Text = CStr(m_Max)

    If m_Playing Then
        If TmrGame.Enabled Then
            CmdRun.Caption = "暂停"
        Else
            CmdRun.Caption = "继续"
        End If
    Else
        CmdRun.Caption = "开始"
    End If

End Sub

'生成下一个方块(只是设置数据)
Private Sub pvCreateNextBlock()
    m_NextIndex = Int(Rnd() * BlockCount)
    m_NextStatus = Int(Rnd() * RotateStatusCount)
    m_NextColor = Int(Rnd() * 7) + 1 '在1~7的范围内
End Sub

'更新当前方块
Private Sub pvUpdataCurBlock()
    '类型信息
    m_CurIndex = m_NextIndex
    m_CurStatus = m_NextStatus
    m_CurColor = m_NextColor
    m_CurX = (m_Col - BlockSize) / 2 '居中
    m_CurY = 1 - BlockSize

    '生成下一个方块
    Call pvCreateNextBlock
    Call pvRefreshNext

End Sub

'将方块加入网格
Private Sub pvFillBlock(ByVal nColor As Long)
    Dim I As Long, J As Long
    Dim X As Long, Y As Long

    Debug.Assert m_CurIndex >= 0 And m_CurIndex < BlockCount
    Debug.Assert m_CurStatus >= 0 And m_CurStatus < RotateStatusCount
    Debug.Assert nColor >= 0 And nColor <= 15   '索引必须在规定的范围内

    With Blocks(m_CurStatus, m_CurIndex)
        Y = m_CurY
        For I = 0 To BlockSize - 1 'Y循环
            If Y >= 0 And Y < m_Line Then 'Y在范围内
                X = m_CurX
                For J = 0 To BlockSize - 1 'X循环
                    If X >= 0 And X < m_Col Then 'X在范围内
                        If .Box(J, I) Then
                            '设置
                            m_Grid(X, Y) = nColor
                        End If
                    End If

                    X = X + 1

                Next J
            End If

            Y = Y + 1

        Next I

    End With

End Sub

'测试是否能放置
Public Function pvHitTest(ByVal X0 As Long, ByVal Y0 As Long, ByVal Status As Long) As Boolean
    Dim I As Long, J As Long
    Dim X As Long, Y As Long

    Debug.Assert m_CurIndex >= 0 And m_CurIndex < BlockCount
    Debug.Assert Status >= 0 And Status < RotateStatusCount

    m_ClipTop = False
    With Blocks(Status, m_CurIndex)
        Y = Y0
        For I = 0 To BlockSize - 1 'Y循环
                X = X0
                For J = 0 To BlockSize - 1 'X循环
                    If .Box(J, I) Then
                        '判断范围
                        If Y < m_Line And X >= 0 And X < m_Col Then '下、左、右边界判断
                            If Y < 0 Then '超过上边缘
                                m_ClipTop = True
                            Else
                                If m_Grid(X, Y) Then '已占据
                                    pvHitTest = False
                                    Exit Function
                                End If
                            End If
                        Else '在范围外
                            pvHitTest = False
                            Exit Function
                        End If

                    End If

                    X = X + 1

                Next J

            Y = Y + 1

        Next I

    End With

    pvHitTest = True

End Function

'开始游戏
Private Sub pvStartGame()
    Dim I As Long, J As Long

    Debug.Assert m_Playing = False

    '清空网格
    For I = 0 To m_Line - 1
        For J = 0 To m_Col - 1
            m_Grid(J, I) = 0
        Next J
    Next I

    '计算当前方块
    Call pvCreateNextBlock
    Call pvUpdataCurBlock
    Call pvFillBlock(m_CurColor) '将方块加入网格

    '开始游戏
    m_Playing = True
    Speed = 1
    m_Value = 0
    TmrGame.Enabled = m_Playing
    Call pvUpdataStatus

    '更新游戏画面
    Call pvRefresh

End Sub

'结束游戏
Private Sub pvEndGame()
    '结束游戏
    m_Playing = False
    Speed = 1
    m_Value = 0
    TmrGame.Enabled = m_Playing
    Call pvUpdataStatus

    '更新“下一个”
    m_NextIndex = -1
    Call pvRefreshNext

End Sub

'尝试消行
Private Sub pvFindLine()
    Dim I As Long, J As Long
    Dim bDel(0 To m_Line - 1) As Boolean
    Dim Count As Long
    Dim Idx As Long

    '得到消行的个数
    Count = 0
    For I = 0 To m_Line - 1 '逐行
        '判断满行
        bDel(I) = True
        For J = 0 To m_Col - 1 'X
            If m_Grid(J, I) = 0 Then '存在空格
                bDel(I) = False
                Exit For
            End If
        Next J

        If bDel(I) Then
            Count = Count + 1
        End If

    Next I

    If Count > 0 Then
        '消行
        For I = 0 To m_Line - 1 'y
            If bDel(I) Then
                For J = 0 To m_Col - 1 'X
                    m_Grid(J, I) = 0
                Next J
            End If
        Next I

        '更新分数
        m_Value = m_Value + pvValueFormLine(Count)
        If m_Value > m_Max Then m_Max = m_Value
        Me.Speed = m_Value / 2000 + 1 '得分每增加2000分,程序自动将速度调高一档
        Call pvUpdataStatus

        '更新游戏画面
        Call pvRefresh

        '下移
        Idx = m_Line - 1
        I = Idx
        Do While I >= 0 '逐行
            If bDel(I) Then
            Else
                '复制一行
                If I <> Idx Then
                    For J = 0 To m_Col - 1 'X
                        m_Grid(J, Idx) = m_Grid(J, I)
                    Next J
                End If

                '指向下一行
                Idx = Idx - 1

            End If

            I = I - 1

        Loop

        '清除多余的行
        For I = 0 To Idx 'Y
            For J = 0 To m_Col - 1 'X
                m_Grid(J, I) = 0
            Next J
        Next I

    End If

End Sub

'下移一格
'返回值:是否成功
Private Function pvDoMoveDown() As Boolean
    '清除原方块
    Call pvFillBlock(0)

    '是否能够下移
    If pvHitTest(m_CurX, m_CurY + 1, m_CurStatus) Then '能够下移
        '更新位置
        m_CurY = m_CurY + 1             '修改坐标
        Call pvFillBlock(m_CurColor)    '将方块加入网格

        '更新游戏画面
        Call pvRefresh

        pvDoMoveDown = True

    Else '不能够下移
        '将方块加入网格
        Call pvFillBlock(m_CurColor)

        '判断是否堆满
        If m_ClipTop Then
            Call pvEndGame

            'Call VBA.Beep '报警
            MsgBox "GameOver!", vbExclamation Or vbOKOnly

        Else
            '消去方块
            Call pvFindLine

            '创建新方块
            Call pvUpdataCurBlock
            Call pvFillBlock(m_CurColor) '将方块加入网格

            '更新游戏画面
            Call pvRefresh

        End If

        pvDoMoveDown = False

    End If

End Function

'水平移动
'返回值:是否成功
Private Function pvDoMoveH(ByVal StepX As Long) As Boolean
    Dim Rc As Boolean

    '清除原方块
    Call pvFillBlock(0)

    '是否能够移动
    Rc = pvHitTest(m_CurX + StepX, m_CurY, m_CurStatus)
    If Rc Then '能够移动
        '更新位置
        m_CurX = m_CurX + StepX         '修改坐标
        Call pvFillBlock(m_CurColor)    '将方块加入网格

        '更新游戏画面
        Call pvRefresh

        pvDoMoveH = True

    Else '不能够移动
        '将方块加入网格
        Call pvFillBlock(m_CurColor)

        Call VBA.Beep

        pvDoMoveH = False

    End If

End Function

'旋转
'返回值:是否成功
Private Function pvDoRotate() As Boolean
    Dim Rc As Boolean
    Dim nTemp As Long

    '计算新的状态
    If RotMode = False Then
        nTemp = m_CurStatus + 1
    Else
        nTemp = m_CurStatus - 1
    End If
    nTemp = nTemp And 3

    '清除原方块
    Call pvFillBlock(0)

    '是否能够旋转
    Rc = pvHitTest(m_CurX, m_CurY, nTemp)
    If Rc Then '能够旋转
        '更新状态
        m_CurStatus = nTemp             '修改状态
        Call pvFillBlock(m_CurColor)    '将方块加入网格

        '更新游戏画面
        Call pvRefresh

        pvDoRotate = True

    Else '不能够旋转
        '将方块加入网格
        Call pvFillBlock(m_CurColor)

        Call VBA.Beep

        pvDoRotate = False

    End If

End Function

Private Sub CmdRun_Click()
    If m_Playing Then
        '切换暂停状态
        TmrGame.Enabled = Not TmrGame.Enabled

        '更新状态显示
        Call pvUpdataStatus

    Else
        Call pvStartGame
    End If

End Sub

Private Sub Form_Initialize()
    '初始化随机数
    Call Randomize(Timer)

    '初始化方块数据
    Call InitBlock

    '设置信息
    FastDown = True
    RotMode = False
    ShowNext = True

    '初始化按键
    KeyLeft = vbKeyLeft
    KeyRight = vbKeyRight
    KeyRot = vbKeyUp
    KeyDown = vbKeyDown


    '初始化comctl32.dll,使应用程序支持WinXP界面风格
    Call InitCommonControls

End Sub

Private Sub Form_KeyDown(KeyCode As Integer, Shift As Integer)
    If m_Playing Then
        If TmrGame.Enabled Then
            Select Case KeyCode
            Case KeyLeft
                Call pvDoMoveH(-1)

            Case KeyRight
                Call pvDoMoveH(1)

            Case KeyRot
                Call pvDoRotate

            Case KeyDown
                If FastDown Then
                    '直到不能落下为止
                    Do While pvDoMoveDown()
                    Loop
                Else
                    Call pvDoMoveDown
                End If

            End Select
        End If
    End If

End Sub

Private Sub Form_Load()
    '得到格子大小
    With PicGame
        m_BoxWidth = .ScaleWidth / m_Col
        m_BoxHeight = .ScaleHeight / m_Line
    End With

    m_Playing = False
    Speed = 1
    m_NextIndex = -1 '没有下一个方块

    '更新PicGame
    Call pvRefresh

    '更新PicNext
    Call pvRefreshNext

    '更新状态显示
    Call pvUpdataStatus

End Sub

Private Sub mnuAbout_Click()
    Dim TempStr As String
    TempStr = TempStr & "产品:" & App.ProductName & vbCrLf
    TempStr = TempStr & "版本:" & App.Major & "." & App.Minor & "." & App.Revision & vbCrLf
    TempStr = TempStr & "作者:" & App.CompanyName & vbCrLf
    TempStr = TempStr & "版权:" & App.LegalCopyright & vbCrLf
    TempStr = TempStr & "说明:" & App.FileDescription & vbCrLf
    MsgBox TempStr, vbInformation, "关于" & App.Title
End Sub

Private Sub mnuExit_Click()
    Unload Me
End Sub

Private Sub mnuOption_Click()
    Call FrmOption.DoModal(Me)
    Call pvRefreshNext
End Sub

Private Sub PicGame_Paint()
    Call pvPaint(PicGame.hDC)
End Sub

Private Sub TmrGame_Timer()
    '若没有进行游戏
    If m_Playing = False Then
        TmrGame.Enabled = False
        Exit Sub
    End If

    '下移一格
    Call pvDoMoveDown

End Sub

'取得/设置 速度
Public Property Get Speed() As Long
    Speed = m_Speed
End Property

Public Property Let Speed(ByVal RHS As Long)
    Dim nItv As Long 'Timer控件的时间间隔

    Debug.Assert RHS > 0

    m_Speed = RHS

    '计算间隔
    nItv = 500 / m_Speed
    If nItv < 1 Then nItv = 1
    TmrGame.Interval = nItv

    '更新速度文本框
    TxtSpeed.Text = m_Speed

End Property

按键提示:[键盘按键]

FrmOption.frm
VERSION 5.00
Begin VB.Form FrmOption 
   BorderStyle     =   3  'Fixed Dialog
   Caption         =   "选项"
   ClientHeight    =   3225
   ClientLeft      =   45
   ClientTop       =   330
   ClientWidth     =   4410
   HasDC           =   0   'False
   Icon            =   "FrmOption.frx":0000
   LinkTopic       =   "Form1"
   LockControls    =   -1  'True
   MaxButton       =   0   'False
   MinButton       =   0   'False
   ScaleHeight     =   3225
   ScaleWidth      =   4410
   ShowInTaskbar   =   0   'False
   StartUpPosition =   1  '所有者中心
   Begin VB.CheckBox ChkShowNext 
      Caption         =   "显示下一个方块(&N)"
      Height          =   300
      Left            =   2190
      TabIndex        =   4
      Top             =   780
      Width           =   2100
   End
   Begin VB.CheckBox ChkFastDown 
      Caption         =   "立即落下(&F)"
      Height          =   300
      Left            =   2190
      TabIndex        =   3
      Top             =   240
      Width           =   1500
   End
   Begin VB.Frame FraRotate 
      Caption         =   "旋转方向(&R)"
      Height          =   1005
      Left            =   120
      TabIndex        =   2
      Top             =   120
      Width           =   1755
      Begin VB.PictureBox PicRotate 
         BorderStyle     =   0  'None
         HasDC           =   0   'False
         Height          =   735
         Left            =   120
         ScaleHeight     =   735
         ScaleWidth      =   1455
         TabIndex        =   14
         Top             =   240
         Width           =   1455
         Begin VB.OptionButton OptRotate 
            Caption         =   "顺时钟"
            Height          =   300
            Index           =   0
            Left            =   120
            TabIndex        =   16
            Top             =   0
            Value           =   -1  'True
            Width           =   1200
         End
         Begin VB.OptionButton OptRotate 
            Caption         =   "逆时钟"
            Height          =   300
            Index           =   1
            Left            =   120
            TabIndex        =   15
            Top             =   360
            Width           =   1200
         End
      End
   End
   Begin VB.Frame FraKey 
      Caption         =   "按键(&K)"
      Height          =   1800
      Left            =   150
      TabIndex        =   5
      Top             =   1290
      Width           =   2400
      Begin VB.TextBox TxtKeyDown 
         Height          =   300
         Left            =   900
         Locked          =   -1  'True
         TabIndex        =   13
         Text            =   "TxtKeyDown"
         Top             =   1350
         Width           =   1275
      End
      Begin VB.TextBox TxtKeyRot 
         Height          =   300
         Left            =   900
         Locked          =   -1  'True
         TabIndex        =   11
         Text            =   "TxtKeyRot"
         Top             =   990
         Width           =   1275
      End
      Begin VB.TextBox TxtKeyRight 
         Height          =   300
         Left            =   900
         Locked          =   -1  'True
         TabIndex        =   9
         Text            =   "TxtKeyRight"
         Top             =   630
         Width           =   1275
      End
      Begin VB.TextBox TxtKeyLeft 
         Height          =   300
         Left            =   900
         Locked          =   -1  'True
         TabIndex        =   7
         Text            =   "TxtKeyLeft"
         Top             =   270
         Width           =   1275
      End
      Begin VB.Label LblKeyDown 
         AutoSize        =   -1  'True
         Caption         =   "落下"
         Height          =   180
         Left            =   210
         TabIndex        =   12
         Top             =   1410
         Width           =   360
      End
      Begin VB.Label LblKeyRot 
         AutoSize        =   -1  'True
         Caption         =   "旋转"
         Height          =   180
         Left            =   210
         TabIndex        =   10
         Top             =   1050
         Width           =   360
      End
      Begin VB.Label LblKeyRight 
         AutoSize        =   -1  'True
         Caption         =   "右移"
         Height          =   180
         Left            =   210
         TabIndex        =   8
         Top             =   690
         Width           =   360
      End
      Begin VB.Label LblKeyLeft 
         AutoSize        =   -1  'True
         Caption         =   "左移"
         Height          =   180
         Left            =   210
         TabIndex        =   6
         Top             =   330
         Width           =   360
      End
   End
   Begin VB.CommandButton CmdCancel 
      Cancel          =   -1  'True
      Caption         =   "取消"
      Height          =   360
      Left            =   2880
      TabIndex        =   1
      Top             =   2730
      Width           =   1200
   End
   Begin VB.CommandButton CmdOK 
      Caption         =   "确定"
      Default         =   -1  'True
      Height          =   360
      Left            =   2880
      TabIndex        =   0
      Top             =   2280
      Width           =   1200
   End
End
Attribute VB_Name = "FrmOption"
Attribute VB_GlobalNameSpace = False
Attribute VB_Creatable = False
Attribute VB_PredeclaredId = True
Attribute VB_Exposed = False
Option Explicit

Private Declare Function MapVirtualKey Lib "user32" Alias "MapVirtualKeyA" (ByVal wCode As Long, ByVal wMapType As Long) As Long
Private Declare Function GetKeyNameTextA Lib "user32" (ByVal lParam As Long, ByRef lpBuffer As Any, ByVal nSize As Long) As Long

Private m_Owner As FrmMain '父窗体

Private m_IsOK As Boolean

'将虚拟键码转为字符串
Private Function pvGetKeyName(ByVal KeyCode As Integer) As String
    Dim vCode As Long
    Dim nScan As Long
    Dim lParam As Long
    Dim Buf() As Byte
    Dim Rc As Long

    '计算GetKeyNameText所需要的lParam
    vCode = CLng(KeyCode) And &HFFFF&   '计算虚拟键码
    nScan = MapVirtualKey(vCode, 0)     '虚拟键码 To 扫描码
    lParam = (nScan And &HFF) * &H10000 '扫描码 To lParam

    '分配字符串缓冲区
    Rc = &H100
    ReDim Buf(0 To Rc - 1)

    Rc = GetKeyNameTextA(vCode, Buf(0), Rc)
    If Rc > 0 Then '转换成功
        pvGetKeyName = CStr(KeyCode) & "(" & StrConv(LeftB(Buf, Rc), vbUnicode) & ")"
    Else '转换失败
        pvGetKeyName = CStr(KeyCode)
    End If

End Function

Private Sub CmdCancel_Click()
    Unload Me
End Sub

Private Sub CmdOK_Click()
    With m_Owner
        .RotMode = OptRotate(1).Value
        .FastDown = ChkFastDown.Value
        .ShowNext = ChkShowNext.Value
        .KeyLeft = Val(TxtKeyLeft.Text)
        .KeyRight = Val(TxtKeyRight.Text)
        .KeyRot = Val(TxtKeyRot.Text)
        .KeyDown = Val(TxtKeyDown.Text)
    End With

    m_IsOK = True
    Unload Me

End Sub

Private Sub Form_Load()
    Debug.Assert Not (m_Owner Is Nothing)

    With m_Owner
        OptRotate(.RotMode And 1).Value = True
        ChkFastDown.Value = .FastDown And 1
        ChkShowNext.Value = .ShowNext And 1
        TxtKeyLeft.Text = pvGetKeyName(.KeyLeft)
        TxtKeyRight.Text = pvGetKeyName(.KeyRight)
        TxtKeyRot.Text = pvGetKeyName(.KeyRot)
        TxtKeyDown.Text = pvGetKeyName(.KeyDown)
    End With

End Sub

Private Sub TxtKeyDown_KeyDown(KeyCode As Integer, Shift As Integer)
    TxtKeyDown.Text = pvGetKeyName(KeyCode)
    KeyCode = 0
End Sub

Private Sub TxtKeyDown_KeyPress(KeyAscii As Integer)
    KeyAscii = 0
End Sub

Private Sub TxtKeyLeft_KeyDown(KeyCode As Integer, Shift As Integer)
    TxtKeyLeft.Text = pvGetKeyName(KeyCode)
    KeyCode = 0
End Sub

Private Sub TxtKeyLeft_KeyPress(KeyAscii As Integer)
    KeyAscii = 0
End Sub

Private Sub TxtKeyRight_KeyDown(KeyCode As Integer, Shift As Integer)
    TxtKeyRight.Text = pvGetKeyName(KeyCode)
    KeyCode = 0
End Sub

Private Sub TxtKeyRight_KeyPress(KeyAscii As Integer)
    KeyAscii = 0
End Sub

Private Sub TxtKeyRot_KeyDown(KeyCode As Integer, Shift As Integer)
    TxtKeyRot.Text = pvGetKeyName(KeyCode)
    KeyCode = 0
End Sub

Private Sub TxtKeyRot_KeyPress(KeyAscii As Integer)
    KeyAscii = 0
End Sub

'显示对话框
Public Function DoModal(ByRef Owner As FrmMain) As Boolean
    Debug.Assert Not (Owner Is Nothing)

    Set m_Owner = Owner
    m_IsOK = False

    '显示对话框
    Me.Show vbModal

    DoModal = m_IsOK

End Function

Betway必威 3

材料:图片名字以及代码里对应

  1、背景图片:tetris.png

  Betway必威 4

  2、失败时的弹出框图片:game-over.png

  Betway必威 5

  3、七种植色彩有些方块图片:

        
I.png:Betway必威 6

    J.png:Betway必威 7

    L.png:Betway必威 8

    O.png:Betway必威 9

    S.png:Betway必威 10

    T.png:Betway必威 11

    Z.png:Betway必威 12

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>俄罗斯方块 — 经典完整版</title>
    <link rel="stylesheet" href="css/tetris.css"/>
    <script src="js/shapes.js"></script>
    <script src="js/tetris.js"></script> 
  </head>
  <body>
    <div class="playground">
      <p>SCORE:0</p>
      <p>LINES:0</p>
      <p>LEVEL:1</p>
    </div>       
  </body>
</html>

CSS代码

.playground {
  width: 525px;
  height: 550px;
  margin: 20px auto 0 auto;
  position: relative;
  background-image:url("tetris.png");
}
.playground img { position: absolute;}
.playground p {font-size: 30px;
        font-family: 'SimHei';
        font-weight: bold;
        color: #667799;
        position: absolute;
        left:305px;
        top:120px;
}
.playground p+p { top:176px; }
.playground p+p+p { top:232px; }     

JAVASCRIPT代码:分点儿段子从详细步骤解释

  1、tetris.js

window.$=HTMLElement.prototype.$=function(selector){
  return (this==window?document:this).querySelectorAll(selector);
}
var tetris={
  RN:20,//总行数
  CN:10,//总列数
  CSIZE:26,//每个格子的宽高都是26px
  OFFSET_X:15,//每个单元格的左侧都要加15px
  OFFSET_y:15,//每个单元格的上面都要加15px
  pg:null,//保存游戏主界面对象
  currShape:null,//专门保存正在移动的图形对象
  nextShape:null,//八、专门保存下一个图形
  interval:500,//每秒重绘一次==>下落的速度
  timer:null,
  wall:[],//六、保存所有停止的下落的方块
  state:1,//十、保存游戏当前状态
  STATE_RUNNING:1,//十、游戏正在运行
  STATE_GAMEOVER:0,//十、游戏结束
  STATE_PAUSE:2,//十、游戏暂停
  IMG_GAMEOVER:"img/game-over.png",
  IMG_PAUSE:"img/pause.png",
  SCORES:[0,10,50,80,200],//十三,要加的分数档位
  score:0,//十三、当前总分
  lines:0,//十三、当前总行数
  //十、为游戏添加不同状态的图片
  paintState:function(){//根据当前游戏状态,为游戏添加不同的图片
    var img=new Image();
    switch(this.state){
    //如果当前状态是STATE_GAMEOVER
    case this.STATE_GAMEOVER:
    //   img.src设置为IMG_GAMEOVER
      img.src=this.IMG_GAMEOVER;
      break;
    //如果当前状态是STATE_PAUSE
    case this.STATE_PAUSE:
    //   img.src设置为IMG_PAUSE
      img.src=this.IMG_PAUSE;
    }
    //将img追加到pg中
    this.pg.appendChild(img);
  },
  init:function(){
    this.pg=$(".playground")[0];
    //创建一个随机图形的对象存在currShape中
    this.currShape=this.randomShape();
    this.nextShape=this.randomShape();
    //六、将wall数组初始化为RN的空数组对象
    for(var i=0;i<this.RN;i++){
      this.wall[i]=[];
    }
    this.score=0;//十六、初始化
    this.lines=0;//十六、初始化
    this.state=1;//十六、初始化
    this.paint();
    //三、
    this.timer=setInterval(function(){
      //调用tetris的drop方法
      tetris.drop();
      //再调用tetris的paint方法;
      tetris.paint();
    },this.interval);
    //十一、
    document.onkeydown=function(){
      var e=window.event||arguments[0];
      switch(e.keyCode){
        case 37: tetris.moveL();break;//左
        case 39: tetris.moveR();break;//右
        case 40: tetris.drop();break;//下
        //十五步、
        case 38: tetris.rotateR();break;//上键控制右边旋转
        case 90: tetris.rotateL();break;//字母Z键控制控制左边旋转
        //十六步
        case 80: tetris.pause();break;//字母P键:暂停
        case 81: tetris.gameOver();break;//字母Q:结束游戏
        case 67: tetris.myContinue();break;//字母C,在暂停后有效:暂停后,继续游戏
        case 83: //游戏结束后,重新开始
          if(this.state==this.STATE_GAMEOVER){
            tetris.init();
          }//字母S键:重新开始游戏
      }
    }
  },//init的结束
  //十六、暂停,开始,继续、结束
  gameOver:function(){
    this.state=this.STATE_GAMEOVER;
    clearInterval(this.timer);
    this.timer=null;
    this.paint();
  },
  pause:function(){
    if(this.state==this.STATE_RUNNING){
      this.state=this.STATE_PAUSE;
    }
  },
  myContinue:function(){
    if(this.state==this.STATE_PAUSE){
      this.state=this.STATE_RUNNING;
    }
  },
  //十五、变形
  rotateR:function(){//按键上,向右旋转
    if(this.state==this.STATE_RUNNING){//十六
      this.currShape.rotateR();
      if(this.outOfBounds()||this.hit()){//验证不通过
        this.currShape.rotateL();
      }
    }
  },
  rotateL:function(){//按键Z,向左旋转
    if(this.state==this.STATE_RUNNING){
      this.currShape.rotateL();
      if(this.outOfBounds()||this.hit()){//验证不通过
        this.currShape.rotateR();
      }
    }
  },
  //十一、
  moveR:function(){
    this.currShape.moveR();
    if(this.outOfBounds()||this.hit()){//验证不通过
      this.currShape.moveL();
    }
  },
  moveL:function(){
    this.currShape.moveL();
    if(this.outOfBounds()||this.hit()){//验证不通过
      this.currShape.moveR();
    }
  },
  outOfBounds:function(){//检查当前图形是否越界
    //当前shape中任意一个单元格的col<0或>=CN
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      if(cells[i].col<0||cells[i].col>=this.CN){
        return true;
      }
    }
    return false;
  },
  hit:function(){//检查当前图形是否碰撞
  //当前shape中任意一个单元格在wall中相同位置有格
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      if(this.wall[cells[i].row][cells[i].col]){
        return true;
      }
    }
    return false;
  },
  //四、重绘所有的格子,分数等的方法
  paint:function(){
    //把所有的img格子删除,再重绘
        /*结尾的4个/<img(.*?){4}>*/
    this.pg.innerHTML=this.pg.innerHTML.replace(/<img(.*?)>/g,"");
    this.paintShape();
    this.paintWall();
    this.paintNext();
    //十三
    this.paintScore();
    this.paintState();//十、
  },
  //十三、计分
  paintScore:function(){//找到span元素
    //第一个span中放this.score
    $("span")[0].innerHTML=this.score;
    //第二个放this.lines
    $("span")[1].innerHTML=this.lines;
  },
  drop:function(){
    //判断能否下落
    if(this.state==this.STATE_RUNNING){//该行是第十六步加的
      if(this.canDrop()){
        this.currShape.drop();
      }else{//六、否则
        //六、如果不能下落,就将图形中每个cell,放入wall数组中
        this.landIntoWall();
        //十二、消行、并计分
        var ln=this.deleteLines();//消除并返回本次删除的行数
        //十三、计分
        this.score+=this.SCORES[ln];
        this.lines+=ln;
        //九、如果游戏没有结束才。。
        if(!this.isGameOver()){
          //七、将等待的nextShape,换到currShape
          this.currShape=this.nextShape;
          //七、
          this.nextShape=this.randomShape();
        }else{//十、否则,一级结束
          clearInterval(this.timer);
          this.timer=null;
          this.state=this.STATE_GAMEOVER;
          this.paint();//手动绘制一次
        }
      }
    }
  },
  //十二、消行,并计分
  deleteLines:function(){//检查wall中每一行是否要消除
    //遍历wall中每一行,定义lines变量存本次共删除的行数line
    for(var row=0,lines=0;row<this.RN;row++){
      //如果当前行是满的:isFull(row)
      if(this.isFull(row)){
        // 就删除当前行:
        this.deleteL(row);
        // 每删除一行,lines++
        lines++;
      }
    }
    return lines;
  },
  isFull:function(row){//判断指定行是否已满
    //取出wall中第row行,存在line变量中
    var line=this.wall[row];    
      //遍历line中每个cell
    for(var c=0;c<this.CN;c++){
      // 只要当前cell无效
      if(!line[c]){
        return false;
      }
    }//遍历结束后
    return true;
  },
  deleteL:function(row){//删除指定行,并将其之上所有的cell下移
    this.wall.splice(row,1);//只删除一行
    this.wall.unshift([]);//顶部压入一个新空行
    //从row行开始,向上遍历每一行
    for(var r=row;r>0;r--){
      //   从0开始遍历当前行每个格
      for(var c=0;c<this.CN;c++){
      //     如果当前格有效
        if(this.wall[r][c]){
        //       将当前格的row++
          this.wall[r][c].row++;
        }
      }
    }
  },
  //九、判断游戏是否结束
  isGameOver:function(){
    //获取nextShape中所有cell,保存在cells中
    var cells=this.nextShape.cells;
    //遍历cells中每个cell
    for(var i=0;i<cells.length;i++){
      //取出wall中和当前cell相同row,col位置的格子
      var cell=this.wall[cells[i].row][cells[i].col];
      //只要碰到有效的
      if(cell){
        return true;
      }
    }//for的结束
    return false;
  },
  //八、
  paintNext:function(){
    var cells=this.nextShape.cells;
    for(var i=0;i<cells.length;i++){
      //先将当前cell的row+1,存在r变量中
      var r=cells[i].row+1;
      //再将当前cell的col+11,存在c变量中
      var c=cells[i].col+11;
      var x=c*this.CSIZE+this.OFFSET_X;
      var y=r*this.CSIZE+this.OFFSET_y;
      var img=new Image();
      img.src=cells[i].img;
      img.style.left=x+"px";
      img.style.top=y+"px";
      this.pg.appendChild(img);
    }
  },
  //七、
  paintWall:function(){
    //七、遍历二维数组wall中每个格
    for(var r=0;r<this.RN;r++){
      for(var c=0;c<this.CN;c++){
        var cell=this.wall[r][c];
    //   如果当前cell有效
        if(cell){
          var x=cell.col*this.CSIZE+this.OFFSET_X;
          var y=cell.row*this.CSIZE+this.OFFSET_y;
          var img=new Image();
          img.src=cell.img;
          img.style.left=x+"px";
          img.style.top=y+"px";
          this.pg.appendChild(img);
        }
      }
    }
  },
  //六、把所有停止下落的方块放入wall中
  landIntoWall:function(){
    //遍历当前图形中每个cells
    // 每遍历一个cell
    // 就将cell放入wall中相同row,col的位置:this.wall[?][?]=?
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      this.wall[cells[i].row][cells[i].col]=cells[i];
    }
  },
  //五、//判断是否继续可以下落
  canDrop:function(){
    //遍历当前currShape中的cells
    //   只要发现任意一个的cell的row==RN-1
    //   就返回false
    //   
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      if(cells[i].row==this.RN-1){
        return false;
      }//七、wall中,当前cell的下一行位置有效
      if(this.wall[cells[i].row+1][cells[i].col]){
        return false
      }
    }//遍历结束后
    //七、currShape中,任意一个cell的下方有wall中的cell
    return true;
  },
  //4、随机生成一种图形--二
  randomShape:function(){
    switch(parseInt(Math.random()*7)){
      case 0: return new O();
      case 1: return new L();
      case 2: return new J();
      case 3: return new S();
      case 4: return new Z();
      case 5: return new I();
      case 6: return new T();
    }
  },
  //3
  paintShape:function(){//3、专门绘制当前图形的方法
    var cells=this.currShape.cells;
    for(var i=0;i<cells.length;i++){
      var x=cells[i].col*this.CSIZE+this.OFFSET_X;
      var y=cells[i].row*this.CSIZE+this.OFFSET_y;
      var img=new Image();
      img.src=cells[i].img;
      img.style.left=x+"px";
      img.style.top=y+"px";
      this.pg.appendChild(img);
    }
  },//paintShape的结束
}//tetris结束
window.onload=function(){
  tetris.init();
}

  2、shapes.js

function Cell(row,col,img){
  this.row=row;
  this.col=col;
  this.img=img;
  //三下落
  if(!Cell.prototype.drop){
    Cell.prototype.drop=function(){
      this.row++;
    }
  }
  if(!Cell.prototype.moveR){//十一
    Cell.prototype.moveR=function(){
      this.col++;
    }
  }
  if(!Cell.prototype.moveL){//十一
    Cell.prototype.moveL=function(){
      this.col--;
    }
  }
}
//十四、下落的各种变化状态
function State(r0,c0,r1,c1,r2,c2,r3,c3){
  //第0个cell相对于参照cell的下标偏移量
  this.r0=r0;
  this.c0=c0;
  //第1个cell相对于参照cell的下标偏移量
  this.r1=r1;
  this.c1=c1;
  //第2个cell相对于参照cell的下标偏移量
  this.r2=r2;
  this.c2=c2;
  //第3个cell相对于参照cell的下标偏移量
  this.r3=r3;
  this.c3=c3;
}
function Shape(img,orgi){
  this.img=img;
  this.states=[];//十四、保存每个图形不同状态的数组
  this.orgi=orgi;//十四、以它为固定不变的参照点,去旋转变形,就是数组states的下标
  this.statei=0;//默认所有图形的最初状态都是0
  //三
  if(!Shape.prototype.drop){
    Shape.prototype.drop=function(){
      //遍历当前对象的cells中的每个cell对象
      //  调用当前cell对象的drop方法
      for(var i=0;i<this.cells.length;i++){
        this.cells[i].drop();
      }
    }
  }
  if(!Shape.prototype.moveR){//十一
    Shape.prototype.moveR=function(){
      //遍历当前对象的cells中的每个cell对象
      for(var i=0;i<this.cells.length;i++){
      //  调用当前cell对象的drop方法
        this.cells[i].moveR();
      }
    }
  }
  if(!Shape.prototype.moveL){//十一
    Shape.prototype.moveL=function(){
      //遍历当前对象的cells中的每个cell对象
      for(var i=0;i<this.cells.length;i++){
      //  调用当前cell对象的drop方法
        this.cells[i].moveL();
      }
    }
  }
  //十五
  if(!Shape.prototype.rotateR){
    Shape.prototype.rotateR=function(){
      //if(Object.getPrototypeOf(this)!=O.prototype){
      if(this.constructor!=O){
        this.statei++;
        this.statei>=this.states.length&&(this.statei=0);
        //获得下一个状态对象
        var state=this.states[this.statei];
        var orgr=this.cells[this.orgi].row;
        var orgc=this.cells[this.orgi].col;
        //遍历当前图形中的每个cell
        //按state中偏移量,设置每个cell的新位置
        for(var i=0;i<this.cells.length;i++){
          this.cells[i].row=orgr+state["r"+i];
          this.cells[i].col=orgc+state["c"+i];
        }//for的结束
      }//if的结束
    }//function的结束
  }//if的结束
  if(!Shape.prototype.rotateL){
    Shape.prototype.rotateL=function(){
      //if(Object.getPrototypeOf(this)!O.prototype){
      if(this.constructor!=O){
        this.statei--;
        this.statei<0&&(this.statei=this.states.length-1);
        //获得下一个状态对象
        var state=this.states[this.statei];
        var orgr=this.cells[this.orgi].row;
        var orgc=this.cells[this.orgi].col;
        //遍历当前图形中的每个cell
        //按照state中偏移量,设置每个cell的心位置
        for(var i=0;i<this.cells.length;i++){
          this.cells[i].row=orgr+state["r"+i];
          this.cells[i].col=orgc+state["c"+i];
        }//for的结束
      }//if的结束
    }//function的结束
  }//if的结束
}//function Shape(img,orgi)的结束
//二
function O(){//1
  Shape.call(this,"img/O.png");
  if(!Shape.prototype.isPrototypeOf(O.prototype)){
    Object.setPrototypeOf(O.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,4,this.img),new Cell(0,5,this.img),
    new Cell(1,4,this.img),new Cell(1,5,this.img)
  ];
}
function T(){//2
  Shape.call(this,"img/T.png",1);
  if(!Shape.prototype.isPrototypeOf(T.prototype)){
    Object.setPrototypeOf(T.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(1,4,this.img)
  ];
  //十四
  this.states[0]=new State(0,-1, 0,0, 0,1, 1,0);
  this.states[1]=new State(-1,0, 0,0, 1,0, 0,-1);
  this.states[2]=new State(0,1, 0,0, 0,-1, -1,0);
  this.states[3]=new State(1,0, 0,0, -1,0, 0,1);
            //  [0]  [1] [2] [3]
}

function I(){//3
  Shape.call(this,"img/I.png",1);
  if(!Shape.prototype.isPrototypeOf(I.prototype)){
    Object.setPrototypeOf(I.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(0,6,this.img)
  ];
  this.states[0]=new State(0,-1, 0,0, 0,1, 0,2);
            //  [0]  [1] [2] [3]
  this.states[1]=new State(-1,0, 0,0, 1,0, 2,0);
}
function S(){//4
  Shape.call(this,"img/S.png",3);
  if(!Shape.prototype.isPrototypeOf(S.prototype)){
    Object.setPrototypeOf(S.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,4,this.img),new Cell(0,5,this.img),
    new Cell(1,3,this.img),new Cell(1,4,this.img)
  ];
  //十四
  this.states[0]=new State(-1,0, -1,1, 0,-1, 0,0);
  this.states[1]=new State(0,1, 1,1, -1,0, 0,0);
            //  [0]  [1] [2] [3]
}
function Z(){//5
  Shape.call(this,"img/Z.png",1);
  if(!Shape.prototype.isPrototypeOf(Z.prototype)){
    Object.setPrototypeOf(Z.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(1,4,this.img),new Cell(1,5,this.img)
  ];
  this.states[0]=new State(0,-1, 0,0, 1,0, 1,1);
  this.states[1]=new State(-1,0, 0,0, 0,-1, 1,-1);
            //  [0]  [1] [2] [3]
}
function L(){//6
  Shape.call(this,"img/L.png",1);
  if(!Shape.prototype.isPrototypeOf(L.prototype)){
    Object.setPrototypeOf(L.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(1,3,this.img)
  ];
  this.states[0]=new State(0,-1, 0,0, 0,1, 1,-1);
  this.states[1]=new State(-1,0, 0,0, 1,0, -1,-1);
  this.states[2]=new State(0,1, 0,0, 0,-1, -1,1);
  this.states[3]=new State(1,0, 0,0, -1,0, 1,1);
            //  [0]  [1] [2] [3]
}
function J(){//7
  Shape.call(this,"img/J.png",1);
  if(!Shape.prototype.isPrototypeOf(J.prototype)){
    Object.setPrototypeOf(J.prototype,Shape.prototype);//继承
  }
  this.cells=[
    new Cell(0,3,this.img),new Cell(0,4,this.img),
    new Cell(0,5,this.img),new Cell(1,5,this.img)
  ];
  this.states[0]=new State(-1,0, 0,0, 1,-1, 1,0);
  this.states[1]=new State(0,1, 0,0, -1,-1, 0,-1);
  this.states[2]=new State(1,0, 0,0, -1,1, -1,0);
  this.states[3]=new State(0,-1, 0,0, 1,1, 0,1);
            //  [0]  [1] [2] [3]
}

最终效果图如下所示:

Betway必威 13

————————————————————————————>为了生存而改,为了改变如果创造造.

如上就是是稍微编给大家享用的关于基于javascript代码编写的网页版俄罗斯四方。希望大家欢喜。

乃可能感兴趣之文章:

  • JS+Canvas实现之俄罗斯方块游戏整体实例
  • javascript落实俄罗斯四方游戏的笔触和章程
  • 60行js代码实现Betway必威俄罗斯方
  • JS俄罗斯四方,包含圆的计划性意见
  • JS
    俄罗斯方完美注释版代码
  • js实现俄罗斯方块小游戏分享
  • JavaScript落实俄罗斯四方游戏过程分析与源码分享
  • 原生JavaScript编写俄罗斯方
  • Javascript编写俄罗斯四方思路以及实例
  • JS和canvas实现俄罗斯方

相关文章