www.webdeveloper.com
Results 1 to 6 of 6

Thread: Feedback & Help: Retro JavaScript Interpreter

  1. #1
    Join Date
    May 2014
    Posts
    4

    Feedback & Help: Retro JavaScript Interpreter

    Hello everyone, my first post here. Yesterday I thought I'd have a go at learning some JavaScript as it's always something I've avoided (not sure why). For a bit of fun, I had a go at making a retro JS interpreter - it evaluates commands that you input and provides a result. There's also a couple of easter eggs thrown in (hint: LOST).

    http://jamieg193.net84.net/retro/


    A few questions:

    1) Requesting fullscreen via calling a function ( goFullscreen() ) only appears to work when there are no intervals running. When running an interval (i.e. moving an object onscreen every 10 milliseconds), the browser refuses to go fullscreen. However, as soon as this interval is cleared, the fullscreen function works perfectly. Is this a known issue, or am I doing something wrong (tried on Chrome, Firefox, & Safari)?

    2) I have an object on the screen that moves 10 pixels every 10 milliseconds (using setInterval). This seems terribly inefficient, is this the proper method for animating objects using JS (without having to use jQuery)?

    3) The keystroke sounds are invoked using "new Audio()". However, when playing the sounds for the first time there is a slight delay. Once they are cached they play just fine. How do I preload these audio clips using the "new Audio()" method (and not HTML <audio preload="auto"> tags)?



    Thanks,
    J

  2. #2
    Join Date
    May 2014
    Posts
    4
    Note: Works best in Chrome, other browsers don't work as intended (yet).

  3. #3
    Join Date
    May 2014
    Posts
    905
    Quote Originally Posted by JamieG193 View Post
    1) Requesting fullscreen via calling a function ( goFullscreen() ) only appears to work when there are no intervals running. When running an interval (i.e. moving an object onscreen every 10 milliseconds), the browser refuses to go fullscreen. However, as soon as this interval is cleared, the fullscreen function works perfectly. Is this a known issue, or am I doing something wrong (tried on Chrome, Firefox, & Safari)?
    Javascript is single threaded, so long as javascript code is executing, anything you try to call for changes in appearance is basically put on a 'stack' and then processed when the script is done. For example if you set an object to Element.style.left = '50%' when it was Element.style.left = '0' at the start of execution -- that would NOT be applied visually on screen until the script finishes. The renderer will not run any changes you make until after script execution ends. PERIOD, not much you can do about that.

    Quote Originally Posted by JamieG193 View Post
    2) I have an object on the screen that moves 10 pixels every 10 milliseconds (using setInterval). This seems terribly inefficient, is this the proper method for animating objects using JS (without having to use jQuery)?
    Well, first up, no browser has the timer accuracy to actually run an interval script every 10ms. The lower limit hovers at around 30ms, which is why 30fps is the upper limit for conventional javascript animations. (CANVAS is now adding a frame refresh hook, but that can vary between 59 and 120 times a second these days)

    ... and jQuery is NOT going to help you on that because ... well, guess what? It uses setInterval and setTimeout just like you are.

    That said, those USED to be the only way to animate elements, but now we have CSS3 "transitions" to handle moving things around. If it's a non-stop animation, you wouldn't even need scripting -- if it's script controlled, just set top and left, and let a CSS3 transition handle animating the movement over a fixed period of time.

    transition: left 0.5s, top 0.5s;

    Will use the "ease" animation (starts slow, speeds up at middle, slows down) to move the element over half a second instead of instantly popping into the new location. If you want it to move predictably at a 'linear' speed:

    transition: left 0.5s linear, top 0.5s linear;

    Quote Originally Posted by JamieG193 View Post
    3) The keystroke sounds are invoked using "new Audio()". However, when playing the sounds for the first time there is a slight delay. Once they are cached they play just fine. How do I preload these audio clips using the "new Audio()" method (and not HTML <audio preload="auto"> tags)?
    The latency of HTML 5 Audio relegates it pretty much useless for anything event driven; the only way around it I've found is to create the element during document parsing (right before </body>), have a small blank space at the beginning of it, fast-forward past that blank spot in play, pause it, then when you want it to play un-pause, and when the sound reaches the end BEFORE it stops, loop back to that blank spot and pause again.

    Which sucks -- but that's HTML 5 Audio for you -- universally the implementation is rubbish thanks to the ridiculous latency -- FILE LOADED OR NOT -- between telling it to play and it actually playing. In some browsers the delay can be as much as half a second even when the file is cached.

    ... which is why I don't consider HTML 5 audio to be 'ready for primetime' on projects, but again there's a reason HTML 5 isn't a recommendation yet either.

    NOT that there's a legitimate reason for AUDIO or VIDEO to even have their own blasted tags.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Join Date
    May 2014
    Posts
    4
    Thanks for your detailed reply, I could not have asked for a better response.

    About the HTML 5 audio issue - for the background 'hum' audio clip I've already implemented this fix:

    Code:
    function playBGSound() {
    	var snd = new Audio();
    	snd.src = "audio/shugart_sa400_drive.ogg";
    	snd.type = "audio/ogg";
    	snd.volume = 0.5;
    	snd.play();
    	
    	// Seamless audio loop
    	snd.addEventListener('timeupdate', function(){
    		if(this.currentTime >= this.duration - 0.2) {
    			this.currentTime = 0;
    			snd.play();
    		}
    	}, false);
    }
    That appears to fix any latency issues with looping the audio, so no problems there. As I mentioned, I'm pretty sure the latency is to do with the audio not being preloaded (as the problem only exists initially. Once each sound has been played at least once, there is no longer a delay at all).

  5. #5
    Join Date
    May 2014
    Posts
    4
    Does anyone know the answer to this question? ^

    I would love to know how to preload audio.

  6. #6
    Join Date
    May 2014
    Posts
    905
    I kind-of answered that, but let me clarify:

    Method one:
    1) Put them into the markup (directly or add them with appendChild) after your content but before </body> BEFORE page parsing ends.
    2) Do not try to play them until onload fires.

    Method two:
    1) Put an onload handler on each of your sound files.
    2) No not try to use them until after that onload handler fires.

    "onload" being the key here. It's the only thing that will tell you if they're actually loaded or not.
    Java is to JavaScript as Ham is to Hamburger.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles