devbox
人工智能uu
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Typescript小练习之贪吃蛇_ts练习小游戏

作者：人工智能uu | 2024-08-19 13:51:26

赞

踩

ts练习小游戏

前言

贪吃蛇小练习

1 搭建项目结构

设置配置文件

下载依赖

 配置less

下载依赖

修改配置文件(webpack.config.js)

引入less文件

下载兼容css版本的依赖

修改配置文件(webpack.config.js)

2 编写代码

编写代码框架(html)

编写样式(less)

编写代码逻辑（ts）

 编写食物(Food)模块

编写记分牌(ScorePanel)模块

编写蛇(Snake)模块

编写键盘控制(GameControl)模块

总结

前言

 用typescript做一个贪吃蛇的小游戏

贪吃蛇小练习

1 搭建项目结构

设置配置文件

将前面配置好的tsconfig.json,webpack.config.js,package.json文件(文末)复制粘贴到新文件中并根据项目做简单修改

 

下载依赖

npm -i

 配置less

下载依赖

npm i -D less less-loader css-loader style-loader

修改配置文件(webpack.config.js)

引入less文件

下载兼容css版本的依赖

npm i -D postcss postcss-loader postcss-preset-env

修改配置文件(webpack.config.js)

 至此，项目结构搭建完成

2 编写代码

输入npm start开启监听便于实时更新代码

编写代码框架(html)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>贪吃蛇</title>
  8. </head>
  9. <body>
  10.     <!-- 创建游戏的主容器 -->
  11.     <div id="main">
  12.         <!-- 设置游戏的舞台 -->
  13.         <div id="stage">
  14.             <!-- 设置蛇 -->
  15.             <div id="snake">
  16.                 <!-- snake内部的div,表示蛇的各部分 -->
  17.                 <div>
  18.  
  19.                 </div>
  20.             </div>
  21.             <!--设置食物-->
  22.             <div id="food">
  23.                 <!-- 添加4个小div,设置食物的样式 -->
  24.                 <div></div>
  25.                 <div></div>
  26.                 <div></div>
  27.                 <div></div>
  28.             </div>
  29.         </div>
  30.         <!-- 设置游戏的积分牌 -->
  31.         <div id="score-panel">
  32.             <div>
  33.                 SCORE:<span id="score">0</span>
  34.             </div>
  35.             <div>
  36.                 level:<span id="level">1</span>
  37.             </div>
  38.         </div>
  39.     </div>
  40.     <!-- <script src="../dist/bundle.js"></script>  -->
  41. </body>
  42. </html>
  43.  
  44. ​
  45.  
  46. ​
  47.  
  48. ​

index.ts文件引入less样式

编写样式(less)

  1. //设置变量
  2. @bg-color:yellow;
  3.  
  4. //清除默认样式
  5. *{
  6.     margin:0;
  7.     padding: 0;
  8.     //改变盒子模型的计算方式
  9.     box-sizing: border-box;
  10. }
  11.  
  12. body{
  13.     font:bold 20px "Courier";
  14. }
  15.  
  16. //设置主窗口的样式
  17. #main{
  18.     width: 360px;
  19.     height: 420px;
  20.     //设置背景颜色
  21.     background-color:@bg-color;
  22.     margin: 100px auto;
  23.     border: 10px solid blue;
  24.     //设置圆角
  25.     border-radius: 20px;
  26.  
  27.     //开启弹性盒模型
  28.     display: flex;
  29.     //设置主轴的方向
  30.     flex-flow: column;
  31.     //设置辅轴的对齐方式
  32.     align-items: center;
  33.     //设置主轴的对齐方式
  34.     justify-content: space-around;
  35.  
  36.     //游戏舞台
  37.     #stage{
  38.         width: 304px;
  39.         height: 304px;
  40.         border: 2px solid black;
  41.         //开启相对定位
  42.         position: relative;
  43.  
  44.         //设置蛇的样式
  45.         #snake{
  46.             &>div{
  47.                 width: 10px;
  48.                 height: 10px;
  49.                 background-color: red;
  50.                 border: 1px solid @bg-color;
  51.                 //开启绝对定位 使蛇可以移动
  52.                 position: absolute;
  53.             }
  54.         }
  55.         
  56.         //设置食物
  57.         #food{
  58.             width: 10px;
  59.             height: 10px;
  60.             position: absolute;
  61.             left:40px;
  62.             top:100px;
  63.             //background-color: red;
  64.             display: flex;
  65.             //设置横轴为主轴，wrap表示自动换行
  66.             flex-flow: row wrap;
  67.             //设置主轴和侧轴的空白空间分配到元素之间
  68.             justify-content: space-between;
  69.             align-content: space-between;
  70.  
  71.             &>div{
  72.                 width: 5px;
  73.                 height: 5px;
  74.                 background-color: green;
  75.                 border: 1px solid yellow;
  76.                 //使4gediv旋转45度
  77.                 transform: rotate(45deg);
  78.             }
  79.         }
  80.     }
  81.  
  82.     //记分牌
  83.     #score-panel{
  84.         width: 300px;
  85.         display: flex;
  86.         //设置主轴的对齐方式
  87.         justify-content: space-between;
  88.     }
  89. }
  90.

