学写前端原生贪吃蛇

最新推荐文章于 2025-06-17 18:53:47 发布

原创

最新推荐文章于 2025-06-17 18:53:47 发布 · 2.9k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#原生贪吃蛇 #javascript

看了人家视频上写的贪吃蛇，瞬间觉得自己low爆了。。。。就学他写了三遍，以我的记性，觉得还是有必要记录下过程，以便记忆。
先看下截图：
在这里插入图片描述
首先html分析：
注：下列的id是用在js里的，class是用在css里的

 <div class="startPage" id="startPage">     <!-- 这是开始页的大页面 -->
        <div class="startBtn" id="startBtn"></div>  <!-- 载在大页面上的开始按钮键 -->
    </div>
    <div class="wrapper">          <!-- 开始后的大页面 -->
        <div class="left-side">         <!-- 将大页面分出一个左边，用来承载暂停和计分的按键 -->
            <div class="header">      <!-- 在这个左边的开头写个用来载计分的框 -->
                <div class="score">     <!-- 显示“分数” -->
                    分数:
                    <span id="score"></span>    <!-- 用在之后js里的动态计分操作 -->
                </div>
            </div>
            <img src="img/zanting.png" id="startP" alt="">      <!-- 显示暂停按钮，这个按钮用图片代替 -->
        </div>
        <div class="main">     <!-- 大页面中的主页面，和左边的区分下 -->
            <div class="content" id="content"></div>    <!-- 游戏区域，在js里控制 -->
        </div>
    </div>
    <div class="lose" id="lose">       <!-- 游戏结束的大页面 -->
        <div class="con">         <!-- 游戏结束后的计分清单 -->
            <span class="loseScore" id="loseScore">       <!-- js动态计分 -->
            </span>
            <div class="close" id="close"></div>        <!-- 游戏结束计分上的关闭按钮 -->
        </div>
    </div>

上述是贪吃蛇的全部html代码，将贪吃蛇游戏的大致界面划分出来。
接下来是css代码：

*{                             /* css的书写习惯，先将所有的margin和padding的默认值都去掉 */
    margin: 0;
    padding: 0;
}

.startPage{                 /* 开始游戏的大页面设置 */
    width: 100%;
    height: 640px;                  /* 游戏界面高度，这是我按自己电脑浏览器大小设置的 */
    position: absolute;                 /* 给它个绝对定位 */
    z-index: 999;                        /* 显示在界面最前头 */

}

.startBtn{                          /* 游戏开始按键的设置 */
    width: 200px;                 /* 设置按键图片的宽和高 */
    height: 50px;
    position: absolute;          /* 从这到margin：auto，这几行放在一起，表示居中在大页面的正中间 */
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin:auto;
    background-image: url(img/begin.png);       /* 把开始按键的图片放入 */
    background-size: 100% 100%;                      /* 将图片平摊开 */
    cursor: pointer;                     /* 鼠标划入时，箭头变成小手 */

}


.wrapper{                    /* 游戏开始后的大页面 */
    width: 100%;
    height: 640px;             /* 同上含义 */
    background-image: url('img/bj1.png');     /* 放入游戏背景图片 */
    background-size: 100% 100%;       /* 平摊 */
    position: relative;         /* 相对定位 */
    top: 0px;
    left: 0px;
}

.left-side{           /* 在大页面上划分出的左边部分 */
    width: 14%;         /* 占大页面的14%宽度 */
    height: 640px;       /* 高度 */
    position: absolute;      /* 绝对定位 */
    top: 0;
    left: 0;
}

.left-side img{      /* 显示暂停按键图片的设置 */
    width: 120px;     /* 设置图片的宽高 */
    height: 40px;
    position: absolute;      /* 绝对定位 */
    left: 15%;         /* 该图片在左边划分框中，距离左边距15% */
    top: 100px;        /* 图片距离上边距100px */
    
}

.header{                  /* 用来承载计分的框 */
    width: 100%;           
    height: 40px;
    margin-top: 30px;        /* 外边距30px */
    position: