凛凛凛世水色感情
2020-06-05 17:01
采纳率: 100%
浏览 280
已采纳

求助,基于HTML5的贪吃蛇

网页打开无法显示贪吃蛇和运行,而且有两处错误。图片说明
这是代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
    <title>基于HTML5的贪吃蛇游戏的设计与实现</title>
    <link rel="stylesheet" href="css/snake.css">
<style>     body{
      background-color: silver;/*设置页面的背景颜色为银色*/
    }
    /*游戏主页面的总体样式*/
    #container{
      text-align: center;
      width: 600px;
      margin: auto;
      padding: 10px;
      background-color: white;
      box-shadow: 10px 10px 15px gray;
    }
    /*状态栏样式*/
    #status{
      padding: 10px;
      width: 400px;
      height: 20px;
      margin: auto;
    }
    /*状态栏中栏目的盒子样式*/
    .box{
      float: left;
      width: 200px;
    }
    /*设置游戏按钮样式*/
    button{
      width: 200px;
      height: 50px;
      margin: 10px 0;
      border: 0;
      outline: none;
      font-size: 25px;
      font-weight: bold;
      color: white;
      background-color:lightcoral ;
    }
    /*设置鼠标悬浮时的按钮样式*/
    button:hover{
      background-color: coral;
    }
    </style>
</head>
<body>
      <div id="container">
        <h3>基于HTML5的贪吃蛇游戏</h3>
        <hr>
        <!--状态栏信息-->
        <div id="status">
            <!--历史最高分-->
            <div class="box">
                历史最高分:<span id="bestScore">0</span>
            </div>
            <!--当前分数-->
            <div class="box">
                当前分数:<span id="currentScore">0</span>
            </div>
        </div>
        <!--设置游戏画布-->
        <canvas id="myCanvas" width="400" height="400" style="border: 1px solid"></canvas>
        <div>
            <button onclick="window.location.reload()">
                重新开始
            </button>
        </div>
      </div>
      <script>
     /* 游戏参数设置*/
     /*游戏界面刷新的间隔时间*/
        var time=200;
     /*蛇的身长*/
        var t=3;
     /*记录蛇的运行轨迹,用数组记录每一个坐标点*/
        var snakeMap=[];
     /*蛇身单元大小*/
        var w=10;
     /*方向代码:左37,上38,右39,下40*/
        var direction=37;
     /*蛇的初始坐标*/
        var x=0;
        var y=0;
/*食物的初始坐标*/
        var foodX=0;
        var foodY=0;
 /*当前得分*/
        var score=0;
 /*历史最高记录*/
        var bestScore=0;
/*画布的宽和高*/
        var width=400;
        var height=400;
/*根据id找到指定的画布*/
        var c=document.getElementById("myCanvas");
/*创建2D的context对象*/
        var ctx=c.getContext("2d");

/*获得历史最高分记录*/
        showBestScore();

/*开始游戏*/
        GameStart();
/*显示历史最高分记录*/

        function showBestScore(){
/*从本地存储数据中读取历史最高分*/
            bestScore=localStorage.getItm("bestScore");
/*如果尚未记录最高分,则重置为0*/
            if (bestScore==null) 
                bestScore=0;
/*讲历史最高分更新到状态栏中*/
            var best=document.getElementById("bestScore");
            best.innerHTML=bestScore;
        }
/*启动游戏*/

        function Gamestart(){
/*调用drawFood()函数,在随机位置绘制第一个事物*/
            drawFood();
/*随机生成贪吃蛇的蛇头坐标*/

            x=Math.floor(Math.random()*width/w)*w;
            y=Math.floor(Math.random()*height/w)*w;
/*随机生成蛇的前进方向*/
            direction=37+Math.floor(Math.random()*4);
/*每隔time毫秒刷新一次游戏内容*/
            setInterval("gameRefresh()",time);
        }
/*游戏画面刷新函数*/
        function gameRefresh(){
/*将当前坐标数据添加到贪吃蛇的运动轨迹坐标数组中*/
            snakeMap.push({
                'x':x,
                'y':y
            })

            /*绘制贪吃蛇*/
            drawSnake();

            /*根据方向移动蛇头的下一个位置*/
            switch(direction){
                /*左37*/
                case 37:
                x-=w;
                break;
                /*上38*/
                case 38:
                y-=w;
                break;
                /*右39*/
                case 39:
                x+=w;
                break;
                /*下40*/
                case 40:
                y+=w;
                break;
            }

            /*碰撞检测,返回值0表示没有撞到障碍物*/
            var code=detectCollision();
            /*如果返回值不为0,表示游戏失败*/
            if (code!==1) {
                /*如果当前得分高于历史得分,则更新历史最高分记录*/
                if (score>bestScore)
                    localStorage.setItem("bestScore",score);
                /*返回值1表示撞到墙壁*/
                if (code==1) {
                    alert("撞到了墙壁,游戏失败!当前得分:"+score);
                }
                /*返回值2表示撞到蛇身*/
                else if (code==2) {
                    alert("撞到蛇身,游戏失败!当前得分:"+score);
                }
                /*重新加载页面*/
                window.location.reload();
            }

            /*吃到食物的判定*/
            if (foodX==x && foodY==y) {
                /*吃到一次食物加10分*/
                score+=10;
                /*更新状态栏中的当前分数*/
                var currentScore=document.getElementById
                ("currentScore");
                currentScore.innerHTML=score;
                /*在随机位置绘制下一个食物*/
                drawFood();
                /*蛇身长度加1*/
                t++;
            }

            /*绘制贪吃蛇函数*/

            function drawSnake(){
                /*设置蛇身内部的填充颜色*/
                ctx.fillStyle="lightbule";
                /*绘制最新位置的蛇身矩形*/
                ctx.fillRect(x,y,w,w);

                /*数组只保留蛇身长度的数据,如果蛇前进了则删除最旧的坐标数据*/
                if (snakeMap.length>t) {
                    /*删除数组的第一项,即蛇的尾部的最后一个位置的坐标记录*/
                    var lastBox=snakeMap.shift();
                    /*清除蛇的尾部的最后一个位置,从而实现移动效果*/
                    ctx.clearRect(lastBox['x'],lastBox['y'],w,w);
                }
            }


            /*改变蛇方向的按键监听*/
            //====================
            document.onkeydown=function(e){
                /*根据按键更新前进方向code:左37,上38,右39,下40*/
                if (e.keyCode==37||e.keyCode==38||e.keyCode==39|e.keyCode==40) 
                    direction=e.keyCode;
            }

            /*碰撞检测函数*/

            function detectCollision(){
                /*蛇头碰撞到了四周的墙壁,游戏失败*/
                if (x>width||y>height||x<0||y<0) {
                    return 1;
                }
                /*蛇头碰撞到了蛇身,游戏失败*/
                for (var i = 0;i<snakeMap.length;i++) {
                    if (snakeMap[i],x==x && snakeMap[i],y==y) {
                        return 2;
                    }
                }
                return 0;
            }

            /*绘制食物函数*/

            function drawFood(){
                /*随机生成食物坐标*/
                foodX=Math.floor(Math.random()*width/w)*w;
                foodY=Math.floor(Math.random()*height/w)*w;
                /*内部填充颜色*/
                ctx.fillStyle="#FF0000";
                /*绘制矩形*/
                ctx.fillRect(foodX,foodY,w,w);
            }

        </script>
    </body>
</html>
  • 写回答
  • 好问题 提建议
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • Print_v 2020-06-06 09:57
    已采纳

    改为如下代码可正常运行,影响代码运行的就是些小问题:
    缺少个 } 命名区分大小写(如 gameStart 函数和 GameStart 函数是不一样的)
    在查报错信息时,可看在第几行,然后排查问题

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
        <title>基于HTML5的贪吃蛇游戏的设计与实现</title>
        <link rel="stylesheet" href="css/snake.css">
    <style>     body{
          background-color: silver;/*设置页面的背景颜色为银色*/
        }
        /*游戏主页面的总体样式*/
        #container{
          text-align: center;
          width: 600px;
          margin: auto;
          padding: 10px;
          background-color: white;
          box-shadow: 10px 10px 15px gray;
        }
        /*状态栏样式*/
        #status{
          padding: 10px;
          width: 400px;
          height: 20px;
          margin: auto;
        }
        /*状态栏中栏目的盒子样式*/
        .box{
          float: left;
          width: 200px;
        }
        /*设置游戏按钮样式*/
        button{
          width: 200px;
          height: 50px;
          margin: 10px 0;
          border: 0;
          outline: none;
          font-size: 25px;
          font-weight: bold;
          color: white;
          background-color:lightcoral ;
        }
        /*设置鼠标悬浮时的按钮样式*/
        button:hover{
          background-color: coral;
        }
        </style>
    </head>
    <body>
          <div id="container">
            <h3>基于HTML5的贪吃蛇游戏</h3>
            <hr>
            <!--状态栏信息-->
            <div id="status">
                <!--历史最高分-->
                <div class="box">
                    历史最高分:<span id="bestScore">0</span>
                </div>
                <!--当前分数-->
                <div class="box">
                    当前分数:<span id="currentScore">0</span>
                </div>
            </div>
            <!--设置游戏画布-->
            <canvas id="myCanvas" width="400" height="400" style="border: 1px solid"></canvas>
            <div>
                <button onclick="window.location.reload()">
                    重新开始
                </button>
            </div>
          </div>
          <script>
         /* 游戏参数设置*/
         /*游戏界面刷新的间隔时间*/
            var time=200;
         /*蛇的身长*/
            var t=3;
         /*记录蛇的运行轨迹,用数组记录每一个坐标点*/
            var snakeMap=[];
         /*蛇身单元大小*/
            var w=10;
         /*方向代码:左37,上38,右39,下40*/
            var direction=37;
         /*蛇的初始坐标*/
            var x=0;
            var y=0;
    /*食物的初始坐标*/
            var foodX=0;
            var foodY=0;
     /*当前得分*/
            var score=0;
     /*历史最高记录*/
            var bestScore=0;
    /*画布的宽和高*/
            var width=400;
            var height=400;
    /*根据id找到指定的画布*/
            var c=document.getElementById("myCanvas");
    /*创建2D的context对象*/
            var ctx=c.getContext("2d");
    
    /*获得历史最高分记录*/
            showBestScore();
    
    /*开始游戏*/
            GameStart();
    /*显示历史最高分记录*/
    
            function showBestScore(){
    /*从本地存储数据中读取历史最高分*/
                bestScore=localStorage.getItem("bestScore");
    /*如果尚未记录最高分,则重置为0*/
                if (bestScore==null) 
                    bestScore=0;
    /*讲历史最高分更新到状态栏中*/
                var best=document.getElementById("bestScore");
                best.innerHTML=bestScore;
            }
    /*启动游戏*/
    
            function GameStart(){
    /*调用drawFood()函数,在随机位置绘制第一个事物*/
                drawFood();
    /*随机生成贪吃蛇的蛇头坐标*/
    
                x=Math.floor(Math.random()*width/w)*w;
                y=Math.floor(Math.random()*height/w)*w;
    /*随机生成蛇的前进方向*/
                direction=37+Math.floor(Math.random()*4);
    /*每隔time毫秒刷新一次游戏内容*/
                setInterval("gameRefresh()",time);
            }
    /*游戏画面刷新函数*/
            function gameRefresh(){
    /*将当前坐标数据添加到贪吃蛇的运动轨迹坐标数组中*/
                snakeMap.push({
                    'x':x,
                    'y':y
                })
    
                /*绘制贪吃蛇*/
                drawSnake();
    
                /*根据方向移动蛇头的下一个位置*/
                switch(direction){
                    /*左37*/
                    case 37:
                    x-=w;
                    break;
                    /*上38*/
                    case 38:
                    y-=w;
                    break;
                    /*右39*/
                    case 39:
                    x+=w;
                    break;
                    /*下40*/
                    case 40:
                    y+=w;
                    break;
                }
    
                /*碰撞检测,返回值0表示没有撞到障碍物*/
                var code=detectCollision();
                /*如果返回值不为0,表示游戏失败*/
                if (code!==0) {
                    /*如果当前得分高于历史得分,则更新历史最高分记录*/
                    if (score>bestScore)
                        localStorage.setItem("bestScore",score);
                    /*返回值1表示撞到墙壁*/
                    if (code==1) {
                        alert("撞到了墙壁,游戏失败!当前得分:"+score);
                    }
                    /*返回值2表示撞到蛇身*/
                    else if (code==2) {
                        alert("撞到蛇身,游戏失败!当前得分:"+score);
                    }
                    /*重新加载页面*/
                    window.location.reload();
                }
    
                /*吃到食物的判定*/
                if (foodX==x && foodY==y) {
                    /*吃到一次食物加10分*/
                    score+=10;
                    /*更新状态栏中的当前分数*/
                    var currentScore=document.getElementById
                    ("currentScore");
                    currentScore.innerHTML=score;
                    /*在随机位置绘制下一个食物*/
                    drawFood();
                    /*蛇身长度加1*/
                    t++;
                }
    
                /*绘制贪吃蛇函数*/
    
                function drawSnake(){
                    /*设置蛇身内部的填充颜色*/
                    ctx.fillStyle="lightbule";
                    /*绘制最新位置的蛇身矩形*/
                    ctx.fillRect(x,y,w,w);
    
                    /*数组只保留蛇身长度的数据,如果蛇前进了则删除最旧的坐标数据*/
                    if (snakeMap.length>t) {
                        /*删除数组的第一项,即蛇的尾部的最后一个位置的坐标记录*/
                        var lastBox=snakeMap.shift();
                        /*清除蛇的尾部的最后一个位置,从而实现移动效果*/
                        ctx.clearRect(lastBox['x'],lastBox['y'],w,w);
                    }
                }
    
    
                /*改变蛇方向的按键监听*/
                //====================
                document.onkeydown=function(e){
                    /*根据按键更新前进方向code:左37,上38,右39,下40*/
                    if (e.keyCode==37||e.keyCode==38||e.keyCode==39|e.keyCode==40) 
                        direction=e.keyCode;
                }
    
                /*碰撞检测函数*/
    
                function detectCollision(){
                    /*蛇头碰撞到了四周的墙壁,游戏失败*/
    
                    if (x>width||y>height||x<0||y<0) {
                        return 1;
                    }
                    /*蛇头碰撞到了蛇身,游戏失败*/
                    for (var i = 0;i<snakeMap.length;i++) {
                        if ( (snakeMap[i][x])==x && (snakeMap[i][y])==y) {
                            return 2;
                        }
                    }
                    return 0;
                }
    
    
            }
             /*绘制食物函数*/
    
                function drawFood(){
                    /*随机生成食物坐标*/
                    foodX=Math.floor(Math.random()*width/w)*w;
                    foodY=Math.floor(Math.random()*height/w)*w;
                    /*内部填充颜色*/
                    ctx.fillStyle="#FF0000";
                    /*绘制矩形*/
                    ctx.fillRect(foodX,foodY,w,w);
                }
    
            </script>
        </body>
    </html>
    
    已采纳该答案
    评论
    解决 无用
    打赏 举报

相关推荐 更多相似问题