最简单的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小游戏--贪吃蛇
贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...
随机推荐
- gcd的queue与group
queue相当于事件处理机制里的事件池:只是任务池: 线程作为事件处理的实施者,由线程池从任务池中获取任务进行调度派发: group相当与工作组,按照任务的相关性对任务进行组织.
- SQL 自动记录存储过程，表，函数的创建修改和删除 -相当于SVN一样
在项目开发过程中,项目管理者通常都很希望对项目的开发进展有一个日志的记录.代码的记录和管理可以通过TFS或者VSS等工具去管理.但是数据库却没有记录开发日志这一功能.这在实际开发中很不方便, ...
- LeetCode Golang实现 1. 两数之和
1. 两数之和 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标. 你可以假设每种输入只会对应一个答案.但是,你不能重复利用这 ...
- H5教程：移动页面性能优化
随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情. 首先,为什么要最移动页面进行优化? 纵观目前移动网络的现状,移动页面布局越来越复杂,效果越来越炫,直接导致了文件越 ...
- How Javascript works (Javascript工作原理) (八) WebAssembly 对比 JavaScript 及其使用场景
个人总结: webworker有以下三种: Dedicated Workers 由主进程实例化并且只能与之进行通信 Shared Workers 可以被运行在同源的所有进程访问(不同的浏览的选项卡,内 ...
- CF915F Imbalance Value of a Tree (并查集)
题目大意:给你一棵树,每个点有点权a_{i},求$\sum _{i=1}^{n} \sum _{j=i}^{n} f(i,j)$,$f(i,j)$表示i,j,路径上的点的最大权值-最小权值 正解的思路 ...
- 推荐学习《组织与管理研究的实证方法(第2版)》中文PDF
在写文章论文时,会涉及到观点论证,需要掌握一些实证方法. 建议学习<组织与管理研究的实证方法(第2版)>,对管理研究中涉及的方法进行了介绍,例如实验室研究,二手数据的研究,实地研究等,这对 ...
- Mysql学习总结（21）——MySQL数据库常见面试题
1. 如何使用SELECT语句找到你正在运行的服务器的版本并打印出当前数据库的名称? 答:下面的语句的结果会显示服务器的版本和当前的数据库名称 mysql> SELECT VERSION(), ...
- [terry笔记]11gR2_DataGuard搭建_primary零停机
11gR2搭建dataguard环境,此篇文章是利用rman搭建dataguard,这样的好处是primary不用停机,当然,前提条件是primary已经开启归档. 相对于可以停机,零停机传送数据文件 ...
- ASP.NET-ajax.acionlink使用
Ajax 属性的ActionLink方法可以创建一个具有异步行为的锚标签. ActionLink方法的第一个参数指定了链接文本,第二个参数是要异步调用的操作的名称.类似于同名的HTML辅助方法,AJA ...