html5设计的贪吃蛇

html5设计的贪吃蛇

添加时间:2021-03-22 02:56:02
站长推荐丨赞助论坛,可获取海量资源终身免费下载权限奥!
举报 举报
收藏
预览
附件 附件
  • 模板类型模板类型:设计
  • 模板颜色模板颜色:入门级
  • 下载积分下载积分:28 米粒
  • 下载权限下载权限:

    赞助会员

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

自己原创写的贪吃蛇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();
}
相关内容推荐
资源求助发帖
查看更多发帖

*

回帖描述:

*

链接类型:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
热点内容推荐
标题:html5设计的贪吃蛇

*

描述:
平均回复时间:3-10分钟
规则介绍:悬赏寻求论坛网友分享资源,站点对分享内容的准确性,合法性,版权等没有足够的监管能力。如果您发现资源不正确,无法使用,不符合法律法律等情况,您可以直接举报资源。站长将尽快核实您的举报,并根据情况,采取封号,退换米粒等处理。

*

回帖描述:

*

链接类型:

*

阅读权限:

*

下载链接:

密码:
发帖规则:回帖内容为会员之间的私信,普通网友无法查看。
免责声明:回帖中提供的链接内容仅供会员之间学习参考使用,获取内容后请在法律法规范围内使用。回帖提供的内容应符合法律法规要求,不得违反法律法律的要求。
站点权责:回帖内容如违反法律法规,站点有权封停账号使用权利。对用户举报的内容,站点有责任及时删除违规内容。
  • 背景波浪
  • 背景波浪
  • 波浪
  • 波浪
客服
在线咨询
周一 至 周日 9:00 ~ 22:00
QQ:1326974360
微信:juyoubuluo6688
客服热线
18205485173
工作日 9:00 ~ 18:00
微信扫码咨询
客户服务
欢迎咨询服务
咨询量较多时,请耐心等待
社群

关注公众号

获取更多资讯

扫码进群(QQ)

与更多大牛交流沟通

0.087626s