原生JS实现贪吃蛇项目

最新推荐文章于 2021-05-27 02:35:50 发布

原创

最新推荐文章于 2021-05-27 02:35:50 发布 · 1.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#原生JS贪吃蛇 #贪吃蛇 #js

原生JS实现贪吃蛇项目

HTML部分
CSS部分
JavaScript部分
原理
//点击开始游戏---->startPage消失---->游戏开始
//随机出现食物,出现三节蛇开始运动
//上下左右===>改变方向运动,
//判断吃到食物,=>蛇+1
//判断游戏结束==>弹出框

在这里插入图片描述
HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="demo.css">
</head>
<body>
     <div class="startPage" id="startPage">
        <div class="startBtn" id="startGameBtn">
           <!--  开始游戏按钮 -->
        </div>
    </div> 
    <div class="wrapper">
        <!-- 游戏界面 -->
        <div class="leftSide">
            <img src="start.jpg" id="startP">
        </div>
        <div class="main">
            <div class="header">
                <div class="score">
                    分数:
                    <span id="score"></span>
                </div>
            </div>
            <div class="content" id="content">
                <!-- 活动区域 -->
            </div>
        </div>
    </div>
    <div class="loser" id="loser">
        <!-- 游戏结束 -->
        <div class="con">
            <div class="close" id="close">
                <!-- x按钮 -->
            </div>
            <span class="loseScore" id="loseScore"></span>
        </div>
    </div>
    
    <script src="demo.js"></script>
</body>
</html>```

CSS部分:

*{
    margin: 0;
    padding: 0;
}
.startPage{
    width: 100%;
    z-index: 999;
    height: 600px;
    position: absolute;
    top: 0;
    left: 0;
}
.startBtn{
    background-image: url('start.png');
    background-repeat: no-repeat;
    width: 170px;
    height: 200px;
    background-size: 110% 100%;
    cursor: pointer;
    position: absolute;
    top: