TS实现贪吃蛇项目（附源码）

最新推荐文章于 2024-05-06 16:15:29 发布

编程路上狂奔的小白

最新推荐文章于 2024-05-06 16:15:29 发布

阅读量467

点赞数 6

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/m0_45682998/article/details/136810485

版权

文章目录

前言
项目效果图

前言

ts是一门面向对象的语言，在学习完后，可以拿贪吃蛇小游戏来当作一个练手项目。

项目效果图

snake

一、项目详细介绍

1、主面板

<!--创建游戏的主容器-->
<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>

2、食物Food类

一个对象所包含的主要是属性和方法两点。
食物所具有的属性是位置，而方法则是改变坐标位置。

// 定义食物类Food
class Food {
   
    // 定义一个属性表示食物所对应的元素
    element: HTMLElement;

    constructor() {
   
        // 获取页面中的food元素并将其赋值给element
        this.element = document.getElementById("food") as HTMLElement;
    }

    // 定义一个获取食物X轴坐标的方法
    get X() {
   
        return this.element.offsetLeft;
    }

    // 定义一个获取食物Y轴坐标的方法
    get Y() {
   
        return this.element.offsetTop;
    }

    // 修改食物位置的方法
    change() {
   
        // 生成一个随机的位置
        // 食物的位置最小是0，最大是290（减去自身）
        // 蛇移动一次就是一格，一格的大小就是10，所以就要求食物的坐标必须是10的倍数

        let left = Math.round(Math.random() * 29) * 10;
        let top = Math.round(Math.random() * 29) * 10