贪吃蛇的web版 出现了问题 希望大家帮忙留言改正

最新推荐文章于 2022-07-30 15:40:21 发布
最新推荐文章于 2022-07-30 15:40:21 发布
阅读量259 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37171273/article/details/54572548
版权

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇</title>
    <link rel="stylesheet" href="贪吃蛇.css">
    <script src="贪吃蛇.js"></script>
</head>
<body οnkeydοwn="move(event);">
    <div id="oDiv">

    </div>
</body>
</html>
css代码 

*{margin: 0;padding: 0;}
#oDiv{width: 704px;height: 464px;border: 2px solid #ff625d;position: absolute;left: 600px;top: 250px}


js代码

/**
 * Created by zhao on 2017/2/2.
 */


 oDiv=document.getElementById('oDiv');
var i=index=0;
var timer;
lefts=new Array();
 tops=new Array();
//定义食物
function food() {

    //在随机位置上产生食物的节点
    var m=Math.round(Math.random()*684);
    var n=Math.round(Math.random()*444);
    this.m=m;
    this.n=n;
    //产生食物的节点
    foo=document.createElement('div');
    foo.style.width=20+'px';
    foo.style.height=20+'px';
    foo.style.background='blue';
    foo.style.position='absolute';
    foo.style.left=m+'px';
    foo.style.top=n+'px';
    document.getElementById('oDiv').appendChild(foo);

}
//每次吃到食物后产生一个新的节点
function product(left,top) {

    len=document.createElement('div');
    len.style.width=20+'px';
    len.style.height=20+'px';
    len.style.background='red';
    len.style.position='absolute';
    len.style.left=left+'px';
    len.style.top=top+'px';
    document.getElementById('oDiv').insertBefore(len,document.getElementById('oDiv').childNodes[1]);
alert();

}

//每次吃到食物后，食物消失
function die(foo) {
    foo.parentNode.removeChild(foo);
    var foo=new food(foo);
}
//跟随模式
function follow() {


    setTimeout(function () {

    for(i=1;i< document.getElementById('oDiv').childNodes.length;i++)
    {
       lefts[i]=  document.getElementById('oDiv').childNodes[i-1].offsetLeft;
        tops[i]=  document.getElementById('oDiv').childNodes[i-1].offsetTop;

    }
         for(i=1;i<oDiv.childNodes.length;i++)
    {
        document.getElementById('oDiv').childNodes[i].style.left=lefts[i]+'px';
        document.getElementById('oDiv').childNodes[i].style.top=tops[i]+'px';
    }
    },20)




}

//定义蛇
function snake() {
    //坐标
    this.x=x;
    this.y=y;
    //在随机位置出产生一个节点，并返回其坐标
    var x=Math.round(Math.random()*684);
    var y=Math.round(Math.random()*444);
    //产生蛇一个节点
    pro=document.createElement('div');
    pro.style.width=20+'px';
    pro.style.height=20+'px';
    pro.style.background='red';
    pro.style.position='absolute';
    pro.style.left=x+'px';
    pro.style.top=y+'px';
    document.getElementById('oDiv').appendChild(pro);


    //移动
    this.left=function () {
        clearInterval(timer);
        timer=setInterval(function () {
            if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');
            else{
                if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20))
                {
                    die(foo);

                    product(pro.offsetLeft+20,pro.offsetTop);

                }

                pro.style.left = pro.offsetLeft - 1 + 'px';
               follow();
            }
        },20);

    };
    this.right=function () {
        clearInterval(timer);
        timer=setInterval(function () {
            if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');
            else {
                if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20))
                {
                     die(foo);
                     product(pro.offsetLeft-20,pro.offsetTop);

                }
                pro.style.left = pro.offsetLeft + 1 + 'px';
                follow();
            }
        },20);
    };
    this.up=function () {
        clearInterval(timer);
        timer=setInterval(function () {
            if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');
            else {
                if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20))
                {
                    die(foo);
                    product(pro.offsetLeft,pro.offsetTop+20);

                }
                pro.style.top = pro.offsetTop - 1 + 'px';
                follow();
            }
        },20);

    };
    this.down=function () {
        clearInterval(timer);
        timer=setInterval(function () {
            if(pro.offsetLeft<-2||pro.offsetLeft>686||pro.offsetTop<-2||pro.offsetTop>446) alert('死亡');
            else {
                if((pro.offsetLeft>foo.offsetLeft-20)&&(pro.offsetLeft<foo.offsetLeft+20)&&(pro.offsetTop<foo.offsetTop+20)&&(pro.offsetTop>foo.offsetTop-20))
                {
                    die(foo);
                    product(pro.offsetLeft,pro.offsetTop-20);

                }
                pro.style.top = pro.offsetTop + 1 + 'px';
                follow();
            }
        },20);

    };
    this.eat=function () {

    };
    this.dead=function () {

    };
}
//当按键无效时发出响声
function music() {

}


//蛇的移动
function move(event) {

    switch (event.keyCode)
    {
        case 38: snakes.up(); break;
        case 40: snakes.down();break;
        case 39: snakes.right();break;
        case 37: snakes.left(); break;
        default:  music();


    }

}

//初始化过程；
window.onload=function () {

 //定义一条蛇
    snakes=new snake();
    //定义食物
    foods=new food();
    //产生移动的动作
    if(event) move(event);


}

赵银龙_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原创贪吃蛇Web版
08-07
【贪吃蛇Web版】是基于JavaScript、CSS3和HTML技术实现的一款经典游戏。这个原创版本不仅保留了原版贪吃蛇的基本玩法，还引入了一些创新特性，如蛇可以穿越自己的身体，玩家在游戏过程中可以使用暂停键进行休息，...
贪吃蛇的制作过程中遇到的一些小问题
chentf5的博客
12-28 2889
第一步是界面的设计 首先定义一个二维数组，做出一个17*17的方阵，每个二维数组map的坐标就是方阵中的坐标，然后我们用’‘和‘ ’空格，来定义这些字符，构成一个图形界面，这个就是贪吃蛇的活动框即活动范围，如果蛇头碰到墙壁即‘’则游戏结束。 如下图 定义好界面，并printf之后，定义蛇的坐标，定义结构体struct snake，代表蛇身蛇头的坐标，并把map地图上对应坐标的字符定义为’X’
Web前端---HTML+CSS+JS实现的贪吃蛇游戏
chengyang_java的博客
10-28 1万+
目录 游戏设计步骤： 代码目录： 主要代码实现： 源码获取 效果演示：文末获取免费源码 游戏设计步骤： 1.首先是蛇的运动。蛇每往前走一步。就是增加一个头部点，去掉原来的尾巴点。中间的所有点都是不动的。 用程序化来表达就是，整条贪吃蛇可以是一个类似这样[[1,2],[1,3]]的带位置信息的数组，每移动一步，往数组推入一个新的坐标点，并移除第一个坐标点。 2.获取下一个点的坐标。我们的蛇理论上可以往上下左右四个方向移动。可以根据现在蛇头的坐标和方向计算出合适的x,y坐标...
贪吃蛇小游戏html讲解,js实现贪吃蛇小游戏（容易理解）
weixin_33046149的博客
06-01 268
话不多说，请看代码：贪吃蛇第一步：初始化地图，创建蛇圈。第二步：创建蛇，随机生产食物。第三步：让蛇移动起来。第四步：通过js绑定键盘事件,控制蛇移动方向。var box={width:50,height:50};//每一个方块的高度var snake=[];//保存蛇每一节身体对应的spanvar DIR={DIR_RIGHT:1,DIR_LEFT:2,DIR_TOP:3,DIR_BOTTOM:4...
HTML5小游戏贪吃蛇分析与实现
热门推荐
liusaint1992的专栏
01-13 1万+
HTML5小游戏贪吃蛇分析与实现。
用html实现贪吃蛇游戏思路,贪吃蛇游戏
weixin_28706541的博客
06-09 855
贪吃蛇作为一款经典游戏，获得了很多人的青睐，之所以能经久不衰，是因为贪吃蛇从游戏设计之始，就进行了全方位的考虑。不仅要做到有趣，更要做到设计美观，简洁大方。游戏设计要从布局，框架结构，按钮，贪吃蛇的行走方向，编程语言几个方面进行全面的考虑贪吃蛇，最主要的功能点：1、蛇的移动2、改变蛇的方向3、放置食物4、增加舍身5、怎么挂的，具体实现如下，简单实用就60行，感兴趣的朋友可以参考下哈，希望对大家有所...
贪吃蛇1.0（web项目）.7z
08-26
【贪吃蛇1.0（Web项目）】是一款基于HTML、CSS和JavaScript技术实现的简易网页版游戏。这个项目展示了如何利用前端技术构建一个互动性强、趣味性高的小游戏，是学习和实践Web开发的好例子。 在HTML方面，游戏界面...
web版贪吃蛇
01-18
【web版贪吃蛇】是一种使用JavaScript编程语言在网页上实现的经典游戏，它将传统的贪吃蛇游戏移植到了网络环境中。JavaScript是Web开发中的主要脚本语言，它负责处理页面的动态行为，使得用户可以在浏览器中直接进行...
jQuery贪吃蛇网页版游戏代码
07-29
jQuery贪吃蛇网页版游戏代码,贪吃蛇网页版游戏代码基于jquery.1.11.3.min.js制作，贪吃蛇游戏是一款经典的益智游戏，有PC和手机等多平台版本，既简单又耐玩.Query网页版贪吃蛇游戏，带得分排行榜，交互的贪吃蛇游戏...
网络版贪吃蛇（java）
03-08
4. **网络版的挑战**：网络版贪吃蛇相对于单机版，需要解决延迟、同步问题。游戏状态的同步是关键，确保所有玩家看到的是同一时间点的状态，这通常通过时间戳和序列号来实现。此外，网络不稳定可能导致数据包丢失，...
[源码和报告分享]基于HTML5实现的贪吃蛇小游戏
qq_38474647的博客
12-05 284
1 游戏介绍 贪吃蛇的经典玩法有两种： 积分闯关 一吃到底 第一种是笔者小时候在掌上游戏机最先体验到的（不小心暴露了年龄），具体玩法是蛇吃完一定数量的食物后就通关，通关后速度会加快；第二种是诺基亚在1997年在其自家手机上安装的游戏，它的玩法是吃到没食物为止。笔者要实现的就是第二种玩法。 2...
在html中贪吃蛇的方向怎么用键盘控制,纯js贪吃蛇，无法用键盘控制蛇方向
weixin_34723270的博客
06-10 225
该楼层疑似违规已被系统折叠隐藏此楼查看此楼图片切换#map{position:relative;width: 600px;height: 600px;border: 1px solid black;left:200px;}var map=document.getElementById("map");//创建蛇function Snake(){this.body=[{x:2,y:0},//头{x:...
C项目（贪吃蛇BUG解决及功能扩展）
最新发布
m0_61350245的博客
07-30 2896
贪吃蛇游戏Bug解析及功能扩展
html&javascript80行的贪吃蛇，把内容保存为1.html，然后用chrome或其他浏览器打开，程序有些bug但是基本可以运行，用于初学者学习
04-08 106
<canvas id="canvas" style="border:1px solid #d3d3d3;" height="600" width="900" /> <script> var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); var snake = []; //定义一条蛇，画蛇的身体 var snakeCount = 6; ...
html贪吃蛇自动走,分享一个用html5实现的贪吃蛇特效代码
weixin_39653311的博客
06-02 199
本篇小编为大家分享一个用html5实现的简单贪吃蛇特效代码，喜欢的小伙伴们可以看一下Snake//内置大量BUG，I'm sorry.var lev=100; //定时器间隔时间var num=30; //网格大小，现在是30x30var direction=3; //0:up 1:down 2:left 3:rig...
贪吃蛇html对战,贪吃蛇.html
weixin_29150151的博客
06-14 96
//1.定义地图类function Map(){//1.1定义地图的属性this.width = 800;this.height = 400;this.color = "gray";this.position = "absolute";//1.2定义show方法，用于显示地图this.show = function(){//生成div元素，用于放置地图var div = document.crea...
为什么程序改成html运行不了,pycharm----修改脚本默认运行方式及不生成HTML测试报告解决方法 Web程序 - 贪吃蛇学院-专业IT技术平台...
weixin_32617915的博客
06-09 888
不同的运行方式，比如：run unittest in xxx.py、run xxx.py，run py.test in xxx.py一、 run unittest in方式这种方式是pycharm默认的运行方式，所以很多时候呢你加入了HTMLTestRunner来生成报告时，它不会给你生成报告，因为它默认已unittest来运行了。来看看怎么修改：Win：1、 win端可在设置里更改 这里把Def...
php实现贪食蛇游戏,HTML_html5贪吃蛇游戏使用63行代码完美实现，以前也很少关注html5，感觉选 - phpStudy...
weixin_29649047的博客
03-17 143
html5贪吃蛇游戏使用63行代码完美实现以前也很少关注html5，感觉选择html已经慢慢成为趋势，想了解下。就找了个游戏学习了，写完这个游戏感觉html5和js结合很紧密，如果js不是特别好。估计需要先补习下js，这个只是个人的建议，不一定准确。还有一个就是，思维和逻辑要特别清楚，不然写游戏可能很痛苦。贪吃蛇，最主要的功能点： 1，蛇的移动 2，改变蛇的方向 3，放置食物 4，增加舍身 5,怎...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值