Question

这是我的代码来源。在视频中，每件事情都适合他（参见链接），但不适合我。

HTML

<html>
    <head>
        <title>HTML5 | SNAKE GAME</title>
        <meta charset="utf-8" />
<link href="style.css" rel="stylesheet" type="text/css" />

    </head>


    <body>
       <div class="container">
       <div id="overlay">
           Your Final Score : <span id="final_score"></span>
           <br />
           <a onclick="window.location.reload()" href="#">Click to play again</a>
           <!--End Of overlay-->
        </div>
           <canvas id="myCanvas">
            <p>Sorry, your browser dosn't support Canvas</p>
        </canvas>
        <div id="stats">
           <div class="score"></div>
           <div class="high_score"></div>
           <button id="reset_score" onclick="resetScore()">Rest score</button>
            <!--state-->
        </div>
      <!--End of container-->
</div>

           <!--Jquery-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <!--My JS-->
        <script type="text/javascript"></script>
    </body>
</html>

CSS

body{
    background: black url(snack.jpg)  no-repeat top center;
    font-family: arial;

}
a{
    color : currentColor;
    text-decoration: none;
}

#myCanvas{
            width : 600px ;
            height : 400px;
            border: 1px solid limegreen;
    background: rgba(100,50,100,0.5);
        }
.container{
    margin : 30px auto 0 auto;
    width : 610px;
    overflow : auto;
    position : relative;

}
#stats{
    width:590px;
    background: #cfa;
    padding : 5px;
    font-size : 20px;
    font-weight: bold;
    margin-bottom : 5px;
    overflow: auto;

    background: rgba(255,255,255,0.5);
}
.score{
    width : 25%;
    height : 50px;
    padding-top: 20px;
    float :left;
    margin-right: 5px;
    overflow: auto;
    background : white;
    text-align: center;

}
#reset_score{
    padding : 10px;
    float : right;
background: rgba(255,255,255,1);
}
#overlay{
    display : none;
    color : limegreen;
    font-size: 25px;
    text-align:center;
    position : absolute;
    top : 170px;
    left : 180px;
    opacity: 1;
}
#overlay a{
    display :block;
    margin-top: 10px;
    background: #fff;
    padding : 15px;
}
#overlay a:hover{
    background: #eee;
    color: darkgreen;
    -webkit-transition: background 17s;
    transition : background 17s;
    transition : color 17s;

}

我想这就是我遇到问题的地方

JS

$(document).ready(function () {
    //Intialize variables
    var canvas, ctx, w, h, d, food, score, speed, /*body of snake*/ snake_array, color;
    //End of intialize var

    //full 
    /*take the first cnvas element*/
    canvas = $("#myCanvas")[0];
    /*2D*/
    ctx = canvas.getContext("2d");
    w = canvas.width();
    h = canvas.height();
    cw = 15; /*size snake rect*/
    speed = 180;
    d = "right";
    color = "green";
    //End of variables
    //functions
    function init() {
        create_snake();
        create_food();
        score = 0;
        if (typeof game_loop != "undefined") {
            clearInterval(game_loop);

        }
        game_loop = setInterval(paint, speed);
        //End of fnction init()
    }
    //End of functions

    //Code
    init();
    //End of Code


    function create_snake() {
        //length of the snake
        var length = 5;
        snake_array = [];
        /*mod*/
        for (var i = length - 1; i >= 0; i--) {
            //push one square in body of snake
            snake_array.push({
                x: i,
                y: 0
            });
            //End of loop
        }
        //End of snacke func
    }

    function create_food() {
        food = {
            //random food in the screen 
            x: Math.round(Math.random() * (w - cw) / cw),
            y: Math.round(Math.random() * (h - cw) / cw)
                //End of food object
        };
        //End of creat_food func
    }
    //drawing the snake
    function paint() {
        //paint canvas
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, w, h);
        //border of canvas
        ctx.strockeStyle = "white";
        ctx.strockeRect(0, 0, w, h);
        //movement snack
        //draw snack
        var nx = snake_array[0].x;
        var ny = snake_array[0].y;
        //direction of snack
        if (d == 'right') {
            nx++;
        } else if (d == 'left') {
            nx--;
        } else if (d == 'up') {
            ny--;
        } else if (d == 'down') {
            ny++;
        }
        //Collide code when loosing
        if (nx == -1 || ny == -1 || nx == w / cw || ny == h / cw || check_collision(nx, ny, snake_array)) {
            init();
            return;
        }
        //Snake eat food
        var tail;
        if (nx == food.x && ny == food.y) {
            tail = {
                x: nx,
                y: ny
            };
            score++;
            //create  new random food
            create_food();
        } else {
            //remove square from the body of snake
            tail = snake_array.pop();
            tail.x = nx;
            tail.y = ny;
        }
        //add a new square to the body of the snake
        snake_array.unshift(tail);

        for (var i = 0; i < snake_array.length; i++) {
            var c = snake_array[i];
            paint_cell(c.x, c.y);
            //End for
        }
        //Paint cell
        paint_cell(food.x, food.y);

        //check score and show if score more than high score wil replace him
        checkscore(score);

        //End of paint func
    }

    function paint_cell(x, y) {
        ctx.fillStyle = color;
        ctx.fillRect(x * cw, y * cw, cw, cw);
        ctx.strockeStyle = "white";
        ctx.strockeRect(x * cw, y * cw, cw, cw);
        //End of paint_cell func
    }

    function check_collision(x, y, array) {
        for (var i = 0; i < array.length; i++) {
            if (array[i.x == x && array[i].y == y]) {
                /*if(array[i].x == x && array[i].y == y){}*/
                return true;
            }
            //End of for loop
        }
        return false;
        //End of check collision func
    }


    //End of document
});

Answer 1

我注意到的几个错误。

将<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" </script>移至头部并根据需要添加async属性。
将w = canvas.width();和h = canvas.height();更正为w = canvas.width;和h = canvas.height;
将所有ctx.strockeStyle和ctx.strockeRect全部替换为ctx.strokeStyle和ctx.strokeRect
checkscore()函数未定义。

我的代码是完美的，但现在为什么我发现了问题

1 个答案: