}
</style>
<div id="pannel">
</div>
<select name="" id="palSize">
<option value="10">10*10</option>
<option value="20">20*20</option>
<option value="40">30*30</option>
</select>
<select name="" id="palSpeed">
<option value="500">速度-慢</option>
<option value="250">速度-正常</option>
<option value="100">速度-快</option>
</select>
<button id="startBtn">开始</button>
pannel就是我们的幕布，我们在这个里面用td标签来画上一个个的“像素点”。我们用两种样式来表现不同的对象，.body表示蛇的身体的样式，.food表示食物的样式。
var settings = {
// pannel面板的长度
pannelSize: 10,
// 贪吃蛇移动的速度
speed: 500,
// 贪吃蛇工作线程
workThread: null,
};
function setPannel(size){
var content = [];
content.push('<table>');
for(let i=0;i<size;i++){
content.push('<tr>');
for(let j=0;j<size;j++){
content.push('<td class="td_'+i+'_'+j+'"></td>');
}
content.push('</tr>');
}
content.push('</table>');
$('#pannel').html(content.join(''));
}
setPannel(settings.pannelSize);我们定义了一个全局的settings用来存放全局性的变量，比如幕布的大小、蛇移动的速度和工作的线程。然后通过一个函数把幕布画了出来，最后的效果就是这样：
方向和定位
既然我们的“舞台”已经搭建完了，怎么来定义我们“演员”的位置和移动的方向呢。首先定义一个全局的方向变量，对应的数值就是我们的上下左右方向键所代表的keyCode。
var Direction = {
UP: 38,
DOWN: 40,
LEFT: 37,
RIGHT: 39,
};我们在上面画幕布的时候通过两次遍历画出了一个类似于中学里学的坐标系，有X轴和Y轴。如果每次都用{x:x,y:y}来表示会很（mei）麻（bi）烦（ge），我们可以定义一个坐标点对象。
function Position(x,y){
// 距离X轴长度，取值范围0~pannelSize-1
this.X = x || 0;
// 距离Y轴长度，取值范围0~pannelSize-1
this.Y = y || 0;
}副咖–食物
既然定义好了坐标点对象，那么可以先来看一下简单的对象，就是我们的食物（Food）对象，上面说了，它有一个重要的属性就是它的坐标点。
function Food(){
this.pos = null;
