Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.12.2018, 12:58
Новичок на форуме
Отправить личное сообщение для Мика Посмотреть профиль Найти все сообщения от Мика
 
Регистрация: 06.12.2018
Сообщений: 7

Помогите разобраться в игре.
Здравствуйте друзья. У меня возникла проблема, решил написать игру ( змейку) использую девственный .JS, но вот не задача, в коде какая-та ошибка. Я очень долго перечитывал код, искал ошибку, прогнал его на всех возможных ресурсах для проверки валидности. Ничего не помогло, решил написать на разных форумах " Письмо Помощи", в надежде что найдутся люди более опытней чем я и помогут найти ошибку в коде.
Вот собственно сам код :

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var width = canvas.width;
var height = canvas.height;

var blockSize = 10;
var widthInBlocks = width / blockSize;
var heightInBlock = height / blockSize;

var score = 0;

var drawBorder = function () {
ctx.fillStyle = "Gray";
ctx.fillRect(0,0,width,blockSize);
ctx.fillRect(0,height - blockSize, width,blockSize);
ctx.fillRect(0,0,blockSize, height);
ctx.fillRect(width - blockSize, 0, blockSize, height);
};

var drawScore = function () {
ctx.font = "20px Courier"
ctx.fillStyle = "Black";
ctx.textAlign = "left";
ctx.textBaseLine = "top";
ctx.fillText ("Score:" + score, blockSize, blockSize);
};

var gameOver = function () {
clearInterval (intervalId);
ctx.font = "60px Courier";
ctx.fillStyle = "Black";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText ("Suck my dick", width / 2, height / 2);
};

var circle = function (x,y, radius, fillCircle) {
ctx.beginPath ();
ctx.arc(x,y,radius, 0, Math.PI *2, false);
if (fillCircle) {
ctx.fill ();
} else {
ctx.stroke ();
}
};

var Block = function (col, row) {
this.col = col;
this.row = row;
};

Block.prototype.drawSquare = function (color) {
var x = this.col * blockSize;
var y = this.row * blockSize;
ctx.fillStyle = color;
ctx.fillRect (x, y, blockSize, blockSize);
};

Block.prototype.drawCircle = function (color) {
var conterX = this.col * blockSize + blockSize /2; 
var centerY = this.row * blockSize + blockSize /2;
ctx.fillStyle = color;
circle (centerX, centerY,blockSize / 2, true);
};

Block.prototype.equal = function (otherBlock) {
return this.col === otherBlock.col && this.row === otherBlock.row;
};

var Snake = function () {
this.segments = [
new Block (7, 5),
new Block (6, 5),
new Block (5, 5)
];
this.direction = "right";
this.nextDirection = "right";
};

Snake.prototype.draw = function () {
for (var i = 0; i < this.segments.length; i++) {
this.segments.drawSquare("Blue");
}
};

Snake.prototype.move = function () {
var head = this.segments [0];
var newHead;

this.direction = this.nextDirection;

if (this.direction === "right") {
newHead = new Block(head.col + 1, head.row);
}	else if (this.direction === "down") {
newHead = new Block(head.col, head.row + 1);
}	else if (this.direction ==="left") {
newHead = new Block(head.col - 1, head.row);
}	else if (this.direction ==="up") {
newHead = new Block(head.col, head.row - 1 );
}

if (this.checkCollision(newHead)) {
gameOver();
return;
}
this.segments.unshift (newHead);
if (newHead.equal (apple.position)) {
score++;
apple.move();
} else {
this.segments.pop();
}
};

Snake.prototype.checkCollision = function (head) {
var leftCollision = (head.col === 0);
var topCollision = (head.row === 0);
var rightCollision = (head.col === widthInBlocks - 1 );
var wallCollision = (head.row === heightInBlocks - 1);

var wallCollision = LeftCollision || topCollision ||
rightCollision || bottomCollision;

var selfCollision = false;

for (var i = 0; i < this.segments.length; i++) {
if (head.equal(this.segments)) {	
selfCollision = true;
}
}

return wallCollision || selfCollision;
};

Snake.prototype.setDirection = function (newDirection) {
if (this.direction === "up" && newDirection === "down") {
return;
} else if (this.direction === "right" && newDirection === "left") {
return;
} else if (this.direction === "down" && newDirection === "up") {
return;
} else if (this.direction === "left" && newDirection === "right") {
return;
}
this.nextDirection = newDirection;
};

