Question

我正在尝试用JS / jQuery编写一个简单的蛇游戏，但现在这并不重要。我得到这个“ReferenceError：$未定义”，但我无法弄清楚我做错了什么。这是我的代码：

我的HTML页面：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Snake</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<body>

    <canvas id="canvas" width="700" height="500"></canvas>
    <script type="text/javascript" src="script.js"></script>

</body>
</html>

jQuery用法位于代码的底部：

//defining the needed variables and classes
var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d');

const SNAKE_VEL = 10;

//direction enumeration calss
var direction = {
    UP: 0,
    RIGHT: 1,
    DOWN: 2,
    LEFT: 3
};

//the snake class
var snake = {
    posX: 0,
    posY: 0,
    prevPosX: 0,
    prevPosY: 0,
    width: 20,
    height: 20,
    direction: direction.RIGHT,

    move: function(){
        switch(snake.direction)
        {
            case direction.UP:
                if(snake.posY - SNAKE_VEL > 0)
                    snake.posY -= SNAKE_VEL;
                break;

            case direction.RIGHT:
                if(snake.posX + snake.width + SNAKE_VEL < canvas.clientWidth)
                    snake.posX += SNAKE_VEL;
                break;

            case direction.DOWN:
                if(snake.posY + snake.height + SNAKE_VEL < canvas.clientHeight)
                    snake.posY += SNAKE_VEL;
                break;

            case direction.LEFT:
                if(snake.posX - SNAKE_VEL > 0)
                    snake.posX -= SNAKE_VEL;
                break;
        }
    },

    draw: function(){
        context.fillStyle = "#97B";
        context.fillRect(snake.posX, snake.posY, snake.width, snake.height);
    }
};

//the food class
var food = {
    posX: 0,
    posY: 0,
    prevPosX: 0,
    prevPosY: 0,
    width: 25,
    height: 25
};

context.fillStyle = "#458";
context.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);

//the main game loop
function gameLoop(){
    //set the background blue
    context.fillStyle = "#458";
    context.fillRect(0, 0, canvas.clientWidth, canvas.clientHeight);

    //draw and move the snake
    snake.move();
    snake.draw();

    requestAnimationFrame(gameLoop);
}

//event handlers
//on key up event, see if the up,down,left or right buttons have been pressed
$(document).keyup(function(event){
    switch(event.which)
    {
        case 17:
            if(snake.direction != direction.DOWN)
                snake.direction = direction.UP;
            break;

        case 18:
            if(snake.direction != direction.LEFT)
                snake.direction = direction.RIGHT;
            break;

        case 19:
            if(snake.direction != direction.UP)
                snake.direction = direction.DOWN;
            break;

        case 20:
            if(snake.direction != direction.RIGHT)
                snake.direction = direction.LEFT;
            break;
    }
});

//request first frame
requestAnimationFrame(gameLoop);

Answer 1

网址必须为http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js，否则将在本地计算机中查找。

Answer 2

在http:属性的开头添加src，您尝试包含jQuery。我的猜测是你试图在你的机器上本地加载它，而不是通过网络服务器。

Answer 3

1：将外部脚本添加为：

2：关于$未定义。在所有地方用jQuery替换$。

您提供的代码适用于Chrome和Firefox。

$未定义。我究竟做错了什么？

3 个答案: