TypeScript实战 -- 贪吃蛇游戏(1)--项目简介与具体实现、实现食物类和计分板类

最新推荐文章于 2021-11-29 16:53:58 发布

iceseasyh

最新推荐文章于 2021-11-29 16:53:58 发布

阅读量1.1k

点赞数 2

分类专栏： TypeScript 文章标签： typescript 游戏贪吃蛇游戏贪吃蛇

本文链接：https://blog.csdn.net/ICe_sea753/article/details/115913459

版权

本文介绍了一个使用TypeScript编写的贪吃蛇游戏项目，包括游戏目的、界面设计和核心类的分析。重点讨论了Food类和Scoreboard类的实现，Food类负责食物位置的随机生成，而Scoreboard类则管理积分和等级的更新。文章还提供了测试代码以验证功能的正确性。

摘要由CSDN通过智能技术生成

TypeScript实战 – 贪吃蛇(1)

目的

使用typescript以及面向对象的方式编写简易版贪吃蛇的项目，实现：蛇自主移动，吃到食物检测并增加身体长度，食物随机生成，计分板，撞墙检测，键盘事件检测等基本功能。

界面

在这里插入图片描述

分析

总体来说，整个游戏中所含的类可以分为四个：蛇(Snake)，食物(Food)，计分板(Scoreboard)，游戏控制器(GameController)。

Snake：获取与设置蛇身体部分的位置，增加长度，处理撞墙，检测是否吃到自己，禁止掉头
Food：获取与设置食物位置，随机改变位置
Scoreboard：获取积分和等级，增加积分，增加等级
GameController：控制游戏开始和结束，吃到食物检测，蛇移动，调用其他各对象的方法完成游戏的逻辑。

还需要一个HTML作为界面展示，具体typescript简单项目搭建，webpack配置可以看我另外一个文章讲了如何从0开始搭建简单的webpack编译ts的项目

HTML整体结构与样式不多赘述

注意的地方就是：因为每次吃到食物后，增加一段，增加的是蛇容器里面的子元素，所以我们对于蛇的样式需要加在蛇的子元素上，而蛇容器不必加样式和定位

HTML：

<html>
<head>
  <title>贪吃蛇</title>
</head>
<body>
  <div class="snake_postion">
    <div class="snake_body">
      <div class="snake_body_screen">
        <!-- 设置蛇 -->
        <div class="snake">
          <div></div>
        </div>
        <!-- 设置食物 -->
        <div class="food"></div>
      </div>
      <div class="snake_body_score_level">
        <div class="snake_body_item">level:
          <span class="level">0</span>

最低0.47元/天解锁文章

iceseasyh

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
7
评论
TypeScript实战 -- 贪吃蛇游戏(1)--项目简介与具体实现、实现食物类和计分板类

TypeScript实战 – 贪吃蛇(1)目的使用typescript以及面向对象的方式编写简易版贪吃蛇的项目，实现：蛇自主移动，吃到食物检测并增加身体长度，食物随机生成，计分板，撞墙检测，键盘事件检测等基本功能。界面分析总体来说，整个游戏中所含的对象可以分为四个：蛇(Snake)，食物(Food)，计分板(Scoreboard)，游戏控制器(GameController)。Snake：获取与设置蛇身体部分的位置，移动身体，增加长度，处理撞墙Food：获取与设置食物位置，随机改变位置S
复制链接

扫一扫

专栏目录