首页 前端知识 TypeScript 贪吃蛇游戏详细教程

TypeScript 贪吃蛇游戏详细教程

2024-05-28 09:05:33 前端知识 前端哥 251 602 我要收藏

    • 一.项目搭建
    • 二.编写游戏界面
    • 三.编写食物模块
    • 四.初步编写蛇模块
    • 五.编写计分盘模块
    • 六.游戏控制模块的开发

前几篇博文学习了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,但是我却没有系统且完整地总结过它的知识点,每次想用它的时侯就又忘了一些语法了,故我打算系统总结一下。大家感兴趣的话,可以关注一下我。还有就是,求点赞,求评论,求收藏,这对我真的很重要!


转载请注明出处或者链接地址:https://www.qianduange.cn//article/9817.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!