VGA驱动设计

AI summary
文档讨论了VGA驱动设计中的图片放大和缩小机制，包括地址变化公式和实现过程。放大和缩小图片的过程中，计算显示区域和地址变化是关键，文中提供了具体的公式和示例。此外，还介绍了基于VGA的电子相册设计要求、设计分析和架构，以及VGA动态图显示和小游戏的设计思路。
Last edited time
Sep 24, 2024 06:55 AM
Last edited by
Tags
Image Processing
VGA Technology
Display Systems
VGA驱动设计一：显示设备二：VGA接口驱动电脑显示器三：CRT（阴极射线管）工作原理四：VGA扫描原理五：VGA行列时序六：VGA显示标准七：VGA显示区域八：设计要求九：设计分析十：练习VGA图片显示设计一：设计要求二：设计分析三：设计实现四：练习VGA图片缩放理论一：图片放大机制二：图片缩小机制三：练习基于VGA的电子相册设计一：设计要求二：设计分析（计算图片大小/显示区域/地址变化）三：设计过程四：设计架构五：练习VGA动态图显示（类似于屏保）一：在VGA驱动基础之上，完成电脑显示屏保现象。二：拓展成小游戏三：设计分析四：设计架构五：练习

VGA驱动设计

一：显示设备

  1. 简单显示设备：LED/数码管…
  1. 常用显示设备：VGA/DVI/HDMI接口驱动显示器/LCD1602/12864/TFT…

二：VGA接口驱动电脑显示器

notion image

三：CRT（阴极射线管）工作原理

CRT（Cathode Ray Tube阴极射线管）显像管：主要由电子枪、Electron gun 、Deflection coils 、Shadow mask、 Phosphor。其原理是利用显像管内的电子枪，将光束射出，穿过荫罩上的小孔，打在一个内层玻璃涂满了无数三原色的荧光粉层上，电子束会使得这些荧光粉发光，最终就形成了你所看到的画面了。而CRT尺寸就是显像管实际尺寸，也是通常所说的显示器尺寸,其单位为英寸(1英寸=25.4毫米)。
notion image
CRT显示器是靠电子束激发屏幕内表面的荧光粉来显示图像的，由于荧光粉被点亮后很快会熄灭，所以电子枪必须循环地不断激发这些点。
首先，在荧光屏上涂满了按一定方式紧密排列的红、绿、蓝三种颜色的荧光粉点或荧光粉条，称为荧光粉单元，相邻的红、绿、蓝荧光粉单元各一个为一组，学名称之为像素。每个像素中都拥有红、绿、蓝(R、G、B)三基色。
CRT显示器用电子束来进行控制和表现三原色原理。电子枪工作原理是由灯丝加热阴极，阴极发射电子，然后在加速极电场的作用下，经聚焦极聚成很细的电子束，在阳极高压作用下，获得巨大的能量，以极高的速度去轰击荧光粉层。这些电子束轰击的目标就是荧光屏上的三基色。为此，电子枪发射的电子束不是一束，而是三束，它们分别受电脑显卡R、 G、 B三个基色视频信号电压的控制，去轰击各自的荧光粉单元。受到高速电子束的激发，这些荧光粉单元分别发出强弱不同的红、绿、蓝三种光。根据空间混色法(将三个基色光同时照射同一表面相邻很近的三个点上进行混色的方法)产生丰富的色彩，这种方法利用人们眼睛在超过一定距离后分辨力不高的特性，产生与直接混色法相同的效果。用这种方法可以产生不同色彩的像素，而大量的不同色彩的像素可以组成一张漂亮的画面，而不断变换的画面就成为可动的图像。
然而在扫描的过程中，要保证三支电子束准确击中每一个像素，就要借助于荫罩(Shadow mask)，它的位置大概在荧光屏后面(从荧光屏正面看)约10mm处，厚度约为0.15mm的薄金属障板，它上面有很多小孔或细槽，它们和同一组的荧光粉单元即像素相对应。三支电子束经过小孔或细槽后只能击中同一像素中的对应荧光粉单元，因此能够保证彩色的纯正和正确的会聚。
偏转线圈(Deflection coils)可以协助完成非常高速的扫描动作，它可以使显像管内的电子束以一定的顺序，周期性地轰击每个像素，使每个像素都发光，而且只要这个周期足够短，也就是说对某个像素而言电子束的轰击频率足够高，就会呈现一幅完整的图像。
至于画面的连续感，则是由场扫描的速度来决定的，场扫描越快，形成的单一图像越多，画面就越流畅。而每秒钟可以进行多少次场扫描通常是衡量画面质量的标准，通常用帧频或场频(单位为Hz，赫兹)来表示，帧频越大，图像越有连续感。24Hz场频是保证对图像活动内容的连续感觉，48Hz场频是保证图像显示没有闪烁的感觉，这两个条件同时满足，才能显示效果良好的图像。

