jquery贪吃蛇html

```html

```

我们将编写JavaScript代码来实现贪吃蛇游戏的逻辑，我们会使用jQuery来简化DOM操作和事件处理。

```javascript

$(document).ready(function() {

var canvas = $('#gameCanvas')[0];

var ctx = canvas.getContext('2d');

var snake = [{ x: 200, y: 200 }, { x: 190, y: 200 }, { x: 180, y: 200 }];

var food = { x: 50, y: 50 };

var dx = 10;

var dy = 0;

var score = 0;

var interval;

function draw() {

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i< snake.length; i++) {

ctx.fillStyle = (i === 0) ? 'green' : 'white';

ctx.fillRect(snake[i].x, snake[i].y, 10, 10);

}

ctx.fillStyle = 'red';

ctx.fillRect(food.x, food.y, 10, 10);

}

function gameLoop() {

for (var i = snake.length - 1; i > 0; i--) {

snake[i] = { x: snake[i - 1].x, y: snake[i - 1].y };

}

snake[0].x += dx;

snake[0].y += dy;

if (snake[0].x === food.x && snake[0].y === food.y) {

score++;

food = randomFood();

snake.push({ x: snake[snake.length - 1].x, y: snake[snake.length - 1].y });

}

alert('Game Over! Your score: ' + score);

clearInterval(interval);

}

draw();

}

function randomFood() {

return { x: Math.floor(Math.random() * 40) * 10, y: Math.floor(Math.random() * 40) * 10 };

}

function collision() {

for (var i = 4; i< snake.length; i++) {

if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) return true;

}

return false;

}

function changeDirection(event) {

switch (event.keyCode) {

case 37:

if (dx === 0) { dx = -10; dy = 0; }

break;

case 38:

if (dy === 0) { dx = 0; dy = -10; }

break;

case 39:

if (dx === 0) { dx = 10; dy = 0; }

break;

case 40:

if (dy === 0) { dx = 0; dy = 10; }

break;

}

}

$(document).keydown(changeDirection);

interval = setInterval(gameLoop, 100);

});

```

在这段代码中，我们定义了贪吃蛇的初始位置、食物的位置、贪吃蛇的移动方向以及游戏循环函数`gameLoop`，我们还添加了一个`changeDirection`函数来响应键盘事件，改变贪吃蛇的移动方向。

通过这段代码，我们就创建了一个基本的贪吃蛇游戏，玩家可以使用键盘的箭头键来控制贪吃蛇的移动方向，当贪吃蛇吃到食物时，它的长度会增加，同时分数也会增加，如果贪吃蛇撞到自己或者游戏边界，游戏就会结束，并显示玩家的得分。

这个简单的贪吃蛇游戏是一个很棒的编程练习，它可以帮助初学者理解游戏逻辑、事件处理和DOM操作，希望这个教程能够帮助你入门JavaScript和jQuery，开启你的编程之旅！