JQuery+CSS-贪吃蛇小游戏（手动移动）

最新推荐文章于 2022-07-21 20:37:31 发布
最新推荐文章于 2022-07-21 20:37:31 发布
阅读量248 收藏
点赞数
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45932923/article/details/106887827
版权

一个使用JQuery，CSS写成的一个贪吃蛇小游戏，还有很多问题待改进，就目前而言已经尽我最大可能写了成了这样，以后有机会我会回头再来完善它。
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Curtain</title>
    <style>
        body {
            background-image: linear-gradient(#ff0092, #fff900);
            background-size: auto 200%;
            background-position: 0 100%;
            transition: background-position 0.5s;
            text-align: center;
            height: 1500px;
            font-family: Monaco;
        }
        body:hover {
            background-position: 0 0;
        }
        #name {
            font-size: 200px;
            font-weight: 900;
            color: #8c888b;
            background: -webkit-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        -moz-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
        -ms-linear-gradient(45deg, #70f7fe, #fbd7c6, #fdefac, #bfb5dd, #bed5f5);
            color: transparent;
            /*设置字体颜色透明*/
            -webkit-background-clip: text;
            /*背景裁剪为文本形式*/
            animation: ran 10s linear infinite;
            /*动态10s展示*/
        }
        #boundary {
            position: relative;
            bottom: 800px;
            background-image: linear-gradient(to right, #9e00ff 0%, #e900e0 100%);
            height: 1500px;
            width: 1500px;
            margin: 0 auto;
            border-radius: 15px 15px 15px 15px;
        }
        #menu {
            position: relative;
            top: 400px;
            left: 15%;
            width: 400px;
            height: 1000px;
            border-radius: 25px 25px 25px 25px;
            background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
        }
        #start {
            top: 700px;
            position: absolute;
            right: 110px;
            font-size: 40px;
            border-radius: 5%;
            background-color: lightcyan;
            border-radius: 15px 15px 15px 15px;
        }
        #newGame {
            top: 800px;
            position: absolute;
            right: 110px;
            font-size: 40px;
            border-radius: 5%;
            background-color: lightcyan;
            border-radius: 15px 15px 15px 15px;
        }
        #menu>span {
            top: 100px;
            position: absolute;
            right: 110px;
            font-size: 40px;
            border-radius: 5%;
        }
        #d1 {
           left: 10px;
            font-weight: 700;
        }
        #d2 {
            font-weight: 800;
        }
        .food {
            position: absolute;
            height: 50px;
            width: 50px;
            transition: opacity 3s ease-in 2s;
        }
        #snake>div {
            position: absolute;
            height: 50px;
            width: 50px;
            transition:all 0.05s ease
        }
        #heard {
            position: absolute;
            left: 100px;
            background-color: lightcyan;
            border-radius: 15px 15px 15px 15px;
        }
        #body1 {
            position: absolute;
            left: 50px;
            background-color: #2C3E50;
            border-radius: 5px 5px 5px 5px;
        }
        #body2 {
            position: absolute;
            background-color: #2C3E50;
            border-radius: 5px 5px 5px 5px;
        }
    </style>
    <script type="application/javascript" src="jquery/jquery-3.3.1.js"></script>
    <script>
        //页面加载完寻找头和身体，如果没有则创建
        $(function () {
            if($("#snake").length<3){
                $("#snake").prepend($("<div id='body2'></div>"));
                $("#snake").prepend($("<div id='body1'></div>"));
                $("#snake").prepend($("<div id='heard'></div>"));
            }
            $("#d2").css("color","#00CCFF");
        });
        //开始游戏
        function startGame() {
            //随机色函数
            function randomHexColor() { //随机生成十六进制颜色
                var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
                while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
                    hex = '0' + hex;
                }
                return '#' + hex; //返回‘#'开头16进制颜色
            }
            //每次移动的距离
            let lattice=50;
            let numright=0;//往左增加right值
            let numtop=0;//往下增加top值
            let numbottom=0;//往上增加bottom的值
            let numleft=2;//往右增加left的值
            // console.log("左坐标："+$("#first").css("left"));
            // console.log("上坐标："+$("#first").css("top"));
            // console.log("右坐标："+$("#first").css("right"));
            // console.log("下坐标："+$("#first").css("bottom"));
            // $("#heard").css("left",100+"px");
            document.onkeyup = function() {
                //键盘弹上事件，考虑到如果持续按下或点击过快都会导致蛇跑出边界
                //这里的边界我没有做碰到结束游戏，
                for (let i=$("#snake>div").length-1;i>0;i--) {
                    $("#snake>div").eq(i).css("top",$("#snake>div").eq(i-1).css("top"));
                    $("#snake>div").eq(i).css("left",$("#snake>div").eq(i-1).css("left"));
                }
                //获得键盘的ASCII值
                let keyNum = event.keyCode;
                //如果按键值为37，并且距离左边界不为0px则可以向左移动，下方同理
                if(keyNum==37&&$("#heard").css("left")!=="0px"){
                    numright++;
                    numleft--;
                    $("#heard").css("right",lattice*numright+"px");
                    $("#heard").css("left",lattice*numleft+"px");
                    console.log("左坐标："+$("#heard").css("left"));
                    // console.log("上坐标："+$("#first").css("top"));
                    // console.log("右坐标："+$("#first").css("right"));
                    // console.log("下坐标："+$("#first").css("bottom"));
                    console.log("距离初始位置往左移了："+$("#heard").css("right"));
                    collision();
                    eat();
                }
                if(keyNum==38&&$("#heard").css("top")!=="0px"){
                    numbottom++;
                    numtop--;
                    $("#heard").css("bottom",lattice*numbottom+"px");
                    $("#heard").css("top",lattice*numtop+"px");
                    // console.log("左坐标："+$("#first").css("left"));
                    // console.log("上坐标："+$("#first").css("top"));
                    // console.log("右坐标："+$("#first").css("right"));
                    // console.log("下坐标："+$("#first").css("bottom"));
                    console.log("距离初始位置往上移了："+$("#heard").css("bottom"));
                    collision();
                    eat();
                }
                if(keyNum==39&&$("#heard").css("right")!=="-1350px"){
                    numleft++;
                    numright--;
                    $("#heard").css("left",lattice*numleft+"px");
                    $("#heard").css("right",lattice*numright+"px");
                    // console.log("左坐标："+$("#first").css("left"));
                    // console.log("上坐标："+$("#first").css("top"));
                    // console.log("右坐标："+$("#first").css("right"));
                    // console.log("下坐标："+$("#first").css("bottom"));
                    console.log("距离初始位置往右移了："+$("#heard").css("left"));
                    collision();
                    eat();
                }
                if(keyNum==40&&$("#heard").css("bottom")!=="-1450px"){
                    numtop++;
                    numbottom--;
                    $("#heard").css("top",lattice*numtop+"px");
                    $("#heard").css("bottom",lattice*numbottom+"px");
                    // console.log("左坐标："+$("#first").css("left"));
                    // console.log("上坐标："+$("#first").css("top"));
                    // console.log("右坐标："+$("#first").css("right"));
                    // console.log("下坐标："+$("#first").css("bottom"));
                    console.log("距离初始位置往下移了："+$("#heard").css("top"));
                    collision();
                    eat();
                }
            };
            //吃食物
            let num=0;
            function eat(){
                //获取所有CLSS为food的对象
                let food=$(".food");
                // console.log(food);
                //遍历获得每一个对象
                for(let i=0;i<food.length;i++){
                    let $food=$(food[i]);
                    // console.log("Y:"+$food.css("top")+"X:"+$food.css("left"));
                    //如果该对象的上左坐标与蛇头坐标相同，则证明此事蛇头吃到了食物
                    if($food.css("top")===$("#heard").css("top")&&$food.css("left")===$("#heard").css("left")){
                                console.log($food);
                                //每次吃到则添加一个div进蛇的身体中
                                $("#snake").append("<div></div>");
                                //为此div设置样式，颜色继承该食物
                        //此事注意，需要将创建的div的坐标继承尾巴的位置
                        $("#snake>div").eq($("#snake>div").length-1).css("backgroundColor",$food.css("backgroundColor"));
                        $("#snake>div").eq($("#snake>div").length-1).css("top",$food.css("top"));
                        $("#snake>div").eq($("#snake>div").length-1).css("left",$food.css("left"));
                        $("#snake>div").eq($("#snake>div").length-1).css("borderRadius","5px 5px 5px 5px");
                        //创建完后，执行删除操作，删除食物div
                        $food.remove();
                        //计数，并给计数器赋值
                        num++;
                        $("#d2").text(num);
                        $("#d2").css("color","#FC9D99")
                    }
                }
            }

            //随机生成食物（生成新的食物div），调用随机色，设置样式，每次随机时间
            setInterval(function () {
                let numtop=Math.floor(Math.random()*1499+1);
                let numleft=Math.floor(Math.random()*1499+1);
                while (numtop%50!=0||numleft%50!=0) {
                    numtop=Math.floor(Math.random()*1499+1);
                    numleft=Math.floor(Math.random()*1499+1);
                }
                    let $food =$("<div class='food'></div>");
                    $food.css("left",numtop+"px");
                    $food.css("top",numleft+"px");
                    $food.css("borderRadius","50%");
                    $food.css("backgroundColor",randomHexColor());
                    $("#boundary").append($food)
            },3000);
        }
        //重新开始游戏，刷新页面，游戏失败时也会触发该函数
        function newGame() {
            location.reload();
        }
    </script>