四：VGA扫描原理

  1. VGA一般支持直线式扫描（行扫描：逐行扫描/隔行扫描）
      2. 逐行扫描：从屏幕左上角第一点开始进行扫描，直到扫描第一行的最后一个点，扫描一行时，需要用行同步信号进行同步一次，接着扫描第二行（第一个点~最后一个点），每扫描完一行，都需要一次行同步，直到扫描完所有的行，形成一帧图像，需要一次场同步。
      notion image
      总结：从左到右，从上到下。
      隔行扫描：可以先来扫描奇数行，扫描完所有的奇数行，返回扫描剩下的偶数行。
      隔行扫描容易导致视觉疲劳，一般不采用。
  1. LCD12864扫描方式
      2. notion image

五：VGA行列时序

行同步信号
行同步信号
列同步信号
列同步信号
VGA行/列扫描时序当中，都需要同步脉冲段（a段），也称为负极性脉冲段；显示后沿段（b段），显示时序段（c段），显示前沿段（d段）这四部分，e=a+b+c+d（具体看分辨率）。
扫描1行需要一次行同步（1个HSYNC），扫描完所有行（一帧）需要一次场同步（1个VSYNC）。
1个VSYNC=N*HSYNC（N=行数）。
a,b,d段属于消隐区域（包含行和列），c段属于显示段（包含行和列）；RGB数据在消隐区域内是无效的，只有在显示段内才有效。
notion image

六：VGA显示标准

notion image
notion image
以800*600@60显示模式为例：800（列数） 600（行数） 60（刷新一帧频率：HZ）。
驱动频率40MHZ。
列数：e=a+b+c+d=128+88+800+40=1056
行数：e=a+b+c+d=4 + 23 + 600 + 1=628
像素点个数：行数*列数=628*1056= 663,168个
刷新一帧图像时间：T=663,168*25ns=16,579,200ns
F = 1/T = 1 / 16,579,200ns = 10^9 / 16,579,200HZ=60.3165HZ~=60HZ

七：VGA显示区域

notion image

八：设计要求

驱动VGA接口使其电脑显示器全屏幕显示一种颜色。

九：设计分析

  1. 设计架构
      2. notion image
  1. 设计实现
      2. 控制器纯逻辑设计。
  1. 仿真结果
      2. notion image

十：练习

  1. 完成上课内容（掌握VGA理论）
  1. 划分显示区域，显示九宫格
  1. 在显示区域中心区域画圆（半径自行规定）
练习2分享：
notion image
划分区域：第一/二/三大列和第一/二/三大行
左列：COL1 右列：COL2
上行：ROW1 下行：ROW2
COL1=216+(800/3)~=483
COL2=216+(800/3)+ (800/3)~=750
ROW1=27+(600/3)=227
ROW2=27+(600/3)+ (600/3)=427
行在27~227之间，也可以认为第一大行，如果列在216~483之间，也可以认为第一大列，即就是九宫格中第一个显示区域（给一种颜色即可）；行在27~227之间，也可以认为第一大行，如果列在483~750之间，也可以认为第二大列，即就是九宫格中第二个显示区域（给一种颜色即可）…直到第三大行和第三大列（427~627:750~1016），即就是九宫格中第9个显示区域（给一种颜色即可）。
注意：颜色种类区分开。
练习3分享：
完成在显示区域内画圆。
notion image
（1）：计算显示区域（216~1016:27~627）
（2）：确定圆心坐标（400,300）
（3）：计算显示区域到圆心距离
（4）：根据圆公式判断哪些点在圆上/外/内
圆上：X^2 + Y^2 = R^2 圆内：X^2 + Y^2 < R^2
（5）：给定圆上/圆内/圆外颜色即可。
notion image

VGA图片显示设计

一：设计要求

在VGA驱动基础之上，完成对单片图片的显示（显示模式：800*600@60）。

二：设计分析

notion image
  1. 图片大小选择
      2. 图片对应数据，数据往往需要做存储（ROM/RAM/FIFO），只要图片数据不超过存储空间大小即可（一般不超过85%）。
      片内存储大小：51.75KB
      假设显示图片大小800*600，图片对应数据为800*600=480000个像素点，每一个图片为8bit，MEM=Depth*Width=480000 * 8bit = 3,840,000bit = 3,750Kbit = 468.75KB。
      故存储器存储空间资源不够用，只能将图片大小设置为可以存储的图片大小。
      假设显示图片大小200*200，图片对应数据为200*200=40000个像素点，每一个图片为8bit，MEM=Depth*Width=40000 * 8bit = 320000bit = 39.0625 KB。
      占存储器资源39.0625 KB / 51.75KB ~= 75.5%
  1. 图片背景选择
      2. 由于VGA中使用RGB332标准，只能够显示256中颜色；如果选择图片背景基表复杂，显示时容易出现图片失真。
      故选择一些背景比较单一/简单的，往往显示不容易失真（表情包/简笔画…）。
      notion image
  1. 图片大小200*200
      2. 需要对图片进行裁剪，比较简单处理方式画图/PS软件。
  1. 对图片数据进行提取
      2. 通过Img2lcd2.9（取模软件）对图片数据进行提取。
      在Img2lcd2.9（取模软件）设置取数据信息。
      对提取.c文件进行图片的数据处理（Matlab/Notepad++）。
  1. 片内存储器
      2. 采用ROM作为图片数据的存储。
      批量将图片数据放置在.Mif/.Hex文件中。
  1. 确定图片显示区域（计算显示中心位置）
      2. notion image
      列左边界COL1：COL1=216+(800-200)/2=516
      列右边界COL2：COL2=516+200=716
      行上边界ROW1：ROW1=27+(600-200)/2=227
      行下边界ROW2：ROW2=227+200=427
  1. ROM地址在图片显示变化
      2. 圈中图片显示区域后，在显示区域内，控制地址变化，将变化地址上的数据读取出来，给到RGB即可。
      notion image

三：设计实现

  1. 设计架构
      2. notion image
  1. 仿真结果
      2. notion image

四：练习

  1. 完成上课内容
  1. 在显示区域（800*600）显示两个图片（200*200），分别放在左上角和右下角位置。
  1. 尝试完成对图片放大
      2. 根据显示模式（800*600@60）选择合适图片大小（80*60）。
      对应图片像素点放大100倍。
      notion image
      在800*600@60显示模式下，考虑圈中显示区域和在显示区域内地址变化问题。

VGA图片缩放理论

一：图片放大机制

  1. 在显示模式800*600@60基础之上，对80*60图片放大至全屏显示（800*600）。
      2. notion image
      原图片80*60，对应图片数据像素点个数80*60=4800个，将图片80*60=4800个像素点铺满整个屏幕。
      显示模式800*600可以放置48万个像素点，对于原图片放大100倍可以铺满整个显示器；在图片一大行中显示80个像素点，一共需要60行，可以在整个显示屏幕中显示4800个像素点，对应4800个地址。
      显示模式（800*600）中每10列为图片中的一列，每10行为图片中的一行，交集就是当前像素点放大的区域，即将一个像素点放大100倍（行放大10倍，列放大10倍）。
      控制地址时，需将第一大行中地址排列为0~79，第二行地址排列为80~159，依次类推，使其最后一大行中地址排列为4720~4799即可，换句话说80*60图片就可以放大为800*600，从而铺满整个显示器。
      addr = (cnt1 - 216) / 10 + (cnt2 - 27) / 10 * 80
      第二大行第一大列：addr=80
      第二大行：37~47（cnt2）
      第一大列：216~226（cnt1）
      addr = 0 + 1 * 80 = 80
      最后一行最后一列：addr = 4799
      最后一行：617~627（cnt2）
      第一大列：1006~1016（cnt1）
      addr = 79 + 4720 = 4799
      将80*60图片放大100倍显示整个显示器时，地址变化推导公式如下：
      addr = (cnt1 - 216) / 10 + (cnt2 - 27) / 10 * 80
  1. 图片放大实现过程（80*60~800*600）
      • 图片选取80*60大小
      • 提取80*60图片数据（4800个像素点）
      • 更新ROM存储数据（4800个像素点对应4800个地址）
      • 修改VGA控制器中图片显示区域（800*600显示区域）
      • 修改VGA控制器中在显示区域中控制地址变化（上述推导公式）
  1. 仿真测试结果
      2. notion image
4：在显示模式800*600@60基础之上，对200*200图片放大至全屏显示（400*400）。
notion image
计算放大图片显示区域：COL1/COL2和ROW1/ROW2
COL1=216 + (800 - 400) / 2 = 416
COL2=416 + 400 = 816
ROW1=27+(600-400) / 2 = 127
ROW2=127+400=527
原图片200*200，对应图片数据像素点个数200*200=40000个，将图片200*200=40000个像素点放置在400*400显示区域。
显示区域400*400可以放置16万个像素点，对于原图片放大4倍可以在400*400显示区域；在图片一大行中显示200个像素点，一共需要200行，可以在400*400显示区域显示40000个像素点，对应40000个地址。
显示区域（400*400）中每2列为图片中的一列，每2行为图片中的一行，交集就是当前像素点放大的区域，即将一个像素点放大4倍（行放大2倍，列放大2倍）。
控制地址时，需将第一大行中地址排列为0~199，第二行地址排列为200~399，依次类推，使其最后一大行中地址排列为39800~39999即可，换句话说200*200图片就可以放大为400*400。
addr = (cnt1 - 416) / 2 + (cnt2 - 127) / 2 * 200
第二大行第一大列：addr=200
第二大行：129~131（cnt2）
第一大列：416~418（cnt1）
addr = 0 + 1 * 200 = 200
最后一行最后一列：addr = 39999
最后一行：525~527（cnt2）
第一大列：814~816（cnt1）
addr = 199 + 39,800 = 39999
将200*200图片放大4倍显示400*400显示区域时，地址变化推导公式如下：
addr = (cnt1 - 416) / 2 + (cnt2 - 127) / 2 * 200
  1. 任意图片放大任意倍数（显示中心位置为例）：地址变化满足下述公式
      2. addr = (cnt1 – COL1) / N + (cnt2 – ROW1) / N * M
      N：放大倍数开平方
      M：原图片宽度
      COL1：列左边界
      ROW1：行上边界
  1. 图片放大实现过程
      • 图片选取原图大小
      • 提取原图图片数据
      • 更新ROM存储数据
      • 修改VGA控制器中图片放大区域
      • 修改VGA控制器中在显示区域中控制地址变化（上述图片放大推导公式）

二：图片缩小机制

  1. 在显示模式800*600@60基础之上，对200*200图片缩小至100*100。
      2. notion image
      （1）：如果显示缩小，显示区域为缩小图片后区域（100*100）。
      COL1=216+(800-100)/2=566
      COL2=566+100=666
      ROW1=27+(600-100)/2=277
      ROW2=277+100=377
      （2）：在缩小图片一行中，原图片大小200*200，对应的地址和像素点数据均是40000个；而缩小时当前一行中能够显示100个地址（100个像素点数据），也就是说原图片中2个像素点数据缩小时取1个（原图片中2个地址缩小时取1个地址）。
      2列（原图片）取1列（缩小图片） 2行（原图片）取1行（缩小图片）
      缩小呼图片第一行地址为0 2~198，第二行地址为400 402~598，以此类推，最后一行地址为39600 30602~39798。
      （3）：缩小时地址变化
      addr = (cnt1 - 566) * 2 + (cnt2 - 277) * 2 * 200
      第二行第一列：addr=400
      第二行：cnt2 = 278
      第一列：cnt1=566
      addr = 0 + 400 = 400
      最后一行最后一列：addr = 39798
      最后一行：cnt2 = 376
      最后一列：cnt1 = 665
      addr = 198 + 39,600= 39,798
      （4）：将200*200图片缩小至100*100（图片缩小4倍），地址变化推导公式如下：
      addr = (cnt1 - 566) * 2 + (cnt2 - 277) * 2 * 200
      （5）：图片缩小实现过程（200*200~100*100）
      • 图片选取为200*200（原图片）
      • 提取200*200图片像素点数据（40000个像素点数据）
      • 更新ROM存储数据（40000个像素点数据对应40000个地址）
      • 修改VGA控制器中图片显示区域（缩小图片显示区域:100*100）
      • 修改VGA控制器中在显示区域内控制地址变化（上述推动缩小公式）。
      （6）：仿真测试结果
      notion image
  1. 任意图片缩小任意倍数（显示中心位置为例）：地址变化满足下述公式
      2. addr = (cnt1 – COL1) * N + (cnt2 – ROW1) * N * M
      N：放大倍数开平方
      M：原图片宽度
      COL1：列左边界
      ROW1：行上边界
  1. 图片缩小实现过程
      • 图片选取原图大小
      • 提取原图图片数据
      • 更新ROM存储数据
      • 修改VGA控制器中图片缩小区域
      • 修改VGA控制器中在显示区域中控制地址变化（上述图片放大推导公式）