var Apple = function () {
this.position = new Block (10, 10);
};

Apple.prototype.draw = function () {
this.position.drawCircle ("LimeGreen");
};

Apple.prototype.move = function () {
var randomCol = Math.floor(Math.random () * (widthInBlocks - 2)) + 1;
var randomRow = Math.floor(Math.random () * (heightInBlocks - 2)) + 1;
this.position = new Block(randomCol, randomRow);
};

var snake = new Snake ();
var apple = new Apple ();

var intervalId = setInterval (function () {
ctx.clearRect (0, 0, width, height);
drawScore();
snake.move();
snake.draw();
apple.draw();
drawBorder();
}, 100);

var directions = {
37: "left",
38: "up",
39: "right",
40: "down"
};

$("body").keydown(function (event) {
var newDirection = directions[event.keyCode];
if (newDirection !== underfind) {
snake.setDirection(newDirection);
}
});




Как я юзаю его. Создаю html-файлик и кидаю код туда.
<!DOCTYPE html>
<head>
<title>Snake</title>
</head>
<script>

<----------------- Вот здесь размещаю змеечку --------|

</script>
</body>
</html>

Последний раз редактировалось Мика, 06.12.2018 в 15:07. Причина: Для удобства.
Ответить с цитированием
  #2 (permalink)  
Старый 06.12.2018, 13:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,037

Мика,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
  #3 (permalink)  
Старый 06.12.2018, 13:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,576

https://learn.javascript.ru/devtools
Ответить с цитированием
  #4 (permalink)  
Старый 06.12.2018, 14:06
Новичок на форуме
Отправить личное сообщение для Мика Посмотреть профиль Найти все сообщения от Мика
 
Регистрация: 06.12.2018
Сообщений: 7

Вот в таком виде пойдёт ?
Ответить с цитированием
  #5 (permalink)  
Старый 06.12.2018, 14:20
Новичок на форуме
Отправить личное сообщение для Мика Посмотреть профиль Найти все сообщения от Мика
 
Регистрация: 06.12.2018
Сообщений: 7

https://o525.ru/TzXDxLWBOsyi6f2yPbH18_Eqjs4
Ничего не понял =-(
Ответить с цитированием
  #6 (permalink)  
Старый 06.12.2018, 14:20
Новичок на форуме
Отправить личное сообщение для Мика Посмотреть профиль Найти все сообщения от Мика
 
Регистрация: 06.12.2018
Сообщений: 7

https://o525.ru/j_AMabicI5LwXNlqX_rS-I0AzcM
Ответить с цитированием
  #7 (permalink)  
Старый 06.12.2018, 14:30
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 2,576

Мика, скрипт свой перед </body> вставляйте.
Ответить с цитированием
  #8 (permalink)  
Старый 06.12.2018, 14:36
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 885

посмотри на 9 и 120 строки в твоем сообщении.
И блин меня реально пугает и раздражает код с setInterval ссылка на старую тему

Последний раз редактировалось MallSerg, 06.12.2018 в 14:40.
Ответить с цитированием
  #9 (permalink)  
Старый 06.12.2018, 15:02
Новичок на форуме
Отправить личное сообщение для Мика Посмотреть профиль Найти все сообщения от Мика
 
Регистрация: 06.12.2018
Сообщений: 7

Попробовал, не получилось.
Ответить с цитированием
  #10 (permalink)  
Старый 06.12.2018, 15:03
Новичок на форуме
Отправить личное сообщение для Мика Посмотреть профиль Найти все сообщения от Мика
 
Регистрация: 06.12.2018
Сообщений: 7

Я не совсем понял что не так в 9 строке.
120 строку исправил, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите разобраться с функцией .height() kos0760 Элементы интерфейса 2 25.05.2017 00:51
помогите разобраться с this uroboros7 jQuery 4 02.01.2015 00:56
Помогите разобраться с калькулятором Maksim858 Ваши сайты и скрипты 1 27.12.2014 13:23
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44
Помогите разобраться с галереей IMAGIN yana_studio Общие вопросы Javascript 4 12.12.2009 17:24