Главная » JavaScript, Интересные игры, Конкурсы » Игра Snake на JavaScript. Давайте сыграем! + мини конкурс
Ноя
14

Игра Snake на JavaScript. Давайте сыграем! + мини конкурс

Всем привет рябята, сегодня хочу поделится с вами одной замечательной игрой написанной на JavaScript. Работает она посчи на всех браузерах, так что с употреблением проблем не должно быть. Так как блог у меня компьютерный и я люблю делииться с вами исходниками, то как всегда: Рабочая программа -> Исходный код -> Комментарии

Игра Snake. Давайте сыграем

Из-за несовместимости двух плагинов на моем блоге (Inline Javascript Plugin и SyntaxHighlighter Evolved) все JavaScript приложения будут предоставлены на отдельных страницах.

Игра Snake на JavaScript. Давайте сыграем! + мини конкурс

Исходный код (js + css)

[php]
<script type="text/javascript">

/****************************************************
*Игра создана специально для http://kpeople.ru его автором :)
****************************************************/
function cbsnake(){

this.jump = 8;




this.sos = 7;

this.sofb = 400;

this.daway = this.sofb — this.jump;
this.correct = new Array();
this.correct[0] = 0;
while(this.correct[this.correct.length -1] != this.daway){
this.correct[this.correct.length] = this.correct[this.correct.length -1]+this.jump
}
this.zero = 0;
var gameboard = ‘ <div class="board" id="board"> <div id="i2"> Игра "Змеюка". Сначала выберите скорость игры, потом собирайте красные квадратики (яблочки). Следите за стенками и за змеюкой. При сокосновении со стеной или с хвостом игра будет окончена. В любой момент вы можете приостановить игру нажав "Пробел". Игра разработана автором блога: <a href="http://kpeople.ru">Kомпьютерный PEOPLE</a> </div> </div><div class="board" id="score"> <span id="cscore">0</span> <span id="buttons"> <button type="button" id="slow" onClick="snake.slow()">Slow</button> <button type="button" id="medium" onClick="snake.medium()">Middle</button> <button type="button" id="fast" onClick="snake.fast()">Fast</button> </span></div>';
document.write(gameboard);
}

cbsnake.prototype.setup = function(setspeed){
var thisObj = this;
//Score…
this.score = 0;
//Snake Direction
this.sdir = ‘none';
this.sdirb = ‘none';
this.sdirp = ‘none';
//Snake arrays
this.ctop = new Array();
this.cleft = new Array();
//Top of snake class
this.ctop[0] = 200;
this.ctop[1] = -8;
//Left of Snake class
this.cleft[0] = 200;
this.cleft[1] = -8;
//current top of apple
this.atop = 0;
//current left of apple
this.aleft = 0;
//Milliseconds between move
this.speed = setspeed;
document.getElementById(‘board’).innerHTML = ‘<div id="apple"></div><div id="snake0" class="snake"></div><div id="snake1" class="snake"></div>';
this.moveapple();
this.stopgame = false;
setTimeout(function(){ thisObj.msnake() },this.speed);
document.onkeydown = function(e){ return thisObj.snakedir(e); };
}
[/php]

[php]

