<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>貪喫蛇</title>
<style type="text/css">
*
{
margin: 0px;
padding: 0px;
}
.food
{
background-color: green;
}
.snake
{
background-color: red;
}
</style>
<script type="text/javascript">
/*
1.創建遊戲地圖
2.創建食物的位置
3.創建一節蛇的位置
4.開始運行
5.重新開始遊戲
6.鍵盤方向鍵的監聽
7.蛇的運動製作
8.蛇前面是什麼？
*/
var num = 15; //地圖由一個一個的15*15的方塊組成
var rows = 30; //每行30個小方塊
var cols = 20; //每列20個小方塊
var borderwidth = 5; //地圖的邊框寬度
var map = []; //地圖爲一個二維數組
var mainMap; //地圖的id
var sx = 0, sy = 0; //蛇的位置，即在第幾個方塊位置
var alldiv; //所有蛇即地圖裏的所有div
var allspan; //所有食物即地圖裏的所有span
var times = 200; //定時器時間
//創建一個地圖
function createMap() {
var bgwidth = 2 * borderwidth + num * rows; //地圖的寬度
var bgheight = 2 * borderwidth + num * cols; //地圖的高度
//地圖的位置,處於文檔中的正中央
var left = (document.documentElement.clientWidth - bgwidth) / 2;
var top = (document.documentElement.clientHeight - bgheight) / 2;
document.body.innerHTML = "<div id='mainMap' style='position:absolute;left:" + left + "px;top:" + top + "px;width:" + bgwidth + "px;height:" + bgheight + "px;border-width:" + borderwidth + "px;border-color:blue;border-style:solid'></div>";
//地圖默認每個位置都是0即空白
for (var x = 0; x < rows; x++) {
map[x] = [];
for (var y = 0; y < cols; y++) {
map[x][y] = 0;
}
}
//在地圖上創建一個食物
createFood();
//蛇只有第一次進入地圖時是隨機，之後其位置不能隨機
sx = parseInt(Math.random() * rows);
sy = parseInt(Math.random() * cols);
if (map[sx][sy] == 0) {
//創建蛇，必須保證初始化時“蛇”與“食物”的位置不重疊
createSnake();
} else {
createMap();
}
//獲得地圖下所有的div即蛇(mainMap在創建食物時已定義)
alldiv = mainMap.getElementsByTagName("div");
//獲得地圖下所有的span即食物
allspan = mainMap.getElementsByTagName("span");
}
//創建食物
function createFood() {
//食物隨機產生的位置，不能超出地圖
var fx = parseInt(Math.random() * rows);
var fy = parseInt(Math.random() * cols);
var left = fx * num;
var top = fy * num;
//食物的定位在地圖中
mainMap = document.getElementById("mainMap");
//如果在地圖上是空地時才能放食物
if (map[fx][fy] == 0) {
mainMap.innerHTML += "<span style='position:absolute;left:" + left + "px;top:" + top + "px;width:" + num + "px;height:" + num + "px; overflow:hidden; display:block;' class='food'></span>";
//放有食物的位置標記爲f
map[fx][fy] = "f";
}
else {
createFood(); //即遇到創建的位置不是空白時，再重新創建一下食物的位置，直到找到空白位置創建食物後此方法結束
}
}
//創建蛇
function createSnake() {
var left = sx * num;
var top = sy * num;
//蛇也必須在地圖中,食物已有，這裏注意內容必須是+=，否則食物將被覆蓋,自定義x,y保存蛇當前的位置
mainMap.innerHTML += "<div x='" + sx + "' y='" + sy + "' style='position:absolute;left:" + left + "px;top:" + top + "px;width:" + num + "px;height:" + num + "px; overflow:hidden;' class='snake'></div>";
map[sx][sy] = "s"; //把蛇的位置標記爲s
}
//鍵盤監聽
document.onkeydown = function () {
var keyCode;
if (window.navigator.appName.indexOf("Microsoft Internet Explorer") > -1) {
keyCode = window.event.keyCode;
}
else {
keyCode = arguments[0].keyCode;
}
switch (keyCode) {
case 65: //左a
dir(-1, 0);
break;
case 87: //上w
dir(0, -1);
break;
case 68: //右d
dir(1, 0);
break;
case 83: //下s
dir(0, 1);
break;
}
}
var flag = 0; //標記位
//蛇移動方向
var gox, goy;
function dir(x, y) {
gox = x;
goy = y;
if (flag == 0) {
speedUp(); //遊戲開始，就開始提速
flag = 1;
move(); //蛇移動
}
}
//蛇移動，移動時必須判斷蛇前面是什麼，食物、牆、自己、空白
function move() {
sx += gox;
sy += goy;
if (sx < 0 || sy < 0 || sx >= rows || sy >= cols) {
restartGame(); //越界
} else {
snakeFront = map[sx][sy]; //蛇的前方元素
if (snakeFront == 0) {
moveToblank(); //蛇前面是空白
}
else if (snakeFront == "f") {
//食物
eatFood();
}
else {
restartGame(); //撞到自己
}
}
}
//蛇前面是空白時
function moveToblank() {
map[parseInt(alldiv[0].getAttribute("x"))][parseInt(alldiv[0].getAttribute("y"))] = 0;
//兼容IE和FF
if (window.navigator.appName.indexOf("Microsoft Internet Explorer") > -1) {
alldiv[0].removeNode(true);
} else {
alldiv[0].parentNode.removeChild(alldiv[0]);
}
createSnake();
//自動走
autoWalk();
}
//蛇前面是食物時
function eatFood() {
createSnake(); //創建一個新div，即蛇增長
if (window.navigator.appName.indexOf("Microsoft Internet Explorer") > -1) {
allspan[0].removeNode(true);
} else {
allspan[0].parentNode.removeChild(allspan[0]);
}
createFood(); //創建一個新食物
autoWalk();
}
//自動走
function autoWalk() {
setTimeout("move()", times);
}
//蛇提速，每隔5秒提速一次
function speedUp() {
times -= 5;
if (times > 5) {
//不能減到0
setTimeout("speedUp()", 5000);
}
}
//重新開始遊戲
function restartGame() {
if (confirm("GAME OVER，重新開始？")) {
window.location.reload(); //重新加載一下
}
}
//文檔加載完成後創建地圖
window.onload = createMap;
</script>
</head>
<body>
</body>
</html>諾基亞遊戲——貪喫蛇
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章