Giter VIP home page Giter VIP logo

still-alive's Introduction

Still Alive

The end credits from the video game Portal
recreated with pure JavaScript, browser windows, and a lot of patience.

Take me to the demo ๐Ÿฐ

Known limitations

  • Time drifting (#2)
    The browser will throttle setTimeout() when it deems a page as low-priority (running in the background etc.). This will cause all visuals to fall behind the music and appear as delayed.
  • Windows blocked (#3)
    Pop-up blockers (built-in on most browsers) will prevent all- or some windows to open. You have to allow the page to "open multiple windows" in your browser for this demo to work.
  • Stacking windows on Chrome for Windows
    Due to a bug in Chromium on Windows, browser windows will stack if the play button is clicked from a non-primary display.

still-alive's People

Contributors

victorwesterlund avatar

Watchers

 avatar

still-alive's Issues

Audio and visuals out of sync

Starting playback will in 9/10 cases run the visuals too early, with the sound lagging behind.

Start when everything is ready, not when audio is ready

It's possible this is a race issue and HTMLMediaElement.play() can be called along with the first executing Monkeydo task to make them play together.

Time drift

It is however also quite possible this is related to setTimeout() drift. Which can be observed even with the audio and visuals in sync by simply placing the browser in the background or even triggering some work on the main thread.

If this happens to be the case, one solution could be to implement a current time "sync pulse" which will be emitted from a Monkeydo task (with some interval) containing the expected media currentTime for an adjacent task.
HTMLMediaElement.currentTime could be aligned with this pulse, but it might cause a lot of audio glitches.

Blocked `window.open()`

Pop-up blockers prevent window.open() to open windows

Most browsers ship with pop-up blockers built-in and will usually only allow a single window to open (or none at all).
Chrome will send out a permission request to the user asking for the "open multiple windows" permission.

image

The Multi-Screen Placement API looks like possible candidate to fix this issue if its permission query also applies to opening windows, and not just placing them.

navigator.permissions.query({ name: 'window-placement' });

Since this demo relies on browser windows, being able to open them is quite crucial.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.