TypeScript实现小游戏---贪吃蛇(超详细)

已于 2022-08-24 15:47:24 修改
阅读量1.7k 收藏 57
点赞数 64
分类专栏： typescript入门到拔高 文章标签： typescript javascript 前端
于 2022-08-16 16:18:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_52040370/article/details/126360586
版权

目录

ts专栏 ===> 🌈 typescript入门到拔高🌈(已完结)

项目背景及简介

typescript系列到这篇文章正式进入尾声了，我们通过以上学习ts的知识，想要熟悉的掌握必须要写一个小demo综合运用所学的知识，这个项目的目的就是综合ts所学知识，实现面向对象的实际开发！

项目地址 ： https://gitee.com/liuze_quan/ts-greedy-snake

多模块需求分析

场景模块需求

  1. 具有长和宽的容器,容器内分成蛇移动和记分牌两个板块
  2. 蛇移动的场景设置边界线,边界线一旦触碰直接结束游戏
  3. 记分牌记录蛇吃到食物的分数以及等级
  4. 蛇吃到食物分数涨一分,每涨一定分数等级提高一级
  5. 等级设有上限
  6. 等级和蛇移动速度有关

食物类模块需求

  1. 在游戏开始时候食物生成在随机位置
  2. 当蛇吃掉食物后食物会再次随机出现(出现的位置不能与蛇身重合)

记分牌模块需求

  1. 设置限制等级
  2. 可以提升等级
  3. 可以增加获取的分数

蛇类模块需求

  1. 游戏开始的时候只有一个方块(蛇头)，随后每吃掉一个食物则增加一节身体
  2. 当游戏进行过程中蛇头碰到身体则结束游戏
  3. 蛇的前进是持续的，不能停顿下来，只能去改变方向

控制模块需求

  1. 按下方向键开始游戏
  2. 只能通过四个方向键改变蛇前进的方向
  3. 判断游戏是否结束,蛇是否吃到食物
  4. 控制分数和等级是否相应增长,食物是否刷新

项目搭建

ts转译为js代码

我们需要创建tsconfig.json文件，文件代码如下:

{
  "compilerOptions": {
    "module": "es6",
    "target": "es6",
    "strict": true,
    "noEmitOnError": true
  }
}

package.json包配置文件

  1. 在这个小项目中我们需要webpack打包工具，所以我们要对package.json文件进行一些配置。
  2. 选择该项目在集成终端中打开并输入代码npm init -y进行项目初始化,这个时候会在你的项目中生成一个初步的package.json文件,然后我们进一步完善
  3. 在集成终端中输入指令npm i -D webpack webpack-cli typescript ts-loader用来下载相关依赖(如果可以看见package.json的depDependencies中更新了你下载的依赖表示下载成功)。i表示install下载的意思,-D意思是下载的作为依赖使用
  4. 继续输入指令npm i -D css-loader 等依赖,这些后面都有用
  5. 请注意上述代码中scripts中的"build": "webpack"键值对，这个设置说明我们可以用npm run build的代码来启用webpack打包工具
{
  "name": "part2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack serve --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.18.9",
    "@babel/preset-env": "^7.18.9",
    "babel-loader": "^8.2.5",
    "clean-webpack-plugin": "^4.0.0",
    "core-js": "^3.24.0",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.0.0",
    "postcss": "^8.4.14",
    "postcss-loader": "^7.0.1",
    "postcss-preset-env": "^7.7.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.3.1",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

webpack.config.js打包工具配置

webpack打包文件配置中，代码注释非常清楚，代码如下:

//引入一个包
const path = require('path');
//引入html插件
const HTMLWebpackPlugin = require('html-webpack-plugin')
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
        }
    },
    mode: 'development',
    //指定webpack打包时要使用的模块
    module: {
        //指定要加载的规则
        rules: [
            {
                //test指定规则生成的文件
                test: /\.ts$/,
                //要使用的loader
                use : [
                    //配置babel
                    {
                        // 指定加载器
                        loader: "babel-loader",
                        //设置babel
                        options: {
                            //设置预定义的环境
                            presets:[
                                [
                                    //指定环境的插件
                                    "@babel/preset-env",
                                    //配置信息
                                    {
                                        //要兼容的目标浏览器
                                        targets : {
                                            "chrome" : "101"
                                        },
                                        //指定core.js的版本
                                        "corejs":"3",
                                        //使用core.js的方式 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']
    }
}

到这里，我们要配置的文件都已经配置结束，接下来正式进入项目的开发

项目结构搭建

首先要进行我们的html和css样式搭建，搭建出来项目的页面！

html文件

<!DOCTYPE html>
<html lang="en">
<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>

css文件(这里使用的是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;
  }
}

项目页面

在这里插入图片描述

多模块搭建

在项目开发中我们不可能把所有的代码写到一个文件中，所以项目开发必须会灵活运用模块化开发思想，把实现的功能细化成一个个模块。

完成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
        let left = Math.round(Math.random() * 29) * 10
        let top = Math.round(Math.random() * 29) * 10
        this.element.style.left = left + 'px';
        this.element.style.top = top + 'px';
    }
}
export default Food

代码分析：

  1. 由于在配置typescript时我们设置了strict(严格)模式,因此
    this.element = document.getElementById('food')!中如果我们不加!会让编译器不确定我们是否会获取到food的dom元素而发生报错
  2. 准备了get()方法可以在控制模块中随时获取food的具体定位
  3. change()方法为随机刷新一次food的位置
  4. export default Food 代码加在最后。为的是把food成为全局模块暴露出去，这样的话其他的模块可以调用这个food模块

完成ScorePanel(记分牌)类

//定义表示记分牌的类
class ScorePanel {
    score : number = 0;
    level : number = 1;
    scoreSpan :HTMLElement;
    levelEle : HTMLElement;
    //设置变量限制等级
    maxLevel : number;
    //设置一个变量多少分升级
    upScore : number;
    constructor(maxLevel : number = 10,Score : number = 10) {
        this.scoreSpan = document.getElementById('score')!;
        this.levelEle  = document.getElementById('level')!;
        this.maxLevel = maxLevel
        this.upScore = Score
    }
    //设置加分的方法
    AddScore() {
        this.score++;
        this.scoreSpan.innerHTML = this.score + ''
        if (this.score % this.upScore === 0 ) {
            this.AddLevel()
        }
    }
    //提升等级
    AddLevel() {
        if (this.level < this.maxLevel) {
            this.levelEle.innerHTML = ++this.level +''
        }
    }
}
export default ScorePanel

代码分析:
在记分牌模块主要是两种方法AddScore()和AddLevel(),分别用来控制分数增加和等级提升，重点也有设置一个变量来限制等级和设置变量来判断多少分上升一个等级

完成Snake(蛇)类

class Snake {
    //表示蛇头的元素
   head : HTMLElement;
   bodies : HTMLCollectionOf<HTMLElement>;
   //获取蛇的容器
    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;
    }
    get Y() {
        return this.head.offsetTop;
    }
    set X(value) {
        if(this.X === value) {
            return;
        }
        if(value < 0 || value > 290) {
            throw new Error('蛇撞墙了!')
        }
        //修改x时，是在修改水平坐标，蛇在左右移动，蛇在向左移动时，不能向右掉头
        if(this.bodies[1] && (this.bodies[1] as HTMLElement).offsetLeft === value) {
            //如果发生的掉头，让蛇向反方向继续移动
            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;
        }
        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大于旧值X，则说明蛇在向右走，此时应该发生掉头，应该使蛇继续向左走
                value = this.Y - 10
            } else {
                value = this.Y + 10
            }
        }
        this.moveBody()
        this.head.style.top = value + 'px'
        this.checkHeadBody()
    }
    //蛇增加身体的方法
    addBody() {
        this.element.insertAdjacentHTML("beforeend","<div></div>")
    }
    //移动身体方法
    moveBody() {
        /*
        *将后边的身体设置为前边身体的位置
        * 举例子：
        * 第四节 == 第三节的位置
        * 第三节 == 第二节的位置
        * 第二节 == 第一节的位置
        * */
        //遍历
        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++) {
            if(this.X === this.bodies[i].offsetLeft && this.Y === this.bodies[i].offsetTop) {
                //进入判断说明蛇头撞到了身体，游戏结束
                throw new Error('撞到自己了')
            }
        }
    }
}
export default Snake

