（新手向js项目）小白必看的原生js实现贪吃蛇游戏

喜帖街积极的芥兰炒牛肉

已于 2024-09-11 10:58:36 修改

阅读量1.2k

点赞数 12

分类专栏： js项目文章标签： javascript 游戏开发语言前端

于 2023-10-10 12:12:50 首次发布

本文链接：https://blog.csdn.net/weixin_51953261/article/details/133742204

版权

1. 实现游戏页面布局

index.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>贪吃蛇</title>
  <link rel="stylesheet" href="../css/index.css">
</head>
<body>
    <!-- 整个游戏容器 -->
    <div class="container">
        <!-- 开始按钮 -->
        <button class="startBtn"></button>
        <!-- 暂停按钮 -->
        <button class="pauseBtn"></button>
    </div>
    <script src="../js/config.js"></script>
    <script src="../js/index.js"></script>
</body>
</html>

包括游戏整体的容器container，开始游戏按钮startBtn，中途暂停按钮pauseBtn

index.css

绘制高和宽为600px的正方形

插入开始游戏和继续游戏的按钮，需要水平垂直居中

/*父元素设置为*/
display: flex;
/*水平居中*/
justify-content: center; 
/*垂直居中*/
align-items: center;

*{
    /* 去除内外边距 */
    margin: 0;
    padding: 0;
}

/* 整体游戏容器 */
.container{
    display: flex;
    /* 蛇要移动，是绝对定位 */
    position: relative; 
    width: 600px;
    height: 600px;
    background-color: #fdfdfd;
    border: 20px solid #9bd0e7;
    margin: 20px auto;
    justify-content: center;
    align-items: center;
}

.container button{
    border: none;
    outline: none;
}

.startBtn{
    width: 200px;
    height: 120px;
    background: url(../img/start.jpg.jpg) center/contain no-repeat;
    display: block;
}
.pauseBtn{
    width: 200px;
    height: 70px;
    background: url(../img/play.webp.jpg) center/contain no-repeat;
    display: none;
}

其中的图片是自己用画板绘制的，可在附录中找到

2. 游戏逻辑

2.1 主方法

index.js

function main() {
        //1.初始化游戏
        initGame();
        //2.绑定事件
        bindEvent();
}
main();

2.1.1 初始化游戏

config.js 创建变量

var gridData = []; //存储地图对象

//整个网格的行与列
var tr = 30;
var td = 30; //因为地图600px, 即每个格子20pixel

index.js

/**
 * 初始化游戏方法
 */
function initGame() {
    //1.初始化地图
    for (var i = 0; i < tr; i++) {
        for (var j = 0; j < td; j++) {
            gridData.push({ //从左往右从上至下存放坐标{x,y} = {j,i}
                x: j,
                y: i
            });//遍历每一个格子，存放数据
        }
    }
    //console.log(gridData);

    //2.绘制蛇
    drawSnake(snake);

    //3.绘制食物
    drawFood();
}

2.1.1.1 绘制snake

config.js

//蛇的身体大小
var snakeBody = 20;

//蛇相关配置
var snake = {
    //蛇的初始位置
    snakePos : [
        //初始有三段身体，有一个头
        {x:0,y:0,domContent:"",flag:'body'},
        {x:1,y:0,domContent:"",flag:'body'},
        {x:2,y:0,domContent:"",flag:'body'},
        {x:3,y:0,domContent:"",flag:'head'},
    ]
}

index.js

/**
 * 绘制蛇的方法
 * @param {*} snake 
 */
function drawSnake(snake) {
    //遍历snakePos
    for (var i = 0; i < snake.snakePos.length; i++) {
        //判断是否创建
        if (!snake.snakePos[i].domContent) {
            //进入此if表示第一次创建蛇
            snake.snakePos[i].domContent = document.createElement("div");
            //靠父元素计算移动位置
            snake.snakePos[i].domContent.style.position = "absolute"; //postion: absolute
            snake.snakePos[i].domContent.style.width = snakeBody + "px&