javascript实现小游戏贪吃蛇

朱雀 2023-05-30 06:08 201阅读 0赞

## 贪吃蛇 ##

**style**

<style>
          .face{
                height: 400px;
                width: 600px;
                margin-left: auto;
                margin-right: auto;
                position: relative;
                background-color: pink;
            }
            #playground{
                height: 400px;
                width: 450px;
                float: left;
                position: relative;
            }
            .menu{
                height: 400px;
                width: 150px;
                float: left;
                background-color: skyblue;
            }
            #snack{
                height: 20px;
                width: 20px;
                background-color: red;
                position: absolute;
                left: 0px;
                top:0px;
            }
            #food{
                height: 20px;
                width: 20px;
                background: blue;
                position: absolute;
            }
            .body{
                height: 20px;
                width: 20px;
                background: green;
                position: absolute;
                left: 0px;
                top:0px;
            }
            #score{
                font-size: 30px;
                font-weight: bold;
                color: red;
            }
            .menu div{
                font-size: 20px;
                font-weight: bold;
            }
        
        
        </style>

**html**

<body>
        <div class="face">
            
            <div id="playground">
                
                <div id="food"></div>
                
                <div id="snack"></div>
            </div>
            
            <div class="menu">
                <div>得分<span id="score"></span></div>
            </div>
        </div>
    </body>

**javascript**

<script>
     var jsDiv = document.getElementById("playground");
        var jsSnack = document.getElementById("snack");    
        var jsFood = document.getElementById("food");
        var jsBody = document.getElementById("playground");
        var jsScore = document.getElementById("score");
        //设置全局变量
        var timer;//创建定时器为全局变量
        var timer1 = setInterval(eat,10);//检测位置碰撞，并且吃掉食物；
        var srr = [];//记录蛇行动的位置
        var num = 0 ;//记录数组的长度
        var jsSnackBody ;//么米吃掉一个食物，蛇的身体
        //开始游戏
        document.onkeydown = function(e){
            var evt = e || window.event;    
                switch(evt.keyCode) {
                //向左移动
                case 37:
                    clearInterval(timer);
                    timer=window.setInterval(runLeft,10)
                    function runLeft(){
                        if (jsSnack.offsetLeft > 0) {
                            jsSnack.style.left = jsSnack.offsetLeft - 1+ "px";
                            jsSnack.style.top = jsSnack.offsetTop + "px";    
                            //记录小蛇的位置
                            srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                            num++;//记录数组的长度
                        }                        
                    }
                break;
                //向上移动
                case 38:
                    clearInterval(timer);
                    timer=window.setInterval(runTop,10);    
                    function runTop(){
                        if (jsSnack.offsetTop > 0) {
                            jsSnack.style.top = jsSnack.offsetTop - 1 + "px";
                            jsSnack.style.left = jsSnack.offsetLeft + "px";
                            //记录小蛇的位置
                            srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                            num++;//记录数组的长度
                        }                        
                    }   
                break;
                //向右移动
                case 39:
                    clearInterval(timer);
                    timer=window.setInterval(runRight,10);
                    function runRight(){
                        if (jsSnack.offsetLeft + jsSnack.offsetWidth <= 450) {
                            jsSnack.style.left = jsSnack.offsetLeft + 1 + "px";
                            jsSnack.style.top = jsSnack.offsetTop + "px";
                            //记录小蛇的位置
                            srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                            num++;//记录数组的长度
                        }                        
                    }                    
                break;
                //向下移动    
                case 40:
                    clearInterval(timer);
                    timer=window.setInterval(runBottom,10);            
                    function runBottom(){
                        if (jsSnack.offsetTop + jsSnack.offsetHeight <= 400) {
                            jsSnack.style.top = jsSnack.offsetTop + 1 + "px";
                            jsSnack.style.left = jsSnack.offsetLeft + "px";
                            //记录小蛇的位置
                            srr.push([jsSnack.offsetLeft, jsSnack.offsetTop]);
                            num++;//记录数组的长度
                        }                        
                    }                    
                break;
            }
        }
        function Pos(){
            jsFood.style.left=parseInt(Math.random() * (430 - 20 + 1) + 20) + "px";
            jsFood.style.top=parseInt(Math.random() * (380 - 20 + 1) + 20) + "px";
        }
        Pos();
        function eat(){
            rectangleCrashExamine(jsSnack,jsFood);
            function rectangleCrashExamine(obj1, obj2) {
                var obj1Left = obj1.offsetLeft;
                var obj1Width = obj1.offsetLeft + obj1.offsetWidth;
                var obj1Top = obj1.offsetTop;
                var obj1Height = obj1.offsetTop + obj1.offsetHeight;
                var obj2Left = obj2.offsetLeft;
                var obj2Width = obj2.offsetLeft + obj2.offsetWidth;
                var obj2Top = obj2.offsetTop;
                var obj2Height = obj2.offsetTop + obj2.offsetHeight;
                //检测碰撞
                //碰撞检测原理：
                    //蛇在实物的左边、右边、上边、下边的时候，说明没有发生碰撞，那么我们取反，就说明发生碰撞
                if ( !(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top) ) {
                    //碰撞后身体
                    jsSnackBody = document.createElement("div");
                    jsSnackBody.setAttribute("class","body");
                    jsBody.appendChild(jsSnackBody);
                    Pos();//怪物的位置随机变换
                    setInterval(follow,10);//身体跟随的定时器
                }
            }
        }
        function follow(){
            //检查一共添加了多少身体
            var bodyNum = document.getElementsByClassName("body");
            //记录得分
            jsScore.innerHTML = bodyNum.length;
            //蛇每次移动1个像素，那么新的身体应该跟随在当前数组的倒数第20个数组的位置;依次加等;
            var place = 0 ;
            for( var i = 0 ; i<bodyNum.length ; i++){
                place += 20;
                bodyNum[i].style.left=srr[num-place][0] + 'px';
                bodyNum[i].style.top=srr[num-place][1] + 'px';    
            }
        }
    </script>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191107174040406.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N0eWxlMjAxOTA0,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 javascript实现小游戏贪吃蛇

贪吃蛇 style <style> .face{ height: 400px;

朱雀/ 2023年05月30日 06:08/ 0 赞/ 202 阅读

相关贪吃蛇小游戏

贪吃蛇游戏是一款比较经典的休闲游戏，文章包括项目的部分源码以及运行界面的一些图片，项目也参考学习了许多大佬的文章，会在文章最后面贴出参考文章，有什么问题也请大家指正。一、

谁借莪１个温暖的怀抱￠/ 2023年01月02日 08:28/ 0 赞/ 274 阅读

相关 C++贪吃蛇小游戏

C++贪吃蛇小游戏一.前言二.代码一.前言 1.代码有许多值得新手学习的地方 2.不看就吃亏了噢 3.如果没有值得学习的地方，我就倒立洗

怼烎@/ 2023年01月01日 07:00/ 0 赞/ 262 阅读

相关 python贪吃蛇小游戏

贪吃蛇 1. 导入游戏库 import pgzrun import random 2.游戏初始化窗口大小 WIDTH = 600

深碍√TFBOYSˉ_/ 2022年12月20日 05:41/ 0 赞/ 265 阅读

相关贪吃蛇小游戏css+javascript代码实现（全）

贪吃蛇小游戏css+javascript代码实现（全） <!DOCTYPE html> <html lang="en"> <head>

「爱情、让人受尽委屈。」/ 2022年12月17日 03:27/ 0 赞/ 174 阅读

相关 Javascript实现贪吃蛇小游戏

![这里写图片描述][SouthEast] 黑色背景是一个900px\600px的相对定位的一个div（obox）,我们在其内部动态生成一系列的小div，内部的开始游戏按钮，

秒速五厘米/ 2022年06月12日 06:23/ 0 赞/ 459 阅读

相关小游戏：贪吃蛇

功能描述： 1.蛇初始长度为5，随着吃食物变长，速度也变快 2.速度有上限，当速度达到上限，不再增速 3.可长按方向键加速 4.吃一个食物加一分三个文件：S

淡淡的烟草味﹌/ 2022年06月03日 03:44/ 0 赞/ 362 阅读

相关 js小游戏贪吃蛇

介绍一个由本人制作的贪吃蛇小游戏。这个游戏采用了前端BootStrap框架和jQuery框架，因此移动端和电脑端都能兼容。虽然界面比较简陋，但是基本功能比较齐全，如果有bug欢

蔚落/ 2022年05月27日 07:26/ 0 赞/ 310 阅读

相关贪吃蛇小游戏总论

引言：一个月前完成了贪吃蛇小游戏，作为一个用来练手的项目，自己的确成长了不少，打算就这个项目写点东西，后来工作太忙，再加上一些原因，一直到现在才有空写下来，贪吃蛇小游戏分为总论

比眉伴天荒/ 2022年04月10日 07:18/ 0 赞/ 1099 阅读

相关 react实现贪吃蛇小游戏

之前看别人写小游戏觉得很厉害，正好最近闲来无聊，就写了个入门级的小游戏，贪吃蛇。当你开始实现的时候，会发现其实并没有你想的那么难。下面进入正题。项目源码见：[https

雨点打透心脏的1/2处/ 2022年03月01日 17:28/ 0 赞/ 369 阅读