貪吃蛇

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 = "繼續(xù)";

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;

}

//創(chuàng)建地圖

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);

}

//創(chuàng)建食物

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);

}

}

}

//創(chuàng)建石頭

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("游戲結束");

}

總結

以上是生活随笔為你收集整理的html游戏源妈简单,最简单的HTML5游戏——贪吃蛇的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。