web html javascript 醇前段贪吃蛇游戏开发开发侧率解析加代码实例-CFANZ编程社区

贪吃蛇实现策略

1.绘制初始地图界面
2.绘制实物，通过绝对定位方式绘制（top,left,width,height
3.绘制小蛇，通过绝对定位方式绘制，
   1.通过二维素组和在第一维是蛇的长度，二维是蛇的样式（0x轴，1y轴，2样式，3，待定）
   2.通过遍历获取到展现出一条小蛇
   3.设置固定的蛇身大小的div，这里指的是
4.小蛇移动：
   1.普通移动，蛇尾的数组x,y 等于蛇头x,y 蛇头更具上下左右移动加减x，y 即可，然后从新遍历下整蛇
       1.蛇头向左移动 x减1 向右移动 x加1，向上y-1，向下y+1
       2.通过在页面上绘制一个上左下右的点击按钮，并加上事件当点击一次出发小蛇移动事件
       3.如果没有点击，每各固定时间对小蛇位置更新也就是数组更新朝着上一个或最初移动方向移动
       4.当前移动方向做一下记录作为public attribute

   2.小蛇初始方向，从左向右，或从右向左，上下，下上，然后对于蛇头就是移动的方向的第一个位置数组
   3.蛇头碰到食物，当小蛇移动判断，小蛇蛇头位置是否和食物位置一致，一致及吃掉，然后创建一个新的食物
       并且这次情况食物，小蛇的尾部的数组，添加上，、
       所以在蛇移动的时候原始蛇头和蛇尾要记录到private attribute 中，方便调用
   4.控制小蛇在制定范围内活动
       1.通过最大经纬度的方式限制，大于左，小鱼右，大于下，小鱼上
       2.如果超过判断为输
   5.设置一个全家变量，作为屏幕按下后修改这个变量，这个变量值就是上左下右，方便在小时的移动定时器中调用

web html javascript 醇前段贪吃蛇游戏开发开发侧率解析加代码实例_数组

实例代码

css 代码

 body {
        margin: 0px;
        padding: 0px;
    }

    .main {
        position: relative;
        background-color: antiquewhite;
        margin: 10px auto;
        border: 2px solid #000;
    }

    h3 {
        position: relative;
        width: 120px;
        margin: 0 auto;
    }

    #snakebodyId {
        position: absolute;
    }

    .up {
        position: fixed;
        padding: 15px;
        border: 1px solid #000;
        bottom: 100px;
        right: 65px;
        border-radius: 5px;
        cursor: pointer;
    }

    .right {
        position: fixed;
        padding: 15px;
        border: 1px solid #000;
        bottom: 55px;
        right: 10px;
        border-radius: 5px;
        cursor: pointer;
    }

    .left {
        position: fixed;
        padding: 15px;
        border: 1px solid #000;
        bottom: 55px;
        right: 120px;
        border-radius: 5px;
        cursor: pointer;
    }

    .down {
        position: fixed;
        padding: 15px;
        border: 1px solid #000;
        bottom: 10px;
        right: 65px;
        border-radius: 5px;
        cursor: pointer;
    }

    .bo {
        position: relative;
        width: 230px;
        margin: 0 auto;
    }

html code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
</head>
<body>
    <h3>贪吃蛇大作战</h3>
    <div class="bo">分数：<span id="icount">0</span>   状态<span id="state">正吃呢</span></div>
    <div class="main"></div>

</body>
</html>

javascript code:

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('p 5={R:d(){5.Q();5.P();5.O()},B:d(a){p b="<e l=\'X\' U=\'"+"16-13:#"+a[2]+";"+"m:"+(a[0]*5.7.k)+"h;"+"18:"+(a[1]*5.7.E)+"h;"+"J:"+5.7.k+"h;"+"I:"+5.7.k+"h;"+"\'></e>";V b},N:d(a){$(".s").15();G(z i=0;i<a.9;i++){$(".s").C(5.B(a[i]))}$(".s").C(5.B(5.7.j[0]))},O:d(){$(".s").17({"J":5.7.x+"h","I":5.7.y+"h"})},Q:d(){5.7.F=Y(d(){g(5.7.c=="n"){5.7.8[5.7.8.9-1][0]+=1}q g(5.7.c=="m"){5.7.8[5.7.8.9-1][0]-=1}q g(5.7.c=="u"){5.7.8[5.7.8.9-1][1]-=1}q g(5.7.c=="r"){5.7.8[5.7.8.9-1][1]+=1}g(5.7.8[5.7.8.9-1][0]==5.7.j[0][0]&&5.7.8[5.7.8.9-1][1]==5.7.j[0][1]){$("#D").K(++5.7.D);5.7.j[0][0]=t.L(t.M()*5.7.x/5.7.k);5.7.j[0][1]=t.L(t.M()*5.7.y/5.7.E);p a=[];p b=$.1b(1f,{},5.7.8[0]);a.A(b);G(z i=0;i<5.7.8.9-1;i++){5.7.8[i][0]=5.7.8[i+1][0];5.7.8[i][1]=5.7.8[i+1][1];a.A(5.7.8[i])}a.A(5.7.8[5.7.8.9-1]);5.7.8=a}q{G(z i=0;i<5.7.8.9-1;i++){5.7.8[i][0]=5.7.8[i+1][0];5.7.8[i][1]=5.7.8[i+1][1]}}5.N(5.7.8);5.H()},W)},H:d(){g(5.7.8[5.7.8.9-1][0]>5.7.x/10||5.7.8[5.7.8.9-1][0]<-1||5.7.8[5.7.8.9-1][1]>5.7.y/10||5.7.8[5.7.8.9-1][1]<-1){T(5.7.F);$("#Z").K("11 12")}},P:d(){p a=\'\'+\'<e v="u" l="c">上</e>\'+\'<e v="m" l="c">左</e>\'+\'<e v="n" l="c">右</e>\'+\'<e v="r" l="c">下</e>\';$("14").C(a);$(".u").w(d(){5.7.c="u"});$(".r").w(d(){5.7.c="r"});$(".m").w(d(){5.7.c="m"});$(".n").w(d(){5.7.c="n"})},7:{k:10,E:10,8:[[1,1,"o",f],[2,1,"o",f],[3,1,"o",f],[4,1,"o",f],[4,1,"19",f]],1a:S.1c,1d:S.1e,j:[[6,6,"o",f]],F:f,c:"n",x:1g,y:1h,D:0}};5.R();',62,80,'|||||Game||params|snakebody|length|||direction|function|div|null|if|px||food|snakew|id|left|right|000|var|else|down|main|Math|up|class|click|mainw|mainh|let|push|schtml|append|icount|snakeh|i002task|for|ifF|height|width|html|floor|random|minSnake|map|OnclickF|move|init|window|clearInterval|style|return|200|snakebodyId|setInterval|state||game|over|color|body|empty|background|css|top|ff0000|bodyw|extend|innerWidth|bodyh|innerHeight|true|350|500'.split('|'),0,{}))

持续更新