Форум программистов, компьютерный форум, киберфорум
Наши страницы

JavaScript: HTML5 Canvas

Войти
Регистрация
Восстановить пароль
 
_HoBu4oK_
3 / 3 / 1
Регистрация: 18.07.2017
Сообщений: 83
#1

Реализация перезарядки - HTML5 Canvas

09.03.2018, 20:45. Просмотров 253. Ответов 2
Метки нет (Все метки)

Здравствуйте! Такая проблема. Делаю перезарядку для танка отприсованного на канвасе, тоесть идёт ещё милесекундное обновление всего скрипта. Суть такая, как сделать так, чтобы танк-бот выстрелил, а потом три секунды ещё не стрелял.
Делал так: когда враг появляется в определенном радиусе, танк делает выстрелы, пока не убьет противника. Но перезарядки просто нет, он стреляет каждые 0,5 сек. Поэтому организовал функцию
STARTTIME(time) {
time--;
if (time == 0) { return true; }
if (time > 0) { setInterval(start(time), 1000);
}
Где в функцию передается кол-во секунд перезарядки+1. Но это не работает, так как он запускает эту функцию каждую долюсекунду (обнавляет канвас, а заодно получается и запускает 100000 раз эту функцию) и в итоге true никак не доходит до бота => выстрелов нет.
Есть идеи как реализовать перезарядку?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
09.03.2018, 20:45
Я подобрал для вас темы с готовыми решениями и ответами на вопрос Реализация перезарядки (HTML5 Canvas):

Реализация Меню - JavaScript
Всем Привет особо с JavaScript не дружу... Потому прошу помощи есть менюшка такого плана -Пункт1 --Пункт1.1 ---Пункт1.1.1 ...

Реализация меню - JavaScript
Добрый день, хотел бы выяснить, как удобнее сделать, меню с раскрывающимися под-пунктами Может кто поделится опытом Я вот делаю с...

Реализация задачи - JavaScript
Здравствуйте! У меня такой вопрос. Представьте что сверху картинки лежит пустой div и при нажатии на div происходит присвоение некой...

Реализация анимации - JavaScript
Всем привет. Необходима любая информация по созданию анимации на основе костей( желательно на webgl, но подойдет и для opengl). Дело в том,...

реализация плеера - JavaScript
Здравствуйте! требуется сделать раелизацию плеера как в вк. тобишь чтобы при запуске песни уже запущенная свертывалась, плеер перемещался...

Анимация стрельбы&перезарядки - Unity, Unity3D
Всем привет. Снова. Такая проблема(в очередной раз), не воспроизводится анимация. Есть 2 нужных состояния:Shot и Reloading. Пытаюсь сделать...

2
Omion
20 / 20 / 5
Регистрация: 19.05.2015
Сообщений: 208
12.03.2018, 14:23 #2
не чтобы он 3секунды не стрелял, а чтоб стрелял каждые 3 сек-ды.
пусть функция выстрела запускает сама себя каждые три секунды

function babah(){(code)}

if babah true {
setinterval(babah, 3000)
потом clearTimeout
}

УСЁ
0
8Observer8
2032 / 1321 / 183
Регистрация: 05.10.2013
Сообщений: 4,180
Записей в блоге: 56
12.03.2018, 17:59 #3
Я давно интересуюсь, как делать браузерные игры, изучаю туторы, читаю книги. Почти везде пишут, что нужно делать главный цикл игры, так называемый игровой цикл. Использовать для него выгоднее более новый метод requestAnimationFrame, потому что браузеры лучше с ним работают. Обновление происходит в более выгодные для браузеров моменты. Этот метод срабатывает примерно 60 раз в секунду.

Сразу написать решение не могу. Попытаюсь постепенно на него выйти. Пишу из головы. Для начала создал класс Scene (файл Scene.js), как объект-синглтон (сцена же одна), в котором после вызова метода Animate(), из файла main.js, запустится главный игровой цикл, который будет вызывать два метода: Update() и Draw() объекта-синглтона Scene. Создал класс Tank (файл Tank.js), в котором будет определён метод Draw для рисования: корпуса танка, башни танка и пушки.

Вот что получилось на данный момент. Сейчас танк движется слева направо. Когда танк заезжает за правую границу <canvas>, то он появляется слева. Продолжу думать дальше немного позже. Попробуйте сделать Fork (нажать кнопку Fork), чтобы дописать что-то.

Демка в песочнице

index.h
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
 
<head>
    <title>Canvas API. Tanks</title>
    <link rel="stylesheet" href="style.css">
    <script src="Scene.js"></script>
    <script src="Tank.js"></script>
    <script src="main.js"></script>
</head>
 
<body>
    <canvas id="renderCanvas" width="300" height="300"></canvas>
</body>
 
</html>
main.js
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
"use strict";
 
style.css
[CSS]#renderCanvas {
    border: 1px solid black;
}[/CSS]
 
function main() {
    Scene.Initialize("renderCanvas");
    Scene.Animate();
}
window.onload = main;
Scene.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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
"use strict";
 
var Scene = (function() {
 
    var _canvas = null;
    var _ctx = null;
    var _player = null;
 
    function Initialize(canvasID) {
        _canvas = document.getElementById(canvasID);
        _ctx = _canvas.getContext("2d");
 
        _player = new Tank(_ctx, 50, 100);
    }
 
    function Animate() {
        requestAnimationFrame(Animate);
        _Update();
        _Draw();
    }
 
    function _Update() {
        var x = _player.GetX();
        _player.SetX(x + 1);
        
        if (x > _canvas.width + _player.GetBodySize() / 2) {
            _player.SetX(0 - _player.GetBodySize() / 2);
        }
    }
 
    function _Draw() {
        _ctx.fillStyle = "white";
        _ctx.fillRect(0, 0, _canvas.width, _canvas.height);
        _player.Draw();
    }
 
    return {
        Initialize: Initialize,
        Animate: Animate
    }
}());
Tank.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
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
"use strict";
 
var eTankDirection = Object.freeze({
    eUp: 0, eLeft: 1, eDown: 2, eRight: 3
});
 
function Tank(ctx, x, y) {
    this._ctx = ctx;
    this._x = x;
    this._y = y;
    this._bodySize = 50;
    this._towerSize = 25;
    this._gunWidth = 10;
    this._gunLength = 35;
    this._currentDirection = eTankDirection.eRight;
}
 
Tank.prototype.SetX = function(x) {
    this._x = x;
}
 
Tank.prototype.GetX = function() {
    return this._x;
}
 
Tank.prototype.SetY = function(y) {
    this._y = y;
}
 
Tank.prototype.GetY = function() {
    return this._y;
}
 
Tank.prototype.GetBodySize = function() {
    return this._bodySize;
}
 
Tank.prototype.Draw = function() {
    // Body
    this._ctx.fillStyle = "rgba(89, 155, 80, 255)";
    this._ctx.translate(this._x, this._y);
    this._ctx.fillRect(-this._bodySize / 2, -this._bodySize / 2, this._bodySize, this._bodySize);
    // Reset current transformation matrix to the identity matrix
    this._ctx.setTransform(1, 0, 0, 1, 0, 0);
 
    // Tower
    this._ctx.fillStyle = "rgba(85, 75, 17, 255)";
    this._ctx.translate(this._x, this._y);
    this._ctx.fillRect(-this._towerSize / 2, -this._towerSize / 2, this._towerSize, this._towerSize);
    // Reset current transformation matrix to the identity matrix
    this._ctx.setTransform(1, 0, 0, 1, 0, 0);
 
    // Gun
    this._SetGunDirection();
}
 
Tank.prototype._SetGunDirection = function() {
    this._ctx.translate(this._x, this._y);
 
    if (this._currentDirection === eTankDirection.eUp) {
        this._ctx.rotate(Math.PI);
    }
    else if (this._currentDirection === eTankDirection.eLeft) {
        this._ctx.rotate(Math.PI / 2)
    }
    else if (this._currentDirection === eTankDirection.eDown) {
        this._ctx.rotate(0)
    }
    else if (this._currentDirection === eTankDirection.eRight) {
        this._ctx.rotate(-Math.PI / 2)
    }
    this._ctx.fillRect(-this._gunWidth / 2, 0, this._gunWidth, this._gunLength);
    // Reset current transformation matrix to the identity matrix
    this._ctx.setTransform(1, 0, 0, 1, 0, 0);
}
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.03.2018, 17:59
Привет! Вот еще темы с ответами:

Пауза скрипта во время перезарядки - Unity, Unity3D
Как должно работать: мы стреляем-стреляем, закончились патроны запускаем анимацию перезарядки, пока идет анимация естественно что мы не...

Помощь с анимацией рук персонажа и перезарядки оружия - Графика
Кто может сделать анимации рук у персонажа от первого лица и анимации перезарядки оружия и т.д., либо кто может дать советы видео уроков ,...

Реализация ЛС - PHP БД
Добрый день, нужна помощь. Начинаю делать Личные сообщения. Стразу возникает вопрос. Как достать все значения из БД и поместить их в...

Реализация - C++
Кто может помочь с одним моментом в курсовике , курсовик сделан почти весь, но там буквально 5-7 строчек кода нужно чтобы всё заработало. ...


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

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru