TypeScript快速上手学习笔记-第十二篇——实战项目“贪吃蛇”

最新推荐文章于 2024-02-29 15:08:51 发布
最新推荐文章于 2024-02-29 15:08:51 发布
阅读量304 收藏
点赞数
分类专栏： TypeScript 前端编程 文章标签： javascript typescript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36288559/article/details/113802695
版权

一、项目前准备

项目主要用到的工具包括typescript,webpack,css拓展语言（less或者scss）博主这边使用的是scss。
1-使用命令npm install @babel/core @babel/preset-env babel-loader clean-webpack-plugin core-js css-loader html-webpack-plugin node-sass postcss postcss-loader postcss-preset-env sass-loader scss style-loader ts-loader typescript webpack webpack-cli webpack-dev-server --save-dev来安装项目依赖。

"devDependencies": {
    "@babel/core": "^7.12.13",
    "@babel/preset-env": "^7.12.13",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "core-js": "^3.8.3",
    "css-loader": "^5.0.2",
    "html-webpack-plugin": "^5.0.0",
    "node-sass": "^4.12.0",
    "postcss": "^8.2.5",
    "postcss-loader": "^5.0.0",
    "postcss-preset-env": "^6.7.0",
    "sass-loader": "^8.0.2",
    "scss": "^0.2.4",
    "style-loader": "^2.0.0",
    "ts-loader": "^8.0.15",
    "typescript": "^4.1.3",
    "webpack": "^5.21.0",
    "webpack-cli": "^4.5.0",
    "webpack-dev-server": "^3.11.2"
},

2-配置webpack运行环境和typecript运行环境
webpack.config.js

const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports={
  entry: {
    main: "./ts/test.ts",
  },
  devtool: 'inline-source-map',
  output: {
    path: path.resolve(__dirname,"demo"),
    filename: "index.js",
    environment:{
      arrowFunction:false,
      const:false
    }
  },
  mode:'development',
  module: {
    rules: [
      {
        test:/\.ts$/,
        use:[
          {
            loader: "babel-loader",
            options: {
              presets:[
                [
                  "@babel/preset-env",
                  {
                    targets:{
                      "chrome":"88",
                      "ie":"11"
                    },
                    "corejs":"3",
                    "useBuiltIns":"usage"
                  }
                ]
              ]
            }
          },
          "ts-loader"
        ],
        exclude:/node_modules/
      },
      {
        test:/\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions:{
                plugins:[
                  [
                    "postcss-preset-env",
                    {
                      browsers:"last 2 versions"
                    }
                  ]
                ]
              }
            }
          },
          "sass-loader"
        ],
        exclude:/node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./html/demo.html"
    }),
    new CleanWebpackPlugin(),
  ],
  resolve: {
    extensions: ['.ts','.js']
  }
}

tsconfig.json文件

{
  "include": [
    "./ts/**/*"
  ],

  "compilerOptions": {
    "target": "es6",
    "module": "es6",
    "outDir": "./js",
    "removeComments": true,
    "noEmitOnError": true,
    "strict": true
  }
}

至此项目环境已经的搭建完成

二、项目目录

在这里插入图片描述

三、编写游戏页面布局

页面html代码

<body>
  <div class="container">
    <!-- 主舞台 -->
    <div class="main" id="main">
      <!-- 蛇 -->
      <div class="snake" id="snake">
        <div></div>
      </div>
      <!-- 食物 -->
      <div class="food" id="food"></div>
    </div>
    <!-- 积分板 -->
    <div class="score">
      <div class="score-item">
        <span>SCORE:</span>
        <span id="score">0</span>
      </div>
      <div class="score-item">
        <span>LEVEL:</span>
        <span id="level">1</span>
      </div>
    </div>
  </div>
</body>

css样式

