javascript实现小游戏贪吃蛇

最新推荐文章于 2021-11-05 21:45:25 发布
最新推荐文章于 2021-11-05 21:45:25 发布
阅读量400 收藏 1
点赞数
分类专栏： 原生javascript 文章标签： javascript实现小游戏贪吃蛇
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/style201904/article/details/102959631
版权

贪吃蛇

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>

在这里插入图片描述

大可&不必
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生 JavaScript 实现像素贪吃蛇
12-31
适合 HTML CSS JavaScript 的入门练习
基于javascript实现贪吃蛇小游戏
12-13
本文实例为大家分享了js贪吃蛇游戏的具体代码，供大家参考，具体内容如下 先不多说先上图 下面是代码部分（这里你可以根据需要改变蛇头和身体还有食物的图片，然后默认的样式是使用纯颜色的如果没有更改我的背景...
JS实现贪吃蛇小游戏
FFlouxetine的博客
05-14 2629
JS实现贪吃蛇小游戏 分析食物 对象：食物 属性：宽（width）、高（height）、水平坐标（x）、垂直坐标（y）、背景颜色（bgcolor） 方法：随机生成、移除食物 （在此之前可以完成一个小任务,相当于为这一步做铺垫） 例题：随机生成十个方块，每一秒刷新一次，位置随机，颜色随机 分析蛇 对象：蛇 属性：初始长度（一个个蛇节构成：x，y，color）、方向：（direction） 方...
贪吃蛇思路详解
前端之虎陈随易
08-10 7824
很多人学习编程，竟然不曾自己动手写过小游戏。 这或多或少，在编程生涯中，应该是缺少了一些乐趣的。 而没有动手写过的人，无外乎这么几种。 1，不屑。老子很牛逼，这种小儿科，浪费时间。 2，不会。思前想后，挝耳挠腮，无处下手。 3，不愿。我只对钱感兴趣，对写小游戏，没兴趣。 不知道该如何评判，也不想评判，每个人都有自己的世界观，人生观，价值观。 那么，对于那些有兴趣，却又无处下手的同学，本文将一步一...
排名前三据说“雷布斯”都在玩的终端游戏
weixin_34337381的博客
12-06 101
前言 昨天有小伙伴@MAGY 说要搞一个像素小鸟玩一玩，原本是准备写个shell脚本搞定的，后来发现还是有点难度的，毕竟还是需要一点素材进行渲染的，无法通过原始的终端输出进行控制。所以参考了一些资料之后，用原生的js写出了一款像素小鸟的游戏。 今天我们先来分享三款据说雷军“雷布斯”都在玩的终端游戏吧~ TOP1 2048 相信各位经历过2...
JavaScript实现贪吃蛇小游戏
热门推荐
leihao-lester
11-05 1万+
JavaScript实现贪吃蛇小游戏 功能概述 本程序实现了如下功能： 贪吃蛇的基本功能 统计得分 开始与暂停 选择难度等级 设置快捷键 5.1 通过ijkl，wsad也能实现方向的切换 5.2 通过“P” 表示暂停，“C”表示开始或继续，"R"表示重新开始 实现过程 最开始的实现原理其实是参考的csdn的一位大神，他用JavaScript20行就实现了贪吃蛇的基本功能，难等可贵的是还没有bug，链接在此 要实现贪吃蛇大概有以下几个步骤： 画一个蛇的移动区域 画一条蛇 画食物 让蛇
javascript实现贪吃蛇小游戏
01-19
本文实例为大家分享了js实现贪吃蛇小游戏的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title>Document</title> </head> ...
JavaScript贪吃蛇小游戏.zip
04-19
JavaScript贪吃蛇小游戏
原生js实现贪吃蛇小游戏
01-10
3. 设置贪吃蛇对象，首先清空所有，然后根据保存的位置添加贪吃蛇 4. 设置键盘按下事件 5. 判断需要的几个按键，w，s，a，d（上，下，左，右） 6. 判断是否撞墙，撞到墙则停止游戏。 7. 判断是否吃到食物，食物消失...
echarts图形的参数设置和图形大小调整，map地图的中心坐标点修改。
style201904的博客
11-20 6926
<body> <!-- 饼图图形 --> <div id="pie"></div> <!-- 柱状图图形 --> <div id="bar"></div> <!-- 折线图图形 --> <div id="line"></div> <!-- 柱状折线图形 --> <div id="barLine">&lt
js时间转换，年月日时分秒转换，时间戳转换
style201904的博客
06-08 4884
var newTime = new Date().getDate()//本地时间--日期 var newTime = new Date().getTime()//本地时间--日期--时间戳 var endTime="2021-03-03T16:00:00.000+0000" endTime=endTime.replace(/-/g,"/").replace("T"," ").substring(0,19) console.log(newTime,'当地时间') //8 "结束时间" var DateIn=n
js把时间转换为时间戳
style201904的博客
05-22 3295
var timer = Date.now();console.log(timer); var timestamp1 = Date.parse(new Date()); var timestamp2 = (new Date()).valueOf(); var timestamp3 = new Date().getTime(); console.log(timestamp1); console.log(timestamp2); console.log(timestamp3); var strtime =...
原生javascript的账号密码登录验证
style201904的博客
11-13 2979
调查问卷 引入jquery <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script> style body{ margin: 0 !important; padding: 0; background: url('images/indexBj.png')no-rep...
H5页面调用原生方法返回
style201904的博客
05-22 2472
var userAgent = navigator.userAgent.toLowerCase(); // 调用原生方法返回 function back() { if (equipment('iphone')) { naviBack({ isRefresh: '0', callBack: 'isRefresh()' }); } else if (equipment('ipad')) { naviBack({ isRefresh:
tab选项卡联动swiper轮播图
style201904的博客
05-22 1949
function tabs(obj, swiperObj, className, index) { var tabSwiper = new Swiper(swiperObj, { initialSlide: index, // 设定初始化时slide的索引 speed: 500, //滑动速度，单位ms // autoHeight: true, //高度随内容变化 onSlideChangeStart: function() {
js数组分割成多个数组
style201904的博客
07-02 1637
function group(data,index) { if(data && index == 0){ var data = data.splice(0,Math.floor(data.length/2)) }else { var data = data.splice(Math.floor(data.length/2)) } return data; }
js新建一个数组和对象把数据已字符串形式存入本地缓存
style201904的博客
07-13 1429
var arr = []; //新建一个数组 var objA= new Object(); //新建一个对象 objectA(); function objectA() { var tabitemhtml=''; objectB(msg[0].id) //传入数据的第一个id console.log(msg[0].id) for(var i=0;i<msg.length;i++){ ...
js数组过滤器filter
style201904的博客
06-04 1139
var arr0 = [ {name:'会员卡',description:"会员卡8折"}, {name:'优享卡',description:"优享卡8折"}, {name:'秒杀',description:""},] var couponInfoObject = {} couponInfo.map(name=>{ let youxiangka = arr0.filter(item=>item.name==="会员卡") if(youxiangka){ couponInf
jQuery小游戏贪吃蛇
最新发布
12-22
很高兴为您介绍jQuery小游戏贪吃蛇。根据您提供的引用内容，这是一个使用jQuery和JavaScript编写的小游戏。您可以通过引入相关的js文件来使用jQuery库和其他必要的插件。 以下是一个简单的贪吃蛇游戏的示例代码： ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值