最简单的HTML5游戏——贪吃蛇
2015-08-24 18:23
204 查看
<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>
<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新增语义结构元素：article section aside nav header hgroup footer time
- Html5制作工具对比
- 5 个强大的HTML5 API
- HTML5的链接
- Web 实时推送技术的总结
- 前端开发攻城师绝对不可忽视的五个HTML5新特性
- HTML5：绘制图形
- html5,cxt.arc(100,100,30,0,Math.PI*2,true);
- html5学习之路_003
- 9秒学院-html5游戏开发入门教程
- HTML5客户端数据存储
- 初学Html5的总结
- HTML5 本地裁剪图片
- IE低版本下实现html5的placeholder(表单提示)功能
- html5，html5教程
- html5实现图片任意拖放及本地图片拖放预览特效解析
- HTML5基础知识汇总_(1)标签结构上的整改
- HTML5基础知识汇总_(1)标签结构上的整改
- 9秒学院-html5游戏开发入门教程
- HTML5相关图书推荐