来写个贪吃蛇小游戏吧（TypeScript版本）

最新推荐文章于 2023-09-25 20:30:03 发布

阳树阳树

最新推荐文章于 2023-09-25 20:30:03 发布

阅读量1.7k

点赞数 4

文章标签： css css3 javascript

本文链接：https://blog.csdn.net/weixin_60789461/article/details/126652699

版权

先来康康效果图

我接下来将讲解相关配置和代码，源码链接放在最底下了，在GitHub上。

Explanation

1. tsconfig.json配置

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

此处是对编译选项进行配置

target: 我们将TS转译成JS的版本。

module: 模块化的版本。

strict: 所有相关的严格模式是否开启。

noEmitOnError: 当出现错误时是否停止编译。

2. HTML & CSS 布局相关

先来看看我们整体的布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body scroll="no">
    <!-- 创建游戏的主容器 -->
    <div id="main">
        <!-- 设置游戏舞台 -->
        <div id="stage">
            <!-- 设置蛇 -->
            <div id="snack">
                <!-- snack内部的div表示蛇的各部分 -->
                <div></div>
            </div>
            <div id="food">
                <!-- 设置食物的样式 -->
                <div></div>
                <div></div>
                <div></div>
                <div></div>
            </div>
        </div>
        <!-- 设置游戏的积分牌 -->
        <div id="scoreStage">
            <div>SCORE:<span id="score">0</span></div>
            <div>LEVEL:<span id="level">1</span></div>
        </div>
    </div>
</body>
</html>

CSS代码

// 设置变量
@bgColor: #b7d4a8;

// 清除默认样式清除默认样式
* {
   
    margin: 0;
    padding: 0;
    // 怪异模式
    box-sizing: border-box;
}

body {
   
    font: bold 20px "Courier";
    width: 100%;
    height: 100%;
    overflow: hidden;
}

// 设置主窗口的样式
#main {
   
    width: 360px;
    height: 420px;
    background-color: @bgColor;
    margin: 100px auto;
    border: 10px solid #000;
    border-radius: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    // 主轴对齐方式
    justify-content: space-around;
    
}

#stage {
   
    width: 304px;
    height: 304px

最低0.47元/天解锁文章

阳树阳树

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
来写个贪吃蛇小游戏吧（TypeScript版本）

这里的核心逻辑就是监控，看是上下左右中的哪一个，然后对应的改变蛇蛇的方向。其次，当蛇蛇碰到食物的时候，这个食物的位置会改变，可以设置一个。，所以我们需要定义出非常多的类来对这个贪吃蛇小游戏进行分析。首先，我们需要获取到蛇头的横纵坐标，还要能够给横纵坐标赋值。我们先来看看这个贪吃蛇小游戏有几个主要的部分。首先，我们需要获取其中的横纵坐标。当然还需要增加检测机制，舌头不能与身子重叠。其次，我们需要有方法增加蛇的身子。同时还需要增加身子移动的方式。其中蛇的移动需要不断的调用。这个函数，所以我们使用。
复制链接

扫一扫