编写代码逻辑（ts）

按不同功能分成多个模块，便于代码的编写及修改。

 将Food.ts，ScorePanel.ts,Snake.ts模块导入到GameControl.ts模块，由该模块来统一整合。

index.ts文件引入各模块

 

 编写食物(Food)模块

  1. //定义类
  2. class Food{
  3.     //定义一个属性表示食物所对应的元素
  4.     element:HTMLElement;
  5.     constructor(){
  6.         //获取页面中的food的元素并将其赋值给element
  7.         this.element=document.getElementById("food")!;//！表示元素不可能为空
  8.     }
  9.     //定义一个获取食物X轴坐标的方法
  10.     get X(){
  11.         return this.element.offsetLeft;
  12.     }
  13.     //定义一个获取食物Y轴坐标的方法
  14.     get Y(){
  15.         return this.element.offsetTop;
  16.     }
  17.     //修改食物的位置
  18.     change(){
  19.         //生成一个随机的位置
  20.         //食物的位置最小是0，最大是290   300-10=290
  21.         //蛇移动一次就是一格，一格的大小就是10，所以就要求食物的坐标必须是10的倍数
  22.         //Math.round表示四舍五入 
  23.         //Math.floor(Math.random()*30)*10;
  24.         //Math.floor表示向下取整
  25.         let top=Math.round(Math.random()*29)*10;//既包括0，又包括290,而且都是10的倍数
  26.         let left=Math.round(Math.random()*29)*10;
  27.         this.element.style.left=left+'px';
  28.         this.element.style.top=top+'px';
  29.     }
  30. }
  31.  
  32. //测试代码
  33. // const food=new Food()
  34. // console.log(food.X,food.Y);
  35. // food.change();
  36. // console.log(food.X,food.Y);
  37.  
  38. export default Food;

编写记分牌(ScorePanel)模块

  1. //定义表示记分牌的类
  2. class ScorePanel{
  3.     //score和level用来记录分数和等级
  4.     score=0;
  5.     level=1;
  6.     //分数和等级所在的元素，在构造函数中进行初始化
  7.     scoreEle:HTMLElement;
  8.     levelEle:HTMLElement;
  9.     //设置变量限制等级
  10.     maxLevel:number;
  11.     //设置一个变量表示多少分时升级
  12.     upScore:number;
  13.     constructor(maxLevel:number=10,upScore:number=10){//不传默认10，穿了多少就多少
  14.         this.scoreEle=document.getElementById("score")!;
  15.         this.levelEle=document.getElementById("level")!;
  16.         this.maxLevel=maxLevel;
  17.         this.upScore=upScore;
  18.     }
  19.  
  20.     //设置一个加分的方法
  21.     addScore(){
  22.         //使分数自增
  23.         //this.score++;
  24.         this.scoreEle.innerHTML=++this.score+'';//装换成字符串，innerHTML接收字符串
  25.         //判断分数是多少
  26.         if(this.score%this.upScore===0){
  27.             this.levelUp();
  28.         }
  29.     }
  30.     //提升等级的方法
  31.     levelUp(){
  32.         if(this.level<=this.maxLevel){
  33.             this.levelEle.innerHTML=++this.level+'';
  34.         }
  35.     }
  36. }
  37.  
  38. //测试代码
  39. //const scorePanel=new ScorePanel(1,0);
  40. // scorePanel.addScore();
  41. // scorePanel.addScore();
  42. // scorePanel.addScore();
  43. // for(let i=0;i<9;i++)
  44. // {
  45. //     scorePanel.addScore();
  46. // }
  47.  
  48. export default ScorePanel;//改为默认模块暴露出去

