HTML5 贪吃蛇游戏实现思路及源代码_html5教程技巧
程序员文章站
2022-03-17 11:20:56
...
游戏操作说明
通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。
游戏具体实现
游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制
每个方块的移动呢?
如果观察蛇的移动,可以发现,从蛇的头部到尾部,每个方块在下一时刻的位置就是它的前一个方块在当前时刻
的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。
另外一个值得注意的问题是
贪吃蛇吃下食物之后,新增加的方块应该放在哪个位置。
答案就是在下一时刻,新增加的方块应该出现在当前时刻的尾部位置。
因此,在吃下食物之后应该在更新蛇的每个位置之前,增加一个方块,并且将其位置设定在当前时刻的尾部位置。
然后在当前时刻更新出了新增方块之外的所有方块的位置
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); }
推荐阅读
-
HTML5 贪吃蛇游戏实现思路及源代码
-
html5实现微信打飞机游戏_html5教程技巧
-
HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧
-
html5贪吃蛇游戏使用63行代码完美实现_html5教程技巧
-
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法_html5教程技巧
-
HTML5+JS实现俄罗斯方块原理及具体步骤_html5教程技巧
-
html5实现微信打飞机游戏_html5教程技巧
-
HTML5实现简单图片上传所遇到的问题及解决办法 _html5教程技巧
-
html5贪吃蛇游戏使用63行代码完美实现_html5教程技巧
-
Data URI scheme详解和使用实例及图片base64编码实现方法_html5教程技巧