Versão:IE7 FF3.0.14
<!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 ">
<cabeça>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇 - por CNwander</title>
<style type="texto/css">
* {margem:0; preenchimento:0}
corpo {fundo:#333; -moz-user-select: nenhum; alinhamento de texto:centro; tamanho da fonte: 12px}
tabela {margem:80px automático 10px automático; estouro: oculto; colapso de borda: colapso; }
td {largura:20px; altura:20px; borda:1px sólido #eee; plano de fundo:#f4f4f4}
.cover {fundo:#39c;}
.comida {fundo:#093}
.bloco {fundo:#333}
.freio {fundo:#f00}
.skate {plano de fundo:#00f}
#diga {margem superior:50px; cor: branco}
#ajuda {largura:420px; margem:0 automático; altura da linha: 17px; cor: branco}
#help span {float:esquerda; margem direita: 10px}
#help .box {largura:15px; altura:15px; margem direita: 5px; borda: 1px branco sólido}
#btnStart {limpar: ambos; largura:100px; altura:30px; margem superior: 10px; preenchimento:0; plano de fundo:#bbb; cor:#222; borda:1px sólido #fff; cor da borda inferior:#000; cor da borda direita:#000; cursor:ponteiro}
</estilo>
<script type="texto/javascript">
// código por CNwander.
// comum
função $(str){
retornar document.getElementById(str);
}
função $tag(str,alvo) {
alvo = alvo || documento;
retornar target.getElementsByTagName(str);
}
//global
// const
var WIDTH = 20, //网格宽度
ALTURA = 20, //网格高度
SAY = ["相当不错,虽然说和CNwander还不是一个级别的","可以啊,再加点油都可以和CNwander媲美了!","一个字,牛,连CNwander都甘拜下风了","差不多行了,别把游戏玩爆了"];
var len = 3, //蛇的长度
velocidade, //爬行速度
gridElems = multiArray(WIDTH,HEIGHT), //单元格对象
operadora, //承载对象(食物,障碍,滑板,刹车)
cobra, //蛇每节的坐标点
info, //交互对话
btnStart, //开始按钮
pontuação máxima = len,
SnakeTimer, //蛇行走计时器
freioTimers = [], //随机刹车
skateTimers = [], //随机滑板
chave direta; // 方向键值 37-40 左上右下
janela.onload=função(){
informações = $("dizer");
btnStart = $("btnStart");
grade de inicialização(); //网格初始化
document.onkeydown=attachEvents; //绑定方向事件
btnStart.onclick = função (e) {
btnStart.blur(); //firefox中必须释放焦点
começar(); //游戏开始
btnStart.setAttribute("desativado",verdadeiro);
btnStart.style.color = "#aaa";
}
}
//开始游戏
função início() {
len = 3;
velocidade = 10;
chave direta = 39;
portadora = multiArray(LARGURA,ALTURA);
cobra = new Array();
claro();
initSnake(); //蛇初始化
addObject("comida");
andar();
addRandomBrake();
}
//创建网格
function initGrid() {
var corpo = $tag("corpo")[0];
var tabela = document.createElement("tabela"),
tbody = document.createElement("tbody")
for(var j = 0; j < ALTURA; j++) {
var col = document.createElement("tr");
for(var i = 0; i < LARGURA; i++) {
var linha = document.createElement("td");
gridElems[i][j] = col.appendChild(linha);
}
tbody.appendChild(col);
}
tabela.appendChild(tbody);
$("snakeWrap").appendChild(tabela);
}
//创建蛇
função initSnake() {
var ponteiro = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = ponteiro[0] - eu,
y = ponteiro[1];
cobra.push([x,y]);
operadora[x][y] = "capa";
}
}
//添加键盘事件
função anexarEventos(e) {
e = e || evento;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode: chave direta; //非方向键、反向无效
retornar falso;
}
função caminhar() {
if(snakeTimer) window.clearInterval(snakeTimer);
cobraTimer = window.setInterval(passo, Math.floor(3000/velocidade));
}
função etapa() {
//获取目标点
var headX = cobra[0][0],
cabeçaY = cobra[0][1];
switch(tecladireta) {
caso 37: cabeçaX -= 1; quebrar;
caso 38: cabeçaY -= 1; quebrar;
caso 39: cabeçaX += 1; quebrar
caso 40: cabeçaY += 1; quebrar;
}
//碰到边界,阻挡物,则结束游戏
if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || transportadora[headX][headY] == "bloco" || transportadora[headX][headY] == "capa" ) {
trace("FIM DO JOGO");
if(getText($("pontuação"))*1 < len) trace(len,$("pontuação"));
btnStart.removeAttribute("desabilitado");
btnStart.style.color = "#000";
window.clearInterval(snakeTimer);
for(var i = 0; i < freioTimers.length; i++) window.clearTimeout(brakeTimers[i]);
for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers[i]);
retornar;
}
//加速
if(len % 4 == 0 && velocidade < 60 && transportadora[headX][headY] == "comida") {
velocidade += 5;
andar();
trace("加速!");
}
//捡到刹车
if(carrier[headX][headY] == "freio") {
velocidade = 5;
andar();
trace("恭喜!捡到刹车一个。");
}
//遭遇滑板
if(carrier[headX][headY] == "skate") {
velocidade += 20;
andar();
trace("遭遇滑板!");
}
//添加阻挡物
if(len % 6 == 0 && len < 60 && transportadora[headX][headY] == "comida") {
addObject("bloco");
}
//对话
if(len <= 40 && lento % 10 == 0) {
var alegria = DIGA[len/10-1];
rastrear(alegria);
}
//吃东西
if(transportadora[headX][headY] != "comida") {
var lastX = cobra[snake.length-1][0],
últimoY = cobra[snake.length-1][1];
operadora[lastX][lastY] = falso;
gridElems[lastX][lastY].className = "";
cobra.pop();
} outro {
transportadora[headX][headY] = falso;
trace("吃到食物");
addObject("comida");
}
cobra.unshift([headX,headY]);
transportadora[headX][headY] = "capa";
gridElems[headX][headY].className = "capa";
len = cobra.comprimento;
}
//添加物品
function addObject(nome) {
var p = randomPointer();
operadora[p[0]][p[1]] = nome;
gridElems[p[0]][p[1]].className = nome;
}
//添加随机数量刹车和滑板
função addRandomBrake() {
var num = randomNum(1,5);
for(var i = 0; i < num; i++) {
freioTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
}
}
//输出信息
função trace(sth,quem) {
quem = quem || informações;
if(document.all) who.innerText = sth;
senão who.textContent = sth;
}
//获取信息
function getText(alvo) {
if(document.all) return target.innerText;
caso contrário, retorne target.textContent;
}
//创建二维数组
função multiArray(m,n) {
var arr = novo Array(n);
para(var i=0; i<m; i++)
arr[i] = novo Array(m);
retornar chegada;
}
//清除画面
função limpar() {
for(var y = 0; y < gridElems.length; y++) {
for(var x = 0; x < gridElems[y].length; x++) {
gridElems[x][y].className = "";
}
}
}
//产生指定范围随机点
function randomPointer(inícioX,inícioY,fimX,fimY) {
inícioX = inícioX || 0;
inícioY = inícioY || 0;
fimX = fimX || LARGURA;
fimY = fimY || ALTURA;
var p = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
if(portadora[x][y]) return randomPointer(startX,startY,endX,endY);
p[0] = x;
p[1] = y;
retornar p;
}
//产生随机整数
function numum aleatório(início,fim) {
return Math.floor(Math.random()*(end - start)) + start;
}
</script>
</head>
<body onselectstart="return false">
<div id="say">贪吃蛇</div>
<div id="snakeWrap"></div>
<div id="ajuda">
<span class="box food"></span><span>绿色食物</span>
<span class="box block"></span><span>灰色毒品</span>
<span class="box skate"></span><span>蓝色滑板</span>
<span class="freio de caixa"></span><span>红色刹车</span>
<span style="float:right">最高分:<strong id="score">0</strong></span>
<input type="button" id="btnStart" value="开始游戏" />
</div>
</body>
</html>
Dicas: (老鸟跳过 , 希望对新手有所帮助)
- isto é: element.innerText = ff: element.TextContent ;
- setAttribute ("CellPadding", "0") 在 IE 中无效 , 正确写法 Padding de células (一不小心就犯错了);
- FF中,使用绑定在某元素上的键盘事件前,先让它获得焦点,document也不例外,这容易疏忽;
- IE não cria elemento de tabela;记得加tbody;
代码(有详细注释):
// código por CNwander.
// comum
função $(str){
retornar document.getElementById(str);
}
função $tag(str,alvo) {
alvo = alvo || documento;
retornar target.getElementsByTagName(str);
}
//global
// const
var WIDTH = 20, //网格宽度
ALTURA = 20, //网格高度
SAY = ["相当不错,虽然说和CNwander还不是一个级别的","可以啊,再加点油都可以和CNwander媲美了!","一个字,牛,连CNwander都甘拜下风了","差不多行了,别把游戏玩爆了"];
var len = 3, //蛇的长度
velocidade, //爬行速度
gridElems = multiArray(WIDTH,HEIGHT), //单元格对象
operadora, //承载对象(食物,障碍,滑板,刹车)
cobra, //蛇每节的坐标点
info, //交互对话
btnStart, //开始按钮
pontuação máxima = len,
SnakeTimer, //蛇行走计时器
freioTimers = [], //随机刹车
skateTimers = [], //随机滑板
chave direta; // 方向键值 37-40 左上右下
janela.onload=função(){
informações = $("dizer");
btnStart = $("btnStart");
grade de inicialização(); //网格初始化
document.onkeydown=attachEvents; //绑定方向事件
btnStart.onclick = função (e) {
btnStart.blur(); //firefox中必须释放焦点
começar(); //游戏开始
btnStart.setAttribute("desativado",verdadeiro);
btnStart.style.color = "#aaa";
}
}
//开始游戏
função início() {
len = 3;
velocidade = 10;
chave direta = 39;
portadora = multiArray(LARGURA,ALTURA);
cobra = new Array();
claro();
initSnake(); //蛇初始化
addObject("comida");
andar();
addRandomBrake();
}
//创建网格
function initGrid() {
var corpo = $tag("corpo")[0];
var tabela = document.createElement("tabela"),
tbody = document.createElement("tbody")
for(var j = 0; j < ALTURA; j++) {
var col = document.createElement("tr");
for(var i = 0; i < LARGURA; i++) {
var linha = document.createElement("td");
gridElems[i][j] = col.appendChild(linha);
}
tbody.appendChild(col);
}
tabela.appendChild(tbody);
$("snakeWrap").appendChild(tabela);
}
//创建蛇
função initSnake() {
var ponteiro = randomPointer(len-1, len-1, WIDTH/2);
for(var i = 0; i < len; i++) {
var x = ponteiro[0] - eu,
y = ponteiro[1];
cobra.push([x,y]);
operadora[x][y] = "capa";
}
}
//添加键盘事件
função anexarEventos(e) {
e = e || evento;
directkey = Math.abs(e.keyCode - directkey) != 2 && e.keyCode > 36 && e.keyCode < 41 ? e.keyCode: chave direta; //非方向键、反向无效
retornar falso;
}
função caminhar() {
if(snakeTimer) window.clearInterval(snakeTimer);
cobraTimer = window.setInterval(passo, Math.floor(3000/velocidade));
}
função etapa() {
//获取目标点
var headX = cobra[0][0],
cabeçaY = cobra[0][1];
switch(tecladireta) {
caso 37: cabeçaX -= 1; quebrar;
caso 38: cabeçaY -= 1; quebrar;
caso 39: cabeçaX += 1; quebrar
caso 40: cabeçaY += 1; quebrar;
}
//碰到边界,阻挡物,则结束游戏
if(headX >= WIDTH || headX < 0 || headY >= HEIGHT || headY < 0 || transportadora[headX][headY] == "bloco" || transportadora[headX][headY] == "capa" ) {
trace("FIM DO JOGO");
if(getText($("pontuação"))*1 < len) trace(len,$("pontuação"));
btnStart.removeAttribute("desabilitado");
btnStart.style.color = "#000";
window.clearInterval(snakeTimer);
for(var i = 0; i < freioTimers.length; i++) window.clearTimeout(brakeTimers[i]);
for(var i = 0; i < skateTimers.length; i++) window.clearTimeout(skateTimers[i]);
retornar;
}
//加速
if(len % 4 == 0 && velocidade < 60 && transportadora[headX][headY] == "comida") {
velocidade += 5;
andar();
trace("加速!");
}
//捡到刹车
if(carrier[headX][headY] == "freio") {
velocidade = 5;
andar();
trace("恭喜!捡到刹车一个。");
}
//遭遇滑板
if(carrier[headX][headY] == "skate") {
velocidade += 20;
andar();
trace("遭遇滑板!");
}
//添加阻挡物
if(len % 6 == 0 && len < 60 && transportadora[headX][headY] == "comida") {
addObject("bloco");
}
//对话
if(len <= 40 && lento % 10 == 0) {
var alegria = DIGA[len/10-1];
rastrear(alegria);
}
//吃东西
if(carrier[headX][headY] != "comida") {
var lastX = cobra[snake.length-1][0],
últimoY = cobra[snake.length-1][1];
operadora[lastX][lastY] = falso;
gridElems[lastX][lastY].className = "";
cobra.pop();
} outro {
transportadora[headX][headY] = falso;
trace("吃到食物");
addObject("comida");
}
cobra.unshift([headX,headY]);
transportadora[headX][headY] = "capa";
gridElems[headX][headY].className = "capa";
len = cobra.comprimento;
}
//添加物品
function addObject(nome) {
var p = randomPointer();
operadora[p[0]][p[1]] = nome;
gridElems[p[0]][p[1]].className = nome;
}
//添加随机数量刹车和滑板
função addRandomBrake() {
var num = randomNum(1,5);
for(var i = 0; i < num; i++) {
freioTimers.push( window.setTimeout(function(){addObject("brake")},randowNum(10000,100000)) );
skateTimers.push( window.setTimeout(function(){addObject("skate")},randowNum(5000,100000)) );
}
}
//输出信息
função trace(sth,quem) {
quem = quem || informações;
if(document.all) who.innerText = sth;
senão who.textContent = sth;
}
//获取信息
function getText(alvo) {
if(document.all) return target.innerText;
caso contrário, retorne target.textContent;
}
//创建二维数组
função multiArray(m,n) {
var arr = novo Array(n);
para(var i=0; i<m; i++)
arr[i] = novo Array(m);
retornar chegada;
}
//清除画面
função limpar() {
for(var y = 0; y < gridElems.length; y++) {
for(var x = 0; x < gridElems[y].length; x++) {
gridElems[x][y].className = "";
}
}
}
//产生指定范围随机点
function randomPointer(inícioX,inícioY,fimX,fimY) {
inícioX = inícioX || 0;
inícioY = inícioY || 0;
fimX = fimX || LARGURA;
fimY = fimY || ALTURA;
var p = [],
x = Math.floor(Math.random()*(endX - startX)) + startX,
y = Math.floor(Math.random()*(endY - startY)) + startY;
if(portadora[x][y]) return randomPointer(startX,startY,endX,endY);
p[0] = x;
p[1] = y;
retornar p;
}
//产生随机整数
function numum aleatório(início,fim) {
return Math.floor(Math.random()*(end - start)) + start;
}