#盲盒+码# #跟着小白一起学鸿蒙# [番外]一起学做Tetris(下) 原创 精华

左翼风发
发布于 2022-11-30 13:47
浏览
2收藏

#跟着小白一起学鸿蒙# [番外]一起学做Tetris(下)

作者:王石

简介

接着《#跟着小白一起学鸿蒙# [番外]一起学做Tetris(上)》我们完善了页面,增加了左右按键和之前方块显示,方块消除。

#盲盒+码# #跟着小白一起学鸿蒙# [番外]一起学做Tetris(下)-鸿蒙开发者社区


开发

1. 按键增加

之前我们布局一直是只有个Canvas控件,现在我们需要设置高度后增加一个Row的布局,并增加两个Button控件,以下就是基础的Hap的page文件:index.ets

  build() {
    Column() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onClick((ev: ClickEvent) => {
            console.info("click!!")
            this.doClick()
          })
          .onTouch((ev) => {
            console.info("touch:"+ev.type.toString())
            console.info("touch x:"+ev.touches[0].screenX.toString())
            console.info("touch y:"+ev.touches[0].screenY.toString())
          })

          .onReady(() =>{
            this.context.imageSmoothingEnabled = false
            this.randomType()
            this.drawall()
          })
      }
      .height('92%')
      .width('100%')
      Row() {
        Button() {    //按钮控件
          Text('左')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Capsule)
        .width('20%')
        .height('6%')
        .backgroundColor('#0D9FFB')
        .onClick(() => {    //点击事件
          if (this.left > 0) {
            this.moveAction -= 1
          }
        })
        Button() {    //按钮控件
          Text('右')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Capsule)
        .width('20%')
        .height('6%')
        .backgroundColor('#0D9FFB')
        .onClick(() => {    //点击事件
          if (this.rightX < 240) {
            this.moveAction += 1
          }
        })
      }

    }
    .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.

2. 游戏完善的说明

之前我们的游戏只有布局,方块显示和变形,在完善后我们增加了积累方块的显示,消除,计分,游戏结束判断等。

