mattstyles

Moderators
  • Content Count

    1,557
  • Joined

  • Last visited

  • Days Won

    13

Everything posted by mattstyles

  1. mattstyles

    Useful or Intresting Articles

    Almost all of those articles are several years old. Some things don't change much, but a lot does, especially on the web. Just go careful with the specifics of some of those articles which may now be out of date. Any general principles should be great to learn from though.
  2. mattstyles

    Hotkeys and Keyboard layouts

    Its about support. `keyCode` is supported everywhere (although deprecated in some browsers), `key` is only a working draft and not supported everywhere. https://caniuse.com/#search=KeyboardEvent This is incredibly reliable for support matrices.
  3. mattstyles

    My javascript websockets seem to be buffering incoming messages

    Definitely sure you're not executing the `startTime = new Date()` line more times than you think? i.e. if you're trying to record the frequency of multiple messages maybe this snippet is all in a function that is being called somewhere and inadvertently mutating the startTime you're expecting to be a constant?
  4. mattstyles

    [OverKnight] Roguelike card game

    I did try it on my phone and now have it saved on my home screen Controls felt really good
  5. mattstyles

    Trying to Save a Class Javascript

    You can't serialize an objects methods, only the primitives. For example: var obj = { foo: 'bar', get: function () { console.log('hello', this.foo) } } JSON.stringify(obj) // "{foo: 'bar'}" Parsing that object back won't return the methods (functions). You'd need to write your own thing so that when you get the saved data back (which is just strings) you instantiate a new instance of the object based on those properties that are serializable. As methods are generally static this isn't too much of a problem. Gets a little more complicated when iterating over an array, but only slightly. This only works at all because JSON.stringify does some work, you can write your own serializer (stringify) if you really need to, but danger lies that way. Also, I really wouldn't be tempted to `toString` on functions, you'd end up having to eval on the other end when you want to use it. Again, lots of danger lies this way.
  6. mattstyles

    [WIP] Bumgineer Demo

    The game feels really nicely done by the way. Really smooth and worked really well.
  7. mattstyles

    [OverKnight] Roguelike card game

    Really nice. Fun to play, felt very polished, particularly for an alpha. I tried on my laptop with a trackpad, going to go through the add to homepage on my phone. The initial load was horrific, took like 20 seconds which seemed to just be the weight/volume of images, can this be optimised by using a single spritesheet of images? Service worker worked great though, second load was super quick. I did have a little difficulty with playing the cards, might be a trackpad issue mostly, will try on my phone to see if touch controls feel more responsive. Having said that, I did get used to it, there was just a bit of initial friction between peeking at a card and actually playing it.
  8. mattstyles

    [WIP] Bumgineer Demo

    Awesome Awesome I found it really hard to get started. I couldn't fight anyone without dying quickly, so it meant jumping in and out of the market to raid the dumpster. Is there another way to get the $$$ to improve?
  9. mattstyles

    Hills - 3 Minute Game Poem

    It is...deep. I really felt the struggle of the main character, its expression, its futility. Deep man, very deep.
  10. mattstyles

    How to make a multiplayer game

    Without meaning to sound negative, how comfortable are you with JS and web programming? If the answer isn't at least 'yeah, I'm pretty good' then maybe don't try a multiplayer game. They are orders of magnitude harder. If you're going for it though: I'd start looking up and learning how websockets work, and really understand it. If you're familiar with pub/sub or observable patterns then they aren't super complex. The problem you always face (with any program to be honest) is dealing with the asynchronicity of events. If you get that down then you're most of the way there. It certainly isn't easy though. Then I'd look up server-authoritive architecture i.e. the server is where your game live, your clients (players in the browser) are windows on to that server. Then get a handle on what stuff you can/should do on the client and what stuff must be done on the server. Once you get this then you can employ the lessons learnt above (websockets) to propagate that server state to all your players. After that you've pretty much got the whole multiplayer thing done from a technical stand point and you can work on the really fun stuff of making your game fun. Oh, as with all projects, keep your scope initially super small, like, really small, as in, way smaller than you think would be viable. Get it working on that small scope, then expand outwards. You'll hopefully find that even with a tiny fraction of your 'ideal scope' that your core concepts shine through and you have the beginnings of something fun, it probably *will* be fun at that stage if your core concepts are good.
  11. mattstyles

    Should I get a VPS or a Cloud Droplet

    1and1 are offering you a managed solution of sorts, DigitalOcean is usually just the hosting, it's up to you how to configure and manage it. You can run multiple different sites from one 'droplet/instance' without issue, depending on the site. If you're wanting to publish a client-only JS game then I'd consider something like now.sh or netlify. They make it super trivial to get such apps in to the wild.
  12. I think this is an awesome question, and it the sort of thing everybody runs in to: "How to structure your application to make coding up your logic as easy as possible.". First up, there is 0 wrong with what you're doing. You've already split your code base up in to logical chunks: something handles bullets, something else handles collisions etc etc. That's great. Think how you could further split things up so that, ideally, you make changes in a minimum amount of places. Actually, with just a couple of places to change how different types of bullets (and any modifiers applied to them) are handled, you're doing pretty well already. There are many many different ways you could attempt to solve this problem. Personally, I reckon I'd start thinking more about the data structures I'm passing around and what each different aspect of my system needs to run. You could start structuring your data to be more descriptive about the types of things. Maybe a bullet entity could contain all the variables that your bullet handling and collision code needs to work such as the texture that should be set and the colour or type of any particle emitter that gets generated? Maybe there should be a variable that declares the speed? This way you just pass this structured object into your functions and they don't care on the specifics of what type they are, they infer what to do based on the properties of that object i.e. rather than those functions knowing that a 'flame bullet' travels at 120 and a 'exploding bullet' travels at 100, it just takes a bullet object that has a speed and uses that to set velocity. Then, when you apply a 'power-up', whatever function that applies the power-up could either add the modifiers or manually change the bullet properties. i.e. var flameBullet = { speed: 120 } var speedPowerUp = { modifier: 20 } function applyPowerUp (bullet, powerup) { return { ...bullet, speed: bullet.speed + powerup.modifier } } I've used object-spread there, that's fairly new to JS, all it does it create a copy of `bullet` but then applies a new `speed` property, which takes precedence over what was previously defined in the bullet passed in. There is no need to do it like this, maybe you just store the modifier and calculate the speed later. There's no one single right answer. Evaluate which method best suits your needs, both of your system and you (or the team) as a programmer. There's also no need to use a separate function like this, maybe you like classical coding (using classes, careful with these in JS) and you want that function to live on the powerup or bullet objects, that's absolutely fine as a solution. It sounds like you have divided and structured your code and logic, it also sounds like maybe you just need to do this for the data that logic operates on and you'll be most of the way there to a solution that fits you.
  13. mattstyles

    Hosting recommendations ?

    Just try searching, these threads come round fairly often. They mostly all offer the same things at roughly the same price points, a quick bit of googling and you'll almost certainly find one good enough unless you have something really niche you need, which is unlikely.
  14. mattstyles

    animation for this card folding using tweenjs

    Not sure you'll ever get there with CSS, that looks like a 3D game where the vertices of the card are actually moving and the renderer works out the rest. CSS transforms could get you close with trickery with how many elements you use to represent a card, but it'll never be great. Happy to be proved wrong but CSS transforms just don't work like that to do the stretching and transforming you see in the video. Actually, maybe there is a way. Use lots and lots of elements to define the fold area, then transform each one by an increasing amount, i.e. first one (closest to body of card) rotates and transforms only a little bit, each subsequent one after it (until you reach the corner) moves a little farther, and its additive so there would be a nice concise algorithm that could give you how much to move each piece. Once you have an algorithm just keep increasing the number of elements until you get something that is smooth enough. It won't be perfect but it might be good enough to work.
  15. mattstyles

    How can Isometric water effect Make like ~~?

    Very good looking indeed, I don't really know the answer, but water simulation is something is often done with shaders. I'd check out some shaders for some examples about how to make water semi-realistic.
  16. mattstyles

    Notification Bar

    Boolean triggers? If you want something to happen in the future, then you are very limited for choice. setTimeout, setInterval, using your own counter that increments on requestAnimationFrame or keep a timestamp and poll periodically. I think that's about it, there may be some more creative solutions out there. Of those, I reckon setInterval is the absolute simplest, but, it's flawed enough I wouldn't recommend it (for this small rendering task it is fine though), setTimeout is only slightly more complicated. If you already have a rendering loop that fires as close to 60 fps as it can get though, implementing a counter or a timestamp should both be simple enough. A counter would work by incrementing each frame, when a certain number is reached, flip the colours—this would tie it to frame rate though. Generally being frame-rate tied is a little smelly, but, for this sort of task would probably be fine, you aren't tracking any type of actual translation (movement) and it would only slow down when the fps slows down, in which case you couldn't render it any faster anyway. A timestamp, comparing the now time to the last time you flipped it, would also be reasonably simple, probably. Bare in mind the 'absolute' simplest browser-based way of doing this is with CSS animations because it saves you working out how to program it. Given you aren't using CSS, this might be less attractive as a solution to you.
  17. mattstyles

    Guess Who game

    If you can get away without a server that'll make things easier. If you can do client only have a look at now or netlify (there are others) that make deploying client-only stuff super super easy. They're amazing tools.
  18. if you have node you also have npm, use that to install a web server. There are approximately 4000 of them. https://www.npmjs.com/package/serve This one is the great. https://www.npmjs.com/package/hench obviously this one is the best that there ever was and ever will be.
  19. mattstyles

    Typescript vs Pure Javascript code

    To put a counter argument, you can ignore OOP, its a huge red herring. Don't believe me, just do some research! He he, let the flame war begin! Only joking, lets not do that, I'm just offering an alternative. For me the premise of TS is flawed. A solid type system is something that would be beneficial in JS, but it doesn't require it, and trying to shoe-horn it on to a language that doesn't really work with it is a flaw. Languages like Dart or Elm produce a JS output, but they're totally separate languages, they don't bolt a type system on to an existing language, they bake it right in to its own language. I also totally agree with Rich though, try both, go with whichever one feels better right now for you. You can always change your mind later if you want.
  20. mattstyles

    controlling css properties in tweenjs

    https://github.com/tweenjs/tween.js/ Whats the exact problem you're having? The top of the above linked readme shows DOM manipulations, the following snippet makes very minimal changes to that code from the readme. <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/16.3.5/Tween.min.js"></script> </head> <body> <script> var box = document.createElement('div'); box.style.setProperty('background-color', '#008800'); box.style.setProperty('width', '100px'); box.style.setProperty('height', '100px'); box.style.setProperty('border-radius', '0px') document.body.appendChild(box); // Setup the animation loop. function animate(time) { requestAnimationFrame(animate); TWEEN.update(time); } requestAnimationFrame(animate); var coords = { x: 0 }; // Start at (0, 0) var tween = new TWEEN.Tween(coords) // Create a new tween that modifies 'coords'. .to({ x: 100 }, 10000) // Move to (300, 200) in 1 second. .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. .onUpdate(function() { // Called after tween.js updates 'coords'. // Move 'box' to the position described by 'coords' with a CSS translation. // box.style.setProperty('transform', 'translate(' + coords.x + 'px, ' + coords.y + 'px)'); box.style.setProperty('border-radius', coords.x + 'px') }) .start(); // Start the tween immediately. </script> </body> I added the border radius, changed the object from 2d to 1d (border radius is a single value) and updated the update function to alter the border radius property (I also upped the time from the example to 10s which makes it easier to see the change over time). I have limited understanding of Tween.js, but it literally just handles the rate of change over time, you then handle the application of that change.
  21. mattstyles

    Guess Who game

    jQuery won't help with saving the state of the cards, but a DOM-based approach (as opposed to a canvas based approach that most games here adopt) would sound perfect for this sort of thing. The DOM makes laying out a grid reasonably easy, transitions to flip cards using CSS is also pretty easy, and its easier to get a responsive experience across different device sizes (and orientations) is easier with the DOM. jQuery would be fine if you go that route, but, I'd suggest you don't need it now. Cross-browser issues are far less of a problem than they were so jQuery's usefulness is diminished. There are also better ways to structure a DOM based UI, such as React, Vue, multiple React-likes or Angular, but they will all require far more learning, you'd be fine for this project just using vanilla JS. You can save state in the browser using a few different methods: * Local storage is a key-value store, its very simple and supported in every browser * Session storage is basically the same but deletes itself when you close the tab, which isn't what you want at all * Browsers have better database options built in, either WebSQL or IndexedDB, these are very much like SQL or NoSQL databases you might be familiar with. Cross-browser support is sketchy * You could even use cookies to persist data, but its awkward to use and for client-only storage it offers no benefits over local storage and is smaller and far harder to use * You could even use file storage or cache storage but they're experimental and not well supported (yet) at all However, I really don't think local (any of the above) storage methods are going to cut it for you, they'll only get you half way. Sounds like you want to change the data on a period, 24 hours? You need to load in the initial state of all of the cards (the name and code), this means loading it from a server. Then you store the flip-state locally, probably with a timestamp. After the timestamp (24h) is reached, flip all the cards back again, then you need to load more data for the next day? In theory, you could actually get away without a server. The steps would be something like: * You could ship a version of your game, * with the state of all the cards data baked in (hardcoded), * On load you check your chosen local storage method for the card data and the timestamp * If you don't find any then use the hard coded data and populate the local storage * Each card has the data (this can be the hard coded data) and the flipped state (a boolean) in local storage * As the user uses your game, you update the local storage flags * On the next visit you start again from step 3 * If the timestamp is expired then flip all flags to false and proceed * When you update the card data, you'd need a way to invalidate the locally stored data. This could be done by storing some meta (say, a version number) with your stored data, when you ship a new version of your app with new data you'd check that version number, if they don't match then re-initialise the local storage data and continue. Make sure this data change does not confuse users i.e. if they're mid-way through a set of cards, it'll probably be annoying that they have now changed. The alternative is to load that data in from a remote source, which involves setting up a server for it. This way you separate application and data, which is a good thing, but, it is a slightly more architecturally complex solution as you have to manage that data source and the server (api) that uses it. Hope that helps a little
  22. mattstyles

    text message dataBase and localisation manager

    There are quite a few CSV to JSON converters and its almost always best to do it at compile time rather than run time. By doing it at runtime (as you're doing) you're asking the client to do more work every time, the CSV is probably larger than the corresponding JSON payload as well so you're adding bytes over the wire and as this example is translations presumably you're blocking your game/app from working until you have them so bytes are important. You're also sending every translation you have to everyone, in most cases this is extremely wasteful and would quickly become prohibitive. Many times you can use separate urls for different languages and only ship those translations that url (instance) needs. When you do need multiple languages in the same app/game, it might be worth loading one upfront, then loading the others if the user requests them, most of the time they won't, they certainly won't want all of them. So it probably best to have a process that takes your spreadsheet and converts it to the payloads you need and then just load (on the client) what you need. Pretty sure there are a number of different free tools that would do this sort of thing for you, and structure things like pluralisation and number handling for you also. The spreadsheet is a good starter, and it'll get you quite far, but there are better ways. For those interested in localisation it's worth googling i18n for several approaches.
  23. mattstyles

    Bug

    Hi Martin, This is an English speaking board, can you repost in English please? Excuses, c'est un conseil anglophone, pouvez-vous reposter en anglais s'il vous plait?
  24. mattstyles

    Chromebook only toolchain?

    I'm not exactly sure on Chromebook limitations, on the one hand you seem to imply you want web-only tooling, but then talk about installing editors etc? I don't know how Unity/Construct/Gamemaker etc work either i.e. I don't know if they have their own IDE's. In any case, Phaser, Babylon etc are 'just' javascript, any text editor will work. Editors like Atom, VSCode etc are technically just glorified text editors, but with plugins can become as IDE-like as you want. If installing programs isn't a problem (either for Chromebooks or inside schools, where systems are notoriously difficult to manage) then any of these editors will work fine with almost any OS. Regarding 2D stuff, tooling like Gimp and Inkscape are free and work on almost any platform. Tiled may or may not be web based, but is much more game-specific. Googling for web-based 2d tooling brings up loads of hits though.
  25. mattstyles

    How can I track on wich site game was running?

    fetch('https://myanalytics.com/mygame', { method: 'POST', body: window.location.href }) That should do it. Won't work if its in an iframe though, you'll get the href of the iframe. If you use something like Google Analytics, and you embed that code in to your game code (i.e. if someone steals your game code they also steal your GA implementation) then I think it usually, by default, sends along the url. You'd be able to track urls that way.