TypeScript 贪吃蛇游戏详细教程
前几篇博文学习了TypeScript的语法以及TypeScript的工程化实现方案，但是很多人学完了TypeScript的知识点后却仍然还在项目里面写大量js，并没有领悟TypeScript的思维（面向对象的思维）。所以今天我准备用TypeScript来开发一个贪吃蛇的游戏，我尽量把实现步骤写得详细一点。大家如果感兴趣的话，可以跟着这篇博文一起敲，这样也有利于熟练TypeScript的语法和领悟它的思维。这篇博文我真的写了很久，很认真，所以求关注、求点赞，求评论，求收藏，这对我真的很重要！
一.项目搭建
新建一个叫 greedy-snake 的项目文件夹，然后初始化一下项目：
npm init -y我们这个项目使用webpack来打包构建，所以需要安装webpack的相关的一些依赖，把webpack和TypeScript等一些东西整合一下，以方便我们后面整个项目的开发。
要安装的包如下，运行如下的命令即可：
npm i -D webpack webpack-cli typescript ts-loader webpack-dev-server style-loader postcss-preset-env postcss-loader postcss less-loader less html-webpack-plugin css-loader core-js clean-webpack-plugin babel-loader @babel/preset-env @babel/core然后运行如下命令生成 tsconfig.json 配置文件：
tsc --init我们把生成的 tsconfig.json 里面的内容都删除掉，编写如下配置（至于这些配置的作用，我上一篇博文都有讲解）：
{
"compilerOptions": {
"module": "ES2015",
"target": "ES2015",
"strict": true,
}
}我们在项目根目录下创建src目录，然后在里面创建一个index.html和index.ts文件 ，src目录下创建一个style目录用于存放样式文件，style目录里也创建一个index.less文件，最后src目录里还要创建一个modules文件夹，里面用于存放一些ts模块。
然后我们还要在根目录下创建一个webpack.config.js文件，来配置一下webpack：
// 引入一个包
const path = require('path');
// 引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin');
// 引入clean插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// webpack中的所有的配置信息都应该写在module.exports中
module.exports = {
// 指定入口文件
entry: "./src/index.ts",
// 指定打包文件所在目录
output: {
// 指定打包文件的目录
path: path.resolve(__dirname, 'dist'),
// 打包后文件的文件
filename: "bundle.js",
// 告诉webpack不使用箭头
environment:{
arrowFunction: false,
const: false
}
},
// 指定webpack打包时要使用模块
module: {
// 指定要加载的规则
rules: [
{
// test指定的是规则生效的文件
test: /\.ts$/,
// 要使用的loader
use: [
// 配置babel
{
// 指定加载器
loader:"babel-loader",
// 设置babel
options: {
// 设置预定义的环境
presets:[
[
// 指定环境的插件
"@babel/preset-env",
// 配置信息
{
// 要兼容的目标浏览器
targets:{
"chrome":"58",
"ie":"11"
},
// 指定corejs的版本
"corejs":"3",
// 使用corejs的方式 "usage" 表示按需加载
"useBuiltIns":"usage"
}
]
]
}
},
'ts-loader'
],
// 要排除的文件
exclude: /node-modules/
},
// 设置less文件的处理
{
test: /\.less$/,
use:[
"style-loader",
"css-loader",
// 引入postcss
{
loader: "postcss-loader",
options: {
postcssOptions:{
plugins:[
[
"postcss-preset-env",
{
browsers: 'last 2 versions'
}
]
]
}
}
},
"less-loader"
]
}
]
},
// 配置Webpack插件
plugins: [
new CleanWebpackPlugin(),
new HTMLWebpackPlugin({
// title: "这是一个自定义的title"
template: "./src/index.html"
}),
],
// 用来设置引用模块
resolve: {
extensions: ['.ts', '.js']
},
//打包模式，是生产模式production还是开发模式development
mode: "development"
};接下来，我们还需要在package.json里面添加两行配置来用于命令行打包和启动项目：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack serve"
}最终的项目结构如下：
├── node_modules
├── src
│ ├── modules
│ ├── style
│ │ └── index.ts
│ ├── index.html
│ └── index.ts
├── package.json
├── webpack.config.js
└── tsconfig.json二.编写游戏界面
游戏界面如下图所示：
我们先要来编写index.html：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>贪食蛇游戏</title>
</head>
<body>
<!--创建游戏的主容器-->
<div id="main">
<!--设置游戏的舞台-->
<div id="stage">
<!--设置蛇-->
<div id="snake">
<!--snake内部的div 表示蛇的各部分-->
<div></div>
</div>
<!--设置食物-->
<div id="food">
<!--添加四个小div 来设置食物的样式-->
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!--设置游戏的积分牌-->
<div id="score-panel">
<div>
SCORE:<span id="score">0</span>
</div>
<div>
level:<span id="level">1</span>
</div>
</div>
</div>
</body>
</html>index.less样式的代码如下：
// 设置变量
@bg-color: #b7d4a8;
//清除默认样式
*{
margin: 0;
padding: 0;
// 改变盒子模型的计算方式
box-sizing: border-box;
}
body{
font: bold 20px "Courier";
}
//设置主窗口的样式
#main{
width: 360px;
height: 420px;
// 设置背景颜色
background-color: @bg-color;
// 设置居中
margin: 100px auto;
border: 10px solid black;
// 设置圆角
border-radius: 40px;
// 开启弹性盒模型
display: flex;
// 设置主轴的方向
flex-flow: column;
// 设置侧轴的对齐方式
align-items: center;
// 设置主轴的对齐方式
justify-content: space-around;
// 游戏舞台
#stage{
width: 304px;
height: 304px;
border: 2px solid black;
// 开启相对定位
position: relative;
// 设置蛇的样式
#snake{
&>div{
width: 10px;
height: 10px;
background-color: #000;
border: 1px solid @bg-color;
// 开启绝对定位
position: absolute;
}
}
// 设置食物
#food{
width: 10px;
height: 10px;
position: absolute;
left: 40px;
top: 100px;
// 开启弹性盒
display: flex;
// 设置横轴为主轴，wrap表示会自动换行
flex-flow: row wrap;
// 设置主轴和侧轴的空白空间分配到元素之间
justify-content: space-between;
align-content: space-between;
&>div{
width: 4px;
height: 4px;
background-color: black;
// 使四个div旋转45度
transform: rotate(45deg);
}
}
}
// 记分牌
#score-panel{
width: 300px;
display: flex;
// 设置主轴的对齐方式
justify-content: space-between;
}
}上面虽然编写了index.html页面和index.less样式，但是我们并没有在任何地方引用index.less。这时候如果运行命令编译打包项目的话，其实并不能把游戏界面显示出来。
我们先要在index.ts里面引入index.less样式文件，只有这样，打包时才会对index.less打包进去。
index.ts编写如下的代码来引入样式：
// 引入样式
import './style/index.less';最后，我们运行项目：
npm run start浏览器上访问http://localhost:8080/就可以查看到效果了。
三.编写食物模块
这一节来编写食物模块，我们既然要学习TypeScript的面向对象的思想，就要用类来写这些模块。并且，我们不应该把食物类写在index.ts里面，因为这样不好维护。
所以我们应该在src下的modules目录下面创建一个Food.ts来单独编写食物模块。
Food.ts的代码如下（具体实现思路，注释里面都有写）：
// 定义食物类Food
class Food{
// 定义一个属性表示食物所对应的元素
element: HTMLElement;
constructor() {
// 获取页面中的food元素并将其赋值给element
this.element = document.getElementById('food')!;
}
// 定义一个获取食物X轴坐标的方法
get X(){
return this.element.offsetLeft;
}
// 定义一个获取食物Y轴坐标的方法
get Y(){
return this.element.offsetTop;
}
// 修改食物的位置
change(){
// 生成一个随机的位置
// 食物的位置最小是0 最大是290
// 蛇移动一次就是一格，一格的大小就是10，所以就要求食物的坐标必须是整10
let top = Math.round(Math.random() * 29) * 10;
let left = Math.round(Math.random() * 29) * 10;
this.element.style.left = left + 'px';
this.element.style.top = top + 'px';
}
}
export default Food;我们在index.ts里面引入Food.ts，然后测试一下：
// 引入样式
import './style/index.less';
import Food from "./modules/Food";
//测试代码食物,最后记得注释掉
const food = new Food();
food.change();我们每次刷新浏览器页面都会看到食物的位置发生了改变。
四.初步编写蛇模块
因为蛇地模块，涉及的东西比较多，比如蛇的位置、蛇的身体、蛇的移动、蛇吃东西、蛇撞墙等等。这一节，先初步地编写一下蛇模块，到后面小节再来完善蛇的其他功能。
我们先创建Snake.ts文件，初步的代码如下：
class Snake{
// 表示蛇头的元素
head: HTMLElement;
// 蛇的身体（包括蛇头）
bodies: HTMLCollection;
// 获取蛇的容器
element: HTMLElement;
constructor() {
this.element = document.getElementById('snake')!
this.head = document.querySelector('#snake > div') as HTMLElement;
this.bodies = this.element.getElementsByTagName('div');
}
// 获取蛇的坐标（蛇头坐标）
get X(){
return this.head.offsetLeft;
}
// 获取蛇的Y轴坐标
get Y(){
return this.head.offsetTop;
}
// 设置蛇头的X坐标
set X(value){
this.head.style.left = value + 'px'
}
// 设置蛇头的Y坐标
set Y(value){
this.head.style.top = value + 'px'
}
// 蛇增加身体的方法
addBody(){
// 向element中添加一个div
this.element.insertAdjacentHTML("beforeend", "<div></div>");
}
}
export default Snake;关于上面的代码，有一个方法大家可能用得比较少，就是insertAdjacentHTML这个方法。下面来对这个方法简单解释一下：
insertAdjacentHTML() 是Element的API中的一个方法，可以将字符串文本转化为你想要的节点（Node），并且插入到你想要插入的位置中。而且它并不会向innerHTML一样会替换掉已有的节点，而是会插入到指定位置。
使用：element.insertAdjacentHTML(position,text)
position参数 position就是想要插入的位置，一共有如下的4个固定的值
beforebegin：元素element自己的前面。
afterbegin：插入到元素element里面的第一个子节点之前（也就是总是会插入到最前面，例如我插入5个节点，顺序是1、2、3、4、5，那么我就需要以5、4、3、2、1的顺序插入，有一种栈结构先进后出的感觉）。
beforeend：插入元素element里面的最后一个子节点之后（这个比较容易理解，就是插入到最后一个节点后，例如我插入5个节点，顺序是1、2、3、4、5，那就正常的1、2、3、4、5就好啦，但是注意是在已有节点的后面哦）。
afterend：元素element自己的后面。
text参数 参数便是你想要插入的HTML元素，可以是字符串形式，也可以用ES6新增的模板字符串的形式。
五.编写计分盘模块
我们本节，创建ScorePanel.ts，它的代码很简单，如下：
// 定义表示记分牌的类
class ScorePanel{
// score和level用来记录分数和等级
score = 0;
level = 1;
// 分数和等级所在的元素，在构造函数中进行初始化
scoreEle: HTMLElement;
levelEle: HTMLElement;
// 设置一个变量限制最高等级
maxLevel: number;
// 设置一个变量表示多少分时升级
upScore: number;
constructor(maxLevel: number = 10, upScore: number = 10) {
this.scoreEle = document.getElementById('score')!;
this.levelEle = document.getElementById('level')!;
this.maxLevel = maxLevel;
this.upScore = upScore;
}
//设置一个加分的方法
addScore(){
// 使分数自增
this.score = this.score+1;
this.scoreEle.innerHTML = this.score + '';
// 判断分数是多少
if(this.score % this.upScore === 0){
this.levelUp();
}
}
// 提升等级的方法
levelUp(){
if(this.level < this.maxLevel){
this.levelEle.innerHTML = ++this.level + '';
}
}
}
export default ScorePanel;其实逻辑非常简单，记分盘有分数和等级两个数据。我们要思考的是分数增加到多少的时候升级，多少级是最高级。这里我们定义了maxLevel变量来限制最高等级，设置一个变量upScore表示吃到多少分时升级。
六.游戏控制模块的开发
我们创建GameControl.ts ，我们这节开始编写和游戏控制有关的代码，里面都是控制游戏的核心代码。
GameControl.ts代码如下：
// 引入其他的类
import Snake from "./Snake";
import Food from "./Food";
import ScorePanel from "./ScorePanel";
// 游戏控制器，控制其他的所有类
class GameControl {
//定义三个属性
// 蛇
snake: Snake;
// 食物
food: Food;
// 记分牌
scorePanel: ScorePanel;
// 创建一个属性来存储蛇的移动方向（也就是按键的方向）
direction: string = '';
// 创建一个属性用来记录游戏是否结束
isLive = true;
constructor() {
this.snake = new Snake();
this.food = new Food();
this.scorePanel = new ScorePanel(10,5);
this.init();
}
// 游戏的初始化方法，调用后游戏即开始
init() {
// 绑定键盘按键按下的事件
//要用bind()方法绑定到GameControl对象上，否则直接this.keydownHandler()则不会触发函数，因为绑定的是document对象
document.addEventListener('keydown', this.keydownHandler.bind(this));
// 调用run方法，使蛇移动
this.run();
}
/*
* ArrowUp Up
ArrowDown Down
ArrowLeft Left
ArrowRight Right
* */
// 创建一个键盘按下的响应函数
keydownHandler(event: KeyboardEvent) {
// 需要检查event.key的值是否合法（用户是否按了正确的按键）
// 修改direction属性
this.direction = event.key;
}
// 创建一个控制蛇移动的方法
run() {
/*
* 根据方向（this.direction）来使蛇的位置改变
* 向上 top 减少
* 向下 top 增加
* 向左 left 减少
* 向右 left 增加
* */
// 获取蛇现在坐标
let X = this.snake.X;
let Y = this.snake.Y;
// 根据按键方向来修改X值和Y值
switch (this.direction) {
case "ArrowUp":
case "Up":
case "w":
// 向上移动 top 减少
Y -= 10;
break;
case "ArrowDown":
case "Down":
case "s":
// 向下移动 top 增加
Y += 10;
break;
case "ArrowLeft":
case "Left":
case "a":
// 向左移动 left 减少
X -= 10;
break;
case "ArrowRight":
case "Right":
case "d":
// 向右移动 left 增加
X += 10;
break;
}
// 检查蛇是否吃到了食物
this.checkEat(X, Y);
//修改蛇的X和Y值
try{
this.snake.X = X;
this.snake.Y = Y;
}catch (e){
// 进入到catch，说明出现了异常，游戏结束，弹出一个提示信息
alert(e+' GAME OVER!');
// 将isLive设置为false
this.isLive = false;
}
// 开启一个定时调用
this.isLive && setTimeout(this.run.bind(this), 300 -(this.scorePanel.level-1)*25);
}
// 定义一个方法，用来检查蛇是否吃到食物
checkEat(X: number, Y: number){
if(X === this.food.X && Y === this.food.Y){
// 食物的位置要进行重置
this.food.change();
// 分数增加
this.scorePanel.addScore();
// 蛇要增加一节
this.snake.addBody();
}
}
}
export default GameControl;蛇的其他一些逻辑和Snake.ts完整代码如下（不懂评论区再来问我）：
蛇身体的移动逻辑也非常简单，就是蛇后一个身体部分的位置要移动到前一个身体部分的位置。
我们移动时要先改最后一节身体的位置，从后面部分往前改。因为前面部分身体的位置如果先改了，那它原来的位置就没了，后面的部分就找不到正确的位置了。具体看上面Snake.ts的moveBody方法。
还有就是检查蛇掉头的逻辑。关于蛇掉头的问题，有一点要注意了。当蛇拥有多节身体的时候，蛇往右边走的时候，是不能按左使他往左走的。可以先判断蛇是否有多节身体，游戏刚开始的情况下，蛇只有一节身体，这时蛇就可以往任意方向掉头移动。如果判断出蛇有多节身体的话，就要判断蛇头移动的位置是否为第二节身体的位置，如果是，则不允许掉头，不是，则允许掉头，就这么简单。
检查蛇头是否撞到身体的逻辑也非常简单，获取所有的身体，检查其是否和蛇头的坐标发生重叠就好了。
class Snake{
// 表示蛇头的元素
head: HTMLElement;
// 蛇的身体（包括蛇头）
bodies: HTMLCollection;
// 获取蛇的容器
element: HTMLElement;
constructor() {
this.element = document.getElementById('snake')!
this.head = document.querySelector('#snake > div') as HTMLElement;
this.bodies = this.element.getElementsByTagName('div');
}
// 获取蛇的坐标（蛇头坐标）
get X(){
return this.head.offsetLeft;
}
// 获取蛇的Y轴坐标
get Y(){
return this.head.offsetTop;
}
// 设置蛇头的坐标
set X(value){
// 如果新值和旧值相同，则直接返回不再修改
if(this.X === value){
return;
}
// X的值的合法范围0-290之间
if(value < 0 || value > 290){
// 进入判断说明蛇撞墙了
throw new Error('蛇撞墙了！');
}
// 修改x时，是在修改水平坐标，蛇在左右移动，蛇在向左移动时，不能向右掉头，反之亦然
if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value){
// console.log('水平方向发生了掉头');
// 如果发生了掉头，让蛇向反方向继续移动
if(value > this.X){
// 如果新值value大于旧值X，则说明蛇在向右走，此时发生掉头，应该使蛇继续向左走
value = this.X - 10;
}else{
// 向左走
value = this.X + 10;
}
}
// 移动身体
this.moveBody();
this.head.style.left = value + 'px';
// 检查有没有撞到自己
this.checkHeadBody();
}
set Y(value){
// 如果新值和旧值相同，则直接返回不再修改
if(this.Y === value){
return;
}
// Y的值的合法范围0-290之间
if(value < 0 || value > 290){
// 进入判断说明蛇撞墙了，抛出一个异常
throw new Error('蛇撞墙了！');
}
// 修改y时，是在修改垂直坐标，蛇在上下移动，蛇在向上移动时，不能向下掉头，反之亦然
if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetTop === value){
if(value > this.Y){
value = this.Y - 10;
}else{
value = this.Y + 10;
}
}
// 移动身体
this.moveBody();
this.head.style.top = value + 'px';
// 检查有没有撞到自己
this.checkHeadBody();
}
// 蛇增加身体的方法
addBody(){
// 向element中添加一个div
this.element.insertAdjacentHTML("beforeend", "<div></div>");
}
// 添加一个蛇身体移动的方法
moveBody(){
/*
* 将后边的身体设置为前边身体的位置
* 举例子：
* 第4节 = 第3节的位置
* 第3节 = 第2节的位置
* 第2节 = 蛇头的位置
* */
// 遍历获取所有的身体
for(let i=this.bodies.length-1; i>0; i--){
// 获取前边身体的位置
let X = (this.bodies[i-1] as HTMLElement).offsetLeft;
let Y = (this.bodies[i-1]as HTMLElement).offsetTop;
// 将值设置到当前身体上
(this.bodies[i] as HTMLElement).style.left = X + 'px';
(this.bodies[i] as HTMLElement).style.top = Y + 'px';
}
}
// 检查蛇头是否撞到身体的方法
checkHeadBody(){
// 获取所有的身体，检查其是否和蛇头的坐标发生重叠
for(let i=1; i<this.bodies.length; i++){
let bd = this.bodies[i] as HTMLElement;
if(this.X === bd.offsetLeft && this.Y === bd.offsetTop){
// 进入判断说明蛇头撞到了身体，游戏结束
throw new Error('撞到自己了！');
}
}
}
}
export default Snake;最后，我们还要在index.ts里面引入GameControl.ts，然后创建GameControl对象，就好了：
// 引入样式
import './style/index.less';
import GameControl from "./modules/GameControl";
const gameControl = new GameControl();运行npm run start来启动项目，在浏览器访问http://localhost:8080/就能玩了。大家学会了吗？如果有什么不懂，都可以来评论区问我，我绝对秒回。这篇博客我真的写了很久，所以求关注、求点赞，求评论，求收藏，这对我真的很重要！
下期预告：下一篇开始我会总结Node.js的知识点。虽然我之前有学习过Node.js，但是我却没有系统且完整地总结过它的知识点，每次想用它的时侯就又忘了一些语法了，故我打算系统总结一下。大家感兴趣的话，可以关注一下我。还有就是，求点赞，求评论，求收藏，这对我真的很重要！
腾讯云开发者
