七. 使用ts写一个贪吃蛇小游戏

之前学习了几篇的ts基础，今天我们就使用ts来完成一个贪吃蛇的小游戏。

游戏拆解

我们将我们的任务进行简单拆解分析。

  1. 首先我们应该有一个窗口，我们叫做屏幕。让蛇在里面移动，所有我们应该想到要设计一个大盒子当作地图。考虑到食物以及蛇的绘制我们可以使用canvas来实现。
  2. 其次我们还会在地图随机投放食物（这里还可以考虑食物该不该出现在蛇的身体节点上，本文不做考虑），所以我们大概率会创建一个类，这个类用来诞生一个随机方块，也就是食物。
  3. 接着我们考虑蛇，蛇在最开始应该也是一个随机方块，然后通过移动吃到食物长长。

代码实现

接下来我们根据上面的拆解做详细的需求梳理以及代码实现。
屏幕的实现
屏幕的实现是最为简单的，我们决定了使用canvas来绘制食物与蛇，那么我们直接创建一个canvas标签当作屏幕即可。

<canvas width="500" height="500"></canvas>

食物的实现

  • 接下来我们思考食物应该如何实现。既然决定在canvas绘制食物，那么最简单的方式就是把食物绘制会一个矩形。而矩形的绘制需要四个参数，分别是起始点坐标以及宽高，食物的宽高我们就设定为10，所以不确定的也就至于起始点的坐标了。这个坐标决定了他会出现在屏幕的哪个位置。

  • 还需要注意的是他的起始位置一定要在蛇的移动路径上，例如我们蛇的宽度为10，如果你的食物起始点在（11，11）这个坐标上，那么他就无法一次吃掉这个食物。
    在这里插入图片描述
    所以食物的坐标应该是10的倍数，且不能超过屏幕的边界。

  • 我们还要思考到食物被吃掉后应该就会自动消失，所以蛇这个类还应该有个清除方法可以清除掉自己。

代码展示

class Drop {
  width: number = 10
  height: number = 10
  x: number
  y: number
  color: string
  constructor(
    x: number = Math.floor(Math.random() * 49) * 10,
    y: number = Math.floor(Math.random() * 49) * 10,
    color: string = 'black'
  ) {
    this.color = color
    this.x = x
    this.y = y
  }
  del() {
    const ctx: CanvasRenderingContext2D = canvasEle.getContext('2d')!
    ctx.clearRect(this.x, this.y, this.width, this.height)
  }
}

