html5设计的贪吃蛇【原创

来源:https://www.sucaihuo.com/js/3153.html 2017-10-20 10:12浏览(2117) 收藏

H5+css设计的游戏贪吃蛇 纯手写无框架,cookie保存最高分和昵称,长按加速,空格暂停
html5设计的贪吃蛇
分类:游戏 > 设计 难易:入门级
查看演示 下载资源 下载积分: 30 积分

自己原创写的贪吃蛇js游戏代码

//随机起点
var game={
    int:function(){//初始化
       game.x=400;
       game.y=200; 
       game.w=10;
       game.h=10;
       game.check=1;
       game.randomX=game.randomNum(790,0);
       game.randomY=game.randomNum(440,0);
       game.arrX=[game.x];
       game.arrY=[game.y];
       game.newarrX=[];
       game.newarrY=[];
       game.timer="";
       game.score=0;
       game.k=0;//防止加速计时器叠加
       game.pauser=0;
    },
     
    initialization:function(){
        game.pauser=0;
        game.fenshu();
        if(game.x>792||game.x<4||game.y<8||game.y>444){//判断是否在圈内
           game.gameOver();
        }else{
            game.clear();
            var c=document.querySelector("#gameCanvas");
            var ctx=c.getContext("2d");
            ctx.fillStyle="#C6E200";
            ctx.beginPath();
            ctx.arc(game.randomX,game.randomY,10,0,Math.PI*2,true);
            for(var i=0;i<game.arrX.length;i++){//循环储存原点
                game.newarrX[i]=game.arrX[i];
                game.newarrY[i]=game.arrY[i];
            }
            for(var i=0;i<game.arrX.length;i++){
                if(i==0){
                    game.arrX[i]=game.x;
                    game.arrY[i]=game.y;
                }
                else{
                    game.arrX[i]=game.newarrX[i-1];
                    game.arrY[i]=game.newarrY[i-1];
                }
                    ctx.arc(game.arrX[i],game.arrY[i],10,0,Math.PI*2,true);
                    ctx.closePath();
                    ctx.fill();
            }

            //自身碰撞
            var checkpengzhaung=0;
            for(var i=0;i<game.arrX.length;i++){
                checkpengzhaung=0;
                for(var j=0;j<game.arrX.length;j++){
                    if(game.arrX[i]==game.arrX[j]&&game.arrY[i]==game.arrY[j]){
                        checkpengzhaung+=1;
                    }
                }
                if(checkpengzhaung==2){
                    game.gameOver();
                    break;
                }
            }
            //移动
                if(game.check==0){
                game.x-=6;
                }else if(game.check==1){
                    game.x+=6;
                }else if(game.check==2){
                    game.y-=6;
                }else if(game.check==3){
                    game.y+=6;
                }
             if(game.x>=game.randomX-6&&game.x<game.randomX+6&&game.y>=game.randomY-6&&game.y<=game.randomY+6){//吃到小球
                    game.score=parseInt(game.score)+1;
                    game.fenshu();
                    game.arrX.push(game.x);
                    game.arrY.push(game.y);
                    game.randomX=game.randomNum(793,6);
                    game.randomY=game.randomNum(445,10);
                }
            game.move();
    }
    },
    start:function(){
         game.p=setInterval("game.initialization()",90);
    },
    //生成从minNum到maxNum的随机数
    randomNum:function(minNum,maxNum){ 
        switch(arguments.length){ 
            case 1: 
                return parseInt(Math.random()*minNum+1,10); 
            break; 
            case 2: 
                return parseInt(Math.random()*(maxNum-minNum+1)+minNum,10); 
            break; 
                default: 
                    return 0; 
                break; 
        } 

    },
    clear:function(){
        var c=document.getElementById("gameCanvas");  
        var cxt=c.getContext("2d");  
        cxt.clearRect(0,0,c.width,c.height);  
    },
    move:function(){
        //     var key_pressed={};

        // document.addEventListener("keyup",function(e){

        // key_pressed[e.keyCode]=false;

        // });

        // document.addEventListener("keydown",function(e){

        // key_pressed[e.keyCode]=true;

        // });
        // for(var key in key_pressed){

        // }
            document.onkeydown=function(event){
                if(game.k==0){
                    game.jiaSutimer=setTimeout(function(){
                    game.jiasu=true;
                    clearInterval(game.p);
                    game.p=setInterval("game.initialization()",35);
                },500) 
                }
                game.k=1;    
                    console.log(game.jiaSutimer);
                    console.log(game.k);
            var e = event || window.event || arguments.callee.caller.arguments[0];
                if(e.keyCode==37&&game.check!=1){//左键
                    game.check=0;
               }else if(e.keyCode==39&&game.check!=0){//右键
                    game.check=1;
               }else if(e.keyCode==38&&game.check!=3){//上键
                    game.check=2;
               }else if(e.keyCode==40&&game.check!=2){//下键
                    game.check=3;
               }else if(e.keyCode==32){
                   game.pauser=1;
                   game.pause();
                }
        }
        document.onkeyup=function(event){
                game.k=0;
                clearTimeout(game.jiaSutimer);
                game.jiasu=false;
            if(game.pauser==0){
                clearInterval(game.p);
                game.p=setInterval("game.initialization()",90);
            }
            
        }
    },
    gameOver:function(){
        clearInterval(game.p);
        document.querySelector(".over").style.display="block";
        document.querySelector(".resetting").style.display="block";
        game.resetting();
    },
    resetting:function(){
        document.querySelector(".resetting").onclick=function(){
        game.int();
        game.p=setInterval("game.initialization()",90);
        document.querySelector(".over").style.display="none";
        document.querySelector(".resetting").style.display="none";
        document.querySelector(".js_fenshu").innerHTML=game.score;
         }
    },
    fenshu:function(){
        if(game.bigScore<=game.score){
            game.bigScore=game.score;
            document.querySelector(".bigFenshu").innerHTML=game.bigScore;
            game.setCookie("bigScore",game.bigScore,30);
        }
        document.querySelector(".js_fenshu").innerHTML=game.score;
        if(game.checkCookie("bigScore")){
            game.bigScore=parseInt(game.getCookie("bigScore"));
            document.querySelector(".bigFenshu").innerHTML=game.bigScore;
        }
    },
    pause:function(){
        if(document.querySelector(".pause").style.display!="block"){
            clearInterval(game.p);
            document.querySelector(".pause").style.display="block";
            document.querySelector(".zanting").innerHTML="按空格继续游戏";
        }else{
            game.start();
            document.querySelector(".pause").style.display="none";
            document.querySelector(".zanting").innerHTML="按空格暂停游戏";
        }
    },
    getCookie:function(c_name){//取cookie
          var name = c_name + "=";
          var ca = document.cookie.split(';');
          for(var i=0; i<ca.length; i++) 
          {
            var c = ca[i].trim();
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
          }
          return "";
    },
    setCookie:function(c_name,value,expiredays){//设置cookie
        var d = new Date();
        d.setTime(d.getTime()+(expiredays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = c_name+"="+value+"; "+expires;
    },
    checkCookie:function(c_name){//检查cookie
        var username=game.getCookie(c_name)
        if (username!="null" && username!="")
          {return true;}
        else 
          {
          return false;
          }
    }
}
window.onload=function(){
    if(game.checkCookie("username")){
        document.querySelector(".name").innerHTML=game.getCookie("username");
    }else{
        var name=prompt("请输入昵称:","");
        if(name!=null){
            game.setCookie("username",name,30);
            document.querySelector(".name").innerHTML=game.getCookie("username");
        }
    }
    game.int();
    game.start();
}
标签: 游戏
声明:本文为原创文章,如需转载,请注明来源sucaihuo.com并保留原文链接:https://www.sucaihuo.com/js/3153.html
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2