2.1 积累方块显示
drawBlockmap() {
    let bs = this.blockSize
    this.context.fillStyle = 'rgb(250,0,0)'
    for (let i=0;i<23;i++) {
      for (let j=0;j<9;j++) {
        //是否有方块
        if (this.blockmap[i][j] == 1) {
          let y = i * this.blockSize
          let x = j * this.blockSize
          this.context.fillRect(x, y, bs, bs)
          this.context.rect(x, y, bs, bs)
          console.info("drawBlockmap:"+x.toString()+":"+y.toString())
        }
      }
      this.context.stroke()
      console.info("drawBlockmap:"+this.storeBlock.length.toString())
    }
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.

因为都是画布画的,为了重绘已经存在的方块,我们应用二维数组blockmap表示,值为1则有方块,数组索引则表示绘制坐标位置:

2.2 判断是否到底还是到顶
  checkBlockmap() {
    if (this.storeBlock.length == 0) {
      if (this.slotBottomY >= 660) {
        return 1
      }
    } else {
      let coords = this.curBlockShap
      let startx = this.slotStartX + this.moveAction * this.blockSize
      let starty = this.slotStartY + this.step * this.blockSize
      for (let i=0;i<4;i++) {
        let x = startx + coords[i][0]*this.blockSize
        let y = starty + coords[i][1]*this.blockSize + this.blockSize
        for (let k=0;k<22;k++) {
          for (let l=0;l<9;l++) {
            if (this.blockmap[k][l] == 1) {
              let blocky = k * this.blockSize
              let blockx = l * this.blockSize
              //判断是否到底
              if ((x == blockx && y == blocky) || y > 660) {
                //判断是否到顶
                if (y == 210) {
                  this.context.drawImage( this.gameoverImg,this.startX,this.startY,300,90)
                  //到顶回2
                  return 2
                }
                //到底回1
                return 1
              }
            }
          }
        }
      }
    }
    return 0
  }
  • 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.

先判断是否到底,到底的同时判断是否到顶,如果到顶了就是满了,如果只是到底则表明游戏可以继续 ;

2.3 到底积累方块
stackBlock() {
    let block = []
    let coords = this.curBlockShap
    let startx = this.slotStartX + this.moveAction * this.blockSize
    let starty = this.slotStartY + this.step * this.blockSize
    for (let i=0;i<4;i++) {
      let x = startx + coords[i][0]*this.blockSize
      let y = starty + coords[i][1]*this.blockSize
      console.info("stackBlock x:"+x.toString()+"y:"+y.toString())
      let indexX = x/this.blockSize
      let indexY = y/this.blockSize
      this.blockmap[indexY][indexX] = 1
      console.info("stackBlock:"+indexX+":"+indexY)
      block.push([x,y])
    }
    this.storeBlock.push(block)

    console.info("stackBlock:"+this.storeBlock.length.toString())
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

如果到底了,就用坐标计算出 索引,然后在blockmap里标识为1,说明此处有方块,这样方便后面的绘制的显示;

2.4 清除方块
cleanBlockmap() {
    //检查是否一行满了
    let needMove = 0
    for (let i=22;i>=0;i--) {
      let linecnt = 0
      for (let j = 8;j >= 0; j--) {
        //是否有方块
        if (this.blockmap[i][j] == 1) {
          linecnt += 1
        }
      }
      if (linecnt == 9) {
        //此行都是方块,消除,计分
        for (let j = 8;j >= 0; j--) {
          this.blockmap[i][j] = 0
        }
        needMove += 1
        this.score += 1
      } else if (needMove > 0) {
        for (let j = 8;j >= 0; j--) {
          this.blockmap[i+needMove][j] = this.blockmap[i][j]
          this.blockmap[i][j] = 0
        }
      }
    }
  }
  • 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.

二维数组的好处就是方便每行计数清除,然后从底向上再逐层替换;

2.5 绘制每一步
drawStep() {
    this.context.clearRect(0,0,this.context.width,this.context.height)
    this.step += 1
    this.drawBox()
    this.drawBlockmap()
    this.cleanBlockmap()
    this.drawSideBlock()
    this.drawBoxBlock()
    this.drawScore()
    let stepType = this.checkBlockmap()
    if ( stepType == 1) {
      this.stackBlock()
      this.step = 0
      this.randomType()
    } else if (stepType == 2) {
      this.state= 2
      this.context.drawImage( this.gameoverImg,this.startX,this.startY,300,90)
    }
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

绘制每一步其实就是重绘界面,包括如果游戏结束显示game over

3. 游戏逻辑

简单的小游戏主体游戏逻辑为:等待开始,开始,结束流程图如下:

graph LR
timer开始 --> 方块下落
timer开始 --> click[点击]
click[点击] --> 方块变形
方块下落 --> |落到底| 能消除 --> 计分 --> 堆积
方块下落 --> |落到底| 不能消除 --> 堆积
堆积 --> |堆积到顶| 满了 --> 游戏结束
堆积 --> |堆积到顶| 未满 --> 方块下落
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
doClick() {
    if (this.state == 0) {
      this.direction += 1
    } else if (this.state == 2) {
      this.state = 0
      this.score = 0
      this.storeBlock = []
      this.initMap()
    }
  }
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

游戏结束后需要重新初始化内部数据。

4. 完整逻辑

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private gameoverImg:ImageBitmap = new ImageBitmap("common/images/gameover.png")
  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 blockmap = [];
  private curBlockShap = []
  private storeBlock = []
  private sideStartX = 300;
  private sideStartY = 150;
  private startX = 20
  private startY = 300

  private slotStartX = 120;
  private slotStartY = 150;
  private slotBottomY = 150;
  private xleft = 0;
  private rightX = 0;

  private score = 0;
  private step = 0;
  private direction = 0;
  private moveAction = 0;
  private state = 0;

  aboutToDisappear() {
  }

  aboutToAppear() {
    this.initMap()
    this.sleep(1000)
  }

  initMap() {
    for (let i=0;i<23;i++) {
      let item = []
      for (let j=0;j<9;j++) {
        item.push(0)
      }
      this.blockmap.push(item)
    }
  }

  async sleep(ms: number) {
    return new Promise((r) => {
      setInterval(() => {
//        console.log(this.message)
        if (this.state == 0) {
          this.drawStep()
        }
      }, ms)
    })
  }

  doClick() {
    if (this.state == 0) {
      this.direction += 1
    } else if (this.state == 2) {
      this.state = 0
      this.score = 0
      this.storeBlock = []
      this.initMap()
    }
  }

  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]
    for (let i=0;i<4;i++) {
      let x = this.sideStartX + coords[i][0]*this.blockSize
      let y = this.sideStartY + coords[i][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() {
    let min = 690
    let max = 0
    this.setDirection()
    this.context.fillStyle = 'rgb(250,0,0)'
    let bs = this.blockSize
    let coords = this.curBlockShap
    let startx = this.slotStartX + this.moveAction * this.blockSize
    let starty = this.slotStartY + this.step * this.blockSize
    for (let i=0;i<4;i++) {
      let x = startx + coords[i][0]*this.blockSize
      let y = starty + coords[i][1]*this.blockSize
      min = min > x ? x:min
      max = max < x ? x:max
      this.context.fillRect(x, y, bs, bs)
      this.context.rect(x, y, bs, bs)
//      console.info("x,y"+x.toString()+":"+y.toString())
      this.slotBottomY = y
      this.xleft = min
      this.rightX = max
    }
    this.context.stroke()
//    console.info("min,max"+min.toString()+":"+max.toString())
  }

  stackBlock() {
    let block = []
    let coords = this.curBlockShap
    let startx = this.slotStartX + this.moveAction * this.blockSize
    let starty = this.slotStartY + this.step * this.blockSize
    for (let i=0;i<4;i++) {
      let x = startx + coords[i][0]*this.blockSize
      let y = starty + coords[i][1]*this.blockSize
      console.info("stackBlock x:"+x.toString()+"y:"+y.toString())
      let indexX = x/this.blockSize
      let indexY = y/this.blockSize
      this.blockmap[indexY][indexX] = 1
      console.info("stackBlock:"+indexX+":"+indexY)
      block.push([x,y])
    }
    this.storeBlock.push(block)

    console.info("stackBlock:"+this.storeBlock.length.toString())
  }

  checkBlockmap() {
    if (this.storeBlock.length == 0) {
      if (this.slotBottomY >= 660) {
        return 1
      }
    } else {
      let coords = this.curBlockShap
      let startx = this.slotStartX + this.moveAction * this.blockSize
      let starty = this.slotStartY + this.step * this.blockSize
      for (let i=0;i<4;i++) {
        let x = startx + coords[i][0]*this.blockSize
        let y = starty + coords[i][1]*this.blockSize + this.blockSize
        for (let k=0;k<22;k++) {
          for (let l=0;l<9;l++) {
            if (this.blockmap[k][l] == 1) {
              let blocky = k * this.blockSize
              let blockx = l * this.blockSize
              //判断是否到底
              if ((x == blockx && y == blocky) || y > 660) {
                //判断是否到顶
                if (y == 210) {
                  this.context.drawImage( this.gameoverImg,this.startX,this.startY,300,90)
                  //到顶回2
                  return 2
                }
                //到底回1
                return 1
              }
            }
          }
        }
      }
    }
    return 0
  }

  cleanBlockmap() {
    //检查是否一行满了
    let needMove = 0
    for (let i=22;i>=0;i--) {
      let linecnt = 0
      for (let j = 8;j >= 0; j--) {
        //是否有方块
        if (this.blockmap[i][j] == 1) {
          linecnt += 1
        }
      }
      if (linecnt == 9) {
        //此行都是方块,消除,计分
        for (let j = 8;j >= 0; j--) {
          this.blockmap[i][j] = 0
        }
        needMove += 1
        this.score += 1
      } else if (needMove > 0) {
        for (let j = 8;j >= 0; j--) {
          this.blockmap[i+needMove][j] = this.blockmap[i][j]
          this.blockmap[i][j] = 0
        }
      }
    }
  }

  drawBlockmap() {
    let bs = this.blockSize
    this.context.fillStyle = 'rgb(250,0,0)'
    for (let i=0;i<23;i++) {
      for (let j=0;j<9;j++) {
        //是否有方块
        if (this.blockmap[i][j] == 1) {
          let y = i * this.blockSize
          let x = j * this.blockSize
          this.context.fillRect(x, y, bs, bs)
          this.context.rect(x, y, bs, bs)
          console.info("drawBlockmap:"+x.toString()+":"+y.toString())
        }
      }
      this.context.stroke()
      console.info("drawBlockmap:"+this.storeBlock.length.toString())
    }
  }

  drawScore() {
    this.context.fillStyle = 'rgb(0,0,0)'
    this.context.font = '80px sans-serif'
    this.context.fillText("Score:"+this.score.toString(), 20, 140)
  }

  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.drawBlockmap()
    this.cleanBlockmap()
    this.drawSideBlock()
    this.drawBoxBlock()
    this.drawScore()
    let stepType = this.checkBlockmap()
    if ( stepType == 1) {
      this.stackBlock()
      this.step = 0
      this.randomType()
    } else if (stepType == 2) {
      this.state= 2
      this.context.drawImage( this.gameoverImg,this.startX,this.startY,300,90)
    }
  }

  drawall() {
    this.drawBox()
    this.drawSideBlock()
    this.drawBoxBlock()
    this.drawScore()
  }

  build() {
    Column() {
      Column() {
        Canvas(this.context)
          .width('100%')
          .height('100%')
          .onClick((ev: ClickEvent) => {
            console.info("click!!")
            this.doClick()
          })
          .onTouch((ev) => {
            console.info("touch:"+ev.type.toString())
            console.info("touch x:"+ev.touches[0].screenX.toString())
            console.info("touch y:"+ev.touches[0].screenY.toString())
          })

          .onReady(() =>{
            this.context.imageSmoothingEnabled = false
            this.randomType()
            this.drawall()
          })
      }
      .height('92%')
      .width('100%')
      Row() {
        Button() {    //按钮控件
          Text('左')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Capsule)
        .width('20%')
        .height('6%')
        .backgroundColor('#0D9FFB')
        .onClick(() => {    //点击事件
          if (this.xleft > 0) {
            this.moveAction -= 1
          }
        })
        Button() {    //按钮控件
          Text('右')
            .fontSize(20)
            .fontWeight(FontWeight.Bold)
        }.type(ButtonType.Capsule)
        .width('20%')
        .height('6%')
        .backgroundColor('#0D9FFB')
        .onClick(() => {    //点击事件
          if (this.rightX < 240) {
            this.moveAction += 1
          }
        })
      }

    }
    .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.
  • 190.
  • 191.
  • 192.
  • 193.
  • 194.
  • 195.
  • 196.
  • 197.
  • 198.
  • 199.
  • 200.
  • 201.
  • 202.
  • 203.
  • 204.
  • 205.
  • 206.
  • 207.
  • 208.
  • 209.
  • 210.
  • 211.
  • 212.
  • 213.
  • 214.
  • 215.
  • 216.
  • 217.
  • 218.
  • 219.
  • 220.
  • 221.
  • 222.
  • 223.
  • 224.
  • 225.
  • 226.
  • 227.
  • 228.
  • 229.
  • 230.
  • 231.
  • 232.
  • 233.
  • 234.
  • 235.
  • 236.
  • 237.
  • 238.
  • 239.
  • 240.
  • 241.
  • 242.
  • 243.
  • 244.
  • 245.
  • 246.
  • 247.
  • 248.
  • 249.
  • 250.
  • 251.
  • 252.
  • 253.
  • 254.
  • 255.
  • 256.
  • 257.
  • 258.
  • 259.
  • 260.
  • 261.
  • 262.
  • 263.
  • 264.
  • 265.
  • 266.
  • 267.
  • 268.
  • 269.
  • 270.
  • 271.
  • 272.
  • 273.
  • 274.
  • 275.
  • 276.
  • 277.
  • 278.
  • 279.
  • 280.
  • 281.
  • 282.
  • 283.
  • 284.
  • 285.
  • 286.
  • 287.
  • 288.
  • 289.
  • 290.
  • 291.
  • 292.
  • 293.
  • 294.
  • 295.
  • 296.
  • 297.
  • 298.
  • 299.
  • 300.
  • 301.
  • 302.
  • 303.
  • 304.
  • 305.
  • 306.
  • 307.
  • 308.
  • 309.
  • 310.
  • 311.
  • 312.
  • 313.
  • 314.
  • 315.
  • 316.
  • 317.
  • 318.
  • 319.
  • 320.
  • 321.
  • 322.
  • 323.
  • 324.
  • 325.
  • 326.
  • 327.
  • 328.
  • 329.
  • 330.
  • 331.
  • 332.
  • 333.
  • 334.
  • 335.
  • 336.
  • 337.
  • 338.
  • 339.
  • 340.
  • 341.
  • 342.
  • 343.
  • 344.
  • 345.

遗留问题:

  1. 有bug,方块变形不完整;

  2. 可实现网络对战(分布式对战);

5. 获取源码

等游戏完整发布,会有两个版本,单机和联机版本


总结

本文主要介绍了小游戏的开发,画布功能的使用,游戏逻辑,分布式

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2022-11-30 13:48:41修改
5
收藏 2
回复
举报
5
5
2
5条回复
按时间正序
/
按时间倒序
红叶亦知秋
红叶亦知秋

好奇联机版本会有多端分布式交互吗?

回复
2022-11-30 14:26:35
hmyxd
hmyxd

已经做到可以正常游玩了


回复
2022-12-1 16:14:46
真庐山升龙霸
真庐山升龙霸

方块变形不完整是指无法完全变形吗

回复
2022-12-2 18:33:11
左翼风发
左翼风发 回复了 真庐山升龙霸
方块变形不完整是指无法完全变形吗
setDirection() {  this.curBlockShap = this.blockShap[this.blockType]  let basicShap = this.blockShapBasic[this.blockType]  if (this.stepBlockType == 0 || (this.stepBlockType > 0 && this.stepBlockType != this.direction)) {    switch (this.direction) {      case 0:        {          for (let i=0;i<4;i++) {            let x = basicShap[i][0]            let y = basicShap[i][1]            this.curBlockShap[i][0] = x            this.curBlockShap[i][1] = y          }          this.stepBlockType = this.direction        }        break;      case 1:        {          for (let i=0;i<4;i++) {            let x = basicShap[i][0]            let y = basicShap[i][1]            this.curBlockShap[i][0] = -y            this.curBlockShap[i][1] = x          }          this.stepBlockType = this.direction        }      break;      case 2:        {          for (let i=0;i<4;i++) {            let x = basicShap[i][0]            let y = basicShap[i][1]            console.info("x:"+x.toString()+" y:"+y.toString())            this.curBlockShap[i][0] = -x            this.curBlockShap[i][1] = -y          }          this.stepBlockType = this.direction        }      break;      case 3:        {          for (let i=0;i<4;i++) {            let x = basicShap[i][0]            let y = basicShap[i][1]            console.info("x:"+x.toString()+" y:"+y.toString())            this.curBlockShap[i][0] = y            this.curBlockShap[i][1] = -x          }          this.stepBlockType = this.direction        }        break;      default:        for (let i=0;i<4;i++) {          let x = this.curBlockShap[i][0]          let y = this.curBlockShap[i][1]          console.info("x:"+x.toString()+" y:"+y.toString())        }      break;    }  }}
  • 1.

更新了下变形代码

回复
2022-12-4 14:12:00
liurick
liurick

试试变形代码


回复
2022-12-5 09:48:11


回复
    相关推荐