作者：王石
简介
小时候有个游戏叫俄罗斯方块，大人小孩都喜欢玩，我们就一起看看如何能用OpenHarmony学习做个Tetris。
![#盲盒+码#[番外三]一起学做Tetris(上)-鸿蒙开发者社区](https://dl-harmonyos.51cto.com/images/202211/94e99ae55c97a47c826375237c92790b81ced9.gif "#盲盒+码#[番外三]一起学做Tetris(上)-鸿蒙开发者社区")
开发
1. HAP应用建立
《[六]如何编写一个hap应用》里我们介绍了简单的Hap应用的开发以及基础控件的介绍，这里我们就不赘述Hap项目的建立过程，以下就是基础的Hap的page文件：index.ets
build是基础页面的构造函数，用于界面的元素构造，其他的页面的生命周期函数如下：
2. Canvas介绍
canvas是画布组件用于自定义绘制图形，具体的API页面如下：
https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-components-canvas-canvas-0000001333641081
页面显示前会调用aboutToAppear()函数，此函数为页面生命周期函数
canvas组件初始化完毕后会调用onReady()函数，函数内部实现小游戏的初始页面的绘制
2.1 初始化页面数据
因为都是画布画的，所以布局有点麻烦，需要画几个部分：
- 中间的大框：方块下落和堆叠区域
- 右边提升框：下个方块类型
- 中间方块：方块运动和堆叠
- 下方计分：行数得分
2.2 绘制大框
2.3 绘制提示方块
2.4 绘制运动方块
2.5 绘制得分区域
3. 游戏逻辑
简单的小游戏主体游戏逻辑为：等待开始，开始，结束流程图如下：
4. 完整逻辑
@Entry
@Component
struct Index {
@State message: string = 'Hello World'
private settings: RenderingContextSettings = new RenderingContextSettings(true);
private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
private blockType: number = 0
private blockSize: number = 30
private blockShapBasic = [
[[0,0],[0,1],[0,2],[0,3]],
[[0,0],[0,1],[0,2],[1,2]],
[[0,0],[0,1],[1,1],[0,2]],
[[0,0],[0,1],[1,1],[1,2]],
[[0,0],[0,1],[1,0],[1,1]],
]
private blockShap = [
[[0,0],[0,1],[0,2],[0,3]],
[[0,0],[0,1],[0,2],[1,2]],
[[0,0],[0,1],[1,1],[0,2]],
[[0,0],[0,1],[1,1],[1,2]],
[[0,0],[0,1],[1,0],[1,1]],
]
private curBlockShap = []
private sideStartX = 300;
private sideStartY = 150;
private slotStartX = 120;
private slotStartY = 150;
private slotBottomY = 150;;
private score = 0;
private step = 0;
private direction = 0;
aboutToDisappear() {
}
aboutToAppear() {
this.sleep(1000)
}
async sleep(ms: number) {
return new Promise((r) => {
setInterval(() => {
console.log(this.message)
this.drawStep()
}, ms)
})
}
doClick() {
this.direction += 1
}
drawBox() {
this.context.lineWidth = 4
this.context.beginPath()
this.context.lineCap = 'butt'
this.context.moveTo(0, 100)
this.context.lineTo(270, 100)
this.context.moveTo(270, 100)
this.context.lineTo(270, 690)
this.context.moveTo(0, 690)
this.context.lineTo(270, 690)
}
setDirection() {
this.curBlockShap = this.blockShap[this.blockType]
if (this.direction > 0) {
for (let i=0;i<4;i++) {
let x = this.curBlockShap[i][0]
this.curBlockShap[i][0] = this.curBlockShap[i][1]
this.curBlockShap[i][1] = x
}
this.direction = 0
}
}
drawSideBlock() {
this.context.fillStyle = 'rgb(250,0,0)'
let bs = this.blockSize
let coords = this.blockShapBasic[this.blockType]
let x = this.sideStartX + coords[0][0]*this.blockSize
let y = this.sideStartY + coords[0][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
x = this.sideStartX + coords[1][0]*this.blockSize
y = this.sideStartY + coords[1][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
x = this.sideStartX + coords[2][0]*this.blockSize
y = this.sideStartY + coords[2][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
x = this.sideStartX + coords[3][0]*this.blockSize
y = this.sideStartY + coords[3][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
this.context.stroke()
}
drawBoxBlock() {
this.setDirection()
this.context.fillStyle = 'rgb(250,0,0)'
let bs = this.blockSize
let coords = this.curBlockShap
let starty = this.slotStartY + this.step * this.blockSize
let x = this.slotStartX + coords[0][0]*this.blockSize
let y = starty + coords[0][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
x = this.slotStartX + coords[1][0]*this.blockSize
y = starty + coords[1][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
x = this.slotStartX + coords[2][0]*this.blockSize
y = starty + coords[2][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
x = this.slotStartX + coords[3][0]*this.blockSize
y = starty + coords[3][1]*this.blockSize
this.context.fillRect(x, y, bs, bs)
this.context.rect(x, y, bs, bs)
console.info("x,y"+x.toString()+":"+y.toString())
this.context.stroke()
this.slotBottomY = y
}
drawScore() {
this.context.fillStyle = 'rgb(0,0,0)'
this.context.font = '80px sans-serif'
this.context.fillText("Score:"+this.score.toString(), 20, 740)
}
randomType() {
this.blockType = Math.floor(Math.random()*5)
console.info("blocktype:"+this.blockType.toString())
}
drawStep() {
this.context.clearRect(0,0,this.context.width,this.context.height)
this.step += 1
this.drawBox()
this.drawSideBlock()
this.drawBoxBlock()
this.drawScore()
if (this.slotBottomY >= 660) {
this.step = 0
this.randomType()
}
}
drawall() {
this.drawBox()
this.drawSideBlock()
this.drawBoxBlock()
this.drawScore()
}
build() {
Row() {
Column() {
Canvas(this.context)
.width('100%')
.height('100%')
.onClick((ev: ClickEvent) => {
console.info("click!!")
this.doClick()
})
.onReady(() =>{
this.context.imageSmoothingEnabled = false
this.randomType()
this.drawall()
})
}
.width('100%')
}
.height('100%')
.backgroundColor("#cccccc")
}
}
- 1.
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39.
- 40.
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.
- 58.
- 59.
- 60.
- 61.
- 62.
- 63.
- 64.
- 65.
- 66.
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.
- 83.
- 84.
- 85.
- 86.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92.
- 93.
- 94.
- 95.
- 96.
- 97.
- 98.
- 99.
- 100.
- 101.
- 102.
- 103.
- 104.
- 105.
- 106.
- 107.
- 108.
- 109.
- 110.
- 111.
- 112.
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.
- 126.
- 127.
- 128.
- 129.
- 130.
- 131.
- 132.
- 133.
- 134.
- 135.
- 136.
- 137.
- 138.
- 139.
- 140.
- 141.
- 142.
- 143.
- 144.
- 145.
- 146.
- 147.
- 148.
- 149.
- 150.
- 151.
- 152.
- 153.
- 154.
- 155.
- 156.
- 157.
- 158.
- 159.
- 160.
- 161.
- 162.
- 163.
- 164.
- 165.
- 166.
- 167.
- 168.
- 169.
- 170.
- 171.
- 172.
- 173.
- 174.
- 175.
- 176.
- 177.
- 178.
- 179.
- 180.
- 181.
- 182.
- 183.
- 184.
- 185.
- 186.
- 187.
- 188.
- 189.
遗留问题：
-
没实现堆积计分（接下来会做）；
-
可实现网络对战（分布式对战）；
5. 获取源码
等游戏完整发布，会有两个版本，单机和联机版本
总结
本文主要介绍了小游戏的开发，画布功能的使用
童年回忆的第一款游戏就是俄罗斯方块了