用TypeScript完成的贪吃蛇小游戏

食物类Fod

// 定义
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
        // Math.random()*290  0-290 不包括0，也不包括290；  Math.round(Math.random()*290) 四舍五入包括0也包括290，0到290的整数  不行
        //包括0，包括29
        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;

游戏控制器，，控制其他的所有类

//引入其他的类
import Snake from "./Snake";
import Food from "./Food";
import ScorePanel from "./ScorePanel";
//游戏控制器，控制其他的所有类
class GameControl {
    snake: Snake;
    food: Food;
    scorePanel: ScorePanel;
    //创建一个属性来存储蛇的移动方向（也就是按键的方向）,默认值是空串
    direction: string = '';
    //创建一个属性用来记录游戏是否结束，false代表游戏结束
    isLive = true;
    constructor() {
        this.snake = new Snake();
        this.food = new Food();
        this.scorePanel = new ScorePanel(10,2);
        this.init();
    }
    //游戏的初始化方法，调用后游戏即开始
    init() {
        //绑定键盘按键按下的事件
        document.addEventListener('keydown', this.keydownHandler.bind(this))
        //调用run方法，使蛇移动
        this.run();
    }

    //创建一个键盘按下的响应函数  //  ArrowUp ArrowDown ArrowLeft ArrowRight  
    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;
        // ArrowUp Up ArrowDown Down ArrowLeft Left ArrowRight Right 
        //根据按键的方向修改X值和Y值
        switch (this.direction) {
            case "ArrowUp":
            case "up":
                //向上移动
                Y -= 10;
                break;
            case "ArrowDown":
            case "Down":
                //向下移动 top值增加
                Y += 10;
                break;
            case "ArrowLeft":
            case "Left":
                //向左移动 left 值减少
                X -= 10
                break;
            case "ArrowRight":
            case "Right":
                //向右移动 left增加
                X += 10;
                break;
        }
        //检查蛇是否吃到了食物
        this.checkEat(X, Y);
        //修改蛇的X和Y值
        try {
            this.snake.X = X;
            this.snake.Y = Y;
        } catch (e) {
            //进入到catch,说明出现了异常，游戏结束，弹出了一个提示信息
            alert(e.message + 'GAME OVER!')
            //将isLive设置为false
            this.isLive = false
        }

        //开启一个定时调用,每隔300毫秒去调用一下,随着等级的提高速度变慢;当isLive是true的时候开启定时器
        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;

记分牌的类

//定义表示记分牌的类
class ScorePanel{
    //score和level用来代表分数和等级
    score=0;
    level=1;
    //分数和等级所在的元素，在构造函数中进行初始化
    scoreEle:HTMLElement;
    levelEle:HTMLElement;

    //设置一个变量限制等级
    maxLevel:number;
    //设置一个变量表示多少分时升级
    upScore:number;

    //传参100就使用100，不传参就使用默认值是10
    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.scoreEle.innerHTML=this.score+''
        //判断分数是多少
        if(this.score%this.upScore===0){
           this.levelUp()
        }
    }
    //提升等级的方法
    levelUp(){
        if (this.level< this.maxLevel){
         this.levelEle.innerHTML=++this.level+''
        }
    
    }
}
// const scorePanel=new ScorePanel()

// for(let i=0;i<200;i++){
//     scorePanel.addScore()
// }
export default ScorePanel;

蛇

class Snake {
    //表示蛇头的元素
    head: HTMLElement;
    //蛇的身体(包括蛇头)
    bodies: HTMLCollection;
    //获取蛇的容器
    element: HTMLElement;
    constructor() {
        this.element = document.getElementById('snake')
        // querySelector 匹配指定 CSS 选择器的第一个元素。
        this.head = document.querySelector('#snake>div') as HTMLElement;
        //	document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 是静态的
        this.bodies = this.element!.getElementsByTagName('div')
    }
    //获取蛇的坐标（蛇头坐标）
    get X() {
        return this.head.offsetLeft;
    }
    //获取蛇的Y轴坐标
    get Y() {
        return this.head.offsetTop;
    }
    //设置蛇头的坐标
    set X(value: number) {
        //如果新值和旧值相同，则直接返回不再修改
        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: number) {
        //如果新值和旧值相同，则直接返回不再修改
        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() {
        // 将后边的身体设置为前边身体的位置 举例子 第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;
            console.log(this.bodies[i]);
            //将值设置到当前身体上
            (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;

样式

@bg-color:#b7d4a8;
// 清除默认的样式
*{
   margin:0;
   padding:0;
   //改变盒子模型的计算方式
   box-sizing: border-box;
}
body{
    font:bold 20px "Courier";
    //禁用滚动条
    overflow-x: hidden;
    overflow-y: hidden;
}
//设置主窗口的样式
#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-around;
        div{
            width:4px;
            height:4px;
            background-color: black;
            //使四个div 旋转45度
            transform: rotate(45deg);
           
        }
    }
}
//记分牌
#score-panel{
    width:300px;
    display:flex;
    //设置株洲的对齐方式
    justify-content: space-between;
}

html

<!DOCTYPE html>
<html>

<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">
                <!-- 添加4个小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.ts

//引入样式
import './style/index.less'
import GameControl from './modules/GameControl'
const gc=new GameControl();

尚硅谷TypeScript教程（李立超老师TS新课） https://www.bilibili.com/video/BV1Xy4y1v7S2?p=1&vd_source=c2279a533bc837e2d5b9ca3570c0a841