小demo-贪吃蛇

最新推荐文章于 2024-11-10 15:10:09 发布

dashenur

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量133

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/dashenur/article/details/107235079

版权

<!DOCTYPE html>
<html>
    <head>
        <title>Snake</title>
    </head>
    <!--设置body元素居中，外边距100px,背景色#aaaaaa-->
    <body style="text-align: center; margin: 100px; background-color: #aaaaaa;">
        <div id="count" style="margin: 10px; font-weight: 1000;">积分区域</div>
        <canvas id="canv" width="400px" height="400px" style="background-color: gray;"></canvas>
        <div>
            <!--设置游戏按钮-->  
            <button id="btn" type="button" onclick="run()">开始游戏</button>
            <button id="paush" type="button" onclick="pause()">暂停</button>
        </div>
        <script>
            //控制暂停，开始
            var time;

            //设置canvas画布的绘图环境，当前唯一支持的参数是2d
            var box = document.getElementById("canv").getContext("2d");
            //声明一个变量： 蛇
            var snake;
            //声明键盘事件的变量。1：右，-1：左，20：向下，-20：向上
            var direction;
            //下次移动相关
            var n;
            //声明食物变量
            var food;
            //积分
            var count = 0;

            //绘制地图
            function draw(point,color){
                //fillStyle()：设置用于填充绘画的颜色
                box.fillStyle = color;
                //1. fillRect()：绘制“被填充”的矩形  context.fillRect(x,y,width,height);  2. ~~:取反两次，去除小数部分
                box.fillRect(point%20*20+1,~~(point/20)*20+1,18,18);
            }
            
            //自动运行函数
            (function(){ready();}());
            //各种变量初始化，背景初始化
            function ready(){
                //循环绘制地图块
                for(var i=0;i<400;i++)
                {
                    draw(i,"#313131");
                }

                //对蛇和食物进行静态赋值并绘制到地图上
                snake = [66,65,64];
                direction = 1;
                food = 334;
                draw(food,"yellow");
                draw(66,"#00b7ee");
                draw(65,"#00b7ee");
                draw(64,"#00b7ee");
            }

            function run(){
                //游戏开始后不能再点击开始
                document.getElementById("btn").setAttribute("disabled",true);
                //unshift():向数组的开头添加一个新元素，新元素为蛇下一步所移动的坐标
                snake.unshift(n=snake[0]+direction);
                //边界判断，如果蛇头碰到上下左右四个边或自己的身体
                //游戏结束： 初始化游戏，将恢复点击按钮
                if(snake.indexOf(n,1)>0 || n<0 || n>399 ||(direction==-1&&n%20==19) || (direction==1&&n%20==0)){
                    ready();//初始化
                    document.getElementById("btn").removeAttribute("disabled");
                    return alert("游戏结束，积分"+count);
                }
                //如果蛇头没有碰到边界或自身，在地图上绘制蛇头
                draw(n,"#00b7ee");
                
                //如果吃到食物(蛇头、食物坐标相同)
                if(n==food){
                    //随机在地图上产生一个新食物，新食物不能与蛇身子重合
                    while(snake.indexOf(food=~~(Math.random()*400))>=0);
                    //积分+1
                    count++;

                    //绘制食物
                    draw(food,"yellow");
                }
                //如果没有吃到食物
                else{
                    //1.将蛇尾元素删除  2.根据删除的坐标绘制为地图块的颜色
                    draw(snake.pop(),"#313131");
                }
                document.getElementById("count").innerHTML = "当前分数"+count;
                //每200毫秒重复执行一次该函数() arguments.callee：引用自身
                time = setTimeout(arguments.callee,200);
            }

            function pause(){
                document.getElementById("btn").removeAttribute("disabled");
                clearTimeout(time);
            }

            //添加键盘事件
            document.onkeydown = function(e){
                //如果蛇头当前横着走,当键盘输入up时，将蛇头方向改为向上，输入down则向下
                if(direction==1 || direction==-1){
                    if(e.keyCode==38){
                        direction= -20;
                    }
                    if(e.keyCode==40){
                        direction= 20;
                    }
                }
                if(direction==20 || direction==-20){
                    if(e.keyCode==39){
                        direction= 1;
                    }
                    if(e.keyCode==37){
                        direction= -1;
                    }
                }
            }

            
        </script>
    </body>
</html>