</head>
<body>
<span id="name">Curtain</span>
<div >
    <div id="menu">
        <input id="start" onmousedown="startGame()" type="button"value="开始游戏">
        <input id="newGame" onmousedown="newGame()" type="button"value="重新开始">
        <span id="d1">得分：</span>
        <span id="d2">0</span>
    </div>
    <script>
        function collision() {
            let snake=$("#snake>div");
            for (let i = 4; i < snake.length; i++) {
                let $snake = $(snake[i]);
                console.log("Y:" + $snake.css("top") + "X:" + $snake.css("left"));
                if ($snake.css("top") === $("#heard").css("top") && $snake.css("left") === $("#heard").css("left")) {
                    alert("GameOver!"+$("#menu>span").text());
                    location.reload();
                }
            }
        }
    </script>
</div>
<div id="boundary">
    <div id="snake">

    </div>
</div>

</body>
</html>
CurtainAline
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JQuery初学--贪吃蛇小游戏
m0_51589341的博客
02-18 163
学习JQuery
用jQuery编写出贪吃蛇小游戏
m0_53911328的博客
05-29 586
CSS页面代码： .games { width: 400px; height: 400px; margin: 40px auto 0; background: #999; position: relative; } .mask { width: 100%; height: 100%;
jQuery实现贪吃蛇
qq_43574493的博客
10-07 948
实现最简单的贪吃蛇小游戏，主要需要三个步骤 绘制地图 实现贪吃蛇的移动 判断贪吃蛇当前的运态
jQ制作贪吃蛇（笨b写法）
qq_45578842的博客
05-27 423
用jQuery写的贪吃蛇案例，比较简单粗糙
JQuery实现贪吃蛇游戏
旭东怪的博客
11-17 1134
很久之前学jquery时写的一个小游戏，代码如下： &lt;script type="text/javascript" src="jquery-3.2.1.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('body').css({ "p
HTML+JQ实现贪吃蛇
qq_36999656的博客
06-26 139
HTML+JS 实现贪吃蛇
jQuery 实现贪吃蛇小游戏（你一定能看懂）
仰望天空，妳我亦是行人.
07-21 1652
hello！最近学习了JS，做个小游戏练练（基本上是使用的jQuery），其中部分功能是用于和后端交互的。*注意：这里需要引入一个jQuery文件！！！如下图所示：
贪吃蛇(Jquery)
03-10
贪吃蛇 Jquery 简单易读 逻辑清晰 适合初学者 var x=200,y=200;//初始位置 var speed=20;//移动距离 var time = 100 ; //蛇的速度 var NodeCount = 5;//初始蛇身长度 var FoodCount = 5;//初始食物数量 var direction = 'd'; // w 向上 d 向右 a 左 s下
jquery贪吃蛇
09-10
目前没有写死亡,还有身体过长的那些,也不想写了....
jquery实现贪吃蛇小游戏
12-20
（写的思维混乱，只是想留个纪念，有时间重新写一遍）
jQuery贪吃蛇
04-05
jQuery贪吃蛇小游戏，可设置难度等级，键盘方向键控制游戏。
贪吃蛇jQuery
08-26
用jq写的贪吃蛇小游戏，代码有些臃肿，还好实现了基本的功能
jQuery贪吃蛇实现
06-24
jQuery贪吃蛇实现，只使用了jQuery库和原生HTML标签，简单实现
基于 jquery 的 html 贪吃蛇 简单实现
03-31
基于jquery实用javascript 实现，利用div层级特点显示背景与游戏对象，代码较少，简单易懂
jQuery写的贪吃蛇
06-02
这个是用jQuery写的贪吃蛇，有详细的代码和注释，感兴趣的可以看一下
jquery实现人物简单走动
fanzhang1990的专栏
03-14 4196
看到 别人用js写了一个任务基本跑动的动作，我就用jquery实现一下。一下是我的代码，写的比较粗糙，呵呵，jquery功力有待提高。 人物跑动画面 .im{ position: absolute; top:400px; left:800px; width: 60px; height: 60px; } div{ border: sol
jquery版贪吃蛇
04-22
代码基础功能实现，新手，界面丑陋。
jquery拖动图片移动拼图小游戏
04-01
jquery拖动图片移动拼图小游戏。使用jquery和javascript编写程序，移动拼图可直接玩耍
使用JavaScript+jQuery构建的双人贪吃蛇游戏
"一个使用JavaScript和jQuery编写的双人对战贪吃蛇小游戏。开发者在初学jQuery时创作，主要展示了如何实现蛇的移动、碰撞检测以及游戏界面的基本功能。" 本文将详细介绍如何使用JavaScript和jQuery来开发一个双人...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值