一个简单的javascript写的贪吃蛇游戏，不精致，但是可以玩。。。
哈哈。 我的记录是82。
代码:
DIRECTION = {
left : 37,
top : 38,
right : 39,
bottom : 40,
isAntiDirection : function(dir1, dir2) {
if (dir1 == dir2) {
return false;
} // same direction
return (dir1 + dir2) % 2 == 0;
}
}
var LAYOUT = {
span : 30,
cellWidth :14,
offset_y : 120,
offset_x : 0
};
/**
*
* @param {}
* span
* @param {}
* delay
*/
function Site(span, delay) {
this.span = span;
this.delay = delay;
this.cells = [];
this.targetCell = undefined;
// Add event listener for top/right/bottom/left key pressing ...
document.addEventListener("keypress", function(event) {
if (event.charCode == 119) {
if (site.delay > 20) {
site.delay = site.delay - 20;
window.clearInterval(oTimer);
// reset interval
oTimer = setInterval("site.snake.run()", site.delay);
}
} else if (event.charCode == 115) {
site.delay = site.delay + 20;
window.clearInterval(oTimer);
// reset interval
oTimer = setInterval("site.snake.run()", site.delay);
}else {
if (site && site.snake) {
site.snake.move(event.keyCode);
}
}
}, true);
}
Site.prototype = {
createSite : function(container) {
for (var i = 0; i < this.span; i++) {
this.cells[i] = [];
for (var j = 0; j < this.span; j++) {
var cell = document.createElement('div');
cell.id = "cell_" + j + "_" + i;
cell.className = "cell";
cell.cell_i = i;
cell.cell_j = j;
cell.style.left = LAYOUT.offset_x + LAYOUT.cellWidth * j;
cell.style.top = LAYOUT.offset_y + LAYOUT.cellWidth * i;
container.appendChild(cell);
this.cells[i][j] = cell;
}
}
},
clean : function() {
for (var i = 0; i < this.cells.length; i++) {
var cell_i = this.cells[i];
for (var j = 0; j < cell_i.length; j++) {
var cell = cell_i[j];
this.markNotSnakeCell(cell);
}
}
},
randomSnakeCell : function() {
var cell = this.randomCell();
while (this.isInSnake(cell)) {
cell = this.randomCell();
}
// Make target cell
this.targetCell = cell;
this.markTargetCell(cell);
},
randomCell : function() {
var i = Math.floor(Math.random() * (this.span - 1));
var j = Math.floor(Math.random() * (this.span - 1));
return this.getCell(i, j);
},
getCell : function(i, j) {
return this.cells[i][j];
},
markTargetCell : function(cell) {
cell.className = 'targer_cell';
},
isSnakeCell : function(cell) {
return cell.className == 'snake';
},
isTargetCell : function(cell) {
return this.targetCell.id == cell.id;
},
isInSnake : function(cell) {
return this.snake.isInSnakeBody(cell);
},
markSnakeCell : function(cell) {
if (cell.className != "snake") {
cell.className = "snake";
}
},
markNotSnakeCell : function(cell) {
if (cell.className != "cell") {
cell.className = "cell";
}
}
};
/*
* Mock the 'Stack' structure
*/
function Snake(init) {
this.init = init;
this.data = [];
this.direction = DIRECTION.bottom;
this.eatListeners = [];
this.eatListeners[0] = function() {
if (site) {
site.randomSnakeCell();
}
}
this.eatListeners[1] = function() {
if (site) {
document.getElementById("snake_number").innerHTML = site.snake.data.length;
}
}
this.gameOverListeners = [];
this.gameOverListeners[0] = function(snake) {
if (oTimer) {
window.clearInterval(oTimer);
}
alert("Game over! " + snake.data.length);
}
}
Snake.prototype = {
/**
* Append a snake cell to snake
*
* @param {}
* element
*/
append : function(element) {
this.data[this.data.length] = element;
this.markSnakeCell(element);
},
/**
* Slide on site, the snake length is not changed.
*
* @param {}
* element
* @return {The snake tail removed from snake}
*/
slide : function(element) {
this.markSnakeCell(element);
var temp = [];
for (var i = 1; i < this.data.length; i++) {
temp[i - 1] = this.data[i];
}
temp[temp.length] = element;
var tail = this.data[0];
this.markNotSnakeCell(tail);
this.data = temp;
return tail;
},
/**
* Move one cell accord given direction.
*
* @param {top/right/bottom/left}
* keyCode
*/
move : function(keyCode) {
// Negative direction is not allow.
if (DIRECTION.isAntiDirection(this.direction, keyCode)) {
return;
}
var head = this.data[this.data.length - 1];
var i = head.cell_i;
var j = head.cell_j;
var changeDirection = true;
switch (keyCode) {
case DIRECTION.left :
j = j - 1 < 0 ? site.span - 1 : j - 1;
break;
case DIRECTION.top :
i = i - 1 < 0 ? site.span - 1 : i - 1;
break;
case DIRECTION.right :
j = j + 1 < site.span ? j + 1 : 0;
break;
case DIRECTION.bottom :
i = i + 1 < site.span ? i + 1 : 0;
break;
default :
changeDirection = false;
}
// find next cell
var cell = site.getCell(i, j);
if (this.isInSnakeBody(cell)) {
// If next cell is already exist in snake, game over.
if (this.gameOverListeners) {
for (var i = 0; i < this.gameOverListeners.length; i++) {
this.gameOverListeners[i](this);
}
}
}
if (site.isTargetCell(cell)) {
this.append(cell);
// Eat a cell. Fire eat listener. Here call Site to generate a
// new target cell.
if (this.eatListeners && this.eatListeners.length > 0) {
for (var l = 0; l < this.eatListeners.length; l++) {
this.eatListeners[l]();
}
}
} else {
this.slide(cell);
}
if (changeDirection) {
// record the current direction
this.direction = keyCode;
}
},
/**
* Alias for 'move' method.
*/
run : function() {
this.move(this.direction);
},
prepare : function() {
for (var i = 0; i < this.init; i++) {
this.append(site.getCell(i, 0));
}
},
markSnakeCell : function(cell) {
this.site.markSnakeCell(cell);
},
markNotSnakeCell : function(cell) {
this.site.markNotSnakeCell(cell);
},
length : function() {
return this.data.length;
},
isInSnakeBody : function(cell) {
for (var i = 0; i < this.data.length; i++) {
var snakeCell = this.data[i];
if (snakeCell.id == cell.id) {
return true;
}
}
}
};
function layout(event) {
var container = document.getElementById('site');
var width_offset = (window.outerWidth - LAYOUT.cellWidth * LAYOUT.span) / 2;
LAYOUT.offset_x = width_offset;
site = new Site(LAYOUT.span, 200);
site.createSite(container);
}
function start(event) {
site.clean();
var snake = new Snake(3);
snake.site = site;
snake.prepare();
site.snake = snake;
oTimer = setInterval("site.snake.run()", site.delay);
site.randomSnakeCell();
document.getElementById("snake_number").innerHTML = site.snake.data.length;
}
另外是一个html文件，css的定义在里面，
<html>
<head>
<style type="text/css">
body {
font-family: Impact;
}
.cell {
background-color: blue;
width: 20px;
height: 20px;
margin: 0px;
padding: 0px;
position: absolute;
border: thin solid red;
}
.snake {
background-color: yellow;
width: 20px;
height: 20px;
margin: 0px;
padding: 0px;
position: absolute;
border: thin solid rgb(200, 100, 20);
}
.targer_cell {
background-color: red;
width: 20px;
height: 20px;
margin: 0px;
padding: 0px;
position: absolute;
border: thin solid rgb(200, 100, 20);
}
.toolbar {
text-align:center;
}
p {
color: red;
align: center;
}
</style>
<script type="text/javascript" src="snake.js"></script>
<title>贪吃蛇</title>
</head>
<body onload="layout();">
<h2 align="center">贪吃蛇 !!!</h2>
<div id="toolbar" class="toolbar">
<p>控制：上，下，左，右 加速：w 减速：s</p>
<a href="javascript:void(0);" onclick="start();" >Start</a>
</div>
<div id="site"></div>
<div id="record">
<p>Now record: <span id="snake_number" style="color:purple">3</span></p>
</div>
</body>
</html>
慢慢把他整精致点。。。
- 大小: 13 KB
分享到：
相关推荐
JavaScript贪吃蛇小游戏
瞎写的，很多功能没实现，比如暂停开始，本来想整合到一起
javascript贪吃蛇游戏，欢迎下载！
javascript贪吃蛇网页小游戏
javaScript贪吃蛇源代码，详细的javaScript贪吃蛇代码，里面都写了注释
原生Javascript贪吃蛇代码
JavaScript贪吃蛇的实现代码 本文实例为大家分享了JavaScript实现贪吃蛇的具体代码，供大家参考，具体内容如下 首先我们要确定贪吃蛇应有的功能 1.通过键盘的上下左右控制蛇的移动方向 2.边界判定，即蛇头超出...
html+js+css写的贪吃蛇程序 注释详细
javascript贪吃蛇(面向对象)
原生JavaScript贪吃蛇完美实现 思路绝对让你眼前一亮!
html+JavaScript贪吃蛇原创，代码可以修改性比较高，大家可以按照自己的修改，使用比较通俗的写法写的，很容易理解！
JavaScript贪吃蛇小游戏——学习JavaScript的面向对象编程。适合前端初学者的学习。具体介绍可在主页博客里看到哦。
javascript写的贪吃蛇游戏 运行界面：http://hi.baidu.com/roovent/blog/item/0b4c5e2aef8272f0e6cd4081.html
纯JavaScript贪吃蛇小游戏，使用javascript构造函数创建，对于想了解javascript的童鞋可以看下
JavaScript 贪吃蛇及其源代码 这个贪吃蛇项目是一款单人游戏。这个游戏是一个非常流行和有趣的游戏。在这里，玩家必须控制有边界平面上的白色矩形框（称为蛇）。你只需要使用箭头键控制蛇，然后吃掉那些红点，让你的...
源码-简易的JavaScript贪吃蛇小游戏，其中运用了简单的css和JavaScript技术
个人小练习，纯javascript开发贪吃蛇小游戏
JavaScript贪吃蛇游戏、 JavaScript贪吃蛇游戏、 JavaScript贪吃蛇游戏、 JavaScript贪吃蛇游戏、
贪吃蛇小游戏源码，可以实现分数累加，吃到食物可以随机变化颜色等
一款由javascript编写的贪吃蛇小游戏，互相探讨，互相学习。