最简单的HTML5游戏——贪吃蛇
<html>
<head>
<meta charset="UTF-8"/>
<title>贪吃蛇</title>
</head>
<body>
<canvas id="canvas" width="1000" height="700"></canvas>
<div>
<input id="switch" type="button" value="開始" onclick="clickSwitch()"></input><br/>
<input id="content" type="text" value="0"></input>
</div>
</body>
<script type="text/javascript">
const WIDTH = 1000;
const HEIGHT = 700;
const SNACK_WIDTH = 20;
const SNACK_HEIGHT = 20;
//移动时间间隔
const TIME_MOVE = 300;
//食物刷新时间
const TIME_FOOD = 5000;
//食物总量
const TOTAL_FOOD = 200;
//石头刷新时间
const TIME_STONE = 8000;
//石头总量
const TOTAL_STONE = 300;
var switchStatus = 0;
var changeMove = "right";
var currentMove = "right";
//全部被用的位置
var points = new Array();
var snacks = new Array();
var foods = new Array();
var stones = new Array();
var moveing = false;
var timeMoveId, timeFoodId, timeStoneId;
window.onload = function () {
createGround();
};
//捕获按的哪个键
function keyDown(event) {
if (event.keyCode == "87") {
//按下W键
changeMove = "up";
} else if (event.keyCode == "68") {
//按下D键
changeMove = "right";
} else if (event.keyCode == "83") {
//按下S键
changeMove = "down";
} else if (event.keyCode == "65") {
//按下A键
changeMove = "left";
}
}
function handlePoints(x, y, type) {
if (0 == type) {
points.push(x+y*WIDTH);
} else {
var index = points.indexOf(x+y*WIDTH);
if (index != -1) {
points.splice(index, 1);
}
}
}
//贪吃蛇
function snack(x, y) {
this.x = x;
this.y = y;
}
//食物
function food(x, y) {
this.x = x;
this.y = y;
}
//石头
function stone(x, y) {
this.x = x;
this.y = y;
}
//开关操作
function clickSwitch() {
if (switchStatus == 0 || switchStatus == 2) {
document.getElementById("switch").value = "暂停";
if (switchStatus == 0) {
//開始
play();
}
switchStatus = 1;
} else if (switchStatus == 1) {
document.getElementById("switch").value = "继续";
switchStatus = 2;
}
}
//碰撞判定并操作
function judge(x, y) {
/*** 推断是否撞上边界 ***/
if (x < 0 || x >= WIDTH || y < 0 || y >= HEIGHT) {
end();
return;
}
var i;
/*** 推断是否撞上自己 ***/
for (i = 1; i < snacks.length; i++) {
if (snacks[0].x == snacks[i].x && snacks[0].y == snacks[i].y) {
end();
return;
}
}
/*** 推断是否撞上石头 ***/
for (i = 0; i < stones.length; i++) {
if (snacks[0].x == stones[i].x && snacks[0].y == stones[i].y) {
end();
return;
}
}
/*** 推断是否撞上食物 ***/
var flag = false;
for (i = 0; i < foods.length; i++) {
if (x == foods[i].x && y == foods[i].y) {
flag = true;
foods.splice(i, 1);
}
}
var newSnack = new snack(x, y);
snacks.unshift(newSnack);
if (!flag) {
var p = snacks.pop();
handlePoints(p.x, p.y, 1);
}
document.getElementById("content").value = "x:"+snacks[0].x+" y:"+snacks[0].y+" length:"+snacks.length;
refresh();
}
//移动贪吃蛇
function move() {
if(moveing == false && switchStatus == 1) {
moveing = true;
if ((currentMove != "right" && changeMove == "left") || (currentMove == "left" && changeMove == "right")) {
currentMove = "left";
judge(snacks[0].x-SNACK_WIDTH, snacks[0].y);
} else if ((currentMove != "down" && changeMove == "up") || (currentMove == "up" && changeMove == "down")) {
currentMove = "up";
judge(snacks[0].x, snacks[0].y-SNACK_HEIGHT);
} else if ((currentMove != "left" && changeMove == "right") || (currentMove == "right" && changeMove == "left")) {
currentMove = "right";
judge(snacks[0].x+SNACK_WIDTH, snacks[0].y);
} else if ((currentMove != "up" && changeMove == "down") || (currentMove == "down" && changeMove == "up")){
currentMove = "down";
judge(snacks[0].x, snacks[0].y+SNACK_HEIGHT);
}
changMove = currentMove;
}
moveing = false;
}
//创建地图
function createGround() {
var canvas = document.getElementById("canvas");
var draw = canvas.getContext('2d');
//清除原图形
draw.clearRect(0, 0, WIDTH, HEIGHT);
draw.strokeStyle = "red";
draw.strokeRect(0, 0, WIDTH, HEIGHT);
}
//创建食物
function createFood() {
if (foods.length < TOTAL_FOOD) {
var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
if (points.indexOf(x+y*WIDTH) == -1) {
var newFood = new food(x, y);
//alert(newFood.x + "****" + newFood.y);
var canvas = document.getElementById("canvas");
var draw = canvas.getContext('2d');
draw.fillStyle = "green";
draw.fillRect(x, y, SNACK_WIDTH, SNACK_HEIGHT);
foods.push(newFood);
handlePoints(x, y, 0);
}
}
}
//创建石头
function createStone() {
if (stones.length < TOTAL_STONE) {
var x = Math.round(Math.random()*(WIDTH/SNACK_WIDTH-1))*SNACK_WIDTH;
var y = Math.round(Math.random()*(HEIGHT/SNACK_HEIGHT-1))*SNACK_HEIGHT;
if (points.indexOf(x+y*WIDTH) == -1) {
var newStone = new stone(x, y);
var canvas = document.getElementById("canvas");
var draw = canvas.getContext('2d');
draw.fillStyle = "#663300";
draw.beginPath();
draw.arc(x+SNACK_WIDTH*0.5, y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);
draw.closePath();
draw.fill();
stones.push(newStone);
handlePoints(x, y, 0);
}
}
}
//刷新场景
function refresh() {
var canvas = document.getElementById("canvas");
var draw = canvas.getContext('2d');
//清除原图形
draw.clearRect(1, 1, WIDTH-2, HEIGHT-2);
/*** 边界 ***/
draw.strokeStyle = "red";
draw.strokeRect(0, 0, WIDTH, HEIGHT);
var i;
/*** 食物 ***/
draw.fillStyle = "green";
for (i = 0; i < foods.length; i++) {
draw.fillRect(foods[i].x, foods[i].y, SNACK_WIDTH, SNACK_HEIGHT);
}
/*** 石头 ***/
draw.fillStyle = "#663300";
for (i = 0; i < stones.length; i++) {
draw.beginPath();
draw.arc(stones[i].x+SNACK_WIDTH*0.5, stones[i].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);
draw.closePath();
draw.fill();
}
/*** 贪吃蛇 ***/
draw.fillStyle = "blue";
draw.beginPath();
//圆心x坐标|圆心y坐标|半径|始|PI为圆周率。Math.PI*2为画圆|true为时针方向：逆时针，0为顺时针
draw.arc(snacks[0].x+SNACK_WIDTH*0.5, snacks[0].y+SNACK_HEIGHT*0.5, SNACK_WIDTH*0.5+1, 0, Math.PI*2, true);
draw.closePath();
draw.fill();
for (i = 1; i < snacks.length; i++) {
draw.fillRect(snacks[i].x, snacks[i].y, SNACK_WIDTH, SNACK_HEIGHT);
}
}
//游戏開始
function play() {
createGround();
for (var i = 2; i > 0; i--) {
var newSnack = new snack(SNACK_WIDTH*i, SNACK_HEIGHT);
snacks.push(newSnack);
handlePoints(newSnack.x, newSnack.y, 0);
}
refresh();
document.onkeydown = keyDown;
timeMoveId = setInterval(move, TIME_MOVE);
timeFoodId = setInterval(createFood, TIME_FOOD);
timeStoneId = setInterval(createStone, TIME_STONE);
}
//游戏结束
function end() {
clearInterval(timeMoveId);
clearInterval(timeFoodId);
clearInterval(timeStoneId);
switchStatus = 0;
changeMove = "right";
currentMove = "right";
points.length = 0;
snacks.length = 0;
foods.length = 0;
stones.length = 0;
moveing = false;
document.getElementById("switch").value = "開始";
document.getElementById("content").value = "游戏结束";
alert("游戏结束");
}
</script>
</html>
最简单的HTML5游戏——贪吃蛇的更多相关文章
- 使用JavaScript实现简单的小游戏-贪吃蛇
最近初学JavaScript,在这里分享贪吃蛇小游戏的实现过程, 希望能看到的前辈们能指出这个程序的不足之处. 大致思路 首先要解决的问题 随着蛇头的前进,尾巴也要前进. 用键盘控制蛇的运动方向. 初 ...
- Unity3D_(游戏)贪吃蛇
Unity制作贪吃蛇小游戏 玩家通过“WASD”控制小蛇上下左右移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或身体交叉蛇头撞倒自己身体游戏结束 可通 ...
- Java经典小游戏——贪吃蛇简单实现（附源码）
一.使用知识 Jframe GUI 双向链表 线程 二.使用工具 IntelliJ IDEA jdk 1.8 三.开发过程 3.1素材准备 首先在开发之前应该准备一些素材,已备用,我主要找了一个图片以 ...
- 用Canvas制作小游戏——贪吃蛇
今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不 ...
- Unity 3D游戏-贪吃蛇类游戏源码：重要方法和功能的实现
贪吃蛇类游戏源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 头部移动方式 2 生成 Shit 道具 ...
- c++小游戏——贪吃蛇
#include #include #include #include #include <conio.h> #include #include <windows.h> usi ...
- 手把手教学h5小游戏 - 贪吃蛇
简单的小游戏制作,代码量只有两三百行.游戏可自行扩展延申. 源码已发布至github,喜欢的点个小星星,源码入口:game-snake 游戏已发布,游戏入口:http://snake.game.yan ...
- Win32小游戏--贪吃蛇
近日里学习了关于win32编程的相关知识,利用这些知识制作了一款贪吃蛇小游戏,具体细节还是分模块来叙述 前期准备:在网上找到一些贪吃蛇的游戏素材图片,以及具体的逻辑框图 在正式写功能之前,先把一系列环 ...
- Java_GUI小游戏--贪吃蛇
贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...
随机推荐
- input[type="file"]的图片预览
在项目中遇到用input标签file类型的文件上传,想实在上传之前进行图片的预览功能:之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上,这样就不太好,因为用户基本信息可能并没有保存,但 ...
- 如何取未知Json字符串 某个主键取对应的Value
需添加引用using Newtonsoft.Json; string strJon "Json 字符串"; JObject obj = JObject.Parse(strJon ...
- 设置div内的内容不能被选中
通过简单的css设置页面的文字无法被选定. <div class="select">我不能被选中复制</div> .select{ -webkit-user ...
- 利用MFC创建窗口、消息映射、window中的字节
利用MFC创建窗口: 1.mfc的头文件:afxwin.h 2.自定义类,继承于CWinApp,应用程序类(app应用程序对象,有且仅有一个) 3.程序入口:Initinstance 4.在程序入口中 ...
- [HNOI2004]打砖块（敲砖块）
题目:codevs1257.洛谷P1437 题目大意:有一些砖块呈倒三角形状,每块砖敲掉后有一个分数.除第一行外,敲掉一块砖必须先把上面两块砖敲掉.现在你能敲m块砖,求能得到的最大分数. 解题思路:此 ...
- 2015 Multi-University Training Contest 3 hdu 5317 RGCDQ
RGCDQ Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- Android蓝牙技术Bluetooth使用流程（具体解释）
一:蓝牙设备之间的通信主要包含了四个步骤 设置蓝牙设备 寻找局域网内可能或者匹配的设备 连接设备 设备之间的传输数据 二:详细编程实现 1. 启动蓝牙功能 首先通过调用静态方法getDefaultAd ...
- package & import
/* * package:声明源文件所在的包,写在程序的第一行. * 每“.”一次,表示一层文件目录. * 包名都要小写. * * import: * 1)显式导入指定包下的类或接口 * 2)写在包的 ...
- java9新特性-9-语法改进：try语句
1. 使用举例 在java8 之前,我们习惯于这样处理资源的关闭: java 8 中,可以实现资源的自动关闭,但是要求执行后必须关闭的所有资源必须在try子句中初始化,否则编译不通过.如下例所 ...
- 集合 List和Set
分别向Set集合以及List集合中添加“A”,“a”,“c”,“C”,“a”5个元素,观察重复值“a”能否在List集合以及Set集合中成功添加. List<String> ls=new ...