#HarmonyOS技术训练营第四期#Ark UI 贪食蛇

const colors = ['#FFFFFF', '#ff0000', '#000000']

initialize() { 	initialize() {  this.gridColorIndex = new Array();  for (let i = 0; i < 20; i++) {    this.gridColorIndex.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);  }  this.headX = 0;  this.headY = 0;  this.foodX = 0;  this.foodY = 0;  this.score = 0;  this.gameOver = false;  this.result = 0;  this.times = 0;  this.snake = new Array();}Grid() {  ForEach(this.rowIndex, (row: number) => {    ForEach(this.colIndex, (col: number) => {      GridItem() {        Text('')          .backgroundColor(colors[this.gridColorIndex[row][col]])          .width(17)          .height(17)      }    }, col => col.toString())  }, row => row.toString())}.columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').rowsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr').rowsGap(2).columnsGap(2).backgroundColor('#C1D0E6').height(355)

Button('开始游戏')  .height(70)  .width(200)  .fontSize(35)  .fontWeight(FontWeight.Bold)  .align(Alignment.Center)  .backgroundColor('#4162AA')  .fontColor(Color.White)  .margin({ left: 5, top: 10, bottom: 5, right: 5 })  .onClick((event: ClickEvent) => {    this.initialize()    this.initSnake()    this.setFood()    this.move()  })initialize() {  this.gridColorIndex = new Array();  for (let i = 0; i < 20; i++) {    this.gridColorIndex.push([0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]);  }  this.headX = 0;  this.headY = 0;  this.foodX = 0;  this.foodY = 0;  this.score = 0;  this.gameOver = false;  this.result = 0;  this.times = 0;  this.snake = new Array();}

//初始化蛇  initSnake() {    this.headX = 0;    this.headY = 0;    this.snake.push([this.headX, this.headY]);    this.gridColorIndex[this.headX][this.headY] = 2;    this.dir = 'right';  }

 setFood() {    do {      this.foodX = Math.floor(Math.random() * 20);      this.foodY = Math.floor(Math.random() * 20);    } while (this.isFoodInSnake());    this.gridColorIndex[this.foodX][this.foodY] = 1;    console.info('Tracy setFood foodX = ' + this.foodX + ' foodY = ' + this.foodY);  }//判断食物是否在蛇身  isFoodInSnake() {    for (var index = 0; index < this.snake.length; index++) {      if (this.foodX == this.snake[index][0] && this.foodY == this.snake[index][1]) {        return true;      }    }    return false;  }

move() {  console.info('Tracy move!!')  var inervalID = setInterval(() => {    this.times += 1;    this.moveSnake()    if (this.gameOver) {      clearInterval(inervalID)      this.dialogController.open();    }  }, 500);}//移动蛇  moveSnake() {    console.info('Tracy moveSnake!!')    let step = 1    if (this.dir == 'left' || this.dir == 'up') {      step = -1;    }    console.info('Tracy moveSnake step = ' + step);    let newHead;    if (this.dir == 'left' || this.dir == 'right') {      this.headY += step;    } else if (this.dir == 'up' || this.dir == 'down') {      this.headX += step    }    console.info('Tracy moveSnake headX = ' + this.headX + '; headY = ' + this.headY);    this.checkMove(this.headX, this.headY)    newHead = [[this.headX, this.headY]];    newHead = newHead.concat(this.snake);    this.snake = newHead;    this.gridColorIndex[this.headX][this.headY] = 2;    //吃到食物    if (this.headX == this.foodX && this.headY == this.foodY) {      this.score += 1;      this.setFood() //重新产生食物    } else { //没有吃到食物，删除蛇尾      let delItem = this.snake.pop();      console.info('Tracy snake lenght = ' + this.snake.length);      console.info('Tracy delete delItemX = ' + delItem[0] + ' delItemY= ' + delItem[1]);      this.gridColorIndex[delItem[0]][delItem[1]] = 0;    }  }checkMove(x, y) {  //表示撞墙了  if (x < 0 || y < 0 || x > 19 || y > 19) {    this.gameOver = true;    this.result = 1;    return;  } else {    for (let index = 0; index < this.snake.length; index++) {      if (x == this.snake[index][0] && y == this.snake[index][1]) {        this.gameOver = true;        this.result = 2;        return;      }    }  }  if (this.score >= 100) {    this.gameOver = true;    this.result = 0;    return;  }}

Row() {  setButton({ dirDesc: '↑', dir: 'up', direction: $dir })  setButton({ dirDesc: '←', dir: 'left', direction: $dir })  setButton({ dirDesc: '→', dir: 'right', direction: $dir })  setButton({ dirDesc: '↓', dir: 'down', direction: $dir })}struct setButton {  private dirDesc: string  private dir: string  @Link direction: String  build() {    Button(this.dirDesc)      .height(70)      .width(70)      .fontSize(35)      .fontWeight(FontWeight.Bold)      .align(Alignment.Center)      .backgroundColor('#4162AA')      .fontColor(Color.White)      .margin({ left: 5, top: 20, bottom: 5, right: 5 })      .onClick((event: ClickEvent) => {        this.direction = this.dir      })  }}

struct DialogResult {  controller: CustomDialogController;  @Link result: number  @Link score: number  build() {    Column() {      if (this.result == 0) {        Text('好厉害，挑战成功！')          .fontSize(25)          .fontColor(Color.Red)      } else if (this.result == 1) {        Text('撞墙了！你的分数是：' + this.score + ' 分')          .fontSize(25)          .fontColor(Color.Green)      } else if (this.result == 2) {        Text('撞到自己了！你的分数是：' + this.score + ' 分')          .fontSize(25)          .fontColor(Color.Green)      }      Button('返回游戏')        .onClick(() => {          this.controller.close();        })    }  }}

GridItem() {              Text('')                .backgroundColor(colors[this.gridColorIndex[row][col]])                .width(17)                .height(17)            }