3/3/23, 10:58 AM h:\Examples\Timer Exerise\Timer (Before).
html
1 <html>
2 <head>
3 <style>
4 canvas{
5 background: #dddddd;
6 }
7 </style>
8 <script>
9 var gameState = "play";
10 var recta = true
11 // This timer class keeps track of how much time has elapsed
12 // since the last time it fired.
13 class timerClass{
14 constructor(timeIntervalMS){
15 // Initialize oldTime to be the time of creation
16 [Link] = new Date();
17
18 // Set interval to elapse before the timer fires
19 [Link] = timeIntervalMS;
20
21 // Keeps track of the # of milliseconds accumulated since the last firing
22 [Link] = 0;
23 }
24
25 // This method returns true if the timer is ready to fire, false otherwise
26 // If it returns true, then resets fire interval
27 isReady(){
28 var curTime = new Date();
29 var delta = curTime - [Link];
30
31 [Link] += delta;
32 [Link] = curTime;
33 if ([Link] > [Link]){
34 [Link] = 0;
35 return true;
36 }
37 else{
38 return false;
39 }
40 }
41 }
42 class rectClass{
43 constructor(x, y, width, height){
44 // use th passed-in parameters to define this particular object's
attributes
45 this.x = x;
46 this.y = y;
47 [Link] = width;
48 [Link] = height;
49 [Link] = "red";
50
51 }
52 update(){
53 this.x =[Link]([Link]()*501)+100
54 this.y =[Link]([Link]()*301)+100
55 [Link] =[Link]([Link]()*76)+75
56 [Link] =[Link]([Link]()*76)+75
localhost:60131 1/5
3/3/23, 10:58 AM h:\Examples\Timer Exerise\Timer (Before).html
57 if([Link] == "red"){
58 [Link] = "green"
59 }
60 else if([Link] == "green"){
61 [Link] = "blue"
62 }
63 else if([Link] == "blue"){
64 [Link] = "red"
65 }
66
67
68 }
69 }
70
71 var rect1 = new rectClass(200, 150, 100, 100)
72
73 var sndCymbal = new Audio('[Link]');
74
75 var bCymbal = true
76
77 var timerCymbal = new timerClass(400)
78
79
80 var sndSnare = new Audio('[Link]');
81
82 var bSnare = true
83
84 var timerSnare = new timerClass(450)
85
86
87
88 var sndKick = new Audio('[Link]');
89
90 var bKick = true
91
92 var timerKick = new timerClass(350)
93
94
95
96 var sndTop = new Audio('[Link]');
97
98 var bTop = true
99
100 var timerTop = new timerClass(300)
101
102 // Canvas context; used to call Canvas methods
103 var c;
104
105 // Canvas width and height.
106 var cWidth, cHeight;
107
108 // Stores the current keyboard state
109 var curkeys = [];
110
111 // Stores keys that have been newly pressed since last update
112 var newkeys = [];
113
localhost:60131 2/5
3/3/23, 10:58 AM h:\Examples\Timer Exerise\Timer (Before).html
114 // Initializes entire game framework. This method should only be called
115 // once, by the body onload event handler.
116 function gameFrameworkInit(){
117 // Initialize key arrays
118 for (i = 0; i < 256; i++){
119 curkeys[i] = false;
120 newkeys[i] = false;
121 }
122
123 // Initialize global variables for canvas
124 c = [Link]('2d');
125 cWidth = [Link];
126 cHeight = [Link];
127
128 // Start listeners for getting keyboard state
129 [Link]('keydown',
130 function(e){
131 if (!curkeys[[Link]]){
132 curkeys[[Link]] = true;
133 newkeys[[Link]] = true;
134 }
135 }
136 );
137
138 [Link]('keyup',
139 function(e){ curkeys[[Link]] = false; }
140 );
141
142 // Schedule the update function to be called right before the next repaint.
143 // (At the end of the update function, it will schedule itself to be called
144 // again before the NEXT repaint, and so on.
145 [Link](gameUpdate);
146 }
147
148 function gameUpdate(){
149 // ADD YOUR UPDATE CODE HERE
150 if(gameState == "play"){
151
152 if([Link]() && bCymbal){
153 [Link] = 0;
154 [Link]()
155
156 }
157 if([Link]() && bSnare){
158 [Link] = 0;
159 [Link]()
160
161 }
162 if([Link]() && bKick){
163 [Link] = 0;
164 [Link]()
165
166 }
167 if([Link]() && bTop){
168 [Link] = 0;
169 [Link]()
170
localhost:60131 3/5
3/3/23, 10:58 AM h:\Examples\Timer Exerise\Timer (Before).html
171 }
172
173
174 if(newkeys[80]){ // P key
175 gameState = "paused"
176 }
177
178 if(newkeys[67]){
179 if(bCymbal){
180 bCymbal = false
181 }else{
182 bCymbal= true
183 }
184
185
186 }
187
188 if(newkeys[83]){ // S key
189 if(bSnare){
190 bSnare = false
191 }else{
192 bSnare= true
193 }
194
195 }
196
197 if(newkeys[75]){ // K Key
198 if(bKick){
199 bKick = false
200 }else{
201 bKick = true
202 }
203
204 }
205
206 if(newkeys[84]){ // T Key
207 if(bTop){
208 bTop = false
209 }else{
210 bTop= true
211 }
212
213 }
214
215 }
216 else if (gameState == "paused"){
217 if(newkeys[80]){
218 gameState = "play"
219 }
220 }
221
222 [Link]()
223
224 // Reset newkeys
225 for (i = 0; i < 256; i++){
226 newkeys[i] = false;
227 }
localhost:60131 4/5
3/3/23, 10:58 AM h:\Examples\Timer Exerise\Timer (Before).html
228
229 // At the end of the update function, repaint the screen
230 gameDraw();
231
232 // Last thing the update function does is to schedule itself to be called
233 // again before the next repaint
234 [Link](gameUpdate);
235 }
236
237 function gameDraw(){
238 // Clear the canvas before we draw the current frame
239 [Link](0,0,cWidth,cHeight);
240
241 [Link] = [Link]
242 [Link](rect1.x, rect1.y, [Link], [Link])
243
244 // ADD YOUR DRAW CODE HERE
245 }
246
247 </script>
248 </head>
249 <body onload="gameFrameworkInit()">
250 <canvas id="myCanvas" width="800" height="600"></canvas>
251 </body>
252 </html>
localhost:60131 5/5