JavaScript—贪吃蛇游戏

最新推荐文章于 2024-08-08 13:37:43 发布

吐个泡泡~~

最新推荐文章于 2024-08-08 13:37:43 发布

阅读量3k

点赞数 3

分类专栏：游戏文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/m0_56712012/article/details/124197147

版权

本文介绍如何利用JavaScript和CSS创建一个贪吃蛇游戏。从构建HTML页面和CSS样式开始，接着在JavaScript中创建方格、蛇的移动、碰撞检测、食物生成以及键盘事件监听，实现游戏的开始和暂停功能。

摘要由CSDN通过智能技术生成

用JavaScript做一个贪吃蛇游戏，小时候的玩过的小游戏原来是这样做出来的，一起来看看吧！

1.创建HTML和css文件
2.创建js文件实现功能

创建页面

html文件

<body>
    <div class="content">
        <div class="btn startBtn">
            <button></button>
        </div>
        <div class="btn pauseBtn">
            <button></button>
        </div>
        <div id="snakeWrap"></div>
    </div>
    <script src="../js/index.js"></script>
</body>

css文件

* {
   
    margin: 0;
    padding: 0;
    outline: none;
    border: none;
}

.content {
   
    position: relative;
    width: 640px;
    height: 640px;
    margin: 50px auto;
}

.btn {
   
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.btn button {
   
    border: none;
    background-size: 100% 100%;
    cursor: pointer;
    outline: none;
    background-color: #FCE4EC;
    position: absolute;
    left: 50%;
    top: 50%;
}

.startBtn button {
   
    margin-top: -75px;
    margin-left: -100px;
    width: 200px;
    height: 150px;
    background-size: 200px 150px;
    background-image: url(../img/an.gif);
}

.pauseBtn {
   
    display: none;
}

.pauseBtn button {
   
    margin-top: -35px;
    margin-left: -35px;
    width: 70px;
    height: 70px;
    background-size: 100% 100%;
    background-image: url(../img/zt.png);
}


/* 设置蛇的范围和样式 */

#snakeWrap {
   
    position: relative;
    width: 600px;
    height: 600px;
    background: #FCE4EC;
    border: 20px solid #F8BBD0;
}

.snakeHead {
   
    background-image: url(../img/st.png);
    background-size: cover;
}

.snakeBody {
   
    background-color: #9CCC65;
    border-radius: 50%;
}

.food {
   
    background-size: cover;
    background-image: url(../img/sw.png);
    background-position: 0 -3px;
}

创建js文件

创建方格

    // 创建方块
    var sw = 20, //宽
        sh = 20,

最低0.47元/天解锁文章

吐个泡泡~~

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录