我的编程空间,编程开发者的网络收藏夹
学习永远不晚

HTML5怎么实现贪吃蛇游戏

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

HTML5怎么实现贪吃蛇游戏

本篇内容主要讲解“HTML5怎么实现贪吃蛇游戏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“HTML5怎么实现贪吃蛇游戏”吧!

HTML5怎么实现贪吃蛇游戏 
游戏操作说明

通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。

游戏具体实现

游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制

每个方块的移动呢?

如果观察蛇的移动,可以发现,从蛇的头部到尾部,每个方块在下一时刻的位置就是它的前一个方块在当前时刻

的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。

另外一个值得注意的问题是

贪吃蛇吃下食物之后,新增加的方块应该放在哪个位置。

答案就是在下一时刻,新增加的方块应该出现在当前时刻的尾部位置。

因此,在吃下食物之后应该在更新蛇的每个位置之前,增加一个方块,并且将其位置设定在当前时刻的尾部位置。

然后在当前时刻更新出了新增方块之外的所有方块的位置

index.html
HTML5怎么实现贪吃蛇游戏 
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.class="lazy" data-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怎么实现贪吃蛇游戏”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

HTML5怎么实现贪吃蛇游戏

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

如何实现 Java 贪吃蛇游戏?(java贪吃蛇游戏怎么实现)

在Java编程中,实现一个贪吃蛇游戏是一个很有趣且具有挑战性的项目。下面将详细介绍如何实现Java贪吃蛇游戏,希望能帮助到你。一、游戏准备游戏界面:
如何实现 Java 贪吃蛇游戏?(java贪吃蛇游戏怎么实现)
java贪吃蛇2024-12-22

python怎么实现贪吃蛇游戏

要实现贪吃蛇游戏,可以使用Python中的pygame库来进行游戏界面的绘制和键盘事件的监听。以下是一个简单的贪吃蛇游戏的示例代码:```pythonimport pygameimport random# 游戏界面的宽度和高度WIDTH =
2023-08-09

Java实现贪吃蛇游戏

下面是一个简单的Java实现贪吃蛇游戏的示例代码:```javaimport javax.swing.*;import java.awt.*;import java.awt.event.KeyEvent;import java.awt.ev
2023-08-09

怎么用JS实现贪吃蛇游戏

本文小编为大家详细介绍“怎么用JS实现贪吃蛇游戏”,内容详细,步骤清晰,细节处理妥当,希望这篇“怎么用JS实现贪吃蛇游戏”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。效果图:完整代码如下:html:
2023-07-02

Matlab怎么实现贪吃蛇小游戏

小编给大家分享一下Matlab怎么实现贪吃蛇小游戏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!补动图:没错这就有点类似贪吃蛇大作战里的蛇啦然后做出的改进包括:在
2023-06-29

怎么用C++实现贪吃蛇游戏

这篇文章给大家分享的是有关怎么用C++实现贪吃蛇游戏的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1976年,Gremlin平台推出了一款经典街机游戏Blockade。游戏中,两名玩家分别控制一个角色在屏幕上移动
2023-06-25

Python turtle实现贪吃蛇游戏

本文实例为大家分享了Python turtle实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下# Simple Snake Game in Python 3 for Beginnersimport turtle import time i
2022-06-02

编程热搜

目录