Не получается отрисовывать один объект несколько раз! HTML 5 CANVAS

@Gezerg · Регистрация: 01.12.2012

Студворк — интернет-сервис помощи студентам

Здравствуйте!
Я хочу, чтобы при клике на canvas добавлялся один объект в виде эллипса с координатами клика мыши. Этих объектов может быть много.
У каждого созданного объекта есть время жизни. Когда это время кончается, объект начинает увеличиваться. И при достижении определённого размера - исчезает.

Написал код нужной мне проги, но ни как не могу справиться с проблемой.

Например если кликнуть по canvas, то объект создаётся (так и должно быть). После 1 - 2 секунд создаю ещё 5 объектов. К этому времени первый объект уже начал увеличиваться. И когда первый объект увеличился и исчез, то другие объекты тоже тут же исчезают.

Как мне решить данную проблему?

Вот вам мой код на JavaScript (Я пока только начинающий в этой сфере, так что строго не судите

):

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
100
101
102
var canvas, w, h, ctx, game = true;
var bombs; //Массив бомб
var bombBool; //Показывает активна ли текущая бомбы? Если активна, то показать её
var countActiveBomb = 0; //Сколько бомб активированно
var maxBomb = 10; 
 
document.addEventListener('mousedown',function(event) //Событие нажатие левой кнопки мыши
{   
    if(countActiveBomb + 1 < maxBomb)
    {
        bombs[countActiveBomb] = new BOMB(event.offsetX, event.offsetY);
        bombBool[countActiveBomb] = true;
        countActiveBomb++;
    }
});
 
var BOMB = function(x,y)
{
    this.limit = 2000; //Время ожидания взрыва
    this.radius = 10;
    this.maxRadius = 100; //Предел увеличния бомбы
    this.timer = 0; //Текущее время бомбы
    this.x = x;
    this.y = y;
    this.activeBomb = countActiveBomb;
 
    this.draw = function(){
        if(bombBool[countActiveBomb - 1])
        {
            this.timer += 2;
            ctx.fillStyle = '#f00'; 
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
            ctx.closePath();
            ctx.fill();
            if(this.timer > this.limit){ //Если время истекло, то взврываем бомбу           
                var self = this;
                    self.explosion(); //Рисуем взрыв
                this.timer = 0;
            }else{
                var self = this;
                setTimeout(function() {
                    self.draw();
                }, 33);
            }
        }
    }
    //Рисуем взрыв
    this.explosion = function()
    {
        if(this.radius < this.maxRadius){
            //alert(this.radius);
            this.radius += 1;
            ctx.fillStyle = '#f00';
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
            ctx.closePath();
            ctx.fill();
        }else{
            bombBool[this.activeBomb - 1] = false;  
            countActiveBomb--;
        }
    }
 
}
 
window.onload = init;
 
 
function init(){
    canvas = document.getElementById("canvas");
    w = canvas.width;
    h = canvas.height;
    ctx = canvas.getContext('2d');
    bombs = [];
    bombBool = [];
 
    for(var i=0; i<maxBomb;i++){
        bombBool[i] = false; //Все бомбы не активны
    }
    beginGame();
}
 
 
function beginGame(){
    if(game){
        update();
    }else{
        setTimeout(gameover, 200);
    }
}
 
function update(){
    ctx.clearRect(0,0,w,h);
    for(var i=0; i<maxBomb;i++){
        //Если текущая бомба автивна, то рисуем её
        if(bombBool[i]){
            bombs[i].draw();
        }
    }
    window.webkitRequestAnimationFrame(beginGame);
}

@JsLoveR · 04.07.2013, 20:39

CSS
1
2
3
4
*{
        margin:0;
        padding:0;
}

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
var canvas, w, h, ctx, game = true;
var bombs = [];
var maxBomb = 10; 
var countActiveBomb = 0;
 
document.addEventListener('mousedown',function(event) //Событие нажатие левой кнопки мыши
{   
    if(countActiveBomb + 1 < maxBomb) {
                var bomb = new BOMB(event.pageX, event.pageY, countActiveBomb);
        bomb.activated = true;
                bombs[countActiveBomb] = bomb;
        countActiveBomb++;
    }
});
 
var BOMB = function(x, y, id)
{
    this.limit = 10; //Время ожидания взрыва
    this.radius = 10;
    this.maxRadius = 100; //Предел увеличния бомбы
    this.timer = 0; //Текущее время бомбы
    this.x = x;
    this.y = y;
    this.activated = false;
                 
    this.draw = function(){
         this.timer += 2;
         ctx.fillStyle = '#f00'; 
         ctx.beginPath();
         ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
         ctx.closePath();
         ctx.fill();
         if(this.timer > this.limit){ //Если время истекло, то взврываем бомбу           
            this.explosion(); //Рисуем взрыв
            this.timer = 0;
                    }
    }
    //Рисуем взрыв
    this.explosion = function()
    {
        if(this.radius < this.maxRadius){
            this.radius += 1;
            ctx.fillStyle = '#f00';
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);
            ctx.closePath();
            ctx.fill();
        }else{
            this.activated = false; 
                        
                }
    }
 
}
 
window.onload = init;
 
 
function init(){
    canvas = document.getElementById("canvas");
    w = canvas.width;
    h = canvas.height;
    ctx = canvas.getContext('2d');
    bombs = [];
     setInterval(function(){
                beginGame();
        }, 1000 / 60);
}
 
function beginGame(){
    if(game){
        update();
    }else{
        setTimeout(gameover, 200);
    }
}
 
  
function update(){
    ctx.clearRect(0, 0, w, h);
        
    for(var i = 0; i < countActiveBomb; i++){
        //Если текущая бомба автивна, то рисуем её
        if(bombs[i].activated){
            bombs[i].draw();
        }else {
                        bombs.splice(i, 1); 
                        countActiveBomb--;
                }
        }
   
}

@Gezerg · 05.07.2013, 23:37 **[ТС]**

JsLover, огромное спасибо!))

Новые блоги и статьи Все статьи Все блоги /
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ

@Gezerg 4 / 4 / 2 Регистрация: 01.12.2012 Сообщений: 39
	05.07.2013, 23:37 [ТС]
	JsLover, огромное спасибо!)) 0