html--多层俄罗斯方块

最新推荐文章于 2024-07-19 15:32:49 发布
最新推荐文章于 2024-07-19 15:32:49 发布
阅读量414 收藏 5
点赞数 4
分类专栏： html 文章标签： html 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stqer/article/details/139087113
版权 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  body{
  background: #3299CC;
  overflow:hidden;
}
canvas{
	position:absolute;
	top:0;
	left:0;
}
  </style>
 </HEAD>

 <BODY>
 <canvas></canvas>
  <script>
  'use strict';

var tetrominos = [{
    // box
    colors : ['rgb(59,84,165)', 'rgb(118,137,196)', 'rgb(79,111,182)'],
    data : [[0, 0, 0, 0],
         [0, 1, 1, 0],
         [0, 1, 1, 0],
         [0, 0, 0, 0]]
    },
    {
    // stick
    colors : ['rgb(214,30,60)', 'rgb(241,108,107)', 'rgb(236,42,75)'],
    data : [[0, 0, 0, 0],
         [0, 0, 0, 0],
         [1, 1, 1, 1],
         [0, 0, 0, 0]]
    },
    {
    // z
    colors : ['rgb(88,178,71)', 'rgb(150,204,110)', 'rgb(115,191,68)'],
    data : [[0, 0, 0, 0],
         [0, 1, 1, 0],
         [0, 0, 1, 1],
         [0, 0, 0, 0]]
    },
    {
    // T
    colors : ['rgb(62,170,212)', 'rgb(120,205,244)', 'rgb(54,192,240)'],
    data : [[0, 0, 0, 0],
         [0, 1, 1, 1],
         [0, 0, 1, 0],
         [0, 0, 0, 0]]
    },
    {
    // s
    colors : ['rgb(236,94,36)', 'rgb(234,154,84)', 'rgb(228,126,37)'],
    data : [[0, 0, 0, 0],
         [0, 1, 1, 0],
         [1, 1, 0, 0],
         [0, 0, 0, 0]]
    },
    {
    // backwards L
    colors : ['rgb(220,159,39)', 'rgb(246,197,100)', 'rgb(242,181,42)'],
    data : [[0, 0, 1, 0],
          [0, 0, 1, 0],
          [0, 1, 1, 0],
          [0, 0, 0, 0]]
    },
    {
    // L
    colors : ['rgb(158,35,126)', 'rgb(193,111,173)', 'rgb(179,63,151)'],
    data : [[0, 1, 0, 0],
         [0, 1, 0, 0],
         [0, 1, 1, 0],
         [0, 0, 0, 0]]
    }];

var Tetris = function(x,y,width,height){
    this.posX = x || 0;
    this.posY = y || 0;

    this.width  = width || window.innerWidth;
    this.height = height || window.innerHeight;

    this.bgCanvas = document.createElement('canvas');
    this.fgCanvas = document.createElement('canvas');

    this.bgCanvas.width = this.fgCanvas.width = this.width;
    this.bgCanvas.height = this.fgCanvas.height = this.height;

    this.bgCtx = this.bgCanvas.getContext('2d');
    this.fgCtx = this.fgCanvas.getContext('2d');

    this.bgCanvas.style.left = this.posX + 'px';
    this.bgCanvas.style.top = this.posY + 'px';

    this.fgCanvas.style.left = this.posX + 'px';
    this.fgCanvas.style.top = this.posY + 'px';

    document.body.appendChild(this.bgCanvas);
    document.body.appendChild(this.fgCanvas);
    this.init();
};