*{
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;

  .container{
    width: 360px;
    height: 420px;
    background: #b7d4a8;
    margin: 100px auto;
    border: 10px solid #333333;
    border-radius: 40px;
    display: flex;
    flex-flow:column ;
    align-items: center;
    justify-content: space-around;
    box-sizing: border-box;

    .main{
      width: 304px;
      height: 304px;
      border: 2px solid #333333;
      position: relative;
      box-sizing: border-box;

      .snake > div{
        height: 10px;
        width: 10px;
        background: #333333;
        border: 1px solid #b7d4a8;
        position: absolute;
        box-sizing: border-box;
      }

      .food{
        height: 10px;
        width: 10px;
        background: #cf2c2c;
        border: 1px solid #b7d4a8;
        position: absolute;
        box-sizing: border-box;
        left: 100px;
        border-radius: 1000px;
        top: 100px;
      }
    }

    .score{
      width: 304px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
}

flex弹性布局
display: flex; ————设置为弹性布局
flex-flow:column ;————以竖直方向为主轴,以水平方向为副轴
align-items: center;————副轴方向居中分布
justify-content: space-around;————主轴方向空隙环绕分布

最后在ts入口文件引入import '../css/scss/index.scss'

效果
在这里插入图片描述

四、 编写食物对象

分析：
食物对象，需要包含食物对象本身foodHtml，位置信息x,y等属性，
还需要包含获取当前食物位置事件getter()，随机生成食物事件change()等事件。

获取当前食物位置事件getter()

  //获取食物的横纵坐标
  get x(){
    return this.foodHtml.offsetLeft;
  }
  get y(){
    return this.foodHtml.offsetTop;
  }

随机生成食物事件change()

change(){
    //食物位置是随机生成的
    //位置范围在0-290（main的宽度-食物的宽度），并且是10（食物的宽度）的倍数
    //计算得出food的移动范围
    let x=Math.round(Math.random()*29)*10;
    let y=Math.round(Math.random()*29)*10;
    this.foodHtml.style.left=x+'px';
    this.foodHtml.style.top=y+'px';
  }

其中位置信息是通过定位获取的，至于食物的产生位置是有限制的最小为0，最大是主舞台大小减去食物大小。所以这部分写成固定值是不合适的，为了增加可扩展性，增加了主舞台对象mainHtml，食物大小foodWidth，主舞台大小mainWidth等属性，从而大大提升了游戏的可扩展性。
优化后的change()

change(){
    //位置范围在0-290（main的宽度-食物的宽度），并且是10（食物的宽度）的倍数
    let maxH=(this.mainWidth-this.foodWidth)/this.foodWidth;
    let x=Math.round(Math.random()*maxH)*this.foodWidth;
    let y=Math.round(Math.random()*maxH)*this.foodWidth;
    this.foodHtml.style.left=x+'px';
    this.foodHtml.style.top=y+'px';
}

Food 详细代码：

//定义食物对象
class Food {
  //定义一个属性表示食物对应元素
  foodHtml:HTMLElement;
  //定义一个属性表示主舞台对应元素
  mainHtml:HTMLElement;

  //获取food元素和主舞台元素的宽度
  foodWidth:number;
  mainWidth:number;
  constructor(){
    //获取页面中的food元素并赋值给foodHtml
    this.foodHtml=document.getElementById("food")!;
    //获取页面中的main元素并赋值给mainHtml
    this.mainHtml=document.getElementById("main")!;
    this.foodWidth=this.foodHtml.offsetWidth;
    this.mainWidth=this.mainHtml.clientWidth;
  }

  //获取食物的横坐标——左偏移量
  get x(){
    return this.foodHtml.offsetLeft;
  }

  //获取食物的纵坐标——上偏移量
  get y(){
    return this.foodHtml.offsetTop;
  }

  //生成事物的位置
  change(){
    //食物位置是随机生成的
    //位置范围在0-290（main的宽度-食物的宽度），并且是10（食物的宽度）的倍数
    //计算得出food的移动范围
    let maxH=(this.mainWidth-this.foodWidth)/this.foodWidth;
    let x=Math.round(Math.random()*maxH)*this.foodWidth;
    let y=Math.round(Math.random()*maxH)*this.foodWidth;

    this.foodHtml.style.left=x+'px';
    this.foodHtml.style.top=y+'px';
  }
}
export default Food;

五、 编写计分板对象

分析：
计分板对象，需要包含分数score，等级level，计分板元素scoreHtml levelHtml等属性，
还包含分数增加事件addScore()，等级上升事件addLevel()等事件。

分数增加事件addScore()

 //增加分数事件
 addScore(){
    this.scoreHtml.innerHTML=++this.score+"";
 }

等级上升事件addLevel()

  //提升等级是事件
  addLevel(){
      this.levelHtml.innerHTML = ++this.level + "";
  }

以上基本操作已经完成，但是仔细想想等级怎么上升呢，总不能和分数增加一样吧，应该是达到多少分数就可以升级了，比如达到10,20,30都可以升级即达到10这个区间即可升级。
优化后的addScore()

addScore(){
    this.scoreHtml.innerHTML=++this.score+"";
    //分数到达等级提升的分数区间，等级提升
    if(this.score%10===0){
      this.addLevel();
    }
}

另一方面应该设置等级上限，等达到等级就不在升级。
优化后的addLevel()

addLevel(){
    //未达到等级上限提升等级
    if(this.level<10) {
      this.levelHtml.innerHTML = ++this.level + "";
    }
}

最后为了提高游戏的可扩展性，我们定义升级的分数区间upLevelScore和等级上限maxLevel，之后的等级分数和等级上限我们的都可以自己来设置。

 //增加分数事件
  addScore(){
    this.scoreHtml.innerHTML=++this.score+"";
    //分数到达等级提升的分数区间，等级提升
    if(this.score%this.upLevelScore===0){
      //console.log(this.score%this.upLevelScore);
      this.addLevel();
    }
  }

  //提升等级是事件
  addLevel(){
    //未达到等级上限提升等级
    if(this.level<this.maxLevel) {
      this.levelHtml.innerHTML = ++this.level + "";
    }
  }

ScorePanel 详细代码

//定义记分牌对象
class ScorePanel {
  //定义score分数和level等级属性
  score:number;
  level:number;

  //设置等级上限
  maxLevel:number;
  //设置升级分数区间
  upLevelScore:number

  //定义score和level在页面中的元素
  scoreHtml:HTMLElement;
  levelHtml:HTMLElement;

  //不传值默认为10
  constructor(maxLevel:number=10,upLevelScore:number=10){
    this.score=0;
    this.level=1;
    this.maxLevel=maxLevel;
    this.upLevelScore=upLevelScore;
    this.scoreHtml=document.getElementById("score")!;
    this.levelHtml=document.getElementById("level")!;
  }

  //增加分数事件
  addScore(){
    this.scoreHtml.innerHTML=++this.score+"";
    //分数到达等级提升的分数区间，等级提升
    if(this.score%this.upLevelScore===0){
      //console.log(this.score%this.upLevelScore);
      this.addLevel();
    }
  }

  //提升等级是事件
  addLevel(){
    //未达到等级上限提升等级
    if(this.level<this.maxLevel) {
      this.levelHtml.innerHTML = ++this.level + "";
    }
  }
}
export default ScorePanel;

六、编写蛇对象

分析：
蛇对象，需要包含蛇元素snakeHead snakeBodies snakeContainer，分别是蛇头，蛇身体包含蛇头和蛇容器，蛇位置x,y等属性，
以及包含获取蛇位置事件getter()，设置蛇的位置setter()，蛇身体增加事件addBody()，蛇身体移动事件moveBody()，监测碰撞身体事件isHitBody(),撞墙事件等等。

获取蛇位置事件getter()

//获取蛇的位置（蛇头坐标）
  get x(){
    return this.snakeHead.offsetLeft;
  }
  get y(){
    return this.snakeHead.offsetTop;
  }

设置蛇的位置setter()，这里包含了撞墙检测

  //设置蛇头位置坐标
  set x(x:number){
    if(x===this.x){//同值什么都不做
      return;
    }
    if(x<0||x>390){//撞墙到边界通过抛异常使游戏结束
      throw new Error("游戏结束了");
    }
	//正常移动
    this.snakeHead.style.left=x+"px";
  }
  set y(y:number){
    if(y===this.y){//同值什么都不做
      return;
    }
    if(y<0||y>390){//撞墙到边界通过抛异常使游戏结束
      throw new Error("游戏结束了"); 
    }
	//正常移动
    this.snakeHead.style.top=y+"px";
  }

蛇身体增加事件addBody()

  //蛇增加身体事件
  addBody(){
    this.snakeContainer.insertAdjacentHTML("beforeend","<div></div>")
  }

蛇身体移动事件moveBody()，通过遍历蛇的身体将身体后段移向身体前段的位置由后向前依次定位。

  //身体移动事件,通过遍历蛇的身体将身体后段移向身体前段的位置由后向前
  moveBody(){
	for(let i=this.snakeBodies.length-1;i>0;i--){
		let x=(this.snakeBodies[i-1] as HTMLElement).offsetLeft;
		let y=(this.snakeBodies[i-1] as HTMLElement).offsetTop;
		(this.snakeBodies[i] as HTMLElement).style.left=x+"px";
		(this.snakeBodies[i] as HTMLElement).style.top=y+"px";
	}
  }

监测碰撞身体事件isHitBody()，就是遍历身体位置与头部位置进行比较如果有重合则游戏结束。

  //监测身体碰撞事件,就是遍历身体位置与头部位置进行比较如果有重合则游戏结束。
  isHitBody(){
  	for(let i=this.snakeBodies.length-1;i>0;i--){
  		let x=(this.snakeBodies[i] as HTMLElement).offsetLeft;
  		let y=(this.snakeBodies[i] as HTMLElement).offsetTop;
		if(this.x===x&&this.y===y){
			  throw new Error("游戏结束了");
		}
  	}
  }

对撞墙检测部分进行扩展性优化，本来是引入主舞台和食物通过获取他们的大小来做限制，但是因为已经在Food类中做了限制，所以直接引入Food类优化了的设置蛇的位置setter()

  //设置蛇头位置坐标
  set x(x:number){
    if(x===this.x){//同值什么都不做
      return;
    }
    if(x<0||x>this.food.mainWidth-this.food.foodWidth){//到边界通过抛异常使游戏结束
      throw new Error("游戏结束了");
    }
	//正常移动
    this.snakeHead.style.left=x+"px";
  }
  set y(y:number){
    if(y===this.y){//同值什么都不做
      return;
    }
    if(y<0||y>this.food.mainWidth-this.food.foodWidth){//到边界通过抛异常使游戏结束
      throw new Error("游戏结束了"); 
    }
	//正常移动
    this.snakeHead.style.top=y+"px";
  }

Snake详细代码

import Food from "./Food";
//定义射对象
class Snake{
  
  food:Food;
  //定义蛇头元素
  snakeHead:HTMLElement;
  //定义蛇身体
  snakeBodies:HTMLCollection;

  //定义蛇容器
  snakeContainer:HTMLElement;
  constructor(){
    //querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
    this.snakeHead=document.querySelector("#snake > div")! as HTMLElement;//类型断言

    //getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
    this.snakeBodies=document.getElementById("snake")!.getElementsByTagName("div");
    this.snakeContainer=document.getElementById("snake")!;
    this.food=new Food();
  }

  //获取蛇的位置（蛇头坐标）
  get x(){
    return this.snakeHead.offsetLeft;
  }

  get y(){
    return this.snakeHead.offsetTop;
  }

  //设置蛇头位置坐标
  set x(x:number){
    if(x===this.x){//同值什么都不做
      return;
    }
    if(x<0||x>this.food.mainWidth-this.food.foodWidth){//到边界通过抛异常使游戏结束
      throw new Error("游戏结束了");
    }
	//正常移动
    this.snakeHead.style.left=x+"px";
  }
  set y(y:number){
    if(y===this.y){//同值什么都不做
      return;
    }
    if(y<0||y>this.food.mainWidth-this.food.foodWidth){//到边界通过抛异常使游戏结束
      throw new Error("游戏结束了"); 
    }
	//正常移动
    this.snakeHead.style.top=y+"px";
  }

  //监测事件
  action(x:number,y:number){
	this.moveBody();
    this.x=x;
    this.y=y;
	this.isHitBody();
  }

  //蛇增加身体事件
  addBody(){
    this.snakeContainer.insertAdjacentHTML("beforeend","<div></div>")
  }
  
  //身体移动事件
  moveBody(){
	for(let i=this.snakeBodies.length-1;i>0;i--){
		let x=(this.snakeBodies[i-1] as HTMLElement).offsetLeft;
		let y=(this.snakeBodies[i-1] as HTMLElement).offsetTop;
		(this.snakeBodies[i] as HTMLElement).style.left=x+"px";
		(this.snakeBodies[i] as HTMLElement).style.top=y+"px";
	}
  }
  
  //监测身体碰撞事件
  isHitBody(){
  	for(let i=this.snakeBodies.length-1;i>0;i--){
  		let x=(this.snakeBodies[i] as HTMLElement).offsetLeft;
  		let y=(this.snakeBodies[i] as HTMLElement).offsetTop;
		if(this.x===x&&this.y===y){
			  throw new Error("游戏结束了");
		}
  	}
  }
}
export default Snake;

七、 编写游戏控制器

控制器需要将Food对象，ScorePanel对象，Snake对象引入从而时间对象之间的交互，比如蛇吃到食物增加分数上升等级等等。
控制器，需要包含游戏状态isLive默认值为true,当蛇撞墙或者撞身体而报错时游戏结束而变成false，蛇移动方向direction等属性，
以及包含操作蛇移动事件keyDownHandle() move()和监测吃到食物事件isEatFood()
操作蛇移动事件keyDownHandle()，视频里获取的是键盘操作值，但是不同浏览器操作值可能不相同，所以博主这边获取的是键盘值，这里不同浏览器是相同的，左37上38右39下40。
但还是存在一种情况蛇会掉头，这种情况还不允许的，通过观察相对掉头方向键盘值之间差值为2，只需要把这个限制即可

if (code>36&&code<41&&Math.abs(code-this.preDirection)!=2){
      this.direction=code;
	  this.preDirection=this.direction;
}

  //获取键盘值
  keyDownHandle(e:KeyboardEvent){
    let code=e.keyCode;
    //左37上38右39下40,后面是检测是否掉头查看键盘值
    if (code>36&&code<41&&Math.abs(code-this.preDirection)!=2){
      this.direction=code;
	  this.preDirection=this.direction;
    }
  }
  //蛇移动事件
  move(){
    //获取当前蛇的位置
    let x=this.snake.x;
    let y=this.snake.y;
    //根据按键方向修改x,u值
    switch(this.direction){
      //左移
      case 37:
        x=x-this.food.foodWidth;
        break;
      //上移
      case 38:
        y=y-this.food.foodWidth;
        break;
      //右移
      case 39:
        x=x+this.food.foodWidth;
        break;
      //下移
      case 40:
        y=y+this.food.foodWidth;
        break;
    }
    //重新赋值位置
    try {//异常捕获
	  this.snake.action(x,y);
      console.log(`当前位置x轴:${x},y轴:${y}`);
      //吃到食物
      //
      if(this.isEatFood(x,y)){
        console.log("吃到食物了")
        //重新随机生成食物
        this.food.change();
        //增加分数
        this.scorePanel.addScore();
        //增加蛇的身体
        this.snake.addBody();
      }
    } catch (error) {
      console.log("游戏结束")
      alert("游戏结束")
      this.isLive=false;
    }
    this.isLive&&setTimeout(this.move.bind(this), 300 - (this.scorePanel.level-1)*30);
  }

监测吃到食物事件isEatFood()

isEatFood(x:number,y:number){
    return x===this.food.x&&y===this.food.y;
}

控制器详细代码

import Food from "./Food";
import ScorePanel from "./ScorePanel";
import Snake from "./Snake"
//定义游戏控制器
class GameController {

  food:Food;
  scorePanel:ScorePanel;
  snake:Snake;
  //定义游戏运行状态
  isLive:boolean;
  //定义移动位置
  direction:number;
  preDirection:number;
  constructor(){
    this.food=new Food();
    this.scorePanel=new ScorePanel();
    this.snake=new Snake();
    this.direction=39;
	  this.preDirection=this.direction;
    this.isLive=true;
    this.init();
  }

  //初始化事件
  init(){
    //绑定点击键盘事件,this.keyDownHandle.bind(this)是为了将方向信息一直保存
    document.addEventListener('keydown',this.keyDownHandle.bind(this),false);
    //调用移动事件
    this.move();
  }

  //获取键盘值
  keyDownHandle(e:KeyboardEvent){
    let code=e.keyCode;
    //左37上38右39下40,后面是检测是否掉头查看键盘值
    if (code>36&&code<41&&Math.abs(code-this.preDirection)!=2){
      this.direction=code;
	  this.preDirection=this.direction;
    }
  }

  //蛇移动事件
  move(){
    //获取当前蛇的位置
    let x=this.snake.x;
    let y=this.snake.y;

    //根据按键方向修改x,u值
    switch(this.direction){
      //左移
      case 37:
        x=x-this.food.foodWidth;
        break;
      //上移
      case 38:
        y=y-this.food.foodWidth;
        break;
      //右移
      case 39:
        x=x+this.food.foodWidth;
        break;
      //下移
      case 40:
        y=y+this.food.foodWidth;
        break;
    }

    //重新赋值位置
    try {//异常捕获
	  this.snake.action(x,y);
      console.log(`当前位置x轴:${x},y轴:${y}`);
      //吃到食物
      //
      if(this.isEatFood(x,y)){
        console.log("吃到食物了")
        //重新随机生成食物
        this.food.change();
        //增加分数
        this.scorePanel.addScore();
        //增加蛇的身体
        this.snake.addBody();
      }
    } catch (error) {
      console.log("游戏结束")
      alert("游戏结束")
      this.isLive=false;
    }

    this.isLive&&setTimeout(this.move.bind(this), 300 - (this.scorePanel.level-1)*30);
  }

  //监测吃到食物事件
  isEatFood(x:number,y:number){
    return x===this.food.x&&y===this.food.y;
  }
}
export default GameController;

八、最终效果

最后在ts入口文件引入，达到最后效果如下

import '../css/scss/index.scss'
import GameController from './modules/GameController'
let gameController=new GameController();

在这里插入图片描述

LIMI_伞梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
ts项目 --- 贪吃蛇
li520_fei的博客
03-12 1191
ts项目 — 贪吃蛇 querySelectorAll获取的元素是死的,页面变化需要重新获取 getElementsByTagName获取的元素是活的,页面变化不需要重新获取 1.项目初始化 package.json 设置好这个文件终端输入npm i { "name": "part2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error
TypeScript-系统入门到项目实战
mus-z的博客
12-14 1419
原课地址：https://coding.imooc.com/class/evaluation/412.html?page=9 项目的话小demo基本上按照目录对应来看源码 项目我基本上只有最终版本，nodemodules搞起来太慢了所以就是直接在原有改了小节的内容 文章目录一、环境配置二、ts学习1.静态类型的深度理解2.基础类型和对象类型3.类型推断和类型注解4.函数相关类型5.Interface接口6.类的定义与继承7.类中的访问类型和构造器8.静态属性，setter和getter，单例模式9.抽象类、
TypeScript+React Web应用开发实战
热门推荐
努力是为了站在万人之中，成为别人的光
02-29 2万+
在现代Web开发中，React和TypeScript已经成为了非常流行的技术组合。React是一个用于构建用户界面的JavaScript库，而TypeScript是JavaScript的超集，它添加了类型系统和其他功能。本文将介绍如何使用TypeScript和React进行Web应用开发实战。
typescript进阶—vue项目实战
home of 倒不了的dota
09-28 1552
ts基础类型：查阅最全面的官方API文档（https://www.tslang.cn/docs/handbook/basic-types.html） re-ts git地址：https://git.jd.com/yuwenbinjie/re-ts 一、项目中接入typescript的好处 javascript本身属于弱类型，使用起来比较灵活，所以当前端项目多人协作开发时对接成本较高； js中参数类型没有校验，也没有规范的接口文档，需要从业务代码上下文中读取 所以在项目中引入ts可以增加代码可读性，减
2022年TypeScript 最细项目实践：四步走高效改造现有的 JavaScript 项目实战
m0_57042151的博客
08-05 396
接下来是我们在这个项目中组内约定的类型定义公约。约定这样的类型定义公约目的有两个：第一明确迁移进度，第二更好地做类型约束。我们约定了一些必须要遵守的公约：第一条，定义 type 尽量不使用 any。...
vue-typescript-admin-mock-server:for vue-typecript-admin-template项目的模拟服务器
04-29
Vue TypeScript管理模拟服务器 项目的模拟服务器演示链接（由vue-typecript-admin-template使用）概述此项目中api文件夹下的javascript代码是从的打字稿源代码生成的（通过在此目录中运行tsc命令）。 唯一的手动更改...
typescript-react-redux-ie8:Typescript-react-redux-ie8，在线演示
05-11
TypeScript-React-Redux (IE8+)本项目是一个兼容IE8的 TypeScript + React + Redux + immutablejs 的项目模板。为了降低上手难度，我在项目中写3个DEMO：todomvc without immutabeljs (ts + react + redux)[todo] ...
TypeScript Quickly-2020-英文版 学习笔记
12-21
TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 TypeScript Quickly-2020-英文版 学习笔记 ...
eslint-config-standard-with-typescript：eslint-config-standard的扩展，用于TypeScript
02-05
eslint-config-standard-type-script 基于并具有特定于TypeScript的规则的TypeScript的。用法npm install --save-dev eslint@7 eslint-plugin-promise@4 eslint-plugin-import@2 eslint-plugin-node@11 @typescript-...
typescript-plugin-css-modules：一个TypeScript语言服务插件，提供对CSS模块的支持
02-04
Typescript-plugin-css-modules 用于。目录关于这个插件该插件为IDE和与一起使用的任何其他工具提供类型信息。 目前，TypeScript在编译过程中不支持插件。 这意味着该插件不能： 在编译过程中提供错误，或为您的项目...
TypeScript代码贪吃蛇（代码实现地图绘制）
07-26
TypeScript代码-贪吃蛇小游戏，代码实现地图绘制。可用LayaAirIDE等实现。
TypeScript入门实战小游戏-----贪吃蛇的面向对象开发总结
m0_55842907的博客
05-18 782
前言：花了近一个星期左右的时间去学习了一下TypeScript的基本语法和开发环境的配置，跟着教程做了个简单的贪吃蛇的游戏，所有的功能基本实现，写篇博客做一下总结。所有源码包括html,less,ts文件都在博客中给出，并就用到的一些知识点进行总结归纳。 一、功能介绍以及实现结果展示 废话不多说，直接上图展示最终的实现效果； ...
ts实现贪吃蛇
lin_fightin的博客
02-02 767
先看效果图 思路 ts编程思想时面向对象。所以我们也要以面向对象的形式来开发。 首先我们需要三个类，蛇的类，食物的类，记分牌的类，然后还有创建一个类，将这三个类关联再一起。 看代码 先看下布局结构 食物是一个div,蛇是一个大div,他的每一段都是一个小div，下面是记分牌 看最简单的食物的类 在构造函数中，获取食物的div,然后通过get X Y 方法获取到食物的坐标，接着需要定义一个方法来改变食物的位置，因为食物是随机的嘛。 接着看记分牌的类 记分牌的类也容易，主要是没得一分就调用addScore
TS实现贪吃蛇
weixin_46831501的博客
09-27 287
TS很早以前就学了，但是一直没怎么用过，今天用一个贪吃蛇的小项目再来回顾一下TS的内容。话不多说，上代码。 样式代码就不写了，比较简单，下面是HTML的结构。 <div id="main"> <div id="stage"> <div id="snake"> <div></div> </div> <div id="food"> </div>
TS的使用案例——贪吃蛇
mantou_riji的博客
07-14 761
package.json tsconfig.json webpack.config.js 贪吃蛇页面 index.html index.less 完成记分牌类 snake类 游戏控制类 入口 index.ts 实现效果： 源码获取：https://github.com/wangliyang-max/qiandaun/tree/master/TS/%E8%B4%AA%E5%90%83%E8%9B%87 运行方式：...
贪吃蛇游戏实现
Sunnylunch-blog
09-16 1412
#include #include #include #include #include using namespace std; enum { U, D, L, R }; typedef struct Coor { int _x = 0; int _y = 0; Coor(int x = 0, int y = 0) :_x(x) , _y(y){} }Coor;
typescript 贪吃蛇[学习过程中，模仿的一个例子]
weixin_30379911的博客
06-27 123
代码实现ts： 1 'use strict' 2 module Main { 3 4 const FloorType = { 5 space: "space", 6 snack: "body", 7 food: "food" 8 } 9 const enum Direct...
超细致的TypeScript入门与实战
weixin_43805705的博客
08-22 1450
本文向大家介绍TypeScript基础知识及用法，帮助大家快速了解，在前端项目中使用这门技术。TypeScript的类型推断跟 VS Code 的良好搭配让代码效率有了极大提升。静态类型检测，会提示一些潜在的问题，使得开发者代码更严谨，低级错误早发现早解决。同时TypeScript类型定义使得代码的可读性增强，统一规范，可有效降低项目维护成本。
typescript-generator-maven-plugin
最新发布
03-01
typescript-generator-maven-plugin是一个Maven插件，用于生成TypeScript类型定义文件。它可以根据Java类和接口生成相应的TypeScript类型定义，以便在前端开发中使用。 该插件可以通过在Maven项目的pom.xml文件中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值