jQuery貪吃蛇HTML游戲是一款非常有趣的游戲，它采用了jQuery技術來實現游戲的基本功能。

第一步：準備工作
//HTML代碼
<canvas id="canvas" width="500" height="500"></canvas>
//JS代碼
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var snake_arr=[];//存放貪吃蛇身體
var lx=10;
var ly=0;
var x=100;
var y=100;
var timer;
var snake_length=3;//初始化貪吃蛇長度為3
第二步：繪制貪吃蛇
function drawSnake(arr){
for(let i=0;i<arr.length;i++){
ctx.fillStyle="#000";
ctx.fillRect(arr[i].x,arr[i].y,10,10);//繪制蛇身體
}
}
第三步：實現貪吃蛇移動
function move_snake(){
x+=lx;
y+=ly;
if(x>490||x<0||y>490||y<0){//判斷是否撞墻
alert("游戲結束！");
clearInterval(timer);
return;
}
let head={
x:x,
y:y
}
snake_arr.push(head);//加入新的蛇頭
if(snake_arr.length>snake_length){//控制蛇長度
snake_arr.shift();
}
ctx.clearRect(0,0,500,500);//清空畫布
drawSnake(snake_arr);//重新繪制貪吃蛇
}
第四步：綁定鍵盤事件，控制貪吃蛇移動方向
$(document).keydown(function(event){
switch(event.keyCode){
case 37://左
if(lx!=10){
lx=-10;
ly=0;
}
break;
case 38://上
if(ly!=10){
lx=0;
ly=-10;
}
break;
case 39://右
if(lx!=-10){
lx=10;
ly=0;
}
break;
case 40://下
if(ly!=-10){
lx=0;
ly=10;
}
break;
default:
break;
}
})
第五步：添加食物
function addFood(){
ctx.fillStyle="#ff0000";
var x=Math.floor(Math.random()*49)*10;
var y=Math.floor(Math.random()*49)*10;
ctx.fillRect(x,y,10,10);//繪制食物
if(x==snake_arr[snake_arr.length-1].x&&y==snake_arr[snake_arr.length-1].y){//判斷是否吃到食物
snake_length++;
}else{
setTimeout(function(){
ctx.clearRect(x,y,10,10);//清空畫布
addFood();//重新生成食物
},1000)
}
}

以上就是jQuery貪吃蛇HTML游戲的基本代碼，希望大家都能在游戲中找到樂趣！