贪吃蛇 - 完整版

最新推荐文章于 2023-12-14 09:37:51 发布

王十一x

最新推荐文章于 2023-12-14 09:37:51 发布

阅读量300

点赞数

本文链接：https://blog.csdn.net/qq_38331485/article/details/79493142

版权

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>贪吃蛇</title>
    <style>
        *{margin: 0; padding: 0;}
        .canvas{width: 400px; height: 400px; position: absolute;}
    </style>
</head>
<body>

<div class="canvas"></div>

<script>
    var zbxArr = [];
    var frag = document.createDocumentFragment();
    for(var i=0; i<20; i++){
        var oneArr = [];
        for(var j=0; j<20; j++){
            var div = document.createElement('div');
            div.style.position = 'absolute';
            div.style.left = j*20+'px';
            div.style.top = i*20+'px';
            div.style.width = '20px';
            div.style.height = '20px';
            div.style.background = 'black';
            frag.appendChild(div);
            oneArr.push(div);
        }
        zbxArr.push(oneArr);
    }
    document.querySelector('.canvas').appendChild(frag);

    var snakeBodyArr=[42,41];
    var foodNum=43;
    var fangXiang=1;
    var nextLocation;
    var timer = null;

    function drawOneSquare(location,color)
    {
        for(var i=0; i<zbxArr.length; i++) {
            for(var j=0; j<zbxArr[i].length; j++) {
                var left = zbxArr[i][j].style.left;
                var top = zbxArr[i][j].style.top;
                if((parseInt(left.substring(0,left.length-2))==(location%20*20)) && (parseInt(top.substring(0,top.length-2))==(Math.floor(location/20)*20))){
                    zbxArr[i][j].style.background = color;
                }
            }
        }
    }

    document.onkeydown=function(e){
        var keyCode = (e||event).keyCode;
        var chaValue = keyCode-37;
        var touchArr = [-1,-20,1,20];
        nextLocation = touchArr[chaValue]||fangXiang;
        if(snakeBodyArr[1]-snakeBodyArr[0] == nextLocation){
            fangXiang = fangXiang;
        }else{
            fangXiang = nextLocation;
        }
    };

    timer = setInterval(function (eve) {
        snakeBodyArr.unshift(nextLocation=snakeBodyArr[0]+fangXiang);
        if(snakeBodyArr.indexOf(nextLocation,1)>0 || nextLocation<0||nextLocation>400||fangXiang==1&&nextLocation%20==0||fangXiang==-1&&nextLocation%20==19) {
            clearInterval(timer);
            return alert("GAME OVER");
        }
        drawOneSquare(nextLocation,"cyan");

        if(nextLocation==foodNum){
            do{
                foodNum=Math.floor(Math.random()*400);
            }
            while(snakeBodyArr.indexOf(foodNum)>=0);
            drawOneSquare(foodNum,"Yellow");
        }else {
            drawOneSquare(snakeBodyArr.pop(), "Black");
        }
    },200);
</script>
</body>
</html>

之前写的贪吃蛇逻辑出现了错误，现在已经进行了更正。

现在可以完美运行和控制

备注：键盘上下左右方向键可以控制。

王十一x

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
贪吃蛇 - 完整版

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"/&gt; &lt;title&gt;贪吃蛇&lt;/title&gt; &lt;style&gt; *{margin: 0; padding: 0;} .canvas{width: 400px
复制链接

扫一扫