编写蛇(Snake)模块

  1. class Snake{
  2.     //表示蛇头的元素
  3.     head:HTMLElement;
  4.     //蛇的身体(包括蛇头)
  5.     bodies:HTMLCollection;
  6.     //获取蛇的容器
  7.     element:HTMLElement;
  8.     constructor(){
  9.         this.element=document.getElementById("snake")!;
  10.         this.head=document.querySelector("#snake>div")!as HTMLElement;
  11.         this.bodies=this.element.getElementsByTagName("div");
  12.     }
  13.     //获取蛇的坐标(蛇头坐标)
  14.     get X(){
  15.         return this.head.offsetLeft;
  16.     }
  17.     //获取蛇的Y轴坐标
  18.     get Y(){
  19.         return this.head.offsetTop;
  20.     }
  21.  
  22.     //设置蛇头的坐标
  23.     set X(value:number){
  24.         //如果新值和旧值相同，则直接返回不在修改
  25.         if(this.X===value){
  26.             return;
  27.         }
  28.         //x的值的合法范围0-290
  29.         if(value<0||value>290){
  30.             //进入判断说明蛇撞墙了
  31.             throw new Error("蛇撞墙了");
  32.         }
  33.         //修改x时，是在修改水平坐标，蛇在左右移动，蛇在向左移动式时，不能向右掉头，反之亦然
  34.         if(this.bodies[1]&&(this.bodies[1]as HTMLElement).offsetLeft===value){
  35.             //console.log("发生了水平掉头");
  36.             //如果发生了掉头，则应让蛇向反方向移动
  37.             if(value>this.X){
  38.                 //如果新值大于旧值，则说明蛇在向右走（实际是蛇向左走），此时发生掉头.但实际上应该使蛇继续向左走
  39.                 value=this.X-10;
  40.             }else{
  41.                 value=this.X+10;
  42.             }
  43.         }
  44.         //移动身体
  45.         this.moveBody();
  46.         this.head.style.left=value+"px";
  47.         this.checkHeadBody();
  48.     }
  49.     set Y(value:number){
  50.          if(this.Y===value){
  51.              return;
  52.          }
  53.         //y的值的合法范围0-290
  54.          if(value<0||value>290){
  55.              //进入判断说明蛇撞墙了
  56.              throw new Error("蛇撞墙了");
  57.         }
  58.          //修改y时，是在修改垂直坐标，蛇在上下移动，蛇在向上移动式时，不能向下掉头，反之亦然
  59.         if(this.bodies[1]&&(this.bodies[1]as HTMLElement).offsetTop===value){
  60.             //console.log("发生了垂直掉头");
  61.             //如果发生了掉头，则应让蛇向反方向移动
  62.             if(value>this.Y){
  63.                 //如果新值大于旧值，则说明蛇在向下走（实际是蛇向上走），此时发生掉头.但实际上应该使蛇继续向上走
  64.                 value=this.Y-10;
  65.             }else{
  66.                 value=this.Y+10;
  67.             }
  68.         }
  69.         //移动身体
  70.         this.moveBody();
  71.         this.head.style.top=value+"px";
  72.         //检查有没有撞到自己
  73.         this.checkHeadBody();
  74.     }
  75.  
  76.     //蛇增加身体的方法
  77.     addBody(){
  78.         //向element中添加一个div
  79.         this.element.insertAdjacentHTML("beforeend","<div></div>");
  80.     }
  81.     //添加一个蛇身体移动的方法
  82.     moveBody(){
  83.         //将后边的身体设置为前边身体的位置
  84.         //  第4节=第3节的位置
  85.         //  第3节=第2节的位置
  86.         //  第2节=第1节的位置
  87.             //遍历获取所有的身体
  88.             for(let i=this.bodies.length-1;i>0;i--)
  89.             {
  90.                 //获取前边身体的位置
  91.                 let X=(this.bodies[i-1]as HTMLElement).offsetLeft;//没加类型断言报错是因为bodies类型是Element,另外一个是htmlelement
  92.                 let Y=(this.bodies[i-1]as HTMLElement).offsetTop;
  93.                 //将值设置到当前身体上
  94.                 (this.bodies[i]as HTMLElement).style.left=X+"px";
  95.                 (this.bodies[i]as HTMLElement).style.top=Y+"px";
  96.             }
  97.     }
  98.  
  99.     //检查蛇头是否撞到自己的方法
  100.     checkHeadBody(){
  101.         //获取所有的身体，检查其是否和蛇头的坐标发生重叠
  102.         for(let i=1;i<this.bodies.length;i++){
  103.             let bd=this.bodies[i]as HTMLElement;
  104.             if(this.X===bd.offsetLeft && this.Y===bd.offsetTop){
  105.                 //进入判断说明蛇头撞到了身体，游戏结束
  106.                 throw new Error("撞到自己了");
  107.             }
  108.         }
  109.     }
  110. }
  111.  
  112. export default Snake;