cbsnake.prototype.slow = function(){
this.setup(100);
this.buttons(‘true’);
document.getElementById(‘slow’).blur();
}
cbsnake.prototype.medium = function(){
this.setup(70);
this.buttons(‘true’);
document.getElementById(‘medium’).blur();
}
cbsnake.prototype.fast = function(){
this.setup(30);
this.buttons(‘true’);
document.getElementById(‘fast’).blur();
}
cbsnake.prototype.rannum = function(num1,num2){
num1 = parseInt(num1);
num2 = parseInt(num2);
var generator = Math.random()*(Math.abs(num2-num1));
generator = Math.round(num1+generator);
return generator;
}
cbsnake.prototype.moveapple = function(){
var usethis = false;
while(!usethis){
this.atop = this.correct[this.rannum(0,this.correct.length-1)];
this.aleft = this.correct[this.rannum(0,this.correct.length-1)];
if(this.numInArray(this.ctop,this.cleft,this.atop,this.aleft) == 0){
usethis = true;
}
}
document.getElementById(‘apple’).style.top = this.atop+"px";
document.getElementById(‘apple’).style.left = this.aleft+"px";
}
cbsnake.prototype.snakedir = function(e){
if(!e){
//IE…
e = window.event;
}
switch(e.keyCode){
case 38:
if(this.sdir != ‘down’ && this.sdirp != ‘down’){
this.sdirb = ‘up';
this.sdirp = ‘up';
}
break;
case 40:
if(this.sdir != ‘up’ && this.sdirp != ‘up’){
this.sdirb = ‘down';
this.sdirp = ‘down';
}
break;
case 37:
if(this.sdir != ‘right’ && this.sdirp != ‘right’){
this.sdirb = ‘left';
this.sdirp = ‘left';
}
break;
case 39:
if(this.sdir != ‘left’ && this.sdirp != ‘left’){
this.sdirb = ‘right';
this.sdirp = ‘right';
}
break;
case 32:
if(this.sdir == ‘none’ && this.sdirp != ‘none’){
this.sdirb = this.sdirp;
this.sdirp = ‘none';
}
else{
this.sdirp = this.sdir;
this.sdirb = ‘none';
}
break;
}
return this.stopgame;

}
cbsnake.prototype.msnake = function(){
if(this.stopgame === false){
if(this.sdir != ‘none’){
this.moveall();
}
var thisObj = this;
switch(this.sdir){
case ‘up':
this.ctop[0] = this.ctop[0] — this.jump;
document.getElementById(‘snake0′).style.top = this.ctop[0]+"px";
if((this.ctop[0] == this.zero && this.sdirb == ‘up’) || this.ctop[0] < this.zero){
this.gover();
}
break;
case ‘down':
this.ctop[0] = this.ctop[0] + this.jump;
document.getElementById(‘snake0′).style.top = this.ctop[0]+"px";
if((this.ctop[0] == this.daway && this.sdirb == ‘down’) || this.ctop[0] > this.daway){
this.gover();
}
break;
case ‘left':
this.cleft[0] = this.cleft[0] — this.jump;
document.getElementById(‘snake0′).style.left = this.cleft[0]+"px";
if((this.cleft[0] == this.zero && this.sdirb == ‘left’) || this.cleft[0] < this.zero){
this.gover();
}
break;
case ‘right':
this.cleft[0] = this.cleft[0] + this.jump;
document.getElementById(‘snake0′).style.left = this.cleft[0]+"px";
if((this.cleft[0] == this.daway && this.sdirb == ‘right’) || this.cleft[0] > this.daway){
this.gover();
}
break;
}
if(this.sdir != ‘none’){
this.hitself();
this.happle();
}
this.sdir = this.sdirb
setTimeout(function(){ thisObj.msnake() },this.speed);
}
}
cbsnake.prototype.gover = function(){
if(!this.stopgame){
this.stopgame = true;
var inner = document.getElementById(‘board’).innerHTML;
document.getElementById(‘board’).innerHTML = inner+'<div id="notice"><b>Игра окончена!</b><br> Счет: ‘+this.score+'</div><div id="i2"> Игра разработана автором блога: <a href="http://kpeople.ru">Kомпьютерный PEOPLE</a></div>';
document.getElementById(‘apple’).style.backgroundColor = ‘#D7BEBE';
for(i=0;i<this.cleft.length;i++){
document.getElementById(‘snake’+i).style.backgroundColor = ‘#BEBEBE';
}
this.buttons(»);
}
}
cbsnake.prototype.happle = function(){
if(this.atop == this.ctop[0] && this.aleft == this.cleft[0]){

this.score++;
document.getElementById(‘cscore’).innerHTML = this.score;
this.moveapple();
this.addsnake();
}
}
cbsnake.prototype.addsnake = function(){
var newsnake = document.createElement(‘div’);
var newid = ‘snake’+this.cleft.length;
newsnake.setAttribute(‘id’,newid);

newsnake.style.position = ‘absolute';
newsnake.style.top = ‘-10px';
newsnake.style.left = ‘-10px';
newsnake.style.display = ‘none';
newsnake.style.backgroundColor = ‘black';
newsnake.style.height = ‘7px';
newsnake.style.width = ‘7px';
newsnake.style.overflow = ‘hidden';
document.getElementById(‘board’).appendChild(newsnake);
this.cleft[this.cleft.length] = -10;
this.ctop[this.ctop.length] = -10;
}
cbsnake.prototype.moveall = function(){
var i = this.ctop.length — 1;
while(i != 0){
document.getElementById(‘snake’+i).style.top = document.getElementById(‘snake’+(i-1)).style.top;
document.getElementById(‘snake’+i).style.left = document.getElementById(‘snake’+(i-1)).style.left;
document.getElementById(‘snake’+i).style.display = ‘block';
this.ctop[i] = this.ctop[i-1];
this.cleft[i] = this.cleft[i-1];
i = i — 1;
}
}
cbsnake.prototype.numInArray = function(array,array2,value,value2){
var n = 0;
for (var i=0; i < array.length; i++) {
if (array[i] === value && array2[i] === value2) {
n++;
}
}
return n;
}
cbsnake.prototype.hitself = function(){
if(this.numInArray(this.ctop,this.cleft,this.ctop[0],this.cleft[0]) > 1){
this.gover();
}
}
cbsnake.prototype.buttons = function(setto){
document.getElementById(‘slow’).disabled = setto;
document.getElementById(‘medium’).disabled = setto;
document.getElementById(‘fast’).disabled = setto;
}
</script>
<style type="text/css">
.board{
width: 399px;
background-color: #D6EBFF;
border: 1px solid gray;
position: relative;
margin-left: 0;
margin-top: 0;
}
#board{
height: 399px;
border-bottom: 0px;
}
#apple{
position: absolute;
background-color: red;
height: 7px;
width: 7px;
overflow: hidden;
}
.snake{
position: absolute;
top: 200px;
left: 200px;
background-color: black;
height: 7px;
width: 7px;
overflow: hidden;
}
.snake2{
position: absolute;
top: -10px;
left: -10px;
background-color: black;
height: 7px;
width: 7px;
overflow: hidden;
}
#score{
height: 50px;
margin-top: 0px;
}
#cscore{
color: black;
padding-left: 10px;
float: left;
width: 25%;
font-size: xx-large;
}
#buttons{
float: right;
width: 50%;
text-align: right;
padding-top: 10px;
}
#notice{
position: absolute;
top: 1em;
left: 1em;
right: 1em;
text-align: center;
font-size: 150%;
}
#i2{
position: absolute;
bottom: 1em;
left: 1em;
right: 1em;
text-align: center;
font-size: 95%;
}
</style>

<script type="text/javascript">
var snake = new cbsnake();
</script>
[/php]

Комментарии

Все вроди как идеально работает но мне хотелось бы еще многое добавить к данному коду. Вот к примеру, чтобы можно было остановить игру, выйти, и продолжить через время (час, день) для этого можно использовать базы данных или сессии. Еще толком не придумал (можно и пароль). Также чтобы при начале игры можно было вводить имя и мыло, которое выводилось бы с выдачей результатов. И тогда люди могли бы соревноваться прямо здесь и все одновременно.

Мини-конкурс

Я вам предоставил исходный код игры, т.е. все данные вы имеете.
Что от вас требуется:

Добавить таблицу результатов, чтобы код запоминал игроков по имени, мылу и тд. А потом выводились все эти результаты по клике на ссылку «результаты» к примеру. Суть я думаю все ясна. Нужно чтобы код запоминал информацию об играющих.

На выполнение этого задания я даю вам 1 месяц, кто в итоге предоставит самый лучший код получит 200 рублей.


P.S.: Купить угги UGG Australia можно по ссылке http://allshoes.com.ua/catalog/ugg-australia, натуральная овчина.
Игра Snake на JavaScript. Давайте сыграем! + мини конкурс - установить на Андроид устройство → {попробуй найти игру в Google Play}

Для запуска приложения на компьютере используйте эмулятор Bluestacks (скачать), в нем собраны самые популярные игры, в которые можно порубиться абсолютно бесплатно!


Понравилась статья? Сделай приятно ее автору, поделись с друзьями:


Хотите получать обновления данного блога на EMail?

Введите адрес Почтового Ящика:




Подтвердите подписку в письме пришедшем на Почту, после чего начнете получить рассылку.