蛇的实现
蛇的实现相对来说就要复杂很多。

  • 首先我们思考蛇的身体应该是怎样的，为了他的灵活转向，最简单的方式就是他的身体应该是一个一个的矩形拼接起来的。既然如此，我们就可以直接使用上面的食物类，这也是我将上面类的名字叫做Drop而不是Food的原因，并且我在类里面添加了颜色进行蛇与食物的区别。
  • 接下来我们想到蛇既然是多个矩形拼接起来的，那么应该有一个容器来有序的存放这些矩形，所以我们定义个数组list来进行存放身体的数据。
    class Snake {
	list: Array<Drop>
	constructor() {
		this.list = [new Drop(250, 250, 'red')]
	}
	
}
    我们让他在地图中心点生成，并使用红色进行与食物进行区分。
  • 接下来我们思考移动方法。蛇在移动的时候首先需要确认方法，我们可以设定一个方向属性，初始化的时候默认一个方向值。接着就是朝着方向移动，如何移动呢？如果简单的使用平移会发现蛇好像并不能灵活的转向，蛇的身体也不会发生弯曲。这个时候我们就需要换一个思路。既然蛇是有一个个的矩形组成，那么我们只需要控制里面的矩形就行了。当然也不是控制里面的矩形平移，而是进行矩形的增加与删除操作。想象一下，当蛇向上走一格（这里我们设定基础格子就是10 x 10单位的）是不是意味着我们将这个矩形的起点坐标的y值减去10，所以我们直接创建一个蛇头部盒子的起点坐标y值减去10的盒子，然后在直接删除蛇的最后一个盒子，是不是就可以看作移动了一格。
    在这里插入图片描述 当然我们也要考虑到吃到食物的情况，这种情况下我们是不需要删除尾部矩形的。然后我们的类就补充成这样
    class Snake {
  list: Array<Drop>
  direction: string
  constructor(direction: string = 'ArrowUp', speed: number = 100) {
    this.list = [new Drop(250, 250, 'red')]
    this.direction = direction
  }
  move() {
    let newHeader = JSON.parse(JSON.stringify(this.list[0]))
    const { x: newHeaderX, y: newHeaderY } = newHeader
    const { x: foodX, y: foodY } = food
    let isEatFood: boolean = false
    if (newHeaderX === foodX && foodY === newHeaderY) {
      isEatFood = true
    }
    switch (this.direction) {
      case 'ArrowUp':
        newHeader.y -= 10
        break
      case 'ArrowDown':
        newHeader.y += 10
        break
      case 'ArrowLeft':
        newHeader.x -= 10
        break
      case 'ArrowRight':
        newHeader.x += 10
        break
    }
    this.addHead(newHeader)
    // 判断是否吃到食物
    if (isEatFood) {
      food.del()
      food = new Drop()
      renderDorp(food)
    } else {
      this.delFooter()
    }
  }
  addHead(dorp: Drop) {
	this.list.unshift(dorp)
  }
  delFooter() {
	const endDrop: Drop = this.list.pop()!
    const { x, y, width, height } = endDrop
    const ctx: CanvasRenderingContext2D = canvasEle!.getContext('2d')!
    ctx.clearRect(x, y, width, height)
  }
}
  • 我还还应该考虑一些特殊情况，例如移动到屏幕边缘，会不会吃到自己得身体，我们新增一个状态属性来判断他是否出局，所以我们继续填充这个方法
    class Snake {
  list: Array<Drop>
  direction: string
  isOut: boolean
  constructor(direction: string = 'ArrowUp', speed: number = 100) {
    this.list = [new Drop(250, 250, 'red')]
    this.direction = direction
    this.boolean = false
  }
  move() {
    let newHeader = JSON.parse(JSON.stringify(this.list[0]))
    const { x: newHeaderX, y: newHeaderY } = newHeader
    const { x: foodX, y: foodY } = food
    let isEatFood: boolean = false
    if (newHeaderX === foodX && foodY === newHeaderY) {
      isEatFood = true
    }
    if (this.direction) {
    }
    switch (this.direction) {
      case 'ArrowUp':
        newHeader.y -= 10
        break
      case 'ArrowDown':
        newHeader.y += 10
        break
      case 'ArrowLeft':
        newHeader.x -= 10
        break
      case 'ArrowRight':
        newHeader.x += 10
        break
    }
    // 是否吃到自己
    const isEatSelf = this.list.some(({ x, y }) => {
      if (x === newHeader.x && y === newHeader.y) {
        return true
      }
    })
    if (isEatSelf) {
      alert('吃到自己了！')
      return 
    }
    this.addHead(newHeader)
    // 判断是否吃到食物
    if (isEatFood) {
      food.del()
      food = new Drop()
      renderDorp(food)
    } else {
      this.delFooter()
    }

    // 判断是否达到边界
    if (
      newHeaderX > 500 ||
      newHeaderY > 500 ||
      newHeaderX < 0 ||
      newHeaderY < 0
    ) {
      return alert('撞墙了！')
    }
    renderDorp(this.list)
  }
  addHead(dorp: Drop) {
    this.list.unshift(dorp)
  }
  delFooter() {
    const endDrop: Drop = this.list.pop()!
    const { x, y, width, height } = endDrop
    const ctx: CanvasRenderingContext2D = canvasEle!.getContext('2d')!
    ctx.clearRect(x, y, width, height)
  }
}

渲染蛇与食物
我们写了食物与蛇的类，但是还没有真正在canvas上进行绘制。接下来我们使用ts的重载进行渲染类的绘制。

// 创建渲染函数
function renderDorp(dorp: Drop): void
function renderDorp(dorps: Array<Drop>): void
function renderDorp(dorps: Drop | Array<Drop>) {
  if (Array.isArray(dorps)) {
    dorps.forEach((element: Drop) => {
      const { x, y, width, height, color } = element
      const ctx: CanvasRenderingContext2D = canvasEle!.getContext('2d')!

      ctx.fillStyle = color
      ctx.fillRect(x, y, width, height)
    })
  } else {
    const { x, y, width, height, color } = dorps
    const ctx: CanvasRenderingContext2D = canvasEle!.getContext('2d')!
    ctx.fillStyle = color
    ctx.fillRect(x, y, width, height)
  }
}

键盘监听
我么使用方向键来控制蛇的移动，那么就需要监听键盘事件。需要注意的是，我们在身体长度为1的时候通常是可以随意移动的，比如直接从右往左或者从上到下，但是当身体长度不为1的时候，我们的有了头尾的定义，就不应该在随意的上下或者左右移动了。毕竟他不像火车一样前后都有一个车头。

window.addEventListener('keydown', function (e) {
 const { code } = e
  const keys: string[] = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
  if (keys.includes(code)) {
    if (snake.list.length === 1) {
      snake.direction = code
      return
    }
    if (snake.direction === 'ArrowUp' && code === 'ArrowDown') {
      return
    }
    if (snake.direction === 'ArrowDown' && code === 'ArrowUp') {
      return
    }
    if (snake.direction === 'ArrowLeft' && code === 'ArrowRight') {
      return
    }
    if (snake.direction === 'ArrowRight' && code === 'ArrowLeft') {
      return
    }
    snake.direction = code
  }
})

最后补充完整的实现代码

const canvasEle = document.querySelector('canvas')!
let food: Drop
let snake: Snake
class Drop {
  width: number = 10
  height: number = 10
  x: number
  y: number
  color: string
  constructor(
    x: number = Math.floor(Math.random() * 49) * 10,
    y: number = Math.floor(Math.random() * 49) * 10,
    color: string = 'black'
  ) {
    this.color = color
    this.x = x
    this.y = y
  }
  del() {
    const ctx: CanvasRenderingContext2D = canvasEle.getContext('2d')!
    ctx.clearRect(this.x, this.y, this.width, this.height)
  }
}

class Snake {
  list: Array<Drop>
  direction: string
  isOut: boolean
  constructor(direction: string = 'ArrowUp', speed: number = 100) {
    this.list = [new Drop(250, 250, 'red')]
    this.direction = direction
    this.isOut = false
  }
  move() {
    let newHeader = JSON.parse(JSON.stringify(this.list[0]))
    const { x: newHeaderX, y: newHeaderY } = newHeader
    const { x: foodX, y: foodY } = food
    let isEatFood: boolean = false
    if (newHeaderX === foodX && foodY === newHeaderY) {
      isEatFood = true
    }
    if (this.direction) {
    }
    switch (this.direction) {
      case 'ArrowUp':
        newHeader.y -= 10
        break
      case 'ArrowDown':
        newHeader.y += 10
        break
      case 'ArrowLeft':
        newHeader.x -= 10
        break
      case 'ArrowRight':
        newHeader.x += 10
        break
    }
    // 是否吃到自己
    const isEatSelf = this.list.some(({ x, y }) => {
      if (x === newHeader.x && y === newHeader.y) {
        return true
      }
    })
    if (isEatSelf) {
      this.isOut = true
      return alert('吃到自己了！')
    }
    this.addHead(newHeader)
    // 判断是否吃到食物
    if (isEatFood) {
      food.del()
      food = new Drop()
      renderDorp(food)
    } else {
      this.delFooter()
    }

    // 判断是否达到边界
    if (
      newHeaderX > 500 ||
      newHeaderY > 500 ||
      newHeaderX < 0 ||
      newHeaderY < 0
    ) {
      this.isOut = true
      return alert('撞墙了！')
    }
    renderDorp(this.list)
  }
  addHead(dorp: Drop) {
    this.list.unshift(dorp)
  }
  delFooter() {
    const endDrop: Drop = this.list.pop()!
    const { x, y, width, height } = endDrop
    const ctx: CanvasRenderingContext2D = canvasEle!.getContext('2d')!
    ctx.clearRect(x, y, width, height)
  }
}

// 创建渲染函数
function renderDorp(dorp: Drop): void
function renderDorp(dorps: Array<Drop>): void
function renderDorp(dorps: Drop | Array<Drop>) {
  if (Array.isArray(dorps)) {
    dorps.forEach((element: Drop) => {
      const { x, y, width, height, color } = element
      const ctx: CanvasRenderingContext2D = canvasEle!.getContext('2d')!

      ctx.fillStyle = color
      ctx.fillRect(x, y, width, height)
    })
  } else {
    const { x, y, width, height, color } = dorps
    const ctx: CanvasRenderingContext2D = canvasEle!.getContext('2d')!
    ctx.fillStyle = color
    ctx.fillRect(x, y, width, height)
  }
}

;(function () {
  food = new Drop()
  snake = new Snake()
  renderDorp(food)
  let timer = setInterval(() => {
    snake.move()
    if (snake.isOut) {
      clearInterval(timer)
    }
  }, 100)
  window.addEventListener('keydown', function (e) {
    const { code } = e
    const keys: string[] = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']
    if (keys.includes(code)) {
      if (snake.list.length !== 1) {
        if (snake.direction === 'ArrowUp' && code === 'ArrowDown') {
          return
        }
        if (snake.direction === 'ArrowDown' && code === 'ArrowUp') {
          return
        }
        if (snake.direction === 'ArrowLeft' && code === 'ArrowRight') {
          return
        }
        if (snake.direction === 'ArrowRight' && code === 'ArrowLeft') {
          return
        }
      }
      snake.direction = code
    }
  })
})()

