js小游戏案例（贪吃蛇）

最新推荐文章于 2023-11-12 22:10:45 发布

ICY___

最新推荐文章于 2023-11-12 22:10:45 发布

阅读量2.9k

点赞数 8

分类专栏： ICY___的js进阶文章标签：贪吃蛇

本文链接：https://blog.csdn.net/ICY___/article/details/87794468

版权

贪吃蛇是我们都玩过的游戏，也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。

基本思路：随机创建地图；利用top和left值，利用坐标的传递使蛇动起来；随机在地图上显示食物；利用蛇头的坐标进行判断；

优化细节；

开发模式：单例模式；（开发模式有时间一并分享给大家）

实现效果如下：

代码如下：

<!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">

    <link rel="shortcut icon" href="./图标.png" type="image/x-icon">
    <title>贪吃蛇</title>
    <style>
        body {
            margin: 0%;
            padding: 0%;
        }

        .map {
            width: 900px;
            height: 600px;
            background-color: rgb(0, 0, 0);
            margin: 0% auto;
            position: relative;
            cursor: none;
        }

        .snake {
            width: 30px;
            height: 30px;
            position: absolute;
            border: 2px solid rgba(0, 0, 0, 0.226);
            box-sizing: border-box;
        }

        .food {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: aquamarine;
            border-radius: 50%;
        }

        .score {
            color: white;
        }
    </style>
</head>

<body>
    <script>
        var Map; //地图
        var Snake; //蛇
        var Food; //食物
        var score = 0; //分数
        var speed = 600; //蛇前进的速度
        var game = (function () { //单例模式开发

            function map() { //地图方法，用于创建地图和分数显示
                this

最低0.47元/天解锁文章

ICY___

关注

8
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
js小游戏案例（贪吃蛇）

贪吃蛇是我们都玩过的游戏，也是一代人的回忆。今天就带大家用原生js实现贪吃蛇游戏功能。基本思路：随机创建地图；利用top和left值，利用坐标的传递使蛇动起来；随机在地图上显示食物；利用蛇头的坐标进行判断；优化细节；开发模式：单例模式；（开发模式有时间一并分享给大家）实现效果如下：代码如下：&lt;!DOCTYPE html&gt;&lt;html lang="...
复制链接

扫一扫