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

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

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

游戏界面

敲简单前端小游戏——贪吃蛇_第1张图片

游戏规则

敲简单前端小游戏——贪吃蛇_第2张图片

代码地址

: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版本:蛇不能折返,设置成功条件
总之,编程需要的就是抽象思维和大局观。将问题抽象成对象,然后从最简单的功能开始实现
敲简单前端小游戏——贪吃蛇_第3张图片

你可能感兴趣的:(typescript,javascript,前端)