这只是一个简单版贪吃蛇效果，没有经过严格测试，肯定会有bug，希望可以留言交流！
再推一个自己插件element-ui的拓展组件库，还在不断完善，希望大家支持

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/248529.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Spark编程实验一：Spark和Hadoop的安装使用

Spark编程实验一：Spark和Hadoop的安装使用

一、目的与要求 1、掌握在Linux虚拟机中安装Hadoop和Spark的方法&#xff1b; 2、熟悉HDFS的基本使用方法&#xff1b; 3、掌握使用Spark访问本地文件和HDFS文件的方法。 二、实验内容 1、安装Hadoop和Spark 进入Linux系统&#xff0c;完成Hadoop伪分布式模式的安装。完成Ha…
阅读更多...
字符串——OJ题

字符串——OJ题

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、字符串相加1、题目讲解2、思路讲解3、代码实现 二、仅仅反转字母1、题目讲解2、思路讲解3…
阅读更多...
DSP的ADC简单笔记

DSP的ADC简单笔记

DSP不需要复用GPIO&#xff0c;是单独的ADC引脚&#xff0c;与GPIO不共用 ADC时钟在PCLKCR0寄存器 所以还要配置HSPCLK HISPCP/HSPCLK寄存器 所以ADC的输入时钟&#xff0c;有固定公式&#xff1b; 控制寄存器1 简单配置3个东西&#xff1b; 控制寄存器2 设置为1软件触发 控…
阅读更多...
如何使用ArcGIS Pro拼接影像

如何使用ArcGIS Pro拼接影像

为了方便数据的存储和传输&#xff0c;我们在网上获取到的影像一般都是分块的&#xff0c;正式使用之前需要对这些影像进行拼接&#xff0c;这里为大家介绍一下ArcGIS Pro中拼接影像的方法&#xff0c;希望能对你有所帮助。 数据来源 本教程所使用的数据是从水经微图中下载的…
阅读更多...
GZ015 机器人系统集成应用技术样题2-学生赛

GZ015 机器人系统集成应用技术样题2-学生赛

2023年全国职业院校技能大赛 高职组“机器人系统集成应用技术”赛项 竞赛任务书&#xff08;学生赛&#xff09; 样题2 选手须知&#xff1a; 本任务书共 25页&#xff0c;如出现任务书缺页、字迹不清等问题&#xff0c;请及时向裁判示意&#xff0c;并进行任务书的更换。参赛队…
阅读更多...
【Qt QML 入门】TextField

【Qt QML 入门】TextField

TextField 是一个单行文本编辑器&#xff0c;它继承自TextInput&#xff0c;具备TextInput的所有功能&#xff0c;同时扩展了 TextInput 并增加了占位符文本功能和装饰选项。 自定义文本输入框&#xff1a; import QtQuick import QtQuick.Window import QtQuick.ControlsWindo…
阅读更多...
【Android】MVC与MVP的区别，MVP网络请求实践

【Android】MVC与MVP的区别，MVP网络请求实践

一、MVC模式 目录 一、MVC模式二、MVP模式 1、MVP的简单应用 1.1 导入相关依赖包并设置权限1.2 实现Model1.2 实现Presenter1.3 实现View1.4分析项目结构和绑定过程1.5效果展示 2、MVP结合RxJava 一、MVC模式 MVC&#xff08;Model(模型)——View(视图)——Controller(控制…
阅读更多...
QT-坦克大战游戏

QT-坦克大战游戏

QT-坦克大战游戏 一、演示效果二、关键程序三、下载链接 一、演示效果 二、关键程序 #include "score.h" Score::Score(){health30; maxHealthhealth;QLabel *label1 new QLabel(this);label1->setFrameStyle(QFrame::Plain | QFrame::Box);label1->setStyle…
阅读更多...
element-plus 结合Vue Router时出现的问题及解决方法之一

element-plus 结合Vue Router时出现的问题及解决方法之一

1、单文件应用element-plus中的Menu 侧边栏 <template><el-row class"tac"><el-col :span"12"><!-- <h5 class"mb-2">Custom colors</h5> --><el-menuactive-text-color"#ffd04b"background-…
阅读更多...
Leetcode—2414.最长的字母序连续子字符串的长度【中等】

Leetcode—2414.最长的字母序连续子字符串的长度【中等】

2023每日刷题&#xff08;六十&#xff09; Leetcode—2414.最长的字母序连续子字符串的长度 实现代码 class Solution { public:int longestContinuousSubstring(string s) {int ans 1;int t 1;for(int i 1; i < s.size(); i) {if(s[i] - s[i - 1] 1) {t;ans max(an…
阅读更多...
大数据生态圈kafka在物联网中的应用测试

大数据生态圈kafka在物联网中的应用测试

背景 由物联网项目中使用到了Tbox应用管理车辆&#xff0c;在上报数据的过程中&#xff0c;需要将终端产生的数据通过kafka的produce topic customer对数据进行处理后&#xff0c;放置到mysql中。完成数据二进制到json转换工作。 Kafka的使用 查看kafka的topic ./kafka-topi…
阅读更多...
直角三角形判断_分支结构 C语言xdoj56

直角三角形判断_分支结构 C语言xdoj56

问题描述 设直角三角形两条直角边长度为a和b&#xff0c;斜边长度为c&#xff0c;则a&#xff0c;b&#xff0c;c满足a^2b^2c^2&#xff0c; 输入三个整数a&#xff0c;b&#xff0c;c&#xff0c;判断对应的三角形是不是直角三角形&#xff0c;不是则输出“no”&#xff0…
阅读更多...
docker consul容器自动与注册

docker consul容器自动与注册

微服务&#xff08;容器&#xff09;注册与发现&#xff1a;是一种分布式的管理系统&#xff0c;定位服务的方法。 在传统架构当中&#xff0c;应用程序之间直连到已知服务&#xff0c;设备提供的网络&#xff1a;IP地址&#xff0c;基于tcp/ip&#xff0c;端口&#x…
阅读更多...
Apache Flume（4）：日志文件监控

Apache Flume（4）：日志文件监控

1 案例说明 企业中应用程序部署后会将日志写入到文件中&#xff0c;可以使用Flume从各个日志文件将日志收集到日志中心以便于查找和分析。 2 使用Exec Soucre Exec Source Exec Source通过指定命令监控文件的变化&#xff0c;加粗属性为必须设置的。 属性名默认值说明chan…
阅读更多...
借助文档控件Aspose.Words，在Java中比较 Word、PDF 和 PPT 文档

借助文档控件Aspose.Words，在Java中比较 Word、PDF 和 PPT 文档

文档比较是各个领域的一项关键任务&#xff0c;包括法律、出版和内容管理。它确保准确跟踪和审查对合同、报告或法律协议等文档的更改。Java 开发人员经常寻求高效可靠的方法来执行文档比较&#xff0c;而Aspose提供了强大的解决方案。在这篇博文中&#xff0c;我们将探讨如何高…
阅读更多...
npm详解

npm详解

NPM&#xff08;Node Package Manager&#xff09;是Node.js的包管理工具&#xff0c;用于管理和共享被发布到模块仓库的JavaScript代码. NPM的定义 NPM是Node.js的默认包管理工具&#xff0c;它的功能包括安装、管理、卸载和发布开源模块。NPM提供了一个模块仓库&#xff0c;开…
阅读更多...
牛客网BC100有序序列合并

牛客网BC100有序序列合并

思路&#xff1a; 运用归并排序&#xff1a; 假设给定我们两个都是升序的数组&#xff0c;要求我们要把这两个数组以升序的方式合并到一个数组中&#xff0c;则我们就可以在这两个数组中分别各拿取一个元素进行比较&#xff0c;将二者之间较小值先放在这个新数组中&#xff0c…
阅读更多...
记一次clickhouse启动报错

记一次clickhouse启动报错

clickhouse一次排错 clickhouse启动报错 报错&#xff1a; Application: Code: 210. DB::Exception: Listen [::]:8123 failed: Poco::Exception. Code: 1000, e.code() 0, DNS error: EAI: Address family for hostname not supported (version 23.3.1.2823 (official bui…
阅读更多...
一款基于分布式文件存储的数据库MongoDB的介绍及基本使用教程

一款基于分布式文件存储的数据库MongoDB的介绍及基本使用教程

MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。 在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数据存储为一个文档&#xff0c;数据结…
阅读更多...
腾讯科技Hi Tech Day暨2023数字开物大会：智能涌现将通往无数的未来

腾讯科技Hi Tech Day暨2023数字开物大会：智能涌现将通往无数的未来

腾讯科技讯 12月14日&#xff0c;以“智能涌现 数开万物”为主题的腾讯科技Hi Tech Day暨2023数字开物大会在北京国家会议中心召开&#xff0c;腾讯科技邀请知名院士、知名经济学家、知名大学教授、研究院院长、产业大咖、互联网大厂高管、知名科技领域头部企业高管、产业数字化…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站