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
    评论
专栏目录
原生JS 实现小游戏 贪吃蛇
m0_64191440的博客
08-16 3101
JS 超详细 贪吃蛇 案例 速速围观
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 5385
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
js实现俄罗斯方块
最新发布
wubeidangziqiang的博客
04-21 252
1，左右移动到达边界之后由于数组大小有限，超过边界之后并未处理出现异常。额应该还有其他问题目前就发现这么多，然后就是面向对象的思想问题。3，未制作游戏开始以及失败判定。目前的话有以下问题未解决。2，方块形状没有解决。
js实现简单打地鼠小游戏
m0_55603459的博客
12-11 8546
小地鼠随机出现在固定大区域，以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数，同时地鼠的状态会发生变化，游戏设置倒计时，倒计时结束游戏结束，弹出玩家砸中次数。
用JS写一个《俄罗斯方块》小游戏
KISS
04-06 2672
最近网上上映一部名叫，想起自己学习JS时，编写《俄罗斯方块》小游戏程序作为练习，现在分享一下，看能不能蹭一下热度。: )
js 实现俄罗斯方块
weixin_39394140的博客
01-27 8063
实现思路 MVC思路。三个端分工合作。可以仔细看。整个俄罗斯方块为一个二维数组。C控制M, M控制二维数组，V只要把二维数组渲染出来就行 。 视图层 html部分 <canvas id="canvas"></canvas> js部分 // 画背景 function drawBG(){ CTX.lineWidth = 1; CTX.fil...
JS实现俄罗斯方块小游戏
FeoniX
02-09 2119
JS实现俄罗斯方块小游戏简介效果展示代码实现 简介 俄罗斯方块(英文：Tetris)是一款消除类的休闲益智小游戏。 由小方块组成的不同形状的板块陆续从屏幕上方落下来，玩家通过调整板块的位置和方向，使它们在屏幕底部拼出完整的一条或几条。这些完整的横条会随即消失，给新落下来的板块腾出空间，与此同时，玩家得到分数奖励。没有被消除掉的方块不断堆积起来，一旦堆到屏幕顶端，玩家便告输，游戏结束。 方块共有7种，分别以S、Z、L、J、I、O、T这7个字母的形状来命名。 效果展示 代码实现 添加配置文件config.
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 }; } //先算四个点的中心点，则这四个点围绕中心...
纯JS实现简易扫雷小游戏网页项目
weixin_45007812的博客
06-19 3912
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了...
用js代码写一套简单的家庭游戏系统
yyh231366的博客
07-03 652
先上代码function girl(name,age,talk){ this.age=age this.name=name this.talk=talk this.saySprot=saySprot this.name1=name1 this.littree=littree this.xinxi=xinxi}// 修改年龄function saySprot(age){ if(age150) { console.log('修改年龄...
简洁的俄罗斯方块
我想我是海 冬天的大海 心情随风轻摆
03-21 1074
.c{margin:1px; width:19px; height:19px; background:red; position:absolute;} .d{margin:1px; width:19px; height:19px; background:gray; position:absolute;} .f{top:0px; left:0px; background:black; pos
用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
html+css+js实现俄罗斯方块
weixin_62981580的博客
11-25 726
俗话说用最朴素的代码，写最炫酷的代码，没错说的正是在下下面将从几个部分开始介绍我写俄罗斯方块的几个部分。
用javascript写俄罗斯方块
2301_78098294的博客
06-02 457
【代码】用javascript写俄罗斯方块。
教你前端如何用js写一个跑酷小游戏
qq_28252421的博客
06-01 6091
奔跑、跳跃、下滑、碰撞检测……教你用前端的语言写一个跑酷的小游戏，快来愉快的奔跑吧
用javascript写一个俄罗斯方块小游戏
02-16
下面是一个简单的俄罗斯方块小游戏的示例，你可以基于这个示例进行修改和扩展。 HTML 代码： ```html <!DOCTYPE html> 俄罗斯方块 #game-board { width: 200px; height: 400px; border: 1px solid black;...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值