Tetris.prototype.init = function(){
    this.curPiece = {
        data : null,
        colors : [0,0,0],
        x : 0,
        y : 0,
    };

    this.lastMove = Date.now();
    this.curSpeed = 50+Math.random()*50;
    this.unitSize = 20;
    this.linesCleared = 0;
    this.level = 0;
    this.loseBlock = 0;

    // init the board
    this.board = [];
    this.boardWidth =  Math.floor(this.width / this.unitSize);
    this.boardHeight = Math.floor(this.height / this.unitSize);

    var board       = this.board,
        boardWidth  = this.boardWidth,
        boardHeight = this.boardHeight,
        halfHeight  = boardHeight/2,
        curPiece    = this.curPiece,
        x = 0, y = 0;

     // init board
    for (x = 0; x <= boardWidth; x++) {
        board[x] = [];
        for (y = 0; y <= boardHeight; y++) {

             board[x][y] = {
                data: 0,
                colors: ['rgb(0,0,0)', 'rgb(0,0,0)', 'rgb(0,0,0)']
            };

            if(Math.random() > 0.15 && y > halfHeight){
                board[x][y] = {
                    data: 1,
                    colors: tetrominos[Math.floor(Math.random() * tetrominos.length)].colors
                };
            }
        }
    }

    // collapse the board a bit
    for (x = 0; x <= boardWidth; x++) {
        for (y = boardHeight-1; y > -1; y--) {

            if(board[x][y].data === 0 && y > 0){
                for(var yy = y; yy > 0; yy--){
                    if(board[x][yy-1].data){

                        board[x][yy].data = 1;
                        board[x][yy].colors = board[x][yy-1].colors;

                        board[x][yy-1].data = 0;
                        board[x][yy-1].colors = ['rgb(0,0,0)', 'rgb(0,0,0)', 'rgb(0,0,0)'];
                    }
                } 
            }
        }
    }

    var self = this;

    window.addEventListener('keydown', function (e) {
        switch (e.keyCode) {
            case 37:
                if (self.checkMovement(curPiece, -1, 0)) {
                    curPiece.x--;
                }
                break;
            case 39:
                if (self.checkMovement(curPiece, 1, 0)) {
                    curPiece.x++;
                }
                break;
            case 40:
                if (self.checkMovement(curPiece, 0, 1)) {
                    curPiece.y++;
                }
                break;
            case 32:
            case 38:
                curPiece.data = self.rotateTetrimono(curPiece);
                break;
            }
    });

    // render the board
    this.checkLines();
    this.renderBoard();

    // assign the first tetri
    this.newTetromino();
    this.update();
};


Tetris.prototype.update = function() {
    var curPiece = this.curPiece;

   if (!this.checkMovement(curPiece, 0, 1)) {
       if (curPiece.y < -1) {
           // you lose
           this.loseScreen();
           return true;
       } else {
           this.fillBoard(curPiece);
           this.newTetromino();
       }
   } else {
       if (Date.now() > this.lastMove) {
           this.lastMove = Date.now() + this.curSpeed;
           if (this.checkMovement(curPiece, 0, 1)) {
               curPiece.y++;
           } else {
               this.fillBoard(curPiece);
               this.newTetromino();
           }
       }
   }

   this.render();

   var self = this;
   requestAnimationFrame(function(){self.update();});
};

// render only the board.
Tetris.prototype.renderBoard = function(){
    var canvas      = this.bgCanvas,
        ctx         = this.bgCtx,
        unitSize    = this.unitSize,
        board       = this.board,
        boardWidth  = this.boardWidth,
        boardHeight = this.boardHeight;

    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (var x = 0; x <= boardWidth; x++) {
        for (var y = 0; y <= boardHeight; y++) {
            if (board[x][y].data !== 0) {
                var bX = (x * unitSize),
                    bY = (y * unitSize);

                ctx.fillStyle = board[x][y].colors[0];
                ctx.fillRect(bX, bY, unitSize, unitSize);

                ctx.fillStyle = board[x][y].colors[1];
                ctx.fillRect(bX+2, bY+2, unitSize-4, unitSize-4);

                ctx.fillStyle = board[x][y].colors[2];
                ctx.fillRect(bX+4, bY+4, unitSize-8, unitSize-8);
            }
        }
   }
};

// Render the current active piece
Tetris.prototype.render = function() {
    var canvas      = this.fgCanvas,
        ctx         = this.fgCtx,
        unitSize    = this.unitSize,
        curPiece    = this.curPiece;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (var x = 0; x < 4; x++) {
       for (var y = 0; y < 4; y++) {
           if (curPiece.data[x][y] === 1) {
               var xPos = ((curPiece.x + x) * unitSize),
                   yPos = ((curPiece.y + y) * unitSize);

               if (yPos > - 1) {
                    ctx.fillStyle = curPiece.colors[0];
                    ctx.fillRect(xPos, yPos, unitSize, unitSize);

                    ctx.fillStyle = curPiece.colors[1];
                    ctx.fillRect(xPos+2, yPos+2, unitSize-4, unitSize-4);

                    ctx.fillStyle = curPiece.colors[2];
                    ctx.fillRect(xPos+4, yPos+4, unitSize-8, unitSize-8);
               }
           }
       }
    }
};

