<!DOCTYPE html >
<html>
<head>
<title>Змея</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script language="javascript" src="jquery.js" type="text/javascript"></script>
<script language="javascript" src="onload.js" type="text/javascript"></script>
<script language="javascript" src="core.js" type="text/javascript"></script>
<script language="javascript" src="matrix.js" type="text/javascript"></script>
<script language="javascript" src="snake.js" type="text/javascript"></script>
[CSS]#matrix1
{
float:left;
width: 400px;
height: 400px;
border-top: 1px solid #999;
border-left: 1px solid #999;
}
#userint {
float:left;
margin:0 5px;
}
.cell, .on, .food
{
float: left;
width: 19px;
height: 19px;
border-bottom: 1px solid #999;
border-right: 1px solid #999;
}
.on
{
background-color: red;
}
.food
{
background-color: blue;
}
#count, #lvl {
font:20pt sans-serif;
color: gray;
margin: 5px;
}
#buttom {width:400px;}
#buttom div{
float: left;
margin: 5px 13%;
}[/CSS]
[JS]//
// Класс змеи
//
function Snake(body, course, m1)
{
// координаты строк и столбцов
this.body = body;
// направление движения
this.course = course;
// жива ли змейка
this.alive = true;
var that = this;
this.create = function()
{
//отрисовываем змейку
m1.setCell(that.body[0], that.body[1], 'on');
}
this.move = function()
{
if (that.course=='right') {
if (that.body[1]==20){that.alive=false;}
else that.body[1]++;
}
else if (that.course=='left' ) {
if (that.body[1]==1){that.alive=false;}
else that.body[1]--;
}
else if (that.course=='down') {
if (that.body[0]==20){that.alive=false;}
else that.body[0]++;
}
else if (that.course=='up') {
if (that.body[0]==1){that.alive=false;}
else that.body[0]--;
}
for (var i=2;i<=(len*2-2); i+=2){
if(that.body[0]==that.body[i] && that.body[1]==that.body[i+1])
{that.alive=false;}
else continue;
}
if (that.alive){
m1.setCell(lastrows, lastcols, 'cell');
m1.setCell(that.body[0], that.body[1], 'on');
lastbut = that.course;
}
else lastbut = '';
}
}[/JS]
[JS]//
// Точка входа.
//
$(document).ready(function(){
var game = new Core;
var left=37; // значения клавиш для игры по умолчанию
var right=39;
var up=38;
var down=40;
game.load();
//обрабатываем нажатие на кнопку старт -
$("#start").click(function(){
if($(this).val()=="Начать заново"){
game.reload(false);
$(this).val("Начать игру");
}
else if ($(this).val()=="Начать игру"){
game.start();
$(this).val("Начать заново");
}
});
$("#pause").click(function(){
if($("#start").val()=="Начать заново"){
alert("Нажмите Ок для продолжения");
}
});
document.onkeydown = function (event)
{
event = (event) ? (event) : window.event;
if (event){
var code = (event.charCode) ? event.charCode : event.keyCode;
if (code==left) game.cmdLeft();
if (code==up) game.cmdUp();
if (code==right) game.cmdRight();
if (code==down) game.cmdDown();
}
}
// при нажатии на кнопку "Изменить управление" запускаем функцию изминения клавиш управления
$("#control").mousedown(function(){
left=0;
right=0;
up=0;
down=0;
var i=0;
$("#userint").append("<p id='con'>Нажмите клавишу для движения влево</p>");
$(document).keydown(function (eventObject){ //устанавливаем событие на нажатие клавиши
var code = eventObject.which;
if (i==0){
left = code;
$("#con").text("Нажмите клавишу для движения вправо");
i++
}
else if (i==1){
right = code;
$("#con").text("Нажмите клавишу для движения вниз");
i++
}
else if (i==2){
down = code;
$("#con").text("Нажмите клавишу для движения вверх");
i++
}
else if (i==3){
up = code;
$("#con").remove();
alert("Изминения приняты");
$(this).unbind('keydown'); //удаляем установленное событие
}
});
});
});[/JS]
[JS]//
// Класс матрицы.
//
function Matrix(containerId, rows, cols)
{
// id контейнера
this.containerId = containerId;
// число строк
this.rows = rows;
// число столбцов
this.cols = cols;
var that = this;
// создание сетки
this.create = function()
{
var n = this.rows * this.cols;
var matrix=$('#'+that.containerId);
matrix.innerHTML = '';
for (var i = 0; i < n; i++)
{
var div = document.createElement('div');
div.className = 'cell';
matrix.append(div);
}
}
// получить значение ячейки
this.getCell = function(row, col)
{
var ind = (row - 1) * this.cols + col - 1;
if($("#matrix1>div:eq("+ind+")").hasClass('on'))return true;
else return false;
}
// установить значение ячейки
this.setCell = function(row, col, val)
{
var ind = (row - 1) * this.cols + col - 1;
$("div>div:eq("+ind+")").removeClass().addClass(val) ;
}
}
[/JS]
[JS]//
// Ядро
function Core()
{
this.matrix;
var snake;
var timer;
var count=0;
var body=[1,2];
var dif=500;
var lvl=1;
len=1; //длина змеи
// итд, переменных сколько вам нужно (можете вместо переменных использовать поля)
var that = this;
this.load = function()
{
that.matrix = new Matrix('matrix1', 20, 20);
that.matrix.create();
that.food(that.matrix);
that.snake = new Snake(body, 'right', that.matrix);
that.snake.create();
}
this.start = function()
{
timer = setInterval(play,dif);
}
this.cmdRight = function()
{
//меняем курс змеи вправо, если это возможно
that.snake.course="right";
if (len>1&&lastbut=='left'&&that.snake.course=='right') that.snake.course='left';
}
this.cmdLeft = function()
{
//меняем курс змеи влево, если это возможно
that.snake.course="left";
if (len>1&&lastbut=='right'&&that.snake.course=='left') that.snake.course='right';
}
this.cmdUp = function()
{
//меняем курс змеи вверх, если это возможно
that.snake.course="up";
if (len>1&&lastbut=='down'&&that.snake.course=='up') that.snake.course='down';
}
this.cmdDown = function()
{
//меняем курс змеи вниз, если это возможно
that.snake.course="down";
if (len>1&&lastbut=='up'&&that.snake.course=='down') that.snake.course='up';
}
// устанавливаем еду
this.food = function(m1){
xy = new Array();
do{
xy[0] = Math.floor(Math.random()*20)+1;
xy[1] = Math.floor(Math.random()*20)+1;
}
while(m1.getCell(xy[0],xy[1]));
m1.setCell(xy[0], xy[1], 'food');
}
// либо перегружаем поле, либо перегружаем игру
this.reload = function(alive){
$("#matrix1 div").remove();
$("#start").val("Начать игру");
if(!alive){
dif=500;
lvl=1;
count=0;
$("#count").text("Счет: 0");
$("#lvl").text("Уровень: "+lvl);
alert ('Игра закончена!');
}
clearInterval(timer);
body=[1,2];
len=1;
that.load();
}
// проверяем съеден ли фрукт, если да увеличиваем длину и счет, если нет меняем положение
this.eat = function(){
if (xy[0]==that.snake.body[0] && xy[1]==that.snake.body[1]){
that.food(that.matrix);
len++;
count++;
that.snake.body.unshift(that.snake.body[0],that.snake.body[1]);
$("#count").text("Счет: "+((count*10)+(50*(lvl-1))));
}
else{
lastcols=that.snake.body[len*2-1];
lastrows=that.snake.body[len*2-2];
if (len>1){
that.snake.body.pop();
that.snake.body.pop();
that.snake.body.unshift(that.snake.body[0],that.snake.body[1])
}
}
}
// проверка жизни змейки, если мерта запускаем перегрузку, если нет продолжаем движение и проверяем левелап
function play(){
if(!that.snake.alive){
that.reload(false);
}
else {
that.eat();
that.snake.move();
if (len>=(1+lvl*5)){
lvl++;
dif=Math.floor(dif/3)+Math.floor(500/lvl);
$("#count").text("Счет: "+((count*10)+(50*(lvl-1))));
$("#lvl").text("Уровень: "+lvl);
that.reload(true);
}
}
}
}[/JS]
</head>
<body>
<div id="matrix1"></div>
<div id="userint">
<p id="count"> Счет: 0</p>
<p id="lvl"> Уровень: 1</p><br/>
<input id="control" type="submit" value="Изменить управление"/>
</div>
<div id="buttom">
<div>
<input id="start" type="submit" value="Начать игру"/>
</div>
<div>
<input id="pause" type="submit" value="Пауза"/>
</div>
</div>
</body>
</html>