编写键盘控制(GameControl)模块

  1. //引入其他类
  2. import Snake from "./snake";
  3. import Food from "./Food";
  4. import ScorePanel from "./ScorePanel";
  5.  
  6. //游戏的控制器，控制其他所有的类
  7. class GameControl{
  8.     //定义三个属性
  9.     //蛇
  10.     snake:Snake;
  11.     //食物
  12.     food:Food;
  13.     //记分牌
  14.     scorepanel:ScorePanel;
  15.  
  16.     //创建一个属性来存储蛇的移动方向(也就是按键的方向)
  17.     direction:string='';
  18.     //创建一个属性用来记录游戏是否结束
  19.     isLive=true;
  20.  
  21.     constructor(){
  22.         this.snake=new Snake();
  23.         this.food=new Food();
  24.         this.scorepanel=new ScorePanel();
  25.  
  26.         this.init();
  27.     }
  28.  
  29.     //游戏的初始化方法，调用后游戏即开始
  30.     init(){
  31.         //绑定键盘按下的事件
  32.         document.addEventListener('keydown',this.keydownHandle.bind(this));//加了bind使得括号里的this指向keydownHandle
  33.         //调用run方法。使蛇移动,没开定时器时，蛇只动一次，因为只调用一次
  34.         this.run();
  35.     }
  36.  
  37.     /*
  38.         ArrowUp   Up
  39.         ArrowDown  Down
  40.         ArrowLeft   Left
  41.         ArrowRight   Right
  42.     */
  43.     //创建一个键盘按下的响应函数
  44.     keydownHandle(event:KeyboardEvent){
  45.         //console.log(this);没加bind之前 this指向是document
  46.         //需要检查event.key的值是否合法(用户是否按了正确的按键)
  47.         //修改direction属性
  48.         this.direction=event.key;
  49.     }
  50.  
  51.     //创建一个控制蛇移动的方法
  52.     run(){
  53.         //根据方向(this.direction)来使蛇的位置改变
  54.         /*
  55.             向上：top减少
  56.             向下：top增加
  57.             向左: left减少
  58.             向右；left增加
  59.         */
  60.        //获取蛇现在的坐标
  61.        let X=this.snake.X;
  62.        let Y=this.snake.Y;
  63.  
  64.        //根据按键方向来修改x值和y值
  65.        switch(this.direction){
  66.             case "ArrowUp":
  67.             case "Up":
  68.                 Y-=10;
  69.                 break;
  70.             case "ArrowDown":
  71.             case "Down":
  72.                 Y+=10;
  73.                 break;
  74.             case "ArrowLeft":
  75.             case "Left":
  76.                 X-=10;
  77.                 break;
  78.             case "ArrowRight":
  79.             case "Right":
  80.                 X+=10;
  81.                 break;
  82.        }
  83.  
  84.        //检查蛇是否吃到了食物
  85.        this.checkEat(X,Y);
  86.             
  87.  
  88.        //修改蛇的x值和y值
  89.        try{
  90.         this.snake.X=X;
  91.         this.snake.Y=Y;
  92.        }catch(e:any){
  93.         //进入到catch，说明出现了异常，游戏结束，弹出一个提示信息
  94.         alert(e.message+"GAME OVER");
  95.         //将isLive设置为false
  96.         this.isLive=false;
  97.        }
  98.        
  99.  
  100.        //开启一个定时调用
  101.        this.isLive&&setTimeout(this.run.bind(this),300-(this.scorepanel.level-1)*30);
  102.     }
  103.  
  104.     //定义一个方法，用来检查蛇是否吃到食物
  105.     checkEat(X:number,Y:number){
  106.         if( X===this.food.X&&Y===this.food.Y){
  107.             //console.log("吃到食物了");
  108.             //食物的位置涛进行重置
  109.             this.food.change();
  110.             //分数增加
  111.             this.scorepanel.addScore();
  112.             //蛇要增加一节
  113.             this.snake.addBody();
  114.         }
  115.     }
  116. }
  117.  
  118. export default GameControl;

至此，项目完成，输入npm run build即可运行代码

注：所需的配置文件如下

tsconfig.json

  1. {
  2.   "compilerOptions": {
  3.     "module": "es2015",
  4.     "target": "es2015",
  5.     "strict": true,
  6.     "noEmitOnError": true
  7.   }
  8. }

