Полная версия JavaScript Snake полностью аннотирована и объектно-ориентирована.
Скопируйте код кода следующим образом:
<html>
<голова>
<title>Змея v2.4</title>
<стиль>
тело{
размер шрифта: 9pt;
}
стол{
граница-коллапс: коллапс;
граница: сплошная #333 1 пиксель;
}
тд {
высота: 10 пикселей;
ширина: 10 пикселей;
размер шрифта: 0 пикселей;
}
.заполненный{
цвет фона: синий;
}
</стиль>
</голова>
<скрипт>
функция $(id){return document.getElementById(id);}
/*************************************************** ***** *************
* javascript змея v2.4 <br />
* В версии 2.4 исправлен цвет тела змеи, чтобы он двигался по мере движения змеи вперед.
************************************************* * ************/
//Жадные змеи
вар Змея = {
таблица: ноль,
/**
* body: тело змеи, каждая секция змеи помещается в массив,
* Структура данных {x:x0, y:y0, color:color0},
* x, y представляют координаты, цвет представляет цвет
**/
тело: [],
//Текущее направление движения, значения 0, 1, 2, 3 соответственно обозначают вверх, вправо, вниз, влево, нажимайте клавиши направления на клавиатуре, чтобы изменить его.
направление: 0,
// таймер
таймер: ноль,
//скорость
скорость: 250,
// Было ли оно приостановлено
сделал паузу: правда,
//количество строк
строкаКаунт: 30,
//Количество столбцов
колКаунт: 30,
//инициализация
инициализация: функция() {
varcolors = ['красный','оранжевый','желтый','зеленый','синий','фиолетовый','#ccc'];
this.tbl = $("основной");
вар х = 0;
вар у = 0;
вар ColorIndex = 0;
//Генерируем начальное направление движения
this.direction = Math.floor(Math.random()*4);
//Создаем таблицу
for(var row=0;row<this.rowCount;row++){
вар tr=this.tbl.insertRow(-1);
for(var col=0;col<this.colCount;col++) {
вар td=tr.insertCell(-1);
}
}
//Сгенерируем 20 свободных узлов
for(var я=0; я<10; я++){
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = Colors[colorIndex];
}
}
//генерируем голову змеи
в то время как (правда) {
x = Math.floor(Math.random()*this.colCount);
y = Math.floor(Math.random()*this.rowCount);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = "черный";
this.body.push({x:x,y:y,color:'black'});
перерыв;
}
}
this.paused = правда;
//Добавляем событие клавиатуры
document.onkeydown= функция(е){
если (!e)e=window.event;
переключатель (e.keyCode | e.that | e.charCode) {
случай 13: {
если(Змея.пауза){
Змея.переместить();
Змея.пауза = ложь;
}
еще{
//Если паузы нет, прекращаем движение
Змея.пауза();
Змея.пауза = правда;
}
перерыв;
}
случай 37:{//слева
//Не позволяем змее идти назад
если(Snake.direction==1){
перерыв;
}
Змея.направление = 3;
перерыв;
}
случай 38:{// вверх
//Здесь работают сочетания клавиш
если (event.ctrlKey) {
Змея.speedUp(-20);
перерыв;
}
if(Snake.direction==2){//Не позволяем змее идти назад
перерыв;
}
Змея.направление = 0;
перерыв;
}
случай 39:{// правильно
if(Snake.direction==3){//Запретить змее двигаться назад
перерыв;
}
Змея.направление = 1;
перерыв;
}
случай 40:{//вниз
если (event.ctrlKey) {
Змея.speedUp(20);
перерыв;
}
if(Snake.direction==0){//Запретить змее двигаться назад
перерыв;
}
Змея.направление = 2;
перерыв;
}
}
}
},
//двигаться
двигаться: функция() {
this.timer = setInterval(function(){
Змея.стереть();
Змея.moveOneStep();
Змея.краска();
}, this.speed);
},
//Перемещаем одну часть тела
moveOneStep: функция(){
если(this.checkNextStep()==-1){
ClearInterval(this.timer);
alert("Игра окончена!/nНажмите "Перезапустить", чтобы продолжить.");
возвращаться;
}
если(this.checkNextStep()==1){
вар _point = this.getNextPos();
вар _x = _point.x;
вар _y = _point.y;
вар _color = this.getColor(_x,_y);
this.body.unshift({x:_x,y:_y,color:_color});
//Поскольку съедается одна еда, создается другая еда
это.generateDood();
возвращаться;
}
//window.status = this.toString();
вар точка = this.getNextPos();
//Сохраняем цвет первого раздела
вар цвет = this.body[0].color;
//Цвет движется вперед
for(var i=0; i<this.body.length-1; i++){
this.body[i].color = this.body[i+1].color;
}
//Вычтите одну часть из хвоста змеи и добавьте одну часть к хвосту змеи, чтобы показать эффект движения змеи вперед.
это.body.pop();
this.body.unshift({x:point.x,y:point.y,color:color});
//window.status = this.toString();
},
//Исследуем, куда идти дальше
пауза: функция(){
ClearInterval(Snake.timer);
это.краска();
},
getNextPos: функция(){
вар x = this.body[0].x;
вар y = this.body[0].y;
вар цвет = this.body[0].color;
//вверх
если(this.direction==0){
й--;
}
//Направо
иначе если(this.direction==1){
х++;
}
//вниз
иначе, если(this.direction==2){
у++;
}
//левый
еще{
х--;
}
//Вернем координату
вернуть {x:x,y:y};
},
//Проверяем, к какому следующему шагу нужно перейти
проверкаСледующийШаг: функция(){
вар точка = this.getNextPos();
вар х = точка.х;
вар y = point.y;
if(x<0||x>=this.colCount||y<0||y>=this.rowCount){
return -1;//При касании границы игра заканчивается
}
for(var i=0; i<this.body.length; i++){
if(this.body[i].x==x&&this.body[i].y==y){
return -1;//Когда он касается вашего тела, игра заканчивается
}
}
если (this.isCellFilled (x, y)) {
return 1;//Что-то есть
}
вернуть 0;//открытое пространство
},
//Стираем тело змеи
стереть: функция(){
for(var i=0; i<this.body.length; i++){
this.eraseDot(this.body[i].x, this.body[i].y);
}
},
//Рисуем тело змеи
краска: функция(){
for(var i=0; i<this.body.length; i++){
this.paintDot(this.body[i].x, this.body[i].y,this.body[i].color);
}
},
//Стираем раздел
стеретьDot: функция (x, y) {
this.tbl.rows[y].cells[x].style.backgroundColor = "";
},
PaintDot: функция (x, y, цвет) {
this.tbl.rows[y].cells[x].style.backgroundColor = цвет;
},
//Получаем цвет по координате
getColor: функция (x, y) {
верните this.tbl.rows[y].cells[x].style.backgroundColor;
},
//для отладки
toString: функция() {
вар стр = "";
for(var i=0; i<this.body.length; i++){
str += "x:" + this.body[i].x + " y:" + this.body[i].y + " color:" + this.body[i].color + " - ";
}
вернуть ул;
},
//Проверяем, заполнена ли точка координат
isCellFilled: функция (x, y) {
if(this.tbl.rows[y].cells[x].style.backgroundColor == ""){
вернуть ложь;
}
вернуть истину;
},
//перезапуск
перезапуск: функция(){
если (этот.таймер) {
ClearInterval(this.timer);
}
for(var i=0; i<this.rowCount;i++){
this.tbl.deleteRow(0);
}
this.body = [];
это.инит();
this.speed = 250;
},
//ускорение
ускорение: функция (время) {
если(!this.paused){
if(this.speed+time<10||this.speed+time>2000){
возвращаться;
}
this.speed +=время;
это.пауза();
это.переместить();
}
},
//Производим еду.
генерироватьДуд: функция(){
varcolors = ['красный','оранжевый','желтый','зеленый','синий','фиолетовый','#ccc'];
var x = Math.floor(Math.random()*this.colCount);
var y = Math.floor(Math.random()*this.rowCount);
var colorIndex = Math.floor(Math.random()*7);
if(!this.isCellFilled(x,y)){
this.tbl.rows[y].cells[x].style.backgroundColor = Colors[colorIndex];
}
}
};
</скрипт>
<body onload="Snake.init();">
/************************************************ ***** ************<br />
* javascript змея v2.4<br />
************************************************* * ************/<br />
<table id="main" cellpacing="0" cellpadding="0"></table>
<input type="button" id="btn" value="Start/Pause" />Нажмите левую кнопку или нажмите Enter, чтобы запустить/приостановить игру<br />
<input type="button" id="reset" value="Начать заново" /><br />
<input type="button" id="upSpeed" value="Accelerate" />Нажмите левую кнопку или нажмите Ctrl + ↑, чтобы ускориться<br />
<input type="button" id="downSpeed" value="Slow down" />Нажмите левую кнопку или нажмите Ctrl + ↓, чтобы замедлить скорость
<скрипт>
$('btn').onclick = функция(){
если(Змея.пауза){
Змея.переместить();
Змея.пауза = ложь;
}
еще{
Змея.пауза();
Змея.пауза = правда;
}
};
$("сброс").onclick = функция(){
Змея.рестарт();
это.блур();
};
$("upSpeed").onclick = function(){
Змея.speedUp(-20);
};
$("downSpeed").onclick = function(){
Змея.speedUp(20);
};
</скрипт>
</тело>
</html>