首页手记 H5 canvas游戏贪吃蛇走过路过不要错过
H5 canvas游戏贪吃蛇走过路过不要错过

标签：
Html5 JavaScript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>贪吃蛇</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            #canvas{
                /*box-shadow: 10px 10px 10px #ccc;*/
                background: aliceblue;
                display: block;
                margin: 0 auto;
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1000" height="1000"></canvas>
    </body>
    <script type="text/javascript">
        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
//      canvas.width=document.body.clientWidth;
//      canvas.height=document.body.clientHeight;
        var changeDir=true;//设置点击按键是否改变方向
        //通过键盘的上下左右键来控制蛇移动的方向
        var  timerDelay;//设置一个延迟定时器对象
        var arr=[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 1, 1, 0, 1, 1, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0];

        //创建蛇类
        function Snake () {
            this.x=0;
            this.y=0;
            this.w=50;
            this.h=50;
            //蛇头颜色
            this.colorHead='red';
            //蛇身的颜色
            this.colorBody='green';
            //通过布尔值设置方向
            this.left=false;
            this.right=true;
            this.top=false;
            this.bottom=false;
            //创建数组记录蛇头的位置信息
            this.positions=[];
            //判断是否停止删除数组
            this.isShift=true;

            var yf2=new Image();
            yf2.src='img/2.jpeg';
            //绘制蛇头
            this.drawHead=function  () {
//              context.fillStyle=randomColor();
//              context.fillRect(this.x,this.y,this.w,this.h);
                context.drawImage(yf2,this.x,this.y,this.w,this.h)
            }
            //绘制蛇身
            this.drawBody=function  () {
                this.positions.push({x:this.x,y:this.y});
                //没存放进去一个点多要检查数组长度有没有超过预设长度,防止蛇身自动增长
                if (this.positions.length>4&&this.isShift) {
                    //如果超度预设长度则删除数组的第一个值
                    this.positions.shift();
                }else{
                    this.isShift=true;
                }
                //遍历数组绘制蛇身
                for (var i=0;i<this.positions.length;i++) {
                    var x=this.positions[i].x;
                    var y=this.positions[i].y;
                    context.beginPath();
                    context.fillStyle=randomColor();
                    context.fillRect(x,y,this.w,this.h);
                }
            }
            //移动
            this.move=function  () {
                //对当前的移动方向进行判断
                if (this.left) {
                    this.x-=this.w;
                }
                if (this.right) {
                    this.x+=this.w;
                }
                if (this.top) {
                    this.y-=this.h;
                }
                if (this.bottom) {
                    this.y+=this.h;
                }
            }
        }
        //创建随机函数
        function rand (m,n) {
            return Math.floor(Math.random()*(n-m+1)+m);
        }
        //随机颜色
        function randomColor () {
            var r=rand(0,255);
            var g=rand(0,255);
            var b=rand(0,255);
            var strColor='rgb('+r+','+g+','+b+')';
            return strColor;
        }
            //引入地图图片
        var img=new Image();
        img.src='img/map.jpg';
        //创建地图类
        function Maps (x,y) {
            this.x=x;
            this.y=y;
            this.w=50;
            this.h=50;
            //添加绘制方法
            this.draw=function  () {
                context.drawImage(img,0,0,this.w,this.h,this.x,this.y,this.w,this.h);
            }
        }
        var arrMaps=[];
        //遍历地图数组，实例化出地图对象
        for(var i = 0;i<20;i++){
//          确定具体的行数
            for (var j = 0;j<20;j++) {
                //确定具体的列数
                if(arr[i*10+j]!=0){
                    //创建出实例化对象，将具体的坐标位置传入
                    var mapp = new Maps(j*50,i*50) ;
                    arrMaps.push(mapp);
                }
            }
        }

        //创建食物类
        function Food () {
            var xx=canvas.width/50-1;
            var yy=canvas.height/50-1;
            //随机食物的位置
            this.w=50;
            this.h=50;
            this.x=rand(0,xx)*this.w;
            this.y=rand(0,yy)*this.h;
            //随机食物的颜色
            this.color=randomColor();
            //判断失误是否随机到地图上
        for (var i=0;i<arrMaps.length;i++) {
            //判断尅一块地图的坐标与失误的坐标是否重合
            if (this.x==arrMaps[i].x&&this.y==arrMaps[i].y) {
                //如果位置重叠,重新随机食物的位置
                        this.x=rand(0,xx)*this.w;
                        this.y=rand(0,yy)*this.h;
                        //重新检验新的食物有没有与身体重合
                        this.draw();
                        //如果出现重合则终止循环
                        return;
            }
        }
            //绘制食物
            var yf=new Image();
            yf.src='img/3.jpg';
            this.draw=function  () {
                //判断食物是否随机在蛇身上
                for (var i=0;i<snake.positions.length;i++) {
                    if (this.x==snake.positions[i].x&&this.y==snake.positions[i].y){
                        //如果位置重叠,重新随机食物的位置
                        this.x=rand(0,xx)*this.w;
                        this.y=rand(0,yy)*this.h;
                        //重新检验新的食物有没有与身体重合
                        this.draw();
                        //如果出现重合则终止循环
                        return;
                    } 
                }
                //绘制出食物
//               context.fillStyle=randomColor();
//               context.fillRect(this.x,this.y,this.w,this.h);
                context.drawImage(yf,this.x,this.y,this.w,this.h);
            }
        }
        //创建碰撞函数
            function crash(obj1,obj2){
                var l1 = obj1.x;
                var r1 = l1 + obj1.w;
                var t1 = obj1.y;
                var b1 = t1 + obj1.h;

                var l2 = obj2.x;
                var r2 = l2 + obj2.w;
                var t2 = obj2.y;
                var b2 = t2 + obj2.h;
                if(l1<r2 && r1>l2 && t1<b2 && b1>t2){
                    return true;
                }else{
                    return false;
                }
            }

        //实例化蛇的对象
        var snake=new Snake();
        snake.drawBody();
        snake.drawHead();
        //实例化食物对象
        var food=new Food();
        function animate () {
            //移动
            snake.move();
            //检测到蛇身与食物碰撞
            if (crash(snake,food)) {
//              蛇身变长
                snake.isShift=false;
            }
            //检测蛇与边界的碰撞
//          if (snake.x>canvas.width-snake.wsnake.x<0snake.y>canvas.height-snake.hsnake.y<0) {
//              //终止游戏
//              console.log('死');
//              alert('1');
//              clearInterval(time);
//          }
            if (snake.x>canvas.width-snake.w) {
                snake.x=0;
            }
            if (snake.x<0) {
                snake.x=canvas.width-snake.w;
            }
            if (snake.y>canvas.height-snake.h) {
                snake.y=0;
            }
            if (snake.y<0) {
                snake.y=canvas.height-snake.h;
            }

            //检测蛇与地图的碰撞
            for (var i=0;i<arrMaps.length;i++) {
                if (crash(arrMaps[i],snake)) {
                    clearInterval(time);
                    alert('GG');
                }
            }
            //检测蛇与蛇蛇头的碰撞
            for (var i=0;i<snake.positions.length;i++) {
                console.log(snake.x);
                if (snake.x==snake.positions[i].x&&snake.y==snake.positions[i].y) {
                    console.log(6);
                    clearInterval(time);
                    alert('GG');
                }
            }

            //清除画布
            context.clearRect(0,0,canvas.width,canvas.height);
            //画蛇
            snake.drawBody();
            snake.drawHead();
            //绘制食物
            food.draw();
            //绘制地图
            for (var i=0;i<arrMaps.length;i++) {
                arrMaps[i].draw();
            }
        }
        //设置计时器重复执行
        var time = setInterval(animate,200);

        //添加键盘事件,控制同一栋的方向
        document.onkeydown=function  (e) {
            if(!changeDir){  //只有在判断条件中才! changeDir等价于changeDire==false
                return;//终止事件的执行
            }
            var event=ewindow.event;
            switch (event.keyCode){
                case 37:
                    if (!snake.right) {
                        snake.left=true;
                        snake.top=false;
                        snake.bottom=false;
                    }
                    break;
                case 38:
                    if (!snake.bottom) {
                        snake.left=false;
                        snake.top=true;
                        snake.right=false;
                    }
                    break;
                case 39:
                    if (!snake.left) {
                        snake.right=true;
                        snake.top=false;
                        snake.bottom=false;
                    }
                    break;  
                case 40:
                    if (!snake.top) {
                        snake.right=false;
                        snake.left=false;
                        snake.bottom=true;
                    }
                    break;
//                  default;
            }
            //为了避免多次快速的点击方向按键(修改方向),防止出现bug
            changeDir=false;
            timerDelay= setTimeout(function  () {
                changeDir=true;
            },200);
        }

    </script>
</html>
点击查看更多内容