package.json

  1. {
  2.   "name": "part2",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "index.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "build": "webpack --mode development",
  9.     "start": "webpack serve --open --mode development "
  10.   },
  11.   "keywords": [],
  12.   "author": "",
  13.   "license": "ISC",
  14.   "devDependencies": {
  15.     "@babel/core": "^7.19.3",
  16.     "@babel/preset-env": "^7.19.4",
  17.     "babel-loader": "^8.2.5",
  18.     "clean-webpack-plugin": "^4.0.0",
  19.     "core-js": "^3.25.5",
  20.     "css-loader": "^6.7.1",
  21.     "html-webpack-plugin": "^5.5.0",
  22.     "less": "^4.1.3",
  23.     "less-loader": "^11.1.0",
  24.     "postcss": "^8.4.18",
  25.     "postcss-loader": "^7.0.1",
  26.     "postcss-preset-env": "^7.8.2",
  27.     "style-loader": "^3.3.1",
  28.     "ts-loader": "^9.4.1",
  29.     "typescript": "^4.8.4",
  30.     "webpack": "^5.74.0",
  31.     "webpack-cli": "^4.10.0",
  32.     "webpack-dev-server": "^4.11.1"
  33.   }
  34. }

webpack.config.js

  1. //引入一个包
  2. const path=require("path");
  3. //引入html插件
  4. const HTMLWebpackPlugin=require('html-webpack-plugin');
  5. //引入clean插件
  6. const {CleanWebpackPlugin}=require('clean-webpack-plugin');
  7. const { resolve } = require("path");
  8.  
  9. //webpack中的所有的配置信息都应该写在module.exports中
  10. module.exports={
  11.     //指定入口文件
  12.     entry:"./src/index.ts",
  13.  
  14.     //指定打包文件所在的目录
  15.     output:{
  16.         //指定打包文件的目录
  17.         path:path.resolve(__dirname,"dist"),
  18.         //打包后文件的文件
  19.         filename:"bundle.js",
  20.  
  21.         //告诉webpack不使用箭头函数
  22.         environment:{
  23.             arrowFunction:false,
  24.             const:false
  25.         }
  26.     },
  27.  
  28.     //指定webpack打包时要使用的模块
  29.     module:{
  30.         //指定要加载的规则
  31.         rules:[
  32.             {
  33.                 //test指定规则生效的文件
  34.                 test:/\.ts$/,
  35.                 //要使用的loader
  36.                 use:[
  37.                     //配置babel
  38.                     {
  39.                         //指定加载器
  40.                         loader:'babel-loader',
  41.                         //设置babel
  42.                         options:{
  43.                             //设置预定义的环境
  44.                             presets:[
  45.                                 [
  46.                                     //指定环境的插件
  47.                                     "@babel/preset-env",
  48.                                     //配置信息
  49.                                     {
  50.                                         //要兼容的目标浏览器
  51.                                         targets:{
  52.                                             "edge":"106",
  53.                                             "ie":"11",
  54.                                             "chrome":"99"
  55.                                         },
  56.                                         //指定corejs的版本
  57.                                         "corejs":"3",
  58.                                         //使用corejs的方式 "usage"表示按需加载
  59.                                         "useBuiltIns":"usage"
  60.                                     }
  61.                                 ]
  62.                             ]
  63.                         }
  64.                     },
  65.                     'ts-loader',
  66.                 ],
  67.                 //要排除的文件
  68.                 exclude:/node_modules/
  69.             },
  70.                 //设置less文件的处理
  71.             {
  72.                 test:/\.less$/,
  73.                 use:[
  74.                     "style-loader",
  75.                     "css-loader",
  76.                     //引入postcss
  77.                     {
  78.                         loader:"postcss-loader",
  79.                         options:{
  80.                             postcssOptions:{
  81.                                 plugins:[
  82.                                     [
  83.                                         'postcss-preset-env',
  84.                                         {
  85.                                             browsers:"last 2 versions"//兼容两种最新的浏览器
  86.                                         }
  87.                                     ]
  88.                                 ]
  89.                             }
  90.                         }
  91.                     },
  92.                     "less-loader"//loader执行顺序从下往上
  93.                 ]
  94.             }
  95.         ]
  96.     },
  97.  
  98.     //配置webpack插件
  99.     plugins:[
  100.         new CleanWebpackPlugin(),
  101.         new HTMLWebpackPlugin({
  102.             //title:"这是一个自定义的title"
  103.             template:"./src/index.html"//以他作为模板生成js文件
  104.         }),
  105.     ],
  106.  
  107.     //用来设置引用的模块
  108.     resolve:{
  109.         extensions:['.ts','.js']//以.ts ,.js结尾的文件都可以作为模块来使用
  110.     }
  111. }

总结

做了小练习来熟悉typescript,对typescript语法及使用有了进一步的了解,提高了编程能力。

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号