贪吃蛇游戏实现思路及源代码.docVIP

HTML5 贪吃蛇游戏实现思路及源代码点评：游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制，下面为大家简要介绍下具体的实现，感兴趣的朋友可以参考下，希望对大家有所帮助游戏操作说明 通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。 游戏具体实现 游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制 每个方块的移动呢？ 如果观察蛇的移动，可以发现，从蛇的头部到尾部，每个方块在下一时刻的位置就是它的前一个方块在当前时刻 的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。 另外一个值得注意的问题是 贪吃蛇吃下食物之后，新增加的方块应该放在哪个位置。 答案就是在下一时刻，新增加的方块应该出现在当前时刻的尾部位置。 因此，在吃下食物之后应该在更新蛇的每个位置之前，增加一个方块，并且将其位置设定在当前时刻的尾部位置。 然后在当前时刻更新出了新增方块之外的所有方块的位置 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