Форум программистов, компьютерный форум, киберфорум
JavaScript: HTML5 Canvas
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.75/8: Рейтинг темы: голосов - 8, средняя оценка - 4.75
0 / 0 / 0
Регистрация: 08.01.2017
Сообщений: 125

Как сделать, чтобы змейка при столкновении со стеной двигалась вдоль неё?

05.01.2020, 11:04. Показов 1624. Ответов 4
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Есть задание, сделать змейку, но когда я сделал, чтобы она не врезалась, змейка ушла далеко за пределы карты. Вопрос, как сделать, чтобы она при столкновении со стеной двигалась вдоль неё?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
05.01.2020, 11:04
Ответы с готовыми решениями:

Как сделать так чтобы страничка при увеличения разрешения не двигалась в разные стороны, и как сделать чтобы при открытии в опере и в других браузерах
все обьекты на странице не двигались в разные стороны???

Как сделать чтобы, строка на панели двигалась?
<html> <head> <script language="JavaScript"> <!-- hide function statbar(txt) { window.status = txt; } //...

Как сделать, чтобы при наведении на пункт меню двигалась стрелка
Здравствуйте! Подскажите пожалуйста, как сделать такое меню, чтобы при нажатии на пункт меню двигалась стрелка и менялась картинка. ...

4
Эксперт JS
 Аватар для DrType
6553 / 3624 / 1075
Регистрация: 07.09.2019
Сообщений: 5,877
Записей в блоге: 1
05.01.2020, 12:33
Так может быть покажете, как Вы сделали?
0
0 / 0 / 0
Регистрация: 08.01.2017
Сообщений: 125
05.01.2020, 13:31  [ТС]
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
 
const ground = new Image();
ground.src = "img/ground.png";
 
const foodImg = new Image();
foodImg.src = "img/food.png";
 
let box = 32;
let score = 0;
 
let food = {
  x: Math.floor((Math.random() * 17 + 1)) * box,
  y: Math.floor((Math.random() * 15 + 3)) * box,
};
 
let snake = [];
snake[0] = {
  x: 9 * box,
  y: 10 * box
};
 
document.addEventListener("keydown", direction);
 
let dir;
 
function direction(event) {
  if(event.keyCode == 37 && dir != "right")
    dir = "left";
  else if(event.keyCode == 38 && dir != "down")
    dir = "up";
  else if(event.keyCode == 39 && dir != "left")
    dir = "right";
  else if(event.keyCode == 40 && dir != "up")
    dir = "down";
}
 
function eatTail(head, arr) {
  for(let i = 0; i < arr.length; i++) {
    if(head.x == arr[i].x && head.y == arr[i].y)
      clearInterval(game);
  }
}
 
function drawGame() {
  ctx.drawImage(ground, 0, 0);
 
  ctx.drawImage(foodImg, food.x, food.y);
 
  for(let i = 0; i < snake.length; i++) {
    ctx.fillStyle = i == 0 ? "green" : "red";
    ctx.fillRect(snake[i].x, snake[i].y, box, box);
  }
 
  ctx.fillStyle = "white";
  ctx.font = "50px Arial";
  ctx.fillText(score, box * 2.5, box * 1.7);
 
  let snakeX = snake[0].x;
  let snakeY = snake[0].y;
 
  if(snakeX == food.x && snakeY == food.y) {
    score++;
    food = {
      x: Math.floor((Math.random() * 17 + 1)) * box,
      y: Math.floor((Math.random() * 15 + 3)) * box,
    };
  } else {
    snake.pop();
  }
 
  //if(snakeX < box || snakeX > box * 17
  //|| snakeY < 3 * box || snakeY > box * 17)
  //snake left(game);
 
  if(dir == "left") snakeX -= box;
  if(dir == "right") snakeX += box;
  if(dir == "up") snakeY -= box;
  if(dir == "down") snakeY += box;
 
  let newHead = {
    x: snakeX,
    y: snakeY
  };
 
  eatTail(newHead, snake);
 
  snake.unshift(newHead);
}
 
let game = setInterval(drawGame, 100);
 
 
 
 
 
 
//
0
0 / 0 / 0
Регистрация: 08.01.2017
Сообщений: 125
07.01.2020, 08:08  [ТС]
выложил код

Добавлено через 1 минуту
DrType, выложил

Добавлено через 1 минуту
DrType,
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
 
const ground = new Image();
ground.src = "img/ground.png";
 
const foodImg = new Image();
foodImg.src = "img/food.png";
 
let box = 32;
let score = 0;
 
let food = {
  x: Math.floor((Math.random() * 17 + 1)) * box,
  y: Math.floor((Math.random() * 15 + 3)) * box,
};
 
let snake = [];
snake[0] = {
  x: 9 * box,
  y: 10 * box
};
 
document.addEventListener("keydown", direction);
 
let dir;
 
function direction(event) {
  if(event.keyCode == 37 && dir != "right")
    dir = "left";
  else if(event.keyCode == 38 && dir != "down")
    dir = "up";
  else if(event.keyCode == 39 && dir != "left")
    dir = "right";
  else if(event.keyCode == 40 && dir != "up")
    dir = "down";
}
 
function eatTail(head, arr) {
  for(let i = 0; i < arr.length; i++) {
    if(head.x == arr[i].x && head.y == arr[i].y)
      clearInterval(game);
  }
}
 
function drawGame() {
  ctx.drawImage(ground, 0, 0);
 
  ctx.drawImage(foodImg, food.x, food.y);
 
  for(let i = 0; i < snake.length; i++) {
    ctx.fillStyle = i == 0 ? "green" : "red";
    ctx.fillRect(snake[i].x, snake[i].y, box, box);
  }
 
  ctx.fillStyle = "white";
  ctx.font = "50px Arial";
  ctx.fillText(score, box * 2.5, box * 1.7);
 
  let snakeX = snake[0].x;
  let snakeY = snake[0].y;
 
  if(snakeX == food.x && snakeY == food.y) {
    score++;
    food = {
      x: Math.floor((Math.random() * 17 + 1)) * box,
      y: Math.floor((Math.random() * 15 + 3)) * box,
    };
  } else {
    snake.pop();
  }
 
  //if(snakeX < box || snakeX > box * 17
  //|| snakeY < 3 * box || snakeY > box * 17)
  //snake left(game);
 
  if(dir == "left") snakeX -= box;
  if(dir == "right") snakeX += box;
  if(dir == "up") snakeY -= box;
  if(dir == "down") snakeY += box;
 
  let newHead = {
    x: snakeX,
    y: snakeY
  };
 
  eatTail(newHead, snake);
 
  snake.unshift(newHead);
}
 
let game = setInterval(drawGame, 100);
 
 
 
 
 
 
//
0
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,966
Записей в блоге: 222
12.01.2020, 19:50
Выложите ещё картинки, потому что, например, я сначала копирую код, запускаю его, а потом начинаю разбираться, экспериментирую и запускаю.
1
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
12.01.2020, 19:50
Помогаю со студенческими работами здесь

Как сделать, чтобы при передвижении по экрану одной формы за ней двигалась другая?
Как сделать, чтобы при передвижении по экрану одной формы за ней двигалась другая?

Как сделать так чтобы при изменении размера окна апплета в Java картинка двигалась фиксировано с окном?
как сделать так чтобы при изменении размера окна апплета в Java картинка двигалась фиксировано с окном import java.applet.Applet; ...

Сделать рисунок в турбо паскале. И нужно сделать чтобы картника двигалась при нажатии на стрелки
(Ссылка на сторонний ресурс удалена)

Как сделать чтобы фигурка двигалась?
Как сделать чтобы фигурка двигалась? .386 .model stdcall, flat option casemap:none includelib \masm32\lib\kernel32.lib ...

Анимация. Как сделать, чтобы окружность двигалась по синусоиде?
Создать программу, показывающую движение окружности по синусоиде. Добавлено через 2 минуты Исходный код. При отладке программы,...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Новые блоги и статьи
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android
8Observer8 26.01.2026
Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru