用TS从零开始制作贪吃蛇游戏--2

瑞雨溪

已于 2022-11-13 12:01:31 修改

阅读量819

点赞数

分类专栏： TS贪吃蛇文章标签：游戏

于 2022-11-12 20:56:08 首次发布

本文链接：https://blog.csdn.net/m0_57301042/article/details/127825228

版权

TS贪吃蛇专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本内容学习来自B站李立超老师原文链接

本项目软件使用vscode,样式文件使用less,面对对象的TS,打包通过webpack进行制作。

上一节我们已经搭建好了项目的文件夹结构，这节我们来进行编写贪吃蛇游戏的html结构。

编写贪吃蛇游戏的HTML结构

编写CSS样式

结语

编写贪吃蛇游戏的HTML结构

在之前建好的index.html编写如下代码

<!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>
    <!-- 居中游戏区域 -->
    <div id="main">
      <!-- 游戏活动区域 -->
      <div id="stage">
        <!-- 蛇 -->
        <div id="snake">
          <!-- 蛇的身体 -->
          <div></div>
        </div>
        <!-- 食物 -->
        <div id="food"></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>

编写CSS样式

在index.less中编写如下代码

@bg-color: #b7d4a8;
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font: bold 20px 'Courier';
  color: #000;
}

#main {
  width: 360px;
  height: 420px;
  background: @bg-color;
  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;
    border: 2px solid #000;
    position: relative;
    #snake {
      transition: left 0.1s ease-in-out, top 0.1s ease-in-out;
      & > div {
        width: 10px;
        height: 10px;
        background: #000;
        border: 1px solid @bg-color;
        position: absolute;
      }
    }
    #food {
      width: 10px;
      height: 10px;
      background: #fff;
      border: 1px solid @bg-color;
      position: absolute;
    }
  }
  #score-panel {
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

编写完成后运行项目，即可看到效果。