贪吃蛇游戏实现思路及源代码.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); snake0.direction = cur_direction; function update() /add a new part to the snake before move the snake if (snake0.x = food.x & snake0.y = food.y) var length = snake.length; var tail_x = snakelength - 1.x; var tail_y = snakelength - 1.y; var tail = new Role(tail_x, tail_y, unit, unit, snakelength - 1.direction, 0, 0, image_sprite, true); snake.push(tail); addFood(); /modify attributes /move the head switch (snake0.direction) case 0: /down snake0.y += unit; if (snake0.y bound_down - unit) snake0.y = bound_down - unit; break; case 1: /left snake0.x -= unit; if (snake0.x bound_right - unit) snake0.x = bound_right - unit; break; case 3: /up snake0.y -= unit; if (snake0.y = 0; i-) if (i 0) /snakei.direction=snakei-1.direction; snakei.x = snakei - 1.x; snakei.y = snakei - 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, snakei.x, snakei.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,