敲简单前端小游戏——贪吃蛇

学了ts课程之后，跟着视频教程做了一个贪吃蛇小游戏，好好体会了一番面向对象的编程思想，顺便捡起来了一些操作dom的知识，加强了ts练习。HAPPY

一个2D贪吃蛇小游戏，目标就是吃足够多的食物！

游戏界面

游戏规则

代码地址

：github地址

实现逻辑

• 实现语言
  typescript javascript css html
• 实现步骤
  先搭好框架 =》写好html和css =》写ts定义类，类中属性为html中的dom元素 =》通过操纵dom来实现游戏功能
• 实现要点
  体会面向对象的编程
  练习js中DOM操作
  练习ts语法

面向对象的编程

将游戏中的元素抽象为对象，以对象维度进行管理。
（说人话）就是贪吃蛇游戏中：蛇，食物，记分牌抽象为对象，通过类进行管理。然后将游戏中的交互逻辑抽象为游戏控制器对象，来对蛇、食物和记分牌进行操纵。
难点：类如何设计，应该包括哪些属性和方法。
遵循原则：个人管个人的事儿。该类只做与其本身相关的事。
例如获取蛇的位置这个方法只涉及到蛇本身，所以应该写在蛇类中。对于复杂的逻辑需要进行拆解，例如按下键盘蛇位置改变，涉及到两个类。首先按下键盘属于交互动作，所以应该放在游戏控制器类中来处理；改变蛇的位置涉及到蛇本身，所以应该调用蛇中改变位置的方法。
贪吃蛇中涉及到的类以及每个类中的属性与方法如下图：

GameControler

+Food[] foods

+Snake snake

+ScorePanel scorePanel

+string direction

+boolean isLive

+keybordHandler()

+run()

checkEat()

Food

+HTMLElement element

+getX()

+getY()

+changePosition()

Snake

+HTMLElement head

+HTMLElement container

+HTMLCollection body

+getX()

+getY()

+setX(value)

+setY(value)

+addBody()

+moveBody()

ScorePanel

+number score

+number level

+HTMLElement scoreEle

+HTMLElement levelEle

+addScore()

js中DOM操作

对于食物、蛇以及记分牌类，都有一个熟悉为element用于指代dom节点，但是却各有不同。

• 对于食物而言，在类初始化时构造DOM节点，然后插入HTML中。需要用到生成DOM的语法

    let element: HTMLElenemt = document.createElement("div"); // 生成DOM
    element.setAttribute("class","food"); // 添加样式类
    document.getElementById("father")?.appendChild(element); // 父元素中添加新儿子

• 对于蛇，需要获取蛇头，添加蛇身体，获取蛇身体数组。需要用到根据id选择DOM，

    let container: HTMLElement = document.getElementById("snake")!;
    let body: HTMLCollection = this.container.getElementsByTagName("div");
    let head: HTMLElement = document.querySelector("#snake>div")!; // id为snake下的首个div

不熟悉的方法：
选择： querySelector(“选择器”)
为dom设置样式：setAttribute(“class”,“className”);

用到的一些ts语法知识：

DOM类型：HTMLElement, HTMLCollection

我悟了

写项目就像盖房子，要先搭地基，然后一层一层的盖。不能只想着先把左边房顶全部盖起来，再打右边的地基。所以写贪吃蛇的项目不要一下子沉浸在细节中，要从最基础的功能开始，这写写，那写写，然后在考虑多种复杂情况。
比如说先从最基础的功能开始实现：
0.0版本：写HTML和css，构造蛇、食物、以及记分牌类，获取DOM元素
0.1版本：蛇头上下左右移动，吃到食物，得一分，身体加一块
0.2版本：蛇身体随着头运动，撞墙和撞身体游戏失败
0.3版本：蛇不能折返，设置成功条件
总之，编程需要的就是抽象思维和大局观。将问题抽象成对象，然后从最简单的功能开始实现