三：练习

  1. 完成上课内容（掌握缩放理论）
  1. 电子相册中：选取大小合适图片（和显示模式对应），选取多张图片（3张图片），存储在3个ROM中（每一个ROM中地址区间是一样的），尝试完成图片切换/放大过程。
      2. 显示模式：800*600（5倍放大至全屏）
      原图大小：160*120（图片像素点数据）
      2倍大小：
      5倍大小：

基于VGA的电子相册设计

一：设计要求

  1. 选择图片个数（3个），采用按键进行图片切换；
  1. 可以对初始图片/切换过程中进行放大，采用按键进行对当前图片放大；
  1. 当按键不按时，显示原图片大小；按下第一次时，显示2倍图片；按下第三次时，显示3倍图片；按下第四次时，显示4倍图片；按下第五次时，显示5倍图片（全屏幕显示）。
  1. 显示模式
      2. notion image
      采用显示模式为640*480@60，驱动频率25.175MHZ。

二：设计分析（计算图片大小/显示区域/地址变化）

  1. 原图/2/3/4/5倍图片大小计算
      2. 原图片大小：128*96
      2倍图片大小：256*192
      3倍图片大小：384*288
      4倍图片大小：512*384
      5倍图片大小：640*480
      notion image
      在某张图片上进行放大效果如上图，原图显示128*96，需要计算原图显示区域（COL1/COL2,ROW1/ROW2），2倍显示256*192，需要计算2倍显示区域（COL1/COL2,ROW1/ROW2）…依次到5倍图片640*480（全屏幕显示）显示区域（COL1/COL2,ROW1/ROW2）。
  1. 不同图片大小显示区域计算
      • 原图大小：128*96
          • notion image
          COL1：144 + (640 - 128) / 2 = 400
          COL2：400 + 128 = 528
          ROW1：35 + (480 - 96) / 2 = 227
          ROW2：227 + 96 = 323
      • 2倍图大小：256*192
          • COL1：144 + (640 - 256) / 2 = 336
          COL2：336 + 256= 592
          ROW1：35 + (480 - 192) / 2 = 179
          ROW2：179 + 192 = 371
      后续图片大小计算满足以下规律：
      COL1（列左边界）：放大2倍图片是原图片列数-64；
      COL2（列右边界）：放大2倍图片是原图片列数+64；
      ROW1（行上边界）：放大2倍图片是原图片行数-48；
      ROW2（行下边界）：放大2倍图片是原图片行数+48；
      图片大小
      COL1
      COL2
      ROW1
      ROW2
      128*96
      400
      528
      227
      323
      256*192
      336
      592
      179
      371
      384*288
      272
      656
      131
      419
      512*384
      208
      720
      83
      467
      640*480
      144
      784
      35
      515
  1. 不同图片显示区域地址变化
      2. addr = (cnt1 – COL1) / N + (cnt2 – ROW1) / N * M
      N：放大倍数开平方
      M：原图片宽度
      COL1：列左边界
      ROW1：行上边界
      • 原图片（128*96）
          • 地址变化：addr=addr+1
      • 2倍图片（256*192）
          • addr=(cnt1 - 336) /2+(cnt2 - 179)/2 * 128
      • 3倍图片（384*288）
          • addr=(cnt1 - 272) /3+(cnt2 - 131)/3 * 128
      • 4倍图片（512*384）
          • addr=(cnt1 - 208) /4+(cnt2 - 83)/4 * 128
      • 5倍图片（640*480）
          • addr=(cnt1 - 144) /5+(cnt2 - 35)/5 * 128

三：设计过程

3张图片进行切换显示：切换/放大按键，1张图片采用1个ROM，那么3张图片存储在3个ROM中（数据:128*96），对应1个地址存储1个像素点数据。
notion image

四：设计架构

notion image

五：练习

  1. 完成上课内容
  1. 考虑缩放，完成电子相册整体设计
当前行地址变化：列补偿值计算
图片大小
COL1
COL2
ROW1
ROW2
128*96（原图）
400
528
227
323
256*192（2倍）
336
592
179
371
384*288（3倍）
272
656
131
419
512*384（4倍）
208
720
83
467
640*480（5倍）
144
784
35
515
(cnt1+cnt1_value)%mult==0
2倍图片：
col1=336 col2=592 row1=179 row2=371
(336+cnt1_value)%2(0地址:336 337(+1)) 1地址(338 339)
3倍图片：
col1=272 col2=656 row1=131 row2=419
(272+cnt1_value)%3(0地址:272 273 274(+2)) 1地址(275 276 277)
4倍图片：
col1=208 col2=720 row1=83 row2=467
(208+cnt1_value)%4(0地址:208 209 210 211(+1)) 1地址(212 213 214 215)
5倍图片：
col1=144 col2=784 row1=35 row2=515
(144+cnt1_value)%5(0地址:144 145 146 147 148(+2)) 1地址(149 150 151 152 153)
换行时地址变化：行补偿值计算
图片大小
COL1
COL2
ROW1
ROW2
128*96（原图）
400
528
227
323
256*192（2倍）
336
592
179
371
384*288（3倍）
272
656
131
419
512*384（4倍）
208
720
83
467
640*480（5倍）
144
784
35
515
2倍图片：
col1=336 col2=592 row1=179 row2=371
(179+cnt2_value)%2==0(179行:0~127 180行:128~255 181行: 128~255  182行:256~383 183行: 256~383)
0地址:179行(+0)
128地址:180 181行
3倍图片：
col1=272 col2=656 row1=131 row2=419
0地址:131行 132行(+2)
128地址:133 134 135行
4倍图片：
col1=208 col2=720 row1=83 row2=467
0地址:83 84 85行(+2)
128地址:86 87 88 89行
5倍图片：
col1=144 col2=784 row1=35 row2=515
35 36 37 38 (+1) 39 40 41 42 43 44  45
图片大小
COL1
COL2
ROW1
ROW2
cnt1_value
cnt2_value
128*96（原图）
400
528
227
323
256*192（2倍）
336
592
179
371
1
0
384*288（3倍）
272
656
131
419
2
2
512*384（4倍）
208
720
83
467
1
2
640*480（5倍）
144
784
35
515
2
1

VGA动态图显示（类似于屏保）

一：在VGA驱动基础之上，完成电脑显示屏保现象。

notion image

二：拓展成小游戏

notion image
设置有边框（蓝色：观看清楚即可），宽度为40；背景（白色）；木块（黑色：40）。
显示规则：木块初始位置可以从显示区域任意位置开始，一旦木块有了初始位置（x,y），以一定的速度（规定:10ms）沿运动轨迹进行移动（初始以左下方向），当前木块往左下进行移动（左：横坐标-1 下：纵坐标+1），如果木块触碰到边界以轴对称方式进行反转（左~右 下~上 右~左 上~下），木块会一直在显示区域内完成一定的运动轨迹（每次运动轨迹是随机的）。
移动时：如果往左，横坐标-1；如果往右，横坐标+1；如果往上，纵坐标-1，如果往下，纵坐标+1。
触碰边界：触碰到左边界，木块只能往右移动；触碰到右边界，木块只能往左移动；上下边界处理方式一样；如果没有触碰到边界，方向不变。

三：设计分析

  1. 如何考虑木块移动时逻辑
      2. （1）：设置木块初始位置（任意位置：（x,y））
      （2）：木块移动使能（移动速度：10ms）
      （3）：当木块移动时，规定木块如果往左下移动（横坐标-1，纵坐标+1）…
  1. 如何考虑木块移动时触碰边界
      2. （1）：假设木块以左下移动，那么一定时间触碰到边界
      （2）：触碰到下边界，木块往上移动
      （3）：触碰到上边界，木块往下移动
      （4）：触碰到右边界，木块往左移动
      （5）：触碰到左边界，木块往右移动
  1. 如何考虑木块/背景/边框区域
      2. （1）：木块区域（黑色）
      （2）：背景区域（白色）
      （3）：边框区域（蓝色）

四：设计架构

notion image

五：练习

  1. 完成上课内容（电子相册/木块移动仿真测试）
  1. 完成拓展小游戏设计（纯逻辑实现：自行规定参数保证合适就行）
 
Loading...