html+css+js比较完整的简单贪吃蛇

最新推荐文章于 2024-08-12 17:42:25 发布

君山白鹭

最新推荐文章于 2024-08-12 17:42:25 发布

阅读量1.1k

点赞数 2

分类专栏：笔记文章标签： css3 css javascript

本文链接：https://blog.youkuaiyun.com/qq_46029678/article/details/121343823

版权

网页贪吃蛇@君山

html+css+js比较完整的简单贪吃蛇

小菜鸡写的第一个完整地js小东西，参考的是大佬的贪吃蛇代码，然后在源代码的基础上完善的，添加了难度选择功能，蛇撞到自己也会死亡，蛇不能回头，有分数显示，可以重置和暂停，分数段分为0，30，100（玩到100有小惊喜hhhhhhhh）具体看代码吧，关键地方都写了注释，不懂的可以留言询问。
大佬代码：
链接: https://blog.youkuaiyun.com/bingocoder/article/details/85868814. 贪吃蛇开始展示

代码可直接复制使用

~~版本1：适合大屏幕电脑，小屏幕可能布局有问题建议运行下面第二个代码。~~ 发现放两个版本的代码导致页面打开会卡住，还是只留下改进版的吧555

发现同学的小屏幕电脑会导致布局出现问题，小改了一下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <style type="text/css">
        * {
   
            margin: 0;
            padding: 0;
        }
        button {
   
            /* 默认有灰色边框我们需要手动去掉 */
            width: 100%;
            height: 100%;
            line-height: 100%;
            font-size: 150%;
            cursor: pointer;
            border: 0; 
            outline: none;
            background-color: rgb(206, 214, 248);
        }
        .map {
   
            margin: 30px auto;
            width: 900px;
            height: 600px;
            background: rgb(142, 204, 245);
            border: 10px solid rgb(177, 183, 240);
            border-radius: 8px;
        }
        .show {
   
            float: left;
            overflow: hidden;
            /* 修改了一下，兼容一下小屏幕，因为懒得修改别的部分就偷懒用了百分比，大屏幕看效果就不太行了 */
            margin: 10% 0 0 2%;
            width: 10%;
            height: 200px;
            background-color: rgb(186, 203, 240);
            border-radius: 10px;
            text-align: center;
        }
        .show .choose {
   
            padding: 0;
        }
        li {
   
            list-style: none;
            text-align: center;
        }
        .show .choose li {
   
            height: 30px;
            border-bottom: 3px solid rgb(155, 183, 243);
        }
        .show .choose ul #title{
   
            height: 50px;
            line-height: 50px;
            font-size: 150%;
        }
        .show .score {
   
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 200%;
        }
        .Degree {
   
            position: absolute;
            left: 30%;
            top: 200px;
            width: 18%;
            height: 250px;
            z-index: 2;
        }
        .Degree .degree {
   
            width: 100%;
            height: 250px;
        }
        .Degree .degree li {
   
            width: 100%;
            height: 60px;
            line-height: 60px;
            border-bottom: 3px solid rgb(155, 183, 243);            
        }
        .Degree .degree #dg {
   
            font-size: 200%;
            color: rgb(2, 152, 252);
            background-color: rgb(206, 214, 248);
        }
    </style>
</head>
<body>
    <div class

最低0.47元/天解锁文章