最简单的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小游戏--贪吃蛇
贪吃蛇游戏:是一条蛇在封闭围墙里,围墙里随机出现一个食物,通过按键盘四个光标键控制蛇向上下左右四个方向移动,蛇头撞倒食物,则食物被吃掉,蛇身体长一节,接着又出现食物,等待蛇来吃,如果蛇在移动中撞到墙或 ...
随机推荐
- http状态码304
服务器对客户端返回HTTP/1.1 304 意思是服务端告诉客户端 我的的缓存没有改变你不需要来取了,就用你自己本地的吧! 浏览器的三种缓存协商机制: if-modified-since (基于最后 ...
- js函数参数理解
eg: function setName(obj){ obj.name = "Nicholas"; obj = new Object(); obj.name = "Gre ...
- Dropout 上
From <白话深度学习与TensorFlow> Dropout 顾名思义是“丢弃”,在一轮训练阶段丢弃一部分网络节点,比如可以在其中的某些层上临时关闭一些节点,让他们既不输入也不输出,这 ...
- 运维派 企业面试题6 防dos攻击
Linux运维必会的实战编程笔试题(19题) 企业实战题6:请用至少两种方法实现! 写一个脚本解决DOS攻击生产案例 提示:根据web日志或者或者网络连接数,监控当某个IP并发连接数或者短时内PV达到 ...
- 在 android studio 中更新安卓应用版本号
随着应用程序不断修改,版本号也应当变化.要更新安卓应用的版本号,只需要在 build.gradle(module:app) 中修改 versionCode 和 versionName 即可,也可以只改 ...
- 【jQuery04】折叠树
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- pytorch 2 variable 变量
import torch from torch.autograd import Variable tensor = torch.FloatTensor([[1, 2], [3, 4]]) variab ...
- [luogu]P4312 [COCI 2009] OTOCI / 极地旅行社（LCT）
P4312 [COCI 2009] OTOCI / 极地旅行社 题目描述 不久之前,Mirko建立了一个旅行社,名叫"极地之梦".这家旅行社在北极附近购买了N座冰岛,并且提供观光服 ...
- Qt之OpenSSL
简述 OpenSSL是一个强大的安全套接字层密码库,囊括主要的密码算法.常用的密钥和证书封装管理功能及SSL协议,并提供丰富的应用程序供测试或其它目的使用. 简述 下载安装 使用 更多参考 下载安装 ...
- 养活一款APP要“烧”多少钱？
Duang!又一款APP刷爆朋友圈.大片范儿的电影截图.意味深长的经典对白均出自一款名为“足记”的APP. 足记团队刚于去年8月完成天使期融资,投资方是光速创投和紫辉创投,目前正准备A轮融资.且近一周 ...