I was tasked to create a simple mini game based solely on Javascript. I encountered a problem as I was adding in sound effects..
After the player drowns, the game should 'return' to its initial frame with one 'live' count decreased. During the drowning action, it plummets down the lake while the sound effect comes into place. However, the sound is activated a few .seconds late and the player freezes at the bottom of the lake. The game does not return either.
I have also tried adding stop() but it doesn't work. Here's a fragment of the relevant code.
gameCharacter_y +=2;
drownSound.play();
return;
Been stuck for days now and am an absolute beginner, would appreciate and be grateful for any suggestions!
Thanks.
In order to manipulate sound you should have a soundmanager...
This makes it really easy to see what clips are playing and pause them and do with them as you please! I'm not sure how to make one in JavaScript...
But what you are looking for is...
drownSound.pause();
There is no 'stop()' method apparently...
Related
this is my first post!
I am working on a project with AI for a game. I am trying to recreate Tetris with Javascript, HTML, and CSS to train an AI to play. After making the game, I would then need to incorporate the AI into it. After it is trained, I want to test the AI against other, real-time players to see how good it is. This is similar to what Code Bullet did, I have attached that video. My question is, is there any way to have my AI play on a website against other players? I think this would be possible if I could somehow get input from the site it is playing on, sending it to the AI, and receiving output in the form of simulated presses from the AI. I know this is possible with Python, but I am unfamiliar with that language. If you could help me, that would be much appreciated.
Thank you!
Code Bullet's video
P.S. Since this is my first post, please let me know if I am doing something wrong/missing something in my post. Thank you again!
I am really new to coding, and I might have picked off a project that's bigger than I can chew....
I am trying to code an "avoider" game where the player moves the mouse around the screen in order to avoid the enemies following, or coming at the player. If the enemies touch the player-- game over.
So far, all the tutorials I've found that don't involve using Unity or some other game building software only have the enemies falling from the top of the screen-- not actually following the player around.
Is something like this even possible just using basic HTML5 and JS? Does anyone have any tips on where to start with this or any good tutorials or example code?
Thank you!
Yeah, this is possible in vanilla js. You may want to break down the problem. First you need to track the player's location. All you need are the x and y coordinates. Then you just increase the movement of the enemy towards those coordinates.
This tutorial does the opposite. The enemy avoids. It's also based on the mouse, but it should lead you in the right direction if you can't figure it out.
https://code.tutsplus.com/articles/html5-avoider-game-tutorial-multiple-moving-enemies--active-9956
I'm currently helping a friend develop a web application in which I need ~6 audio tracks (all using the same time signature) to continuously loop and stay in sync. To give context, it is a typeface-music pairing application where as soon as a typeface is chosen, the associated audio loop starts playing and as the user keeps picking typefaces, the tracks layer and begin to resemble a song.
I've tried using SoundJS and the Buzz sound library, but I keep running into the same problem: there is always a slight delay between loops. This would be fine if all my audio tracks were the same length, but they aren't, so very quickly things go out of sync.
This seems to be a known problem, but I can't seem to find any answer to how to fix it. I came across Hivenfour's SeamlessLoop 2.0, but - unless I'm using it completely wrong - it doesn't actually seem to work (setting a volume returns an error).
If anyone has experience with this, I would truly appreciate any input! Thanks :)
SoundJS WebAudioPlugin uses a look ahead approach with web audio that will loop seamlessly, which is described here in a what will probably be a very helpful on audio timing.
Also be aware that some compression formats will insert white noise into sounds. I believe mp3 does this. WAV is supported broadly and does not.
As for HTMLAudioPlugin, we loop as smoothly as the browser will allow but it does not have the same precision as WebAudio.
Hope that helps.
I have been looking a whole day on the internet for a answer to my question if i can overlapp one sound over the same one...
I am making a jet and when it fires a bullet my sound plays (it is something like 3 sec long track, so pretty long) and my next sound is after the whole track finishes... Is there any way to overlapp the same track over the previous ones?
my code is really simple just
var sound = new Audio();
sound.src = audio/audio.mp3
and where my jet fires i have a simple sound.play(); statement...
i hope it is possible to overlapp the same sound in Javascript.. thank you
(i am a very beginner to Javascript:) )
I don't know if the API allows you to use the sound output twice in the same process... But you can try, use a Timing event to delay the play.
jsfiddle here
I'm bored at work today, so I'm just started building something with canvas to try and teach myself some stuff. I've gotten stuck on this portion and have decided to reach out to the SO community instead of banging my head against the wall some more.
The basic idea is to listen for a click and then create a randomly colored circle where the user clicks, animating to a larger size and fading out.
It works great when you just click and let it fade out. The problem comes when you have more than one circle on the canvas at once. I can tell this is happening because of how I'm doing my animating loop, but for the life of me I can't figure out how to do it better.
Should I have an animation loop separate from the setInterval that grows/fades the circles? If so, what should that loop do? I feel like I need to separate the placing/growing/fading of circles from the actual rendering.
EDIT: I've notice this only seems to work in Chrome (maybe safari too)
The solution is to unify all of your drawing into one place so that your setInterval callback can redraw everything.
Check it out:
http://jsfiddle.net/ybcHk/7/