webkitAudioContext Playback of base64 WAV - javascript

I have a wav file which with: ffmpeg -i my.wav
Gives the output:
output: Duration: 00:00:12.63, bitrate: 352 kb/s
Stream #0.0: Audio: pcm_s16le, 22050 Hz, 1 channels, s16, 352 kb/s
This is stored as a base64 string in JavaScript loaded in memory as base64 variable listed below.
Here is the code:
byte_str = Base64.decode(base64)
buffer = new ArrayBuffer(byte_str.length*2)
buffer_view = new Uint16Array(buffer)
/* this is coffeescript */
for i in [0..byte_str.length]
buffer_view[i] = byte_str.charCodeAt(i)
console.log(byte_str.length)
console.log(buffer_view)
console.log(buffer_view.buffer)
context = new webkitAudioContext()
context.decodeAudioData(buffer,function (buffer) {
/* never gets hit */
source = #context.createBufferSource()
source.buffer = buffer
source.connect(#context.destination)
source.noteOn(0)
});
Output:
108185
[82, 73, 70, 70, 36, 128, 87, 65, 86, 69, 102, 109, 116, 32, 16, 0, 0, 0, 1, 0, 1, 0, 34, 86, 0, 0, 68, 49152, 2, 0, 16, 0, 100, 97, 116, 97, 0, 128, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,....]
ArrayBuffer {byteLength: 216370}
If you look in this presentation it has a WAV header:
http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#29
var header = new Uint8Array([
0x52,0x49,0x46,0x46, // "RIFF"
0, 0, 0, 0, // put total size here
0x57,0x41,0x56,0x45,
...
]);
Which is identical to mine if you convert the first values to hex, yet on mine the callback never fires for decodeAudioData. Any ideas?


It turns out it was an encoding issue using this library: http://www.webtoolkit.info/javascript-base64.html I removed the _utf8_decode step and it worked great!

Related

Translating Python loop to Javascript [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 28 days ago.
Improve this question
How can I yield the same output in Javascript, given this Python example?
I want to loop over an array and check a value, if condition met, store it.
arr1 = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0, 0,
13, 13, 0, 0, 0, 0, 0, 0, 0, 0, 13, 13, 0, 0, 0, 0, 0, 0,
0, 0, 0, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0,
0, 0]
new_labels = []
previous = None
for l in arr1:
if l != previous:
new_labels.append(l)
previous = l
# expected:
[0, 7, 0, 13, 0, 13, 0, 15, 0, 14, 0, 2, 0]

This can be done more simply with Array#filter.
let arr1 = [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 7, 0, 0, 0, 0, 0, 0, 0,13, 13, 0, 0, 0, 0, 0, 0, 0, 0, 13, 13, 0, 0, 0, 0, 0, 0,0, 0, 0, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0,0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0,0, 0];
let res = arr1.filter((x, i) => x !== arr1[i - 1]);
console.log(JSON.stringify(res));

Canvas game slows down after a while. What could have caused this?

I'm making a breakout game with html canvas and javascript. I'm working on this project for a while.
Yesterday i realized that game started the slow down after hours of playing. I checked my code but everything was fine. Then i restarted chrome and the game back to normal. What could have caused this?
Is chrome collecting objects or something on the background and it gets heavy after hours? is that a thing?
Here is the all the js code:
document.addEventListener("DOMContentLoaded", function(){
canvas = document.getElementById("ctx").getContext("2d");
document.addEventListener("keydown", keyDown, false);
document.addEventListener("keyup", keyUp, false);
document.querySelector("#newGame").addEventListener("click", newGame, false);
document.querySelector("#pickLevel").addEventListener("click", pickLevel, false);
document.querySelector("#restart").addEventListener("click", restart, false);
document.querySelector("#toMainMenu").addEventListener("click", mainMenu, false);
levels = {
map01 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 8, 10, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7, 13, 15, 17, 10, 1, 0, 0, 0, 0, 0, 0, 0, 19, 14, 20, 2, 4, 17, 8, 17, 0, 0, 0, 0, 0, 0, 0, 21, 2, 9, 11, 9, 15, 0, 0, 0, 0, 0, 0, 4, 0, 0, 10, 11, 18, 16, 0, 0, 4, 0, 0, 0, 3, 11, 3, 0, 0, 19, 20, 0, 0, 3, 11, 3, 0, 2, 10, 18, 10, 2, 0, 0, 0, 0, 2, 10, 18, 10, 1, 0, 17, 13, 17, 9, 1, 0, 0, 1, 9, 17, 5, 17, 0, 0, 0, 20, 12, 16, 8, 7, 6, 8, 3, 4, 12, 0, 0, 0, 0, 0, 19, 11, 15, 14, 13, 15, 10, 11, 0, 0, 0, 0, 0, 0, 0, 18, 10, 21, 20, 2, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 9, 1, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map02 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 4, 10, 11, 12, 0, 0, 17, 18, 19, 4, 5, 0, 0, 8, 11, 14, 10, 13, 0, 0, 15, 16, 17, 18, 19, 0, 0, 15, 18, 21, 17, 20, 0, 0, 8, 9, 10, 11, 12, 0, 0, 8, 9, 10, 11, 12, 0, 0, 21, 14, 7, 6, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 5, 1, 4, 7, 0, 0, 7, 20, 7, 13, 14, 0, 0, 9, 12, 8, 11, 14, 0, 0, 14, 6, 12, 4, 10, 0, 0, 16, 19, 15, 18, 21, 0, 0, 21, 13, 19, 11, 17, 0, 0, 15, 16, 17, 18, 19, 0, 0, 8, 20, 15, 18, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 12, 13, 14, 5, 1, 0, 0, 7, 9, 13, 14, 14, 0, 0, 10, 13, 9, 12, 8, 0, 0, 14, 6, 12, 4, 10, 0, 0, 17, 20, 16, 19, 15, 0, 0, 21, 13, 19, 11, 17, 0, 0, 10, 11, 12, 13, 14, 0, 0, 15, 20, 11, 18, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map03 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 2, 3, 4, 5, 6, 7, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 1, 2, 3, 4, 5, 6, 15, 16, 17, 18, 19, 20, 21, 8, 8, 9, 10, 11, 12, 13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map04 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 3, 11, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 17, 16, 18, 4, 20, 0, 0, 0, 0, 0, 0, 0, 20, 10, 17, 18, 19, 13, 14, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 4, 19, 8, 9, 10, 11, 12, 13, 10, 17, 7, 0, 6, 1, 16, 15, 16, 17, 18, 19, 20, 21, 6, 7, 1, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 9, 10, 11, 12, 13, 14, 2, 3, 4, 5, 6, 7, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 16, 17, 18, 19, 20, 21, 1, 0, 0, 0, 0, 0, 0, 0, 1, 2, 3, 4, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 9, 10, 11, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map05 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 15, 8, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 10, 16, 0, 0, 9, 3, 0, 0, 0, 0, 0, 0, 0, 11, 17, 0, 13, 7, 0, 10, 4, 0, 0, 0, 0, 0, 12, 18, 0, 5, 20, 14, 6, 0, 11, 5, 0, 0, 0, 13, 19, 0, 4, 12, 20, 21, 13, 20, 0, 12, 6, 0, 14, 20, 0, 3, 11, 19, 0, 0, 20, 12, 4, 0, 13, 7, 21, 0, 2, 10, 18, 0, 3, 4, 0, 19, 11, 3, 0, 14, 0, 1, 9, 17, 0, 7, 10, 11, 1, 0, 18, 10, 2, 0, 7, 8, 16, 0, 10, 14, 17, 18, 8, 7, 0, 17, 9, 1, 14, 15, 0, 1, 17, 21, 0, 0, 15, 14, 3, 0, 16, 8, 0, 0, 1, 8, 19, 0, 17, 18, 0, 21, 10, 7, 0, 0, 0, 0, 8, 15, 0, 2, 8, 9, 10, 0, 17, 14, 0, 0, 0, 0, 0, 0, 16, 11, 0, 0, 14, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map06 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 18, 1, 8, 16, 11, 0, 6, 7, 0, 0, 0, 0, 0, 3, 2, 8, 15, 4, 0, 13, 6, 14, 0, 0, 0, 0, 10, 3, 9, 15, 19, 0, 20, 5, 13, 21, 0, 0, 0, 17, 4, 10, 16, 12, 0, 7, 4, 12, 20, 19, 0, 0, 2, 5, 11, 17, 5, 0, 21, 3, 11, 19, 12, 0, 0, 9, 6, 12, 18, 20, 0, 1, 2, 10, 18, 18, 0, 0, 16, 17, 13, 19, 13, 0, 8, 1, 9, 17, 11, 0, 0, 0, 1, 15, 20, 6, 0, 2, 7, 8, 16, 4, 0, 0, 0, 0, 8, 17, 21, 0, 9, 6, 14, 15, 17, 0, 0, 0, 0, 0, 15, 14, 0, 16, 5, 13, 21, 10, 0, 0, 0, 0, 0, 0, 7, 0, 4, 4, 12, 20, 3, 0, 0, 0, 0, 0, 0, 0, 0, 11, 3, 11, 19, 16, 0, 0, 0, 0, 0, 0, 0, 0, 17, 10, 10, 18, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 15, 17, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 17, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map07 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 6, 20, 0, 0, 0, 20, 5, 0, 0, 0, 0, 0, 0, 5, 13, 18, 14, 0, 8, 2, 12, 4, 0, 0, 0, 0, 0, 12, 2, 5, 21, 3, 15, 3, 4, 11, 0, 0, 0, 0, 3, 19, 9, 12, 7, 10, 6, 10, 11, 1, 1, 0, 0, 0, 10, 21, 16, 19, 14, 17, 13, 17, 18, 1, 8, 0, 0, 0, 17, 1, 2, 3, 4, 5, 6, 7, 1, 2, 15, 0, 0, 0, 4, 8, 9, 10, 11, 12, 13, 14, 8, 9, 2, 0, 0, 0, 11, 15, 16, 17, 18, 19, 20, 21, 15, 16, 9, 0, 0, 0, 18, 20, 1, 2, 3, 4, 5, 6, 7, 3, 16, 0, 0, 0, 0, 1, 8, 9, 10, 11, 12, 13, 14, 10, 0, 0, 0, 0, 0, 8, 15, 16, 17, 18, 19, 20, 21, 17, 0, 0, 0, 0, 0, 15, 7, 1, 3, 4, 5, 6, 4, 20, 0, 0, 0, 0, 0, 0, 14, 8, 10, 11, 12, 13, 11, 0, 0, 0, 0, 0, 0, 0, 21, 16, 17, 18, 19, 16, 18, 0, 0, 0, 0, 0, 0, 0, 0, 20, 6, 7, 5, 20, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 13, 14, 12, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 20, 20, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map08 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 8, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 15, 12, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 19, 9, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9, 6, 16, 12, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 13, 3, 19, 8, 3, 0, 0, 0, 0, 0, 0, 0, 0, 3, 20, 10, 6, 15, 10, 5, 0, 0, 0, 0, 0, 0, 0, 10, 7, 17, 13, 2, 17, 12, 6, 0, 0, 0, 0, 0, 0, 17, 14, 4, 20, 9, 4, 19, 13, 7, 0, 0, 0, 0, 0, 4, 1, 11, 7, 16, 11, 8, 20, 14, 1, 0, 0, 0, 0, 11, 8, 18, 14, 17, 18, 15, 16, 21, 8, 2, 0, 0, 0, 18, 15, 18, 21, 19, 20, 21, 8, 9, 10, 11, 10, 0, 0, 8, 9, 10, 11, 12, 13, 14, 1, 2, 3, 4, 5, 12, 0, 1, 2, 3, 4, 5, 6, 7, 15, 16, 17, 18, 19, 20, 21, 15, 16, 17, 18, 19, 20, 21, 8, 9, 10, 11, 12, 13, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
map09 : [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 7, 0, 3, 6, 17, 18, 11, 17, 18, 19, 20, 21, 8, 0, 14, 0, 10, 13, 0, 0, 0, 0, 0, 0, 0, 3, 15, 0, 21, 0, 17, 20, 20, 21, 8, 9, 10, 11, 0, 10, 2, 0, 6, 0, 2, 5, 0, 0, 0, 0, 0, 6, 0, 17, 9, 0, 13, 0, 9, 12, 0, 0, 2, 3, 0, 13, 0, 1, 16, 0, 20, 0, 16, 19, 0, 0, 9, 10, 0, 20, 0, 4, 3, 0, 5, 0, 1, 4, 0, 0, 16, 17, 0, 7, 0, 11, 10, 0, 12, 0, 8, 11, 0, 0, 1, 1, 0, 14, 0, 18, 17, 0, 19, 0, 15, 18, 0, 0, 8, 4, 0, 21, 0, 5, 4, 0, 4, 0, 7, 3, 0, 0, 15, 11, 0, 1, 0, 12, 11, 0, 11, 0, 14, 10, 0, 0, 2, 18, 0, 8, 0, 19, 18, 0, 18, 0, 21, 17, 0, 0, 9, 5, 0, 15, 0, 6, 5, 0, 1, 0, 0, 0, 0, 0, 16, 12, 0, 2, 0, 13, 12, 0, 8, 9, 10, 11, 12, 13, 14, 19, 0, 9, 0, 20, 19, 0, 0, 0, 0, 0, 0, 0, 8, 9, 0, 16, 0, 12, 15, 16, 17, 18, 19, 20, 21, 15, 16, 17, 0, 18, 0, 19, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
};
let map_col = 14;
let map_row = 34;
let secondPassed = 0;
let oldTimeStamp = 0;
let WIDTH = canvas.canvas.width;
let HEIGHT = canvas.canvas.height;
let right_arrow_keycode = 39;
let left_arrow_keycode = 37;
let a_keycode = 65;
let d_keycode = 68;
let pressLeft;
let pressRight;
let game_over;
let islevelUp;
let dt = 1/60.0;
let brickList;
let tilesets = {
tileset1: {
image: new Image(),
columns: 7,
rows: 3,
tile_width: 32,
tile_height: 16
}
};
tilesets.tileset1.image.src = "img/tileset/brick_tileset.png";
let heart_sprite_sheet = {
spin: {
frame_set : [0,1,2,3],
image : new Image()
}
}
heart_sprite_sheet.spin.image.src = "img/heart/heart_sprite.png";
let delay = 0;
let frame_set;
let level;
function newGame(){
document.querySelector(".mainMenu").style.display="none";
level = 0;
score = 0;
levelUp();
}
function restart(){
document.querySelector(".gameOver").style.display="none";
level -= 1;
levelUp();
}
function mainMenu(){
document.querySelector(".gameOver").style.display="none";
document.querySelector(".mainMenu").style.display="block";
}
function pickLevel(){
score = 0;
document.querySelector(".pickLevel").style.display="block";
document.querySelector(".mainMenu").style.display="none";
}
function loop(timeStamp){
getDeltaTime(timeStamp);
ballCollision();
ballMovement();
paddleMovement();
heartMovement();
heartAnimUpdate();
// document.getElementById("output").innerHTML = "gameover: " + game_over + ", islevelup: " + islevelUp;
draw();
if(!game_over && !islevelUp){
window.requestAnimationFrame(loop);
}
else if(game_over){
gameOver();
}
else if(islevelUp){
levelUp();
}
}
function Animation(){
this.count = 0
this.delay = delay;
this.frame = 0;
this.frame_index = 0;
this.frame_set = frame_set;
}
Animation.prototype.change = function(frame_set, delay){
if(this.frame_set != frame_set){
this.count = 0;
this.delay = delay;
this.frame_index = 0;
this.frame_set = frame_set;
this.frame = this.frame_set[this.frame_index];
}
}
Animation.prototype.update = function(){
this.count ++;
if(this.count >= this.delay){
this.count = 0;
this.frame_index =(this.frame_index == this.frame_set.length -1)?0: this.frame_index + 1;
this.frame = this.frame_set[this.frame_index];
}
}
function Ball(){
this.image = new Image(),
this.x = 250,
this.y = 450,
this.velocity = 150,
this.radius = 8,
this.dx = 1,
this.dy = -1
}
function ballReset(){
ball.x = paddle.x + paddle.width/2;
ball.y = 450;
ball.dx = 1;
ball.dy = -1;
ball.velocity = 150;
}
function drawBall(){
canvas.drawImage(ball.image, Math.floor(ball.x), Math.floor(ball.y), ball.radius*2, ball.radius*2);
}
function ballMovement(){
ball.x += (ball.velocity * deltaTime ) * ball.dx * 0.999;
ball.y += (ball.velocity * deltaTime ) * ball.dy * 0.999;
}
function ballCollision(){
//borders for ball
if(ball.y - ball.radius <= 0 && ball.y < 0){
ball.dy = ball.dy * -1;
ball.y = ball.radius;
}
if(ball.y > HEIGHT){
heartList.pop();
if(heartList.length == 0){
game_over = true;
}else{
ballReset();
}
}
if(ball.x + ball.radius > WIDTH && ball.x > 0){
ball.dx = ball.dx * -1;
ball.x = WIDTH-ball.radius;
}
if(ball.x - ball.radius < 0 && ball.x < 0){
ball.dx = ball.dx * -1;
ball.x = ball.radius;
}
// ball and paddle collision detection
let testX = ball.x;
let testY = ball.y;
if(ball.x < paddle.x){
testX = paddle.x;
//left
}
else if(ball.x > paddle.x+paddle.width){
testX = paddle.x + paddle.width;
//right
}
if(ball.y < paddle.y){
testY = paddle.y;
//top
}
else if(ball.y > paddle.y+ paddle.height){
testY = paddle.y + paddle.height;
//bottom
}
let distX = ball.x - testX;
let distY = ball.y - testY;
let distance = Math.sqrt((distX*distX)+(distY*distY));
if(distance <= ball.radius){
let collidePoint = ball.x - (paddle.x + paddle.width/2);
collidePoint = collidePoint / (paddle.width/2);
let angle = collidePoint * Math.atan2(ball.y, ball.x);
ball.dx = ball.velocity * deltaTime * Math.sin(angle);
ball.dy = -ball.velocity * deltaTime * Math.cos(angle);
}
//brick collision
for (let i = 0; i < brickList.length; i++){
let b = brickList[i];
if(b.status){
let bottom = false;
let top = false;
let b_testX = ball.x;
let b_testY = ball.y;
if(ball.x < b.x){
b_testX = b.x;
}
else if(ball.x > b.x + b.width){
b_testX = b.x + b.width;
}
if(ball.y < b.y){
b_testY = b.y;
top = true;
}
else if(ball.y > b.y + b.height){
b_testY = b.y + b.height;
bottom = true;
}
let distX_fromBrick = ball.x - b_testX;
let distY_fromBrick = ball.y - b_testY;
let distance = Math.sqrt((distX_fromBrick * distX_fromBrick) + (distY_fromBrick * distY_fromBrick));
if(distance < ball.radius){
let collidePoint = ball.x - (b.x + b.width/2);
collidePoint = collidePoint / (b.width/2);
let angle = collidePoint * Math.atan2(ball.y, ball.x);
if(top){
ball.dx = ball.velocity * deltaTime * Math.sin(angle);
ball.dy = -ball.velocity * deltaTime * Math.cos(angle);
}
if(bottom){
ball.dx = -ball.velocity * deltaTime * Math.sin(angle);
ball.dy = ball.velocity * deltaTime * Math.cos(angle);
}
b.status = false;
brokenBricks ++;
scoreUp();
if(brokenBricks == brickList.length){
islevelUp = true;
}
}
}
}
}
function Paddle(){
this.image = new Image(),
this.x = 200,
this.y = 490,
this.width = 64,
this.height = 20,
this.velocity = 500
}
function drawPaddle(){
canvas.drawImage(paddle.image, Math.floor(paddle.x), Math.floor(paddle.y),paddle.width,paddle.height);
}
function paddleMovement(){
if(pressRight&&paddle.x+paddle.width<WIDTH){
paddle.x += (paddle.velocity * deltaTime )*0.999;
}
if(pressLeft&&paddle.x>0){
paddle.x -= (paddle.velocity * deltaTime )*0.999;
}
}
function Brick(x,y){
this.image = new Image(),
this.x = x,
this.y = y,
this.width = 32,
this.height = 16,
this.status = true
}
function drawMap (){
for(let i = 0; i < map.length; i++){
let value = map[i]-1;
let source_x = (value%tilesets.tileset1.columns) * tilesets.tileset1.tile_width;
let source_y = Math.floor(value/tilesets.tileset1.columns) * tilesets.tileset1.tile_height;
let destination_x = (i%map_col) * tilesets.tileset1.tile_width;
let destination_y = Math.floor(i/map_col) * tilesets.tileset1.tile_height;
if(map[i] != 0){
if(!isBrickAlive(destination_x, destination_y)){continue;}
}
canvas.drawImage(tilesets.tileset1.image, source_x, source_y, tilesets.tileset1.tile_width, tilesets.tileset1.tile_height, destination_x, destination_y, tilesets.tileset1.tile_width, tilesets.tileset1.tile_height );
}
}
function createBrick(){
for(let i = 0; i<map.length; i++){
if(map[i] != 0){
let x = (i%map_col)*tilesets.tileset1.tile_width;
let y = Math.floor(i/map_col)*tilesets.tileset1.tile_height;
let brick = new Brick(x, y);
brickList.push(brick);
}
}
}
function isBrickAlive(x,y){
for(let i = 0; i < brickList.length; i++){
let brick = brickList[i];
if(brick.status && brick.x == x && brick.y == y){
return true;
}
}
}
function scoreUp(){
score += 1;
}
function scoreText(){
canvas.font = `15px gameFont`;
canvas.fillStyle = "white";
canvas.fillText("SCORE:"+ score, 8, 30);
}
function Heart(x,y){
this.image = new Image(),
this.animation = new Animation(),
this.x = x,
this.y = y,
this.width = 7,
this.height = 7
}
function heartCreate(){
let heart1 = new Heart(350,8);
heartList.push(heart1);
let heart2 = new Heart(375,8);
heartList.push(heart2);
let heart3 = new Heart(400,8);
heartList.push(heart3);
let heart4 = new Heart(425,8);
heartList.push(heart4);
}
function heartDraw(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
canvas.drawImage(heart_sprite_sheet.spin.image, heart.width * heart.animation.frame, 0, heart.width, heart.height, heart.x, heart.y, heart.width*3, heart.height*3);
}
}
function heartMovement(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
heart.image = heart_sprite_sheet.spin.image;
heart.animation.change(heart_sprite_sheet.spin.frame_set, 12);
}
}
function heartAnimUpdate(){
for(let i = 0; i < heartList.length; i++){
let heart = heartList[i];
heart.animation.update();
}
}
function draw(){
canvas.clearRect(0,0,WIDTH,HEIGHT);
canvas.imageSmoothingEnabled = false;
canvas.save();
drawBg();
drawMap();
drawPaddle();
scoreText();
heartDraw();
drawBall();
canvas.restore();
}
function keyDown(event){
if(event.keyCode === right_arrow_keycode || event.keyCode === d_keycode){
pressRight = true;
}
if(event.keyCode === left_arrow_keycode || event.keyCode === a_keycode){
pressLeft = true;
}
}
function keyUp(event){
if(event.keyCode === right_arrow_keycode || event.keyCode === d_keycode){
pressRight = false;
}
if(event.keyCode === left_arrow_keycode || event.keyCode === a_keycode){
pressLeft = false;
}
}
function drawBg(){
switch(level){
case 1:
canvas.beginPath();
canvas.fillStyle = "#76428A";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 2:
canvas.beginPath();
canvas.fillStyle = "#8C2929";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 3:
canvas.beginPath();
canvas.fillStyle = "#639BFF";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 4:
canvas.beginPath();
canvas.fillStyle = "#4B692F";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 5:
canvas.beginPath();
canvas.fillStyle = "#9BADB7";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 6:
canvas.beginPath();
canvas.fillStyle = "#D95763";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 7:
canvas.beginPath();
canvas.fillStyle = "#3F3F74";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 8:
canvas.beginPath();
canvas.fillStyle = "#663931";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
case 9:
canvas.beginPath();
canvas.fillStyle = "#DF7126";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
default:
canvas.beginPath();
canvas.fillStyle = "#639BFF";
canvas.fillRect(0,0,WIDTH,HEIGHT);
canvas.closePath();
break;
}
//açık mavi: 639BFF
//mor: 76428A
//yeşil: 4B692F
//pembe: D77BBA
//turuncu: DF7126
//koyu mavi: 3F3F74
//pembe-kırmızı: D95763
//koyu mor: 45283C
//baby-blue: 9BADB7
//mavi: 5B6EE1
//koyu kırmızı: 8C2929
}
function getDeltaTime(timeStamp){
secondPassed = (timeStamp - oldTimeStamp) / 1000;
oldTimeStamp = timeStamp;
deltaTime = Math.min(secondPassed , dt);
return deltaTime;
}
function startGame(){
secondPassed = 0;
oldTimeStamp = 0;
brokenBricks = 0;
game_over = false;
pressLeft = false;
pressRight = false;
islevelUp = false;
brickList = new Array();
heartList = new Array();
createBrick();
heartCreate();
draw();
startEngine();
}
function startEngine(){
window.requestAnimationFrame(loop);
}
function gameOver(){
document.querySelector(".gameOver").style.display="block";
document.getElementById("score").innerHTML = score;
score = 0;
}
function levelUp(){
ball = new Ball();
paddle = new Paddle();
level++;
switch(level){
case 1:
map = levels.map01;
ball.image.src = "img/ball/blue_ball.png";
paddle.image.src = "img/paddle/black_paddle.png";
break;
case 2:
map = levels.map02;
ball.image.src = "img/ball/green_ball.png";
paddle.image.src = "img/paddle/blue_paddle.png";
break;
case 3:
map = levels.map03;
ball.image.src = "img/ball/purple_ball.png";
paddle.image.src = "img/paddle/brown_paddle.png";
break;
case 4:
map = levels.map04;
ball.image.src = "img/ball/red_ball.png";
paddle.image.src = "img/paddle/golden_paddle.png";
break;
case 5:
map = levels.map05;
ball.image.src = "img/ball/yellow_ball.png";
paddle.image.src = "img/paddle/green_paddle.png";
break;
case 6:
map = levels.map06;
ball.image.src = "img/ball/blue_ball.png";
paddle.image.src = "img/paddle/purple_paddle.png";
break;
case 7:
map = levels.map07;
ball.image.src = "img/ball/red_ball.png";
paddle.image.src = "img/paddle/red_paddle.png";
break;
case 8:
map = levels.map08;
ball.image.src = "img/ball/yellow_ball.png";
paddle.image.src = "img/paddle/black_paddle.png";
break;
case 9:
map = levels.map09;
ball.image.src = "img/ball/purple_ball.png";
paddle.image.src = "img/paddle/blue_paddle.png";
break;
default:
game_over = true;
break;
}
startGame();
}});

how to refer to randomly generated x and y values pushed into array

How can I refer to randomly generated X and Y values when these are being pushed into an array. In my code: ax and ay numbers are randomly generated values which I want to refer to at a later stage and use in a loop. I will be generating many objects and I wish to use each individual ax and ay in the calculations. At the moment the system only uses either first values generated or last. I am a bit of a noob and appreciate the guidance.
function create() {
ax = Math.random() * width;
ay = Math.random() * height;
asteroids.push(new gameObject("asteroid", 0, 0, 0, 0, "asteroid11.png", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ax, ay, 250, 240, 0, 120, 1, 0, 0))
guns.push(new gameObject("g", 0, 0, 0, 0, "gun3.png", 0, 0, ax + 125 - 67, ay - 23, 138, 78, 0, 0, 72, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0));
bullets.push(new gameObject("b", ax + 125 - 67 + 138 / 2 - 14, ay - 23 + 78 / 2 - 15, 25, 25, "ball.png", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0));
}

An easy solution is to return ax, ay from create:
function create() {
ax = Math.random() * width;
ay = Math.random() * height;
asteroids.push(new gameObject("asteroid", 0, 0, 0, 0, "asteroid11.png", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ax, ay, 250, 240, 0, 120, 1, 0, 0))
guns.push(new gameObject("g", 0, 0, 0, 0, "gun3.png", 0, 0, ax + 125 - 67, ay - 23, 138, 78, 0, 0, 72, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0));
bullets.push(new gameObject("b", ax + 125 - 67 + 138 / 2 - 14, ay - 23 + 78 / 2 - 15, 25, 25, "ball.png", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0));
return [ax, ay];
}
This is not very clear though. A better way would be to refactor the random width and height generation into stand-alone functions:
const randomWidth = () => Math.random() * width;
const randomHeight = () => Math.random() * height;
const create = (ax, ay) => {
asteroids.push(new gameObject("asteroid", 0, 0, 0, 0, "asteroid11.png", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, ax, ay, 250, 240, 0, 120, 1, 0, 0))
guns.push(new gameObject("g", 0, 0, 0, 0, "gun3.png", 0, 0, ax + 125 - 67, ay - 23, 138, 78, 0, 0, 72, 15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0));
bullets.push(new gameObject("b", ax + 125 - 67 + 138 / 2 - 14, ay - 23 + 78 / 2 - 15, 25, 25, "ball.png", 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0));
};
// in your loop
for (/* ... */) {
const ax = randomWidth();
const ay = randomHeight():
create(ax, ay);
// do something with `ax` and `ay`
}

Second series not displaying in Highcharts

I am trying to create a graph to display performance of a system. My issue is that Higcharts, for some reason, won't recognize that I have more than one series. The first series displays perfectly, however the second is no where to be seen.
I am using Django 1.8 to loop the data from dictionaries.
My series code:
series: [
{% for ID, run in attDict.items|sort %}
{
yAxis: 0,
id: "Run" + {{forloop.counter}},
name: "RunID " + {{ID}},
color: getLineColor({{ID}}),
data: {{run}},
marker: {
fillColor: getFillColor({{forloop.counter}}),
},
visible: false
},
{% endfor %}
{% for key, task in TaskE.items|sort %}
{
yAxis: 1,
id: "during",
linkedTo: "Run" + {{forloop.counter}},
name: "Duringtask for run " + {{key}}
type: 'area',
color: '#12e000',
fillOpacity: 0.3,
data: {{task}},
visible: fasle
}{% if forloop.last %}{% else %},{% endif %}
{% endfor %}
]
The output look like this:
series: [
{
yAxis: 0,
id: "Run" + 1,
name: "RunID " + 250,
color: getLineColor(250),
data: [0, 0, 0, 0, 0, 0, 6, 33, 27, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(1),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 2,
name: "RunID " + 256,
color: getLineColor(256),
data: [0, 0, 0, 1, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(2),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 3,
name: "RunID " + 257,
color: getLineColor(257),
data: [0, 0, 0, 1, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(3),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 4,
name: "RunID " + 265,
color: getLineColor(265),
data: [83, 0, 101, 0, 0, 96, 0],
marker: {
fillColor: getFillColor(4),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 5,
name: "RunID " + 295,
color: getLineColor(295),
data: [14, 3, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 70, 0, 0, 0, 37, 0, 0, 0, 0, 0, 9, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 83, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 52, 0, 0, 0, 0, 0, 0, 0, 45, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 77, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 67, 0, 0, 0, 8, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 88, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 16, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 32, 0, 0, 3, 0, 58, 0, 0, 0, 0, 0, 0, 0, 0, 14, 0, 0, 0, 0, 0, 0, 0, 0, 0],
marker: {
fillColor: getFillColor(5),
},
visible: false
},
{
yAxis: 0,
id: "Run" + 6,
name: "RunID " + 296,
color: getLineColor(296),
data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 116, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 17, 0, 0, 0, 1, 0, 0, 0, 0, 28, 15],
marker: {
fillColor: getFillColor(6),
},
visible: false
},
]

You are explicitly telling the chart not to show the series in the legend by using this:
linkedTo: "Run" + {{forloop.counter}}
When two series are linked, only the first one appears in the legend.
Toggling the visibility of this also toggles the linked series.
Reference:
http://api.highcharts.com/highcharts/plotOptions.series.linkedTo
Remove the linkedTo property from the second loop, and it should work fine.

Tiled map (json) collide fail

I'm new at Phaser and i'm trying to make a map in Tiled and use it in my game, but the collide isn't working. 
Image: https://puu.sh/qKZuX/fb41aa9163.png
My json Data:
"data":[100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 89, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 90, 91, 100, 100, 100, 100, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 100, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 99, 100, 100, 102, 0, 0, 0, 0, 0, 0, 0, 0, 85, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 88, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 85, 86, 86, 86, 86, 86, 86, 86, 86, 86, 88, 0, 0, 0, 0, 0, 0, 0, 0, 0, 100, 100, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 86, 86, 86, 86, 86, 86, 86, 86, 86, 87, 86, 86, 86, 86, 86, 86, 86, 86, 100, 100, 100, 100, 100, 100, 100, 100, 100, 86, 86, 86, 86, 86, 86, 86, 86, 86, 86, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
My setCollisionBetween:
map.setCollisionBetween(0, 999, true);
Already tyied everything...
Any solutions?!
Thanks in advance!

map.setCollisionBetween(0,999,true)
This line make all tiles with indexes from 0 to 999 to collide with player, as written in documentation. The range is inclusive.
I'm not 100% sure but after looking at image you provided and json data I believe you should set collision from 1 to 999.
Probably you should also move player starting point to non colliding tile, but im not sure if player sprite is that dragon, or line-like shape.

Categories

Resources