代码分析:

  1. 首先它自身只添加了三个功能函数addbody,movebody和checkHeadBody
  2. movebody的实现逻辑非常的巧妙，根据从后往前的顺序来确定位置，根据前一节的位置，从而让后边的位置替换到前一节的位置上，从而实现蛇可以移动的逻辑。
  3. 为什么get,set,判断蛇是否死亡机制以及之后的蛇移动的代码一定要写在constructor()函数中而不是写在外面?
    在后面还有一个控制模块中
    首先利用get()方法获得蛇头坐标,当蛇头移动一次以后,立刻刷新后的蛇头坐标反馈给蛇对象
    蛇这个对象更新以后constructor代码就会执行一遍,执行过程中首先蛇头的坐标用set()函数重新设置,然后蛇的movebody函数就会执行一次。最后对蛇进行判断死没死。
    这样一次代码就执行完成啦。此时整条蛇都前进了一次。然后我们通过定时器定个时间不断让蛇移动就可以了。

完成GameControl(控制)类

import Food from "./food";
import Snake from "./Snake";
import ScorePanel from "./ScorePanel";
//游戏控制器，控制其他所有类
class GameControl {
    snake : Snake;
    food : Food;
    scorePanel : ScorePanel
    direction : string = '';
    //创建一个变量来判断游戏是否结束
    isLive : boolean = true;
    constructor() {
        this.snake = new Snake()
        this.food = new Food()
        this.scorePanel = new ScorePanel()

        this.init()
    }
    //游戏的初始化，调用后游戏将开始
    init() {
        document.addEventListener('keydown',this.keydownHandler.bind(this))
        //调用run
        this.run()
    }
    /*ArrowUp
     ArrowDown
     ArrowLeft
     ArrowRight
     */
    //创建一个键盘按下的响应函数
    keydownHandler(event: KeyboardEvent) {
        console.log(event.key)
        this.direction = event.key
    }
    //创建一个控制蛇移动的方法
    /*
    *   根据方向(this.direction)来使蛇位置发生改变
    *
    * */
    run() {
        let X = this.snake.X;
        let Y = this.snake.Y;
        //根据方向修改值
        switch (this.direction) {
            case 'ArrowUp':
            case 'Up':
                Y-=10;
                break;
            case 'ArrowDown':
            case 'Down':
                Y+=10;
                break;
            case 'ArrowLeft':
            case 'Left':
                X -=10;
                break;
            case 'ArrowRight':
            case 'Right':
                X += 10;
                break;
        }
        (this.checkEat(X,Y))
        try {
            //修改X和Y的值
            this.snake.X = X;
            this.snake.Y = Y;
        }catch (e) {
            //进入到catch出现异常
            alert((e as any).message + '游戏结束了,老表！');
            this.isLive = false;
        }
        this.isLive && setTimeout(this.run.bind(this),300 - (this.scorePanel.level-1)*30)
    }
    //定义方法检查蛇是否吃到食物
    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

代码分析：
我们设置控制类主要目的在于整合之前的三个类，从而在这个类中调用之前声明的类，在该类中重点在于初始化游戏、控制蛇的移动、检查蛇是否吃到食物，这个类相当于一个总开关。
这里还有一个重点在于this指向问题，这里使用了bind()函数,bind最直接的定义就是将this指向到当前的对象。

完成index类(启动项目)

import './style/index.less'
import GameControl from './modules/GameControl'
new GameControl()

代码分析：
大家都非常清楚，想要让对象执行，我们必须要进行实例化，这里只用new一下进行调用即可，项目就可以执行了

项目启动

最后我们打开终端输入npm start或者npm run build,项目就跑起来了，它可以自动打开浏览器进行执行
在这里插入图片描述
在这里插入图片描述

总结

学习完了typescript，其实最主要的在于运用它实现面向对象的开发，我们在日常开发中基本不会用到面向对象，就算es6中涉及到类、接口等等，但是在实际中很少人去使用，面向对象的开发中其实使得项目变得更加的严谨和合理化，我们在书写代码的时候会更加的规范，ts的类型严格更加的使它方便大型项目开发！

下期预告：
vue3+ts怎么去运用、vue2和vue3响应式原理以及区分、node.js从入门到精通

前端小白在前进
关注
  • 64
    点赞
  • 踩
  • 57
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 97
    评论
专栏目录
snake：TypeScript写的贪吃蛇小游戏
02-22
蛇 TypeScript写的贪吃蛇小游戏主要练习TS面向对象写法，将蛇，食物，游戏控制都作为对象进行开发
贪吃蛇小游戏用于练习typescript
10-24
用于自己查看，很垃圾勿喷。
TypeScript实现小游戏---贪吃蛇(超详细)_typescript游戏项目
最新发布
2401_84181326的博客
04-17 806
typescript系列到这篇文章正式进入尾声了，我们通过以上学习ts的知识，想要熟悉的掌握必须要写一个小demo综合运用所学的知识，这个项目的目的就是综合ts所学知识，实现面向对象的实际开发！项目地址 ： https://gitee.com/liuze_quan/ts-greedy-snake。
基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip
01-11
1.项目代码功能经验证ok，确保稳定可靠运行。欢迎下载使用！ 2.主要针对各个计算机相关专业，包括计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网等领域的在校学生、专业教师或企业员工使用。 3.项目具有丰富的拓展空间，不仅可作为入门进阶，也可直接作为毕设、课程设计、大作业、初期项目立项演示等用途。 4.当然也鼓励大家基于此进行二次开发。在使用过程中，如有问题或建议，请及时私信沟通。 5.期待你能在项目中找到乐趣和灵感，也欢迎你的分享和反馈！ 【资源说明】 基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip 基于TypeScript和Webpack开发的贪吃蛇小游戏源码(课程设计).zip
基于TypeScript开发的贪吃蛇游戏案例源码.zip
08-21
【资源说明】 基于TypeScript开发的贪吃蛇游戏案例源码.zip 1、该资源内项目代码都是经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能。 欢迎下载，欢迎交流，互相学习进步！
TypeScript 贪吃蛇项目（上）
Errol's Blog
03-21 237
TypeScript贪吃蛇项目
贪吃蛇JS实现(超详细,万字解析版)
Prototype__God的博客
01-11 4515
本文是对B站尚硅谷TypeScript贪吃蛇项目的超详细解析。 原视频TypeScript讲的很好,很建议有时间去观看。对于时间不充裕的小伙伴。此文的目的就是让大家以少的时间得到大的收获。
TypeScript实现贪吃蛇
weixin_73810008的博客
01-28 434
还没见过用TypeScript写贪吃蛇的吧
Typescript小练习之贪吃蛇
m0_70968573的博客
10-21 664
用tyscript做一个贪吃蛇的小游戏
基于TypeScript的贪食蛇项目
qq_45908140的博客
12-07 400
基于TypeScript的贪食蛇项目 此项目学习于-哔哩哔哩尚硅谷TypeScript教程（李立超老师TS新课）
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
TypeScript学习案例-贪吃蛇
01-04
TypeScript学习案例——贪吃蛇
谷美|使用TypeScript构建的经典小游戏-俄罗斯方块（含源码）
谷美的博客
04-28 1598
谷美|使用TypeScript构建的经典小游戏-俄罗斯方块（含源码）项目概述项目日志项目概述TetrisGames项目的目的技术栈须知工程搭建html-webpack-plugin插件clean-webpack-plugin插件webpack-dev-server安装ts的相应的加载器(二选一)游戏开发小方块类的开发小方块的显示类(core/viewer目录)小方块的组合类俄罗斯方块的生产者类俄罗...
Typescript项目：井字棋（功能实现）
Errol's Blog
05-11 534
Ts项目：井字棋功能实现
06TypeScript：项目实战—贪吃蛇
Bertil的博客
08-05 1337
目录1.项目搭建2.项目界面3.定义Food类4.定义ScorePanel类5.定义Snake类6.定义GameControl类7.项目入口文件index.ts 1.项目搭建 准备好之前的webpack.config.js、tsconfig.json、package.json、package-lock.json四个文件，然后执行npm i安装依赖 安装其他依赖：npm i -D less less-loader css-loader style-loader（四个包，因为要使用到less）如果有其他web
JavaScript贪吃蛇
原地起飞
11-24 5413
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
【JS】原生js实现极简版贪吃蛇，附全部代码
小安驾到的博客
02-15 1108
原生js实现贪吃蛇小游戏，包括小蛇的移动、吃食物、检测是否撞到自己等功能
typescript | 贪吃蛇小项目
不爱吃菜的菜菜的博客
09-26 2389
typescript 小游戏项目---贪吃蛇
TypeScript配置文件讲解和贪吃蛇小游戏实现
努力学习的狐狸的博客
05-19 215
抽象类就是只有方法不能实例，定义的时候需要增加abstract关键字。​​。
typescript vue-count-to
12-23
typescript vue-count-to是一个基于Vue.js的数字动画组件，用于实现数字的递增或递减动画效果。它可以用于展示数字的变化，比如计数器、倒计时等场景。 下面是一个使用typescript vue-count-to的示例： 1. 首先，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 97
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小白在前进

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值