html游戏源妈简单,最简单的HTML5游戏——贪吃蛇

贪吃蛇

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("游戏结束");

}