JavaScript class declaration for Internet Explorer

[MegaBrutal]

This is more of a generic JavaScript question than a Phaser question, still I ask here because Phaser users must have best practices for this situation, probably better than generic JavaScript programmers would tell.

To my dismay, I found out that my LD38 game doesn't work with Internet Explorer (gosh, I hate that browser, I always have to make special adjustments for IE compatibility – even if my game works great with every other browsers in existence, it will surely break somehow with IE).

So what apparently causes the problem for IE now is something as simple and straightforward like the following class declarations:

        class Entity extends Phaser.Sprite {
            constructor(x, y, sprite) {
                super(game, x, y, sprite);
                this.anchor.setTo(.5,.5);
            }

            enablePhysics() {
                game.physics.arcade.enable(this);
                this.body.bounce.y = 0.2;
                this.body.bounce.x = 0.2;
                this.body.collideWorldBounds = true;
            }
        }

        class Player extends Entity {
            constructor(x, y, sprite) {
                super(x, y, sprite);
                this.lastmovetime = 0;
            }
        }

        class Gem extends Entity {
            constructor(x, y) {
                super(x, y, 'gem');
                this.lastInteraction = 0;
                this.isActivated = false;
            }

            enablePhysics() {
                super.enablePhysics();
                this.body.bounce.y = 0.75;
                this.body.bounce.x = 0.75;
            }

            activate() {
                this.isActivated = true;
                this.loadTexture('gem_active');
            }

            deactivate() {
                this.isActivated = false;
                this.loadTexture('gem');
            }
        }

Google tells me that IE doesn't support this kind of class declaration, as it somehow needs to find a way to deviate from common sense. But then how am I supposed to declare classes? Is there a neat way that works with IE and other browsers as well?

(Or maybe I should just show a warning that IE is not supported?)

Any help or suggestion is appreciated.

[squilibob]

You can use https://www.npmjs.com/package/dynamic-polyfill which checks if the class and extends keywords are known by the user's browser and if not, downloads a polyfill to support them.

[Str1ngS]

Classes are part of the ES2015 standard, which is not supported by IE. For easy backwards compatibilty (if you actually want to support IE) you can just use Babel to transpile your code to ES5.

Also, I'm not sure of classes can be polyfilled.

[mattstyles]

Nope, IE doesn't support class, and I'd guess it won't as its superceded by Edge (not sure there's any ie11 developer besides security/bug patches).

I agree that using a transpiler like Babel is easy enough and allows you to support old browsers, but I also think your 2nd suggestion ("Or maybe I should just show a warning that IE is not supported?") should be your preferred line.

Don't support old browsers unless you really have to.

All modern browsers auto-update and things have shifted firmly towards placing responsibility with this to the user i.e. if a user deliberately chooses not to update their browser then they shouldn't complain about things not working for them. Like or loathe this philosophy it is one that is gaining traction, for very good reasons. There will always be cases where this is harsh, but the ideal is that updates are seamless and don't break backwards compatibility (often) so that stuff can dev/test/work against current versions and be reasonably sure its got a good shelf life, the reality might be very different in some cases but I'd still stick by a decision to not create legacy unless absolutely necessary.

[MegaBrutal]

I think I'll go with the way of not supporting IE. I think it would be too much of a hassle for a small game like a Ludum Dare entry.

Now at least I should show a message for IE users that tells them their browser is not supported, but even that is not trivial. First I looked into conditional comments, but they are deprecated and not even supported by modern IE versions (not even when I try to activate a legacy mode to tell IE to act like IE9). Then I run into multiple articles like „Gosh! This is the new way to detect IE / detect ES2015 compliance!”, but half of them are already obsolete, the rest of them are too cumbersome to implement (and probably obsolete). There is „hasFeature”, which would be pretty straightforward, but that's obsoleted already and I didn't find an alternative.

Does anyone know a quick, straightforward way to detect IE or ES2015 compliance even in HTML5 or JavaScript?

The last resort is to show a generic message above or below the game that is shown for everyone, but that's not cool.

[mattstyles]

Just sniff on user agent, it'll be close enough. IE went through a whole thing (it might have been early edge) where it pretended to be a different browser as people usually sniffed UA rather than feature detection which meant IE was getting a degraded experience even though the browser had improved to a point where it didn't need to degrade it, but, I think they've always included the MSIE X.X so just grab the UA in javascript and react appropriately, something like: 

if (/MSIE/.test(window.navigator.userAgent)) {
  alert('Unsupported browser')
}

You might want to get a bit more targeted with your regex, have a search for regexes to use. UA sniffing is a bit 'meh', but it would be easily good enough (consistent enough) for what you need.

If you're set on feature detection (which is a much much better way of doing things) then I think modernizr is still the go to.