通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。
游戏具体实现
游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制
每个方块的移动呢？
如果观察蛇的移动，可以发现，从蛇的头部到尾部，每个方块在下一时刻的位置就是它的前一个方块在当前时刻
的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。
另外一个值得注意的问题是
贪吃蛇吃下食物之后，新增加的方块应该放在哪个位置。
答案就是在下一时刻，新增加的方块应该出现在当前时刻的尾部位置。
因此，在吃下食物之后应该在更新蛇的每个位置之前，增加一个方块，并且将其位置设定在当前时刻的尾部位置。
然后在当前时刻更新出了新增方块之外的所有方块的位置
index.html
snake.js
代码如下:
var canvas; var ctx; var timer; //measures var x_cnt = 15; var y_cnt = 15; var unit = 48; var box_x = 0; var box_y = 0; var box_width = 15 * unit; var box_height = 15 * unit; var bound_left = box_x; var bound_right = box_x + box_width; var bound_up = box_y; var bound_down = box_y + box_height; //images var image_sprite; //objects var snake; var food; var food_x; var food_y; //functions function role(sx, sy, sw, sh, direction, status, speed, image, flag) { this.x = sx; this.y = sy; this.w = sw; this.h = sh; this.direction = direction; this.status = status; this.speed = speed; this.image = image; this.flag = flag; } function transfer(keycode) { switch (keycode) { case 37: return 1; case 38: return 3; case 39: return 2; case 40: return 0; } } function addfood() { //food_x=box_x+math.floor(math.random()*(box_width-unit)); //food_y=box_y+math.floor(math.random()*(box_height-unit)); food_x = unit * math.floor(math.random() * x_cnt); food_y = unit * math.floor(math.random() * y_cnt); food = new role(food_x, food_y, unit, unit, 0, 0, 0, image_sprite, true); } function play(event) { var keycode; if (event == null) { keycode = window.event.keycode; window.event.preventdefault(); } else { keycode = event.keycode; event.preventdefault(); } var cur_direction = transfer(keycode); snake[0].direction = cur_direction; } function update() { //add a new part to the snake before move the snake if (snake[0].x == food.x && snake[0].y == food.y) { var length = snake.length; var tail_x = snake[length - 1].x; var tail_y = snake[length - 1].y; var tail = new role(tail_x, tail_y, unit, unit, snake[length - 1].direction, 0, 0, image_sprite, true); snake.push(tail); addfood(); } //modify attributes //move the head switch (snake[0].direction) { case 0: //down snake[0].y += unit; if (snake[0].y > bound_down - unit) snake[0].y = bound_down - unit; break; case 1: //left snake[0].x -= unit; if (snake[0].x < bound_left) snake[0].x = bound_left; break; case 2: //right snake[0].x += unit; if (snake[0].x > bound_right - unit) snake[0].x = bound_right - unit; break; case 3: //up snake[0].y -= unit; if (snake[0].y < bound_up) snake[0].y = bound_up; break; } //move other part of the snake for (var i = snake.length - 1; i >= 0; i--) { if (i > 0) //snake[i].direction=snake[i-1].direction; { snake[i].x = snake[i - 1].x; snake[i].y = snake[i - 1].y; } } } function drawscene() { ctx.clearrect(box_x, box_y, box_width, box_height); ctx.strokestyle = "rgb(0,0,0"; ctx.strokerect(box_x, box_y, box_width, box_height); //detection collisions //draw images for (var i = 0; i < snake.length; i++) { ctx.drawimage(image_sprite, snake[i].x, snake[i].y); } ctx.drawimage(image_sprite, food.x, food.y); } function init() { canvas = document.getelementbyid("scene"); ctx = canvas.getcontext('2d'); //images image_sprite = new image(); image_sprite.src = "images/sprite.png"; image_sprite.onload = function () {} //ojects snake = new array(); var head = new role(0 * unit, 0 * unit, unit, unit, 5, 0, 1, image_sprite, true); snake.push(head); window.addeventlistener('keydown', play, false); addfood(); setinterval(update, 300); //note setinterval(drawscene, 30); }