// Make sure we can mov where we want.
Tetris.prototype.checkMovement = function(curPiece, newX, newY) {
    var piece       = curPiece.data,
        posX        = curPiece.x,
        posY        = curPiece.y,
        board       = this.board,
        boardWidth  = this.boardWidth,
        boardHeight = this.boardHeight;

   for (var x = 0; x < 4; x++) {
       for (var y = 0; y < 4; y++) {
           if (piece[x][y] === 1) {

               if (!board[posX + x + newX]) {
                   board[posX + x + newX] = [];
               }

               if (!board[posX + x + newX][y + posY + newY]) {
                   board[posX + x + newX][y + posY + newY] = {
                       data: 0
                   };
               }

               if (posX + x + newX >= boardWidth || posX + x + newX < 0 || board[posX + x + newX][y + posY + newY].data == 1) {
                   return false;
               }

               if (posY + y + newY > boardHeight) {
                   return false;
               }

           }
       }
   }
   return true;
};

// checks for completed lines and clears them
Tetris.prototype.checkLines = function() {
    var board           = this.board,
        boardWidth      = this.boardWidth,
        boardHeight     = this.boardHeight,
        linesCleared    = this.linesCleared,
        level           = this.level,
        y               = boardHeight+1;

   while (y--) {
       var x = boardWidth,
           lines = 0;

       while (x--) {
           if (board[x][y].data === 1) {
               lines++;
           }
       }

       if (lines === boardWidth) {
           linesCleared++;
           level = Math.round(linesCleared / 20) * 20;

           var lineY = y;
           while (lineY) {
               for (x = 0; x <= boardWidth; x++) {
                   if (lineY - 1 > 0) {
                       board[x][lineY].data = board[x][lineY - 1].data;
                       board[x][lineY].colors = board[x][lineY - 1].colors;
                   }
               }
               lineY--;
           }
           y++;
       }
   }
};

// Lose animation
Tetris.prototype.loseScreen = function() {
    var ctx         = this.bgCtx,
        unitSize    = this.unitSize,
        boardWidth  = this.boardWidth,
        boardHeight = this.boardHeight,
        y           = boardHeight - this.loseBlock;

    for(var x = 0; x < boardWidth; x++){
        var bX = (x * unitSize),
            bY = (y * unitSize);

        ctx.fillStyle = 'rgb(80,80,80)';
        ctx.fillRect(bX, bY, unitSize, unitSize);

        ctx.fillStyle = 'rgb(150,150,150)';
        ctx.fillRect(bX+2, bY+2, unitSize-4, unitSize-4);

        ctx.fillStyle = 'rgb(100,100,100)';
        ctx.fillRect(bX+4, bY+4, unitSize-8, unitSize-8);
    }

    if(this.loseBlock <= (boardHeight+1)){
        this.loseBlock++;

        var self = this;
        requestAnimationFrame(function(){self.loseScreen();});
    }else{
        this.init();
    }
};

// adds the piece as part of the board
Tetris.prototype.fillBoard = function(curPiece) {
    var piece = curPiece.data,
        posX  = curPiece.x,
        posY  = curPiece.y,
        board = this.board;

    for (var x = 0; x < 4; x++) {
       for (var y = 0; y < 4; y++) {
           if (piece[x][y] === 1) {
               board[x + posX][y + posY].data = 1;
               board[x + posX][y + posY].colors = curPiece.colors;
           }
       }
    }

    this.checkLines();
    this.renderBoard();
};

// rotate a piece
Tetris.prototype.rotateTetrimono = function(curPiece) {
   var rotated = [];

   for (var x = 0; x < 4; x++) {
       rotated[x] = [];
       for (var y = 0; y < 4; y++) {
           rotated[x][y] = curPiece.data[3 - y][x];
       }
   }

   if (!this.checkMovement({
       data: rotated,
       x: curPiece.x,
       y: curPiece.y
   }, 0, 0)) {
       rotated = curPiece.data;
   }

   return rotated;
};

// assign the player a new peice
Tetris.prototype.newTetromino = function() {
    var pieceNum = Math.floor(Math.random() * tetrominos.length),
        curPiece = this.curPiece;

    curPiece.data    = tetrominos[pieceNum].data;
    curPiece.colors  = tetrominos[pieceNum].colors;
    curPiece.x       = Math.floor(Math.random()*(this.boardWidth-curPiece.data.length+1));
    curPiece.y       = -4;
};

var width = window.innerWidth,
    boardDiv = 20*Math.round(window.innerWidth/20),
    boards = 8,
    bWidth = boardDiv/boards,
    tetrisInstances = [];

for(var w = 0; w < boards; w++){
  tetrisInstances.push(new Tetris(20 * Math.round((w*bWidth)/20), 0, bWidth));
}

  </script>
 </BODY>
</HTML>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

fo安方
关注
  • 4
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于java的俄罗斯方块小游戏设计(含源文件)
【完整】
03-04 4513
欢迎添加微信互相交流学习哦！ 项目源码：https://gitee.com/oklongmm/biye 题 目 小游戏开发 摘 要 俄罗斯方块是我们最常见的游戏之一，该游戏出现过在掌上游戏机、家用游戏机、手机游戏和电脑游戏中，因此俄罗斯方块也是一个十分经典的游戏。我们可以在网上下载到各式各样的俄罗斯方块游戏，也可以在各个游戏大厅中见到网络对战形式的俄罗斯方块。一般的俄罗斯方块规则比较简单，游戏中随机出现一些方块，再对这些方块进行变换，下降到游戏界面中的不同位置，如...
书籍-传承至今的智慧载体
~ Caesar's wish书屋 ~
11-22 863
首先，请允许我啰嗦几句~万丈高楼平地起！没有哪个IT大神是生而知晓一切的，他/她们一样是一行一行敲出来的，至少写的代码是你的很多倍，别不信！基础是关键，走稳了再学跑！也别小猫钓鱼，今天觉得这个有意思，明天又看到那个很火......摇摆不定的人，必将一事无成！至少在你精通一门技术或语言前，只会得到这个下场！   启蒙入门阶段：   1、 学习一门脚本语言，例如Python/Ruby
linux c语言俄罗斯方块,C语言俄罗斯方块游戏解析（图文+源码）
weixin_39870199的博客
05-12 854
C语言俄罗斯方块游戏解析(图文+源码)以下文章来源于嵌入式Linux ，作者写代码的篮球球痴最近在看俄罗斯方块的游戏，看到一个大神写的俄罗斯方块代码，非常非常优秀，拿出来解析给大家看看，也希望大家自己尝试运行试试，从中能得到一些启发。#先了解下俄罗斯方块的几个形状一共分成7形状，有的形状有4种状态，有的形状有1种状态。不管是多少种状态，一个方块需要一个2个字节来存储，也就是16bit来保存一个方块...
HTML+CSS基础知识2
m0_74033027的博客
10-27 1703
HTML和css的基础知识
1-11
热门推荐
warrenhua2008的博客
03-21 1万+
=============================================================================================== for(:){ String str="asdga"; for(char s:str){ //char 指的是str的元素的类型 System.out.println(s); } int[
Net学习日记_基础提高_11_俄罗斯方块_整理概括篇
weixin_30779691的博客
10-19 71
经过3天学习编写俄罗斯方块，从开始画图、确定框架、图像移动等操作，感受颇多。现在主要描述一下俄罗斯方块里面基本流程和主要思路。 主要思路： 1.通过Drawing将图像画出在Panel上。 2.确定实体类之间的关系，以及各实体类的作用（例如背景类Ground） 3.难点：多线程控制形状方块的移动，其中利用了多线程的概念 其中实体类与控制器之间的多层调用。难！！！！！！！！！！ ...
ES6-ES11新特性速查手册
weixin_56015979的博客
04-28 563
es6新特性：let、const、解构赋值、模板字符串、对象简化写法（kv一致省略v）、箭头函数、函数参数默认值、rest 参数，扩展运算符、Symbol 类型、迭代器、生成器、Promise、Set、Class 类、模块化...
最新计算机毕业设计选题推荐 - 毕设选题建议
kooerr的博客
12-25 2279
Hi，大家好，大四的同学马上要开始毕业设计啦，大家做好准备了没！学长给大家详细整理了计算机毕设最新选题，对选题有任何疑问，都可以问学长哦~
vue2使用keep-alive缓存多层列表页的方法
10-17
在处理多层列表页的场景时，`keep-alive` 尤其有用，因为它可以避免用户在浏览深层列表并返回时，页面重新渲染导致的数据丢失和用户体验下降。 首先，我们需要理解 `keep-alive` 的基本用法。在路由配置中，可以为...
html多层俄罗斯游戏
01-11
【HTML多层俄罗斯游戏】是一种基于HTML和JavaScript技术构建的在线版俄罗斯方块游戏，它为玩家提供了独特的多层玩法，增加了游戏的挑战性和趣味性。在这个游戏中，玩家需要同时处理多个游戏板上的方块下落，提高了对...
商业编程-源码-多层图像合成示例代码.zip
06-22
在IT行业中，多层图像合成是一项关键的技术，尤其在图形设计、游戏开发、影视后期等领域广泛应用。本资源“商业编程-源码-多层图像合成示例代码.zip”提供了实现这一技术的源代码实例，可以帮助开发者更好地理解和...
基于vue v-for 多层循环嵌套获取行数的方法
10-17
今天小编就为大家分享一篇基于vue v-for 多层循环嵌套获取行数的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
计算机-后端-基于J2EE多层架构技术的Web应用研究.pdf
06-17
计算机-后端-基于J2EE多层架构技术的Web应用研究 本研究论文主要研究基于J2EE多层架构技术的Web应用系统的访问控制和SQL注入防范问题。随着Web应用系统的普及，安全性问题变得越来越重要，访问控制和SQL注入防范是...
使用 XPath 定位 HTML 中的 img 标签
Z_suger7的博客
07-18 1191
通过本文的介绍和代码示例，我们可以看到如何在 C# 中使用 XPath 定位 HTML 中的img标签，并实现图片的下载。这种方法不仅高效，而且易于实现，适用于各种需要从网页中提取图片资源的场景。希望本文能够为你的项目提供帮助，并激发你在数据处理和自动化方面的创新思维。
Web开发：四角线框效果（HTML、CSS、JavaScript）
m0_65029152的博客
07-17 912
本文主要记录前端给图片动态添加四角线框的相关内容和实现过程；
html2canvas + jspdf 纯前端HTML导出PDF的实现与问题
幸运小男神的博客
07-18 955
这几天接到一个需求，富文本编辑器的内容不仅要展示出来，还要实现展示的内容导出pdf文件。一开始导出pdf的功能是由后端来做的，然后发现对于宽度太大的图片，导出的pdf文件里部分图片内容被遮盖了，但在前端是正常显示的，只因为class样式后端无法解析。然后，后端开发人员就嫌麻烦，让前端来实现导出pdf的功能。。。使用 html2canvas + jsPDF 纯前端导出pdf的方式还是有很多问题的，一般情况下都是后端进行文件的导出，前端配合解决样式问题。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 315
网页隐藏版一行小说阅读器
通过HTML/CSS 实现各类进度条的功能。
最新发布
qq_44552416的博客
07-19 974
需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我们这里使用。通过本文学习我们会明白如何使用 HTML/CSS 创建各种基础进度条及花式进度条及其动画的方式。
el-menu动态多层菜单
08-26
el-menu动态多层菜单的实现可以通过使用自定义组件和递归调用来实现。首先，在Vue文件中引入menuTree组件，并在el-menu组件中使用该组件。在menuTree组件中，使用v-for循环遍历传入的菜单数据，判断是否有子菜单。如果有子菜单，则使用el-submenu组件并在其中递归调用menuTree组件。如果没有子菜单，则使用el-menu-item组件显示当前菜单项。通过这样的方式，可以实现多层级的动态菜单显示。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-menu多级动态菜单渲染](https://blog.csdn.net/ZhangXiaoTianZC/article/details/120040041)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [el-menu实现多级菜单效果](https://blog.csdn.net/yihanzhi/article/details/108218944)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

fo安方

觉得俺的文章还行，感谢打赏，爱

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值