自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

跟著小白一起學(xué)鴻蒙—一起學(xué)做Tetris(上)

作者：王石
系統(tǒng) OpenHarmony
小時候有個游戲叫俄羅斯方塊，大人小孩都喜歡玩，我們就一起看看如何能用OpenHarmony學(xué)習(xí)做個Tetris。

??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

簡介

小時候有個游戲叫俄羅斯方塊，大人小孩都喜歡玩，我們就一起看看如何能用OpenHarmony學(xué)習(xí)做個Tetris。

#盲盒+碼##跟著小白一起學(xué)鴻蒙# [番外三]一起學(xué)做Tetris(上)-開源基礎(chǔ)軟件社區(qū)

開發(fā)

1、HAP應(yīng)用建立

《#跟著小白一起學(xué)鴻蒙#[六]如何編寫一個hap應(yīng)用》里我們介紹了簡單的Hap應(yīng)用的開發(fā)以及基礎(chǔ)控件的介紹，這里我們就不贅述Hap項目的建立過程，以下就是基礎(chǔ)的Hap的page文件：index.ets。

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")
  }

build是基礎(chǔ)頁面的構(gòu)造函數(shù)，用于界面的元素構(gòu)造，其他的頁面的生命周期函數(shù)如下：

declare class CustomComponent {
  /**
   * Customize the pop-up content constructor.
   * @since 7
   */
  build(): void;
  /**
   * aboutToAppear Method
   * @since 7
   */
  aboutToAppear?(): void;
  /**
   * aboutToDisappear Method
   * @since 7
   */
  aboutToDisappear?(): void;
  /**
   * onPageShow Method
   * @since 7
   */
  onPageShow?(): void;
  /**
   * onPageHide Method
   * @since 7
   */
  onPageHide?(): void;
  /**
   * onBackPress Method
   * @since 7
   */
  onBackPress?(): void;
}

2、Canvas介紹

canvas是畫布組件用于自定義繪制圖形，具體的API頁面如下：

https://developer.harmonyos.com/cn/docs/documentation/doc-references/ts-components-canvas-canvas-0000001333641081。

頁面顯示前會調(diào)用aboutToAppear()函數(shù)，此函數(shù)為頁面生命周期函數(shù)。

canvas組件初始化完畢后會調(diào)用onReady()函數(shù)，函數(shù)內(nèi)部實現(xiàn)小游戲的初始頁面的繪制。

（1）初始化頁面數(shù)據(jù)
drawall() {
    this.drawBox()
    this.drawSideBlock()
    this.drawBoxBlock()
    this.drawScore()
  }

因為都是畫布畫的，所以布局有點麻煩，需要畫幾個部分：

  • 中間的大框：方塊下落和堆疊區(qū)域。
  • 右邊提升框：下個方塊類型。
  • 中間方塊：方塊運動和堆疊。
  • 下方計分：行數(shù)得分。
（2）繪制大框
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)
  }
（3）繪制提示方塊
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()
  }
（4）繪制運動方塊
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
}
（5）繪制得分區(qū)域
drawScore() {
    this.context.fillStyle = 'rgb(0,0,0)'
    this.context.font = '80px sans-serif'
    this.context.fillText("Score:"+this.score.toString(), 20, 740)
  }

3、游戲邏輯

簡單的小游戲主體游戲邏輯為：等待開始，開始，結(jié)束流程圖如下：

graph LR
timer開始 --> 方塊下落
timer開始 --> click[點擊]
click[點擊] --> 方塊變形
方塊下落 --> |落到底| 能消除 --> 計分 --> 堆積
方塊下落 --> |落到底| 不能消除 --> 堆積
堆積 --> |堆積到頂| 滿了 --> 游戲結(jié)束
堆積 --> |堆積到頂| 未滿 --> 方塊下落
doClick() {
    this.direction += 1
  }

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. 沒實現(xiàn)堆積計分（接下來會做）。
  2. 可實現(xiàn)網(wǎng)絡(luò)對戰(zhàn)（分布式對戰(zhàn)）。

5、獲取源碼

等游戲完整發(fā)布，會有兩個版本，單機和聯(lián)機版本。

總結(jié)

本文主要介紹了小游戲的開發(fā)，畫布功能的使用。

??想了解更多關(guān)于開源的內(nèi)容，請訪問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??。

責(zé)任編輯：jianghua 來源： 51CTO開源基礎(chǔ)軟件社區(qū)
Tetris鴻蒙
相關(guān)推薦

2022-12-02 14:20:09

Tetris鴻蒙

2022-11-14 17:01:34

游戲開發(fā)畫布功能

2023-03-30 09:32:27

2023-04-04 09:24:11

鴻蒙HiDumper

2022-10-10 14:47:04

藍牙應(yīng)用鴻蒙

2023-02-27 16:30:32

鴻蒙開源協(xié)議分析

2022-08-19 19:02:20

開源鴻蒙操作系統(tǒng)

2023-03-30 09:19:54

SELinux安全子系統(tǒng)

2023-01-03 15:09:10

鴻蒙常用工具

2022-11-24 14:34:41

Hap程序鴻蒙

2023-03-15 16:19:03

BinderIPC工具

2022-12-06 15:39:16

鴻蒙主干代碼

2022-10-20 16:40:16

JS應(yīng)用控制LED鴻蒙

2022-10-09 15:05:50

NAPI框架鴻蒙

2022-09-28 13:57:41

鴻蒙開源

2023-04-06 09:18:52

鴻蒙AVPlayerAVRecorder

2023-02-24 16:02:45

WebSocket網(wǎng)絡(luò)通訊協(xié)議

2022-11-28 15:42:39

分布式軟總線鴻蒙

2022-10-17 14:29:24

鴻蒙應(yīng)用開發(fā)

2022-12-09 15:34:38

點贊
收藏

51CTO技術(shù)棧公眾號