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

Управление объектом с клавиатуры

24.03.2019, 14:16. Показов 8668. Ответов 2

Студворк — интернет-сервис помощи студентам
Добрый день пытаюсь сделать игру Астероид, и вот столкнулся с проблемой управления космическим кораблем, сначала сделал все таким образом, что если нажимаем на стрелку вверх то по оси Y летим вверх, если вниз то по оси Y летим вниз, далее стрелка вправо летим вперед по оси X, стрелка влево летим назад по оси Х. Как мне организовать управление чтобы космический корабль мог:
- лететь вперед;
- лететь назад;
- поворачиваться вокруг себя во время полета;

вообщем лететь в нужную сторону при повороте, когда летит вперед или летит назад и все это при взаимодействиями со стрелками. Помогите пожалуйста без чей либо помощи сложно разобраться в решении данной задачи, по возможности можно с рабочим примером
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
24.03.2019, 14:16
Ответы с готовыми решениями:

Меню. Управление с клавиатуры
Есть код меню. <div class='menu'> <ul class='menu-block'> <li><a class='hsub'...

Управление объектом с клавиатуры (задать движение)
есть флаг, нужно сделать так, чтобы можно было управлять им с клавиатуры. Код флага:program pr; uses graphABC; var x,y:integer; ...

Тач-управление объектом
Здравствуйте гуру У меня возникла проблема При движении пальца вверх или вниз по экрану моб.устройства объект соответственно...

2
9933 / 2936 / 494
Регистрация: 05.10.2013
Сообщений: 7,966
Записей в блоге: 227
25.03.2019, 13:01
My Original Message in English

This is very good tutorial for start: 2D breakout game using pure JavaScript
You will understand some very important and basic things. For example, how to control your main hero.

We can post our examples on Plunker: https://plnkr.co/edit/ I like Plunker because it allows to post multi file examples. You can create a link on Plunker and post it on the forum.

For example, you can run it: sandbox. But you should to copy code from sandbox to the forum accordingly of forum's rules.

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <h1>My Game</h1>
    
    <canvas id="myCanvas" width="256" height="256"></canvas>
    
    <script src="script.js"></script>
</body>
 
</html>
script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 0.2;
var dy = -0.2;
 
function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
 
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y += dy;
}
 
setInterval(draw, 10);


Translate Google Result:

Это очень хороший туториал для начала: 2D игра на чистом JavaScript Вы поймете некоторые очень важные и основные вещи. Например, как управлять своим главным героем.

Мы можем размещать наши примеры на Plunker: https://plnkr.co/edit/ Мне нравится Plunker, потому что он позволяет публиковать многофайловые примеры. Вы можете создать ссылку на Plunker и разместить ее на форуме.

Например, вы можете запустить его: песочница. Но вы должны скопировать код из песочницы на форум в соответствии с правилами форума.

index.html

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href="style.css">
</head>
 
<body>
    <h1>My Game</h1>
    
    <canvas id="myCanvas" width="256" height="256"></canvas>
    
    <script src="script.js"></script>
</body>
 
</html>
script.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var y = canvas.height - 30;
var dx = 0.2;
var dy = -0.2;
 
function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}
 
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y += dy;
}
 
setInterval(draw, 10);
1
0 / 0 / 0
Регистрация: 21.03.2017
Сообщений: 39
25.03.2019, 16:16  [ТС]
Здравствуйте, спасибо за ваш ответ, я уже видел подобную реализацию, но мне нужно было что то похожее на физику движения машинки по нажатию клавиш, вообщем реализовал это так

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
var cvs = document.getElementById('canvas');
var ctx = cvs.getContext('2d');
var rocket = new Image(); //изображение ракеты
rocket.src = 'img/rocket3.png';//подключение изображения
 
// позиция ракеты
var RposX = 50; //позиция x
var RposY = cvs.height/2; //позиция y
var angle = 0; //угол
 
/ нажатие на кнопки
document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
    
});
 
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});
 
//кнопки управления ракетой
function keys(){
    if (keys[87]) {//W-up
         moveAngle(5);
    }
    
    if (keys[83]) {//S-down
        moveAngle(-2);
    }
    if (keys[68]) {//D - right
        turn(7);
    }
    if (keys[65]) {//A-left
        turn(-7);
    }
 
}
 
 
//функция для изменения угла ракеты (поворот ракеты)
function turn(a){
        angle += a
}
 
//функция перевода в радианы
function Radian(a) {
    return Math.PI / 180 * a
}
 
//функция для определения направления полета ракеты
function moveAngle(a) {
    b = Radian(angle);
    RposX += a * Math.cos(b);
    RposY += a * Math.sin(b);
}
 
function drawRotatedRocket(image,x,y,angle){//прорисовка ракеты 
    ctx.save(); 
    //смещение начала координат
    ctx.translate(x, y);
    keys();
    ctx.rotate(Radian(angle ));//поворот в зависимости от угла вокруг начала координат
 
 
    ctx.drawImage(image, -(image.width/2), -(image.height/2));
 
    // восстановление положения canvas
    ctx.restore(); 
}
 
//подключение ресурсов
function Resources() {
    drawRotatedRocket(rocket,RposX,RposY,angle);
 
 
    requestAnimationFrame(Resources);
}
 
 
 
 
rocket.onload = Resources();
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>Game</title>
<!--link rel="shortcut icon" href="images/icon.png" type="image/x-icon">-->
</head>
 
<body>
 
        <canvas id="canvas" width="620" height="400"></canvas>
 
    
 
<!--js-->
<script src="index.js"></script>
</body>
</html>
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
25.03.2019, 16:16
Помогаю со студенческими работами здесь

Управление объектом в canvas
Graphics::TBitmap* gBitmap = new Graphics::TBitmap; gBitmap-&gt;LoadFromFile(&quot;0.bmp&quot;); pbx-&gt;Canvas-&gt;Draw(0,0,gBitmap); ...

Управление объектом в экранных координатах
Здравствуйте , хочу узнать как можно выставить объект не в мировых координатах , а в экранных

управление объектом (клава) неработает
у меня есть imagebox которым можно управлять стрелками, но вдруг если на форие появляется PictureBox мой объект перестайт двигаться! Что...

Управление анимированным объектом на канве
Здравствуйте! Как реализовать анимацию движения персонажа? Картинки необходимые имеются... Движение по карте я реализовал. Но никак...

Управление объектом из обычной процедуры
Здравствуйте! Возможно заголовок не совсем корректно описывает суть проблемы, а может и вообще это чушь, но как по другому выразить я не...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru