Прогресс бар счётчик для уровней в игре на JavaScript

@script44 · Регистрация: 22.04.2015

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

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
<HTML>
 <HEAD>
 <style>
     .pg{width: 204px;
        border:2px solid #000000;}
     .pk{height:10px;  
        width:0px;
        background-color: #009900;
        color: white;}
      .k{background:#000000; 
        color: 3399CC;
        margin-bottom: 0px;
        font-size: 10pt;
        border: solid 2px #000000;}   
 </style>
 </HEAD>                
 <BODY>
 <script>
   var k=10; var h=10; var p=10;// переменные k,h,p начальное значение которое нужно набрать
   var g=0;  var f=0;  var m=0; var d=0; var s=0;
  function PX(){ s=f-g; 
    var bar = document.getElementById("bar");
    d=Math.floor(s*100/h).toFixed(0)
    bar.style.width = d*2;"px";
    sstt.innerHTML=d+"%"  
    sj.innerHTML=k-f;}                   
 
function DS1()                                 
  {f+=1; fk.innerHTML=f; if(f>=k)DL(),DM()} 
function DS5()                                 
  {f+=5; fk.innerHTML=f;  if(f>=k)DL(),DM()}
function DS10()                                 
  {f+=10; fk.innerHTML=f;  if(f>=k)DL(),DM()}
function DS50()                                 
  {f+=50; fk.innerHTML=f;  if(f>=k)DL(),DM()}
function DS100()                                 
  {f+=100; fk.innerHTML=f;  if(f>=k)DL(),DM()}
function DS500()                                 
  {f+=500; fk.innerHTML=f;   if(f>=k)DL(),DM()}
  
function DSminus1()
  {if(f<1)f+=1;f-=1; fk.innerHTML=f; if(f<k-h)DLminus(),DMminus()}                                
function DSminus10()
  {if(f<10)f+=10;f-=10; fk.innerHTML=f; if(f<k-h)DLminus(),DMminus()}    
function DSminus100()
  {if(f<100)f+=100;f-=100; fk.innerHTML=f; if(f<k-h)DLminus(),DMminus()}     
 
function DL()                                             
  {h+=10;k=h+k; //здесь h и p шаг прибавления всегда должны быть равны друг другу
   p+=10;g=k-p; 
  kf.innerHTML=k;
  if(f>=k)DL(),DM()}   
  
function DLminus()                                             
  {k=k-h;h-=10;   //здесь h и p шаг убавления всегда должны быть равны друг другу
   p-=10;g=k-p;
   kf.innerHTML=k;  
   if(f-g<0)DLminus(),DMminus()} 
  
function DMminus()                                             
  {m-=1;km.innerHTML=m}
function DM()                                             
  {m+=1;km.innerHTML=m}
  
function SB(){h=10;p=10;d=0;s=0;g=0;
  f=0; fk.innerHTML=f
  k=10;kf.innerHTML=k
  m=0; km.innerHTML=m }          
 </script>
 <table>
    <tr><td><div class="pg"><div id="bar" class="pk"></div></div></td> 
        <td><span id="sstt">0%</span></td>
    </tr>
 </table> 
 <span id="fk">0</span>/<span id="kf">10</span><br>  
 <input type="button" class="k" value="+1"    onclick="DS1(),PX()"> 
 <input type="button" class="k" value="+5"    onclick="DS5(),PX()"> 
 <input type="button" class="k" value="+10"   onclick="DS10(),PX()">
 <input type="button" class="k" value="+50"   onclick="DS50(),PX()"> 
 <input type="button" class="k" value="+100"  onclick="DS100(),PX()"> 
 <input type="button" class="k" value="+500"  onclick="DS500(),PX()"> 
 <input type="button" class="k" value="-1"    onclick="DSminus1(),PX()"> 
 <input type="button" class="k" value="-10"   onclick="DSminus10(),PX()">
 <input type="button" class="k" value="-100"  onclick="DSminus100(),PX()">
 <input type="button" class="k" value="сброс" onclick="SB(),PX()">
 <br> 
  уровень<span id="km">0</span><br>
  до следующего уровня осталось набрать<span id="sj">10</span>
 </BODY>
 </HTML>

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
<HTML>
 <HEAD>
  <style type = "text/css">
     .pgt{width: 204px;
         border:2px solid #000000;}
     .pkt{height:10px;
         width:0px;
         background-color: #0066FF;
         color: white;}
      .ks{background: #000000; 
         color: 009900;
         margin-bottom: 0px;
         font-size: 10pt;
         border: solid 2px #000000;}
   </style>
 </HEAD>                
 <BODY>
 
 <script>
   var c=0; var y=0; var n=10;//переменная n начальное значение которое нужно набрать 
   var a=0; var z=0;//z равняется начальное значение n вычесть z из шага прибавления(из функции FL)  
  function PX(){
   var bars = document.getElementById("bars");
    c=Math.floor(y*100/n).toFixed(0);  
    bars.style.width = c*2;"px";
    sst.innerHTML=c+"%"
    qq.innerHTML=n-y}
function RS1()                                 
  {if(y>=n-1)FL1(),AM();y+=1; yk.innerHTML=y;}
function RS5()                                 
  {if(y>=n-5)FL5(),AM();y+=5; yk.innerHTML=y;}
function RS10()                                 
  {if(y>=n-10)FL10(),AM();y+=10; yk.innerHTML=y;}  
function RS50()                                 
  {if(y>=n-50)FL50(),AM();y+=50; yk.innerHTML=y;}   
function RS100()                                 
  {if(y>=n-100)FL100(),AM();y+=100; yk.innerHTML=y;} 
 
function FL1()                                             
  {n+=10;z+=10;y=y-z;nf.innerHTML=n;if(y>=n-1)FL1(),AM()} //здесь n и z шаг прибавления всегда должны быть равны друг другу
function FL5()                                             
  {n+=10;z+=10;y=y-z;nf.innerHTML=n;if(y>=n-5)FL5(),AM()} 
function FL10()                                             
  {n+=10;z+=10;y=y-z;nf.innerHTML=n;if(y>=n-10)FL10(),AM()} 
function FL50()                                             
  {n+=10;z+=10;y=y-z;nf.innerHTML=n;if(y>=n-50)FL50(),AM()}  
function FL100()                                             
  {n+=10;z+=10;y=y-z;nf.innerHTML=n;if(y>=n-100)FL100(),AM()}
 
function RSmin1()
   {if(y+n<=10)y+=1;                                 
   if(y<1)FLmin1(),AMminus();y-=1; yk.innerHTML=y;} 
function RSmin10()
   {if(n<=10)y+=10;                                 
   if(y<10)FLmin10(),AMminus();y-=10;yk.innerHTML=y;}        
function RSmin100()
   {if(n<=40)y+=100;                                 
   if(y<100)FLmin100(),AMminus();y-=100; yk.innerHTML=y;}
 
function FLmin1()                                             
  {n-=10;z-=10;y=n-(-y);nf.innerHTML=n;if(y<1)FLmin1(),AMminus();}  //здесь n и z шаг убавления всегда должны быть равны друг другу
function FLmin10()                                             
  {n-=10;z-=10;y=n-(-y);nf.innerHTML=n;if(y<10)FLmin10(),AMminus();}            
function FLmin100()                                             
  {n-=10;z-=10;y=n-(-y);nf.innerHTML=n;if(y<100)FLmin100(),AMminus();} 
 
function AM()                                             
  {a+=1;am.innerHTML=a}
function AMminus()                                             
  {a-=1;am.innerHTML=a} 
function SBROS(){z=0;c=0;
  y=0; yk.innerHTML=y
  n=10;nf.innerHTML=n  
  a=0; am.innerHTML=a}
</script>
 <table>
    <tr><td><div class="pgt"><div id="bars" class="pkt"></div></div></td> 
        <td><span id="sst">0%</span></td>
    </tr>
 </table>    
 <span id="yk">0</span>/<span id="nf">10</span><br>  
 <input type="button" class="ks" value="+1"  onclick="RS1(),PX()"> 
 <input type="button" class="ks" value="+5"  onclick="RS5(),PX()"> 
 <input type="button" class="ks" value="+10" onclick="RS10(),PX()"> 
 <input type="button" class="ks" value="+50" onclick="RS50(),PX()"> 
 <input type="button" class="ks" value="+100" onclick="RS100(),PX()"> 
 <input type="button" class="ks" value="-1"   onclick="RSmin1(),PX()">  
 <input type="button" class="ks" value="-10"  onclick="RSmin10(),PX()">    
 <input type="button" class="ks" value="-100"  onclick="RSmin100(),PX()">  
 <input type="button" class="ks" value="сброс" onclick="SBROS(),PX()"> <br>
 
 уровень<span id="am">0</span><br>
 до следующего уровня осталось набрать<span id="qq">10</span>
 </BODY>
 </HTML>

@Unick · 01.09.2015, 00:15

а в чем проблема?
не можешь прогресс бар написать? или вопрос задать?

@script44 · 04.09.2015, 22:53 **[ТС]**

Там нет никаких проблем. Там два разных прогресс бара с счётчиком.
Выложил может кому пригодится.

Новые блоги и статьи Все статьи Все блоги /
Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/
Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .

@Unick не Администратор ^_^ 988 / 223 / 23 Регистрация: 03.05.2009 Сообщений: 1,493 Записей в блоге: 1
	01.09.2015, 00:15
	а в чем проблема? не можешь прогресс бар написать? или вопрос задать? 0

@script44 4 / 4 / 2 Регистрация: 22.04.2015 Сообщений: 13
	04.09.2015, 22:53 [ТС]
	Там нет никаких проблем. Там два разных прогресс бара с счётчиком. Выложил может кому пригодится. 0