js实现简单的俄罗斯方块小游戏

最新推荐文章于 2024-04-21 11:04:37 发布
最新推荐文章于 2024-04-21 11:04:37 发布
阅读量1.1k 收藏 8
点赞数 3
分类专栏： JS进阶学习 文章标签： javascript css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanghuan1020/article/details/111473709
版权

js实现简单的俄罗斯方块小游戏

开始

1. 创建一个宽为 200px，高为 360px 的背景容器

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>俄罗斯方块</title>
  <style>
    .container {
    
      position: relative;
      width: 200px;
      height: 360px;
      background-color: #000;
    }
  </style>
</head>

<body>
  <!-- 背景容器 -->
  <div class="container"></div>
</body>

</html>

2. 在该容器上创建一个 20 * 20 的块元素

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>俄罗斯方块</title>
  <style>
    .container {
    
      position: relative;
      width: 200px;
      height: 360px;
      background-color: #000;
    }

    .activity-model {
    
      width: 20px;
      height: 20px;
      background-color: cadetblue;
      border: 1px solid #eeeeee;
      box-sizing: border-box;
      position: absolute;
    }
  </style>
</head>

<body>
  <!-- 背景容器 -->
  <div class="container">
    <!-- 块元素 -->
    <div class="activity-model"></div>
  </div>
</body>

</html>

3. 控制该元素的移动，每次移动 20px

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>俄罗斯方块</title>
  <style>
    .container {
    
      position: relative;
      width: 200px;
      height: 360px;
      background-color: #000;
    }

    .activity-model {
    
      width: 20px;
      height: 20px;
      background-color: cadetblue;
      border: 1px solid #eeeeee;
      box-sizing: border-box;
      position: absolute;
    }
  </style>
</head>

<body>
  <!-- 背景容器 -->
  <div class="container">
    <!-- 块元素 -->
    <div class="activity-model"></div>
  </div>
  <script>
    // 常量
    // 每次移动的距离 步长
    const STEP = 20

    init()
    // 入口方法
    function init() {
    
      onKeyDown()
    }

    // 监听用户的键盘事件
    function onKeyDown() {
    
      document.onkeydown = event => {
    
        switch (event.keyCode) {
    
          case 38: // 上
            move(0, -1)
            break;
          case 39: // 右
            move(1, 0)
            break;
          case 40: // 下
            move(0, 1)
            break;
          case 37: // 左
            move(-1, 0)
            break;
          default:
            break;
        }
      }
    }

    // 移动
    function move(x, y) {
    
      // 控制块元素进行移动
      const activityModelEle = document.getElementsByClassName("activity-model")[0]
      activityModelEle.style.top = parseInt(activityModelEle.style.top || 0) + y * STEP + "px"
      activityModelEle.style.left = parseInt(activityModelEle.style.left || 0) + x * STEP + "px"
    }
  </script>
</body>

</html>

构建 L 形状的模型

1. 将容器进行分割，分割为 18 行，10 列。行高，列高均为20

在这里插入图片描述

// 常量
// 每次移动的距离 步长
const STEP = 20
// 分割容器
// 18行 10列
const ROW_COUNT = 18, COL_COUNT = 10

2. 以 16宫格 为基准，定义 L 形状的 4 个方块的位置

// 分割容器
// 18行 10列
const ROW_COUNT = 18, COL_COUNT = 10
// 创建每个模型的数据源
const MODELS = [
  // 第1个模型数据源(L型)
  {
   
    0: {
   
      row: 2,
      col: 0
    },
    1: {
   
      row: 2,
      col: 1
    },
    2: {
   
      row: 2,
      col: 2
    },
    3: {
   
      row: 1,
      col: 2
    }
  }]

3. 创建 L 型模型，根据 16 宫格中的数据将模型渲染到页面上

// 分割容器
// 18行 10列
const ROW_COUNT = 18, COL_COUNT = 10
// 创建每个模型的数据源
const MODELS = [
  // 第1个模型数据源(L型)
  {
   
    0: {
   
      row: 2,
      col: 0
    },
    1: {
   
      row: 2,
      col: 1
    },
    2: {
   
      row: 2,
      col: 2
    },
    3: {
   
      row: 1,
      col: 2
    }
  }]
// 变量
// 当前使用的模型
let currentModel = {
   }
init()
// 入口方法
function init() {
   
  createModel()
  onKeyDown()
}

// 根据模型使用的数据创建对应的块元素
function createModel() {
   
  // 确定当前使用哪一个模型
  currentModel = MODELS[0]
  // 生成对应数量的块元素
  for (const key in currentModel) {
   
    const divEle = document.createElement('div')
    divEle.className = "activity-model"
    document.getElementById("container").appendChild(divEle)
  }
  // 定位块元素位置
  locationBlocks()
}

// 根据数据源定位块元素的位置
function locationBlocks() {
   
  // 1 拿到所有的块元素
  const eles = document.getElementsByClassName("activity-model")
  for (let i = 0; i < eles.length; i++) {
   
    // 单个块元素
    const activityModelEle = eles[i]
    // 2 找到每个块元素对应的数据 (行、列)
    const blockModel = currentModel[i]
    // 3 根据每个块元素对应的数据来指定块元素的位置
    activityModelEle.style.top = blockModel.row * STEP + "px"
    activityModelEle.style.left = blockModel.col * STEP + "px"
  }
}

控制该模型进行移动

  • 本质是控制 16 宫格 进行移动
// 根据数据源定位块元素的位置
function locationBlocks() {
   
  // 1 拿到所有的块元素
  const eles = document.getElementsByClassName("activity-model")
  for (let i = 0; i < eles.length; i++) {
   
    // 单个块元素
    const activityModelEle = eles[i]
    // 2 找到每个块元素对应的数据 (行、列)
    const blockModel = currentModel[i]
    // 3 根据每个块元素对应的数据来指定块元素的位置
    // 每个块元素的位置由2个值确定：
    //  a. 16 宫格所在的位置
    //  b. 块元素在 16 宫格中的位置 
    activityModelEle.style.top = (currentY + blockModel.row) * STEP + "px"
    activityModelEle.style.left = (currentX + blockModel.col) * STEP + "px"
  }
}

// 移动
function move(x, y) {
   
  // 控制16宫格元素进行移动
  currentX += x
  currentY += y
  // 根据16宫格的位置来重新定位块元素
  locationBlocks()
}

控制模型旋转

在这里插入图片描述

规律

  • 以 16宫格 的中心点为基准进行旋转
  • 观察上图中旋转后每个块元素发生的位置的变化
  • 以第1,2个L模型为例，可以观察到：
    • 块元素1的坐标(列, 行)变化：(0, 2) -> (1, 0)
    • 块元素2的坐标(列, 行)变化：(1, 2) -> (1, 1)
    • 块元素3的坐标(列, 行)变化：(2, 2) -> (1, 2)
    • 块元素4的坐标(列, 行)变化：(2, 1) -> (2, 2)
  • …
  • 其基本变化规律是
    • 移动后的行 = 移动前的列
    • 移动后的列 = 3 - 移动前的行

旋转模型

