精华内容
下载资源
问答
  • 贪吃蛇HTML5代码

    2018-06-04 20:16:56
    此段代码实现了简单的贪吃蛇网页版,用css、HTML5和JS完成
  • 贪吃蛇HTML游戏.zip

    2020-07-08 09:51:44
    本游戏规则: 1.蛇的运动时间为0.3秒,我们还可以根据以上的按钮进行设置(暂停,开始,重新开始,加速,减速),还可以一直按v键 把蛇的运动时间从0.3提至为0.1秒。长按v键可缓冲暂停,其上下左右为蛇的方向键。...
  • 贪吃蛇html5版本

    2012-04-30 22:07:52
    贪吃蛇html5版本
  • 贪吃蛇 html5版

    2014-04-11 22:21:56
    贪吃蛇html5版,用中文标识符写的方便初学者理解
  • 贪吃蛇HTML版本

    2020-04-23 21:44:57
    最经典的一款小游戏,也是最老得游戏,在老年机里普片运行,这是个html版的,非常适合没事的时候玩玩!
  • 贪吃蛇HTML5代码.txt

    2020-09-15 18:44:20
    使用html5 canvas(画布)实现游戏界面,蛇的控制逻辑用JavaScript实现,可以用装好插件的VS code配合上Chrome调试,效果爆爽
  • html+css+javascript实现简单的贪吃蛇游戏。提供源码和详细教程,下载不需要积分,做个简单的分享就可以了!
  • HTML简易版贪吃蛇

    2018-09-14 14:59:22
    用JavaScript和 HTML写了一个简易版扫雷游戏,大神勿喷,
  • html贪吃蛇

    2018-02-06 19:42:56
    贪吃蛇html版!目前虽然有些卡顿,但是挺好玩的,想想还是挺划算的,双击index.html即可开始贪吃蛇,加油!!!
  • 贪吃蛇html5小游戏

    2019-09-07 23:28:45
    基于html5实现的贪吃蛇小游戏,图片可以自己定义,按自己需求
  • 贪吃蛇HTML

    2022-01-03 19:30:24
    运行结果 代码部分

    运行结果

    代码部分

    展开全文
  • html贪吃蛇源码

    2017-10-05 11:57:12
    html,js缩所写的贪吃蛇,源码简介清晰你可以,根据所写的注释读
  • 贪吃蛇html代码

    2014-03-23 20:31:14
    可以用记事本打开查看代码。HTML编写的贪吃蛇代码 用html及js编写的一个网页贪吃蛇游戏。纯属娱乐!用html及js编写的一个网页贪吃蛇游戏。纯属娱乐!
  • HTML5贪吃蛇中文版

    2020-12-01 21:08:12
    HTML5贪吃蛇中文版基于HTML5 canvas制作,贪吃蛇网页版小游戏,代码附带详细中文注释,供大家参考。
  • html5贪吃蛇源码

    热门讨论 2016-03-13 12:07:45
    html5贪吃蛇源码,代码浅显易懂。
  • 贪吃蛇html5版本改进版
  • 这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏。在游戏中你可以使用键盘的上下左右来控制蛇的运动方向。现在要列出的是贪吃蛇的制作方法。enjoy!查看演示下载插件.tile {background: rgba(0, 0, 0, 0.15);...

    贪吃蛇是以前我们经常在手机里玩的一个小游戏,现在要是把它搬到网页上也会让人更回味。这是一款非常有趣的HTML5响应式网页贪吃蛇小游戏。在游戏中你可以使用键盘的上下左右来控制蛇的运动方向。现在要列出的是贪吃蛇的制作方法。enjoy!

    69ac4eed5e58c01c4568399fdd5d0211.png

    查看演示下载插件

    .tile {

    background: rgba(0, 0, 0, 0.15);

    position: absolute;

    -webkit-transition-property:

    background,

    box-shadow,

    opacity,

    -webkit-transform;

    transition-property:

    background,

    box-shadow,

    opacity,

    transform;

    -webkit-transform: translateZ(0);

    transform: translateZ(0);

    -webkit-transition-duration: 3000ms;

    transition-duration: 3000ms;

    }

    .tile:before {

    bottom: 0;

    content: '';

    height: 0;

    left: 0;

    margin: auto;

    opacity: 0;

    position: absolute;

    right: 0;

    top: 0;

    width: 0;

    -webkit-transition: opacity 300ms;

    transition: opacity 300ms;

    }

    .tile.path:before {

    opacity: 1;

    }

    .tile.up:before {

    border-bottom: 4px inset rgba(255, 255, 255, 0.15);

    border-left: 4px solid transparent;

    border-right: 4px solid transparent;

    }

    .tile.down:before {

    border-top: 4px inset rgba(255, 255, 255, 0.15);

    border-left: 4px solid transparent;

    border-right: 4px solid transparent;

    }

    .tile.left:before {

    border-right: 4px inset rgba(255, 255, 255, 0.15);

    border-top: 4px solid transparent;

    border-bottom: 4px solid transparent;

    }

    .tile.right:before {

    border-left: 4px inset rgba(255, 255, 255, 0.15);

    border-top: 4px solid transparent;

    border-bottom: 4px solid transparent;

    }

    整个游戏是一个响应式布局,它通过CSS媒体查询来实现不同屏幕尺寸下的不同游戏布局大小。

    @media (max-width: 900px), (max-height: 900px) {

    .tile.up:before,

    .tile.down:before,

    .tile.left:before,

    .tile.right:before {

    border-width: 3px;

    }

    }

    @media (max-width: 500px), (max-height: 500px) {

    .tile.up:before,

    .tile.down:before,

    .tile.left:before,

    .tile.right:before {

    border-width: 2px;

    }

    }

    3b756ccbf0a76f6aba2c46c12e246d3c.png

    展开全文
  • 贪吃蛇 html css js 实现

    2021-04-27 18:24:32
    贪吃蛇 html css js 实现 学js时写的 界面没有优化 而且是粗糙实现 还有一些bug 感兴趣可以看看,若是优化了可要评论告诉我一下哟, <!DOCTYPE html> <html lang="en"> <head> <meta charset=...

    贪吃蛇 html css js 实现

    学js时写的
    界面没有优化 而且是粗糙实现 还有一些bug 感兴趣可以看看,若是优化了可要评论告诉我一下哟,

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>贪吃蛇-完成</title>
        <script src="js/jquery-3.6.0.js"></script>
    
        <style>
            * {
                margin: 0;
                padding: 0;
            }
    
            .score {
                margin:0 auto;
                height: 40px;
                text-align:center;
                line-height:40px;
                color: #ec6565;
            }
    
            .w {
                position: relative;
                left: 50%;
                transform: translateX(-50%);
                margin-top: 10px;
                width: 800px;
                height: 600px;
                border:2px solid #484848;
                background-color: pink;
            }
    
            .w div {
                position: absolute;
                width: 10px;
                height: 10px;
                background-color: #d6d6d6;
            }
    
            .w .t {
                background-color: #888888;
            }
    
            .w div:last-child {
                background-color: #cf5353;
            }
        </style>
    
    </head>
    <body>
    <div class="score">0</div>
    <div class="w">
        <div class="t" style="left:30px"></div>
        <div style="left:20px"></div>
        <div style="left:10px"></div>
        <div></div>
    
    </div>
    <script>
        var s = document.querySelector('.score');
        var w = document.querySelector('.w');
        var all = w.querySelectorAll('div');
        var count = 39;
        var ml = null;
        var md = null;
        var mr = null;
        var mu = null;
        var arr = new Array();
    
        //初始食物
        food();
        var last = w.querySelectorAll('div')[all.length];
    
    
        function moveLeft(objs) {
            count = 39;
            ml = setInterval(() => {
                for (var j = 0; j < objs.length - 1; j++) {
                    arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
                }
    
                for (var i = 0; i < objs.length; i++) {
                    if (i == 0) {
                        if (objs[0].offsetLeft == 790) {
                            // objs[0].style.left = '0px';
                            over();
                        }
                        judge(objs[0].offsetLeft+10, objs[0].offsetTop);
                        objs[0].style.left = (objs[0].offsetLeft + 10) + 'px';
                    } else {
                        objs[i].style.left = arr[i - 1].l + 'px';
                        objs[i].style.top = arr[i - 1].t + 'px';
                    }
                }
            }, 50)
        }
    
        function moveDown(objs) {
            count = 40;
            md = setInterval(() => {
                for (var j = 0; j < objs.length - 1; j++) {
                    arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
                }
    
                for (var i = 0; i < objs.length; i++) {
                    if (i == 0) {
                        if (objs[0].offsetTop == 590) {
                            // objs[0].style.top = '0px';
                            over();
                        }
                        judge(objs[0].offsetLeft, objs[0].offsetTop+10);
                        objs[0].style.top = (objs[0].offsetTop + 10) + 'px';
                    } else {
                        console.log(i);
                        objs[i].style.left = arr[i - 1].l + 'px';
                        objs[i].style.top = arr[i - 1].t + 'px';
                    }
                }
    
            }, 50)
        }
    
        function moveRight(objs) {
            count = 37;
            mr = setInterval(() => {
                for (var j = 0; j < objs.length - 1; j++) {
                    arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
                }
    
                for (var i = 0; i < objs.length; i++) {
                    if (i == 0) {
                        if (objs[0].offsetLeft == 0) {
                            // objs[0].style.left = '790px';
                            over();
                        }
                        judge(objs[0].offsetLeft-10, objs[0].offsetTop);
                        objs[0].style.left = (objs[0].offsetLeft - 10) + 'px';
                    } else {
                        objs[i].style.left = arr[i - 1].l + 'px';
                        objs[i].style.top = arr[i - 1].t + 'px';
                    }
                }
            }, 50)
        }
    
        function moveUp(objs) {
            count = 38;
            mu = setInterval(() => {
                for (var j = 0; j < objs.length - 1; j++) {
                    arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
                }
    
                for (var i = 0; i < objs.length; i++) {
                    if (i == 0) {
                        if (objs[0].offsetTop == 0) {
                            // objs[0].style.top = '590px';
                            over();
                        }
                        judge(objs[0].offsetLeft, objs[0].offsetTop-10);
                        objs[0].style.top = (objs[0].offsetTop - 10) + 'px';
                    } else {
                        objs[i].style.left = arr[i - 1].l + 'px';
                        objs[i].style.top = arr[i - 1].t + 'px';
                    }
                }
    
            }, 50)
        }
    
    
        // move(all);
    
        //清除定时器
        function clear() {
            switch (count) {
                case 37 :
                    clearInterval(mr);
                    break;
                case 38 :
                    clearInterval(mu);
                    break;
                case 39 :
                    clearInterval(ml);
                    break;
                case 40 :
                    clearInterval(md);
            }
        }
    
        //键盘监听
        window.onkeydown = (e) => {
                console.log(11111);
            if(Math.abs(e-count)==2){
                return;
            }
            
            clear();
            switch (e.keyCode) {
                case 37 :
                    moveRight(all);
                    break;
                case 38 :
                    moveUp(all);
                    break;
                case 39 :
                    moveLeft(all);
                    break;
                case 40 :
                    moveDown(all);
            }
        }
    
        //生成食物
        function food() {
            var d = document.createElement('DIV');
            w.appendChild(d);
            d.style.left = Math.floor(Math.random() * 79) * 10 + 'px';
            d.style.top = Math.floor(Math.random() * 59) * 10 + 'px';
        }
    
        function judge(le, to) {
            var l = last.offsetLeft;
            var t = last.offsetTop;
            console.log(l, t);
            // console.log(le,to);
    
            //撞自身死亡判断
            for (var i = 3; i < all.length; i++) {
                if (le == all[i].offsetLeft && to == all[i].offsetTop) {
                    over();
                }
            }
    
            //吃食物判断
            if (l == le && t == to) {
                all = w.querySelectorAll('div');
                w = document.querySelector('.w');
                food();
                last = w.querySelectorAll('div')[all.length];
                console.log(food);
                s.innerHTML=`${all.length-4}`;
            }
        }
    
        //游戏结束提示
        function over() {
            clear();
            alert('游戏结束,得分:'+s.innerHTML);
        }
    
    </script>
    </body>
    </html>
    
    展开全文
  • HTML编写的贪吃蛇代码

    2021-07-09 05:49:08
    HTML编写的贪吃蛇代码》由会员分享,可在线阅读,更多相关《HTML编写的贪吃蛇代码(14页珍藏版)》请在人人文库网上搜索。1、使用表格 var fangxiang;fangxiang=4;var sk=new Array(18);sk0=5,5;sk1=5,4;sk2=5,3;var...

    《HTML编写的贪吃蛇代码》由会员分享,可在线阅读,更多相关《HTML编写的贪吃蛇代码(14页珍藏版)》请在人人文库网上搜索。

    1、使用表格 var fangxiang;fangxiang=4;var sk=new Array(18);sk0=5,5;sk1=5,4;sk2=5,3;var long=3;var zhanshichunweiba;var shiwu=15,15;var shudu=250;var movedong=true;var shifouchongzhi=true;function keydown()if(event.keyCode=38)if(fangxiang!=2)fangxiang=1;if(fangxiang=2)fangxiang=2;if(event.keyCode=40)if(fang。

    2、xiang!=1)fangxiang=2;if(fangxiang=1)fangxiang=1;if(event.keyCode=37)if(fangxiang!=4)fangxiang=3;if(fangxiang=4)fangxiang=4;if(event.keyCode=39)if(fangxiang!=3)fangxiang=4;if(fangxiang=3)fangxiang=3;function kaishi()if(shifouchongzhi)shifouchongzhi=false;document.getElementById(sk0).style.backgroundC。

    3、olor = red;document.getElementById(sk1).style.backgroundColor = red;document.getElementById(sk2).style.backgroundColor = red; document.getElementById(shiwu).style.backgroundColor = blue; move();elsealert( 你要先重置 );function chongzhi()shifouchongzhi=true;shiwu=15,15;shudu=250;fangxiang=4;sk0=5,5;sk1=5,。

    4、4;sk2=5,3;long=3;var m=document.getElementsByTagName(td);for(var n=0;n0;m-)skm=skm-1var i=sk0.split(,);if(fangxiang=1)i0-;sk0=i0+,+i1if(fangxiang=2)i0+;sk0=i0+,+i1if(fangxiang=3)i1-;sk0=i0+,+i1if(fangxiang=4)i1+;sk0=i0+,+i1function zhenchanshengshiwu()var x;var y;x=Math.round(Math.random()*19);y=Mat。

    5、h.round(Math.random()*19);shiwu=x+,+y;chanshengshiwu();function chanshengshiwu()for(var m=0;m19|i119)alert( 你死求 );movedong=false;if(long=6)shudu=200;if(long=9)shudu=150;if(long=12)shudu=100;if(long=15)shudu=80;if(long=18)shudu=50;if(long=25)alert( 你真 NB 你赢了 );chongzhi();movedong=false;function move()dong();jieshujiashu();for(var m=0;mtd id=13,18 bgcolor=yellow。

    展开全文
  • Html实现贪吃蛇

    2021-01-26 10:14:13
    HTML实现贪吃蛇 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>Snake</title> </head> <body style...
  • html+css贪吃蛇

    2020-08-23 08:43:31
    代码包含注释,简单易懂,资源已经过测试,无bug,无需任何附带资源可直接网页执行,反正很方便就对了................
  • 这是一个用vue写的贪吃蛇小游戏,用于学习
  • html+JavaScript贪吃蛇原创,代码可以修改性比较高,大家可以按照自己的修改,使用比较通俗的写法写的,很容易理解!
  • 这篇文章主要介绍了关于用html5的63行代码实现贪吃蛇游戏,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下贪吃蛇,最主要的功能点:1、蛇的移动2、改变蛇的方向3、放置食物4、增加舍身5、怎么挂的,...
  • 贪吃蛇游戏

    2021-06-13 18:17:06
    贪吃蛇作为一款经典游戏,获得了很多人的青睐,之所以能经久不衰,是因为贪吃蛇从游戏设计之始,就进行了全方位的考虑。不仅要做到有趣,更要做到设计美观,简洁大方。游戏设计要从布局,框架结构,按钮,贪吃蛇的...
  • 科技常识:HTML5 贪吃蛇游戏实现思路及源代码2021-05-12 07:05:31•互联网今天小编跟大家讲解下有关HTML5 贪吃蛇游戏实现思路及源代码 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关HTML5 贪吃蛇游戏...
  • HTML+JS实现简单贪吃蛇游戏转载mb5fe559d8b9ae42021-06-13 13:26:34©著作权文章标签java阅读数2https://blog.51cto.com/u_15067227/2900453因为js是单线程的,所以有js写贪吃蛇可以少考虑很多东西,感觉非常方便。...
  • doctype html> <html> <body style='overflow:hidden'> <canvas id="can" width="400" height="400" style="background:Black;display: block;margin:20px auto;"></canvas> <...
  • 一下很简单的贪吃蛇HTML代码,可以参考一下啊,哈哈哈啊哈哈哈哈哈哈哈哈哈哈哈哈啊哈哈哈
  • 游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制,下面为大家简要介绍下具体的实现,感兴趣的朋友可以参考下,希望对大家有所帮助

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,304
精华内容 3,321
关键字:

贪吃蛇html