// 监听用户的键盘事件
function onKeyDown() {
   
  document.onkeydown = event => {
   
    switch (event.keyCode) {
   
      case 38: // 上
        // move(0, -1)
        rotate()
        break;
      case 39: // 右
        move(1, 0)
最低0.47元/天 解锁文章
我是真的狗
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
用JavaScript写的贪吃蛇游戏（很简单，很详细）
编程界明世隐的博客
02-05 2万+
效果 编写外部框架 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width:620px; height:450px; position:absolute; margin:0 auto
用JS写一个《俄罗斯方块》小游戏
KISS
04-06 2670
最近网上上映一部名叫，想起自己学习JS时，编写《俄罗斯方块》小游戏程序作为练习，现在分享一下，看能不能蹭一下热度。: )
纯JS实现简易扫雷小游戏网页项目
weixin_45007812的博客
06-19 3910
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了...
js实现俄罗斯方块
最新发布
wubeidangziqiang的博客
04-21 245
1，左右移动到达边界之后由于数组大小有限，超过边界之后并未处理出现异常。额应该还有其他问题目前就发现这么多，然后就是面向对象的思想问题。3，未制作游戏开始以及失败判定。目前的话有以下问题未解决。2，方块形状没有解决。
用javascript写俄罗斯方块
2301_78098294的博客
06-02 456
【代码】用javascript写俄罗斯方块。
原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）
热门推荐
小安驾到的博客
09-16 1万+
100行代码带你实现经典小游戏【像素鸟】，附有项目全部素材文件和完整代码
js实现俄罗斯方块小游戏分享
12-12
代码如下:<!doctype html><html><head><style type=”text/css”>body { background:#000; font:25px/25px 宋体;}#box { float:left;width:252px;border:#999 20px ridge;...text-shadow:2px 3px
javascript+css实现俄罗斯方块小游戏
11-20
俄罗斯方块，一个很有趣的一个小游戏，此次基于html+css+javaScript实现，包含在一个方块落地后自动生成方块、操控方块的移动以及方块变形等。 部分代码： <!DOCTYPE html> <html> <head> <...
js实现 俄罗斯方块 小游戏
01-03
《使用JavaScript实现俄罗斯方块小游戏》 在编程领域，创建一款经典的俄罗斯方块小游戏是一种常见的练习，也是检验开发者基础技能的不错方式。本项目利用JavaScript这一广泛使用的前端脚本语言，结合HTML和CSS，...
js实现俄罗斯方块小游戏
09-24
javascript实现的俄罗斯方块小游戏 ，代码预览：function rotate() { var tmpBlock = new Array(4); for (var i = 0; i ; i++) { tmpBlock[i] = { x: 0, y: 0 }; } //先算四个点的中心点，则这四个点围绕中心...
用JavaScript制作简单的网页游戏之俄罗斯方块
Annzz123的博客
08-09 268
【代码】用JavaScript制作简单的网页游戏之俄罗斯方块。
JavaScript简单小游戏
07-13
使用JavaScript简单做Html小游戏
银行卡号字符的分割与识别算法研究.pdf
05-26
银行卡号识别，有需要的朋友及时下载，可供自学tensorflow用
银行搜索数据集(bankresearch dataset)
12-17
数据介绍： A pre-classified dataset containing 11,000 web pages from 11 different categories. Although this dataset was designed for unsupervised clustering experiments it can be used for any type web page machine-learning technique. For more information see BankSearch Dataset Page. Submitted by m.p.sinka@rdg.ac.uk. 关键词： 预先分类的数据集,网页,种类,聚类实验, pre-classified dataset,web page,category,clustering experiment, 数据格式： TEXT 数据详细介绍： bankresearch dataset Abstract A pre-classified dataset containing 11,000 web pages from 11 different categories. Although this dataset was designed for unsupervised clustering experiments it can be used for any type web page machine-learning technique. For more information see BankSearch Dataset Page. Submitted by m.p.sinka@rdg.ac.uk. Copyright
JS实现俄罗斯方块小游戏
FeoniX
02-09 2119
JS实现俄罗斯方块小游戏简介效果展示代码实现 简介 俄罗斯方块(英文：Tetris)是一款消除类的休闲益智小游戏。 由小方块组成的不同形状的板块陆续从屏幕上方落下来，玩家通过调整板块的位置和方向，使它们在屏幕底部拼出完整的一条或几条。这些完整的横条会随即消失，给新落下来的板块腾出空间，与此同时，玩家得到分数奖励。没有被消除掉的方块不断堆积起来，一旦堆到屏幕顶端，玩家便告输，游戏结束。 方块共有7种，分别以S、Z、L、J、I、O、T这7个字母的形状来命名。 效果展示 代码实现 添加配置文件config.
银行卡号识别（三） --- 基于k最近邻的数字识别测试
qq_19281769的博客
12-09 1512
在进行完预处理之后，我们可以开始用算法识别数字了。首先我们不做那么复杂的、一连串银行卡数字的识别，而是做一个数字的测试。   一、机器算法的引入-----K近邻算法 K最近邻(k-Nearest Neighbour，KNN)分类算法是一个理论上比较成熟的算法，也是最简单的机器学习算法之一。顾名思义，k最近邻实际上就是取和待分类物最相似的k个模板，然后这k个模板中所占比例最高的类别就是最后...
opencv 实战(Bankcard)银行卡号识别
TUOLONGcsdn的博客
12-21 292
opencv学习_实战训练:银行卡号识别
基于深度学习的银行卡号识别 卡号识别和分割
qq_47566416的博客
02-09 2834
项目场景： 目前有许多应用会绑定银行卡，但是再绑定的时候如果是用户一个个卡号输入的话，就会使犯错误的概率大大增加，所以就体现出了我们这个app的作用，无论是什么样的银行卡都可以识别出它的卡号。 对于这个项目，我负责的主要是银行卡号的分割，以及银行卡照片的预处理。 对于图片处理的这一部分，我选择的是opencv，编程语言选择的是python,安装环境这一部分就不做太多介绍了 （百度一下教程就有，我配置环境的时候也踩到许多坑，我之前的博客有介绍），我们要先对图片进行预处理，这样可以帮助我们对银行卡号在银行卡的
银行卡号识别（CTPN、Densenet、CTC）附数据集
datayx的文章
05-23 4058
向AI转型的程序员都关注了这个号????????????机器学习AI算法工程 公众号：datayxBankcard_OCR本代码简易的实现了银行卡识别的功能，通过深度学习（CTPN、...
用javascript写一个俄罗斯方块小游戏
02-16
俄罗斯方块是一款非常经典的游戏，使用 JavaScript 和 HTML5 可以很容易地实现。下面是一个简单的俄罗斯方块小游戏的示例，你可以基于这个示例进行修改和扩展。 HTML 代码： ```html <!DOCTYPE html> <html> <head> <title>俄罗斯方块</title> <style> #game-board { width: 200px; height: 400px; border: 1px solid black; } </style> </head> <body> <div id="game-board"></div> <script src="tetris.js"></script> </body> </html> ``` JavaScript 代码： ```javascript var gameBoard = document.getElementById("game-board"); var ctx = gameBoard.getContext("2d"); var board = []; for (var row = 0; row < 20; row++) { board[row] = []; for (var col = 0; col < 10; col++) { board[row][col] = 0; } } var pieces = [ // I [ [1, 1, 1, 1] ], // J [ [1, 0, 0], [1, 1, 1] ], // L [ [0, 0, 1], [1, 1, 1] ], // O [ [1, 1], [1, 1] ], // S [ [0, 1, 1], [1, 1, 0] ], // T [ [0, 1, 0], [1, 1, 1] ], // Z [ [1, 1, 0], [0, 1, 1] ] ]; var colors = [ "#00ffff", // I "#0000ff", // J "#ff8000", // L "#ffff00", // O "#00ff00", // S "#8000ff", // T "#ff0000" // Z ]; var currentPiece = { piece: pieces[Math.floor(Math.random() * pieces.length)], row: 0, col: 3 }; function drawSquare(row, col, color) { ctx.fillStyle = color; ctx.fillRect(col * 20, row * 20, 20, 20); } function drawBoard() { for (var row = 0; row < board.length; row++) { for (var col = 0; col < board[row].length; col++) { if (board[row][col] !== 0) { drawSquare(row, col, colors[board[row][col] - 1]); } } } } function drawPiece() { var piece = currentPiece.piece; var row = currentPiece.row; var col = currentPiece.col; for (var r = 0; r < piece.length; r++) { for (var c = 0; c < piece[r].length; c++) { if (piece[r][c] === 1) { drawSquare(row + r, col + c, colors[pieces.indexOf(piece)]); } } } } function can

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值