4 ms·

I would love to try something like that, but I have no idea how to model complex game logic like that in data, especially if it's decoupled from the UI state =/

I would love to try something like that, but I have no idea how to model complex game logic like that in data, especially if it's decoupled from the UI state =/ For example, to make even a "simple" game on something like Boardgamearena, you're supposed to create a state machine: https://www.slideshare.net/boardgamearena/bga-studio-focus-on-bga-game-state-machine https://www.slideshare.net/boardgamearena/bga-studio-focus-o... I don't even know what that is, and it's a lot more complicated than anything I'd ever seen on the frontend in the HTML/JS world. (To be fair, that's probably because I never had proper CS training. I'm just a self-taught web dev.) But it seems to me that even simple games require creating really complex engines that aren't really similar to the businesses needs I've coded for in the past... Not disagreeing with you at all, it all just seems so overwhelming compared to simple stuff like HTML/CSS/JS.

matthewfcarlson 3y ago
Even better, make a simple networked game. Socket.io makes it quite trivial to send messages. What I found works really well is keeping state as a series of mutations. Then a client emits a mutation and its broadcast out, if the mutation can’t apply, then it gets discarded and the server sends its copy of the state to the client that emitted the bad mutation. Makes it really hard to cheat but only requires sending mutations to the clients. https://matthewc.dev/projects/vuex-sync-p1/ https://matthewc.dev/projects/vuex-sync-p1/
swatcoder 3y ago
That's sort of the point. A lot of people got drawn into the industry in its latest boom and found themselves glueing together remote services using an ever-changing collection of heavy frontend frameworks and never experienced actually modeling an application from top to bottom. It doesn't need to be a game, but doing more of the dirty work that "[you] have no idea how to model" andis "more complicated than anything [you]'ve ever seen" can help induct you into a much richer and more cognizant craft practice.
- solardev 3y ago
  This isn't so much the old argument of (say) Next.js v HTML(x), but of the different degrees of state complexity required in a typical business app vs an actual game (at least to my mind). To me, it's a lot clearer how to deal with a traditional ecommerce database setup like Northwind Traders (https://en.wikiversity.org/wiki/Database_Examples/Northwind https://en.wikiversity.org/wiki/Database_Examples/Northwind). I've had to do that many times and know how to model such a thing. I have no idea how to start modeling the state for a game like Wingspan (https://boardgamearena.com/gamepanel?game=wingspan https://boardgamearena.com/gamepanel?game=wingspan), much less something more complicated, like Magic: The Gathering, where any of several tens of thousands of cards can interact with each other in novel ways, maybe even leading to infinite loops and such. In my mind it's like a giant if-then flowchart with a billion flows. I wish I could see the source code for the rules engine of such a thing, but with a step-by-step tutorial...
  - csande17 3y ago
    The Magic the Gathering Comprehensive Rules are a fun read: https://blogs.magicjudges.org/rules/cr/ https://blogs.magicjudges.org/rules/cr/ It's in English rather than computer code, but it sets out the data model and game loop in a way that should feel pretty familiar to programmers.
  - ape_key 3y ago
    I’d be deeply surprised if a webapp requiring Next.js doesn’t have a state machine in any components. If you’re past the complexity threshold for Next.js, you’ve run into what’s really probably the most fundamental construct in computing. They’re not that complex. They’re just presented in academic language. If you can program professionally, you’re very capable of self-studying a bachelor’s degree’s worth of CS.
  - danielheath 3y ago
    https://github.com/radar/mtg https://github.com/radar/mtg
taeric 3y ago
Honestly, feel free to do it in HTML/CSS/JS. The goal isn't to go as hard as you possibly can, simply to start realizing how much more "first class" knowledge of items on the screen you probably want. One thing I will caution is to not try and lean into making DOM layout do what you want. Represent the different elements as divs that are absolutely positioned, and you can go a long way. You'll probably still want a lot of seemingly duplicated data in places that you control directly, but that is part of the point.
- o11c 3y ago
  I'm far from an HTML expert, but there are a few things that absolutely need to be done The HTML Way™: scrolling - both in terms of event dispatch, and in terms of sizing (incorrect absolute positioning can break this), possibly focus as well. I don't pretend to understand under what exact circumstances the spacebar works for pagedown, but it's certainly something that fails often on fancy webpages but works intuitively on simple ones. copy-paste. No, middle click is not just another way of meaning ctrl-v, I want the correct buffer dammit! rich text editing is poorly supported however you do it, but be sure to have a fallback to a plain text mode that uses the browser controls
  - taeric 3y ago
    I mean... yes, if you are building a webpage, you should consider the capabilities of the web browser. I'd be surprised if copy/paste is something you want in your game. Scrolling for a game is again something you probably have specific ideas on. You could make it so that a side scroller builds everything so that html scrolling gets what you want. Odds are high that you'd have an easier time taking over a lot of that on your own. (Indeed, this is essentially how popular mapping "tiles" work. You don't have all tiles in the DOM, but play with the ones visible to work as desired.) And what I mean for absolute positioning is more in line with what I do in https://taeric.github.io/cube-permutations-1.html https://taeric.github.io/cube-permutations-1.html. And even there, I do not keep some things in state such that I have no control over the actual path a face travels as it moves into its new current spot.
mathgladiator 3y ago
I'm in the camp of f = ui(state), and the reason for this is the extreme of streaming games where UI = frame buffer. I'm inventing my own framework for radically simplifying traditional Web apps via RxHTML which works great for crud apps. However, games requires more insight into state machines and what-not. In terms of the logic, I wrote an entire platform to simplify multi-player board games which I'm evolving to tackle various businesses. https://www.adama-platform.com/ https://www.adama-platform.com/
ape_key 3y ago
You absolutely should learn about state machines. Also event-driven programming. (especially the idea of delaying effects, e.g. so in an RPG someone can perform a Reaction which disables the effects of an Action performed by another character before they’re applied). Learn about stacks. When you’re ready to make your brain bleed a little, try designing on paper the data structure to make D&D turns work. Hints: player initiative is a circular array, reactions are a stack, actions/reactions are events. Actions are events which modify characters, reactions are events which modify other players events. Ignore abilities which e.g. create new terrain or whatever. Ignore movement, positioning, targetting entirely. This will be fun! Also I can recommend the free book Game Programming Patterns. It’s useful for programming concepts even if you don’t make games
- wonger_ 3y ago
  I agree: take the time to learn about state machines. I remember the first time hearing about them and being totally confused by the wikipedia page. I think the first article that made sense to me was this one, because it used a webapp example: https://www.infoq.com/articles/robust-user-interfaces-with-state-machines/#:~:text=Refactoring%20towards%20state%20machines https://www.infoq.com/articles/robust-user-interfaces-with-s... And then developing a few sample applications, especially with Elm or another language with custom types, really completed my understanding. The diagrams and math notation are more intimidating than the actual code.
  - ape_key 3y ago
    Nah, diagrammatic reasoning is part of it. Separate yourself from syntax. Doodling on paper (or just mentally envisioning a data structure) is way more fun than writing actual code. I certainly would dissuade the OP from trying Elm. Not as part of learning state machines at least. Too many things at once and not necessary.
  - solardev 3y ago
    Thanks for sharing that link! I've tried reading about them in the past and always walked away more confused, but this article seems more readable. I'll give it a thorough read this weekend. Thank you!
JoeyJoJoJr 3y ago
You might be very surprised at how achievable it is to build a game, as long as you start small and limit your scope. I’d to steer clear of turn based games if you are starting out, as they generally entail a lot of complicated UI. Instead I would attempt to do some kind of action game with the 2D canvas context. You might start by just trying to get a dot moving around with the keyboard arrows. Do a little research into a very basic “game loop”, which is basically. function update(){ //handle the input //do some other stuff } function draw(){ // render code here } Once you get a ball moving around, tweak you program to add something else, like giving the ball gravity. Then add something else, like making it bounce off the sides of the canvas. Keep doing this until you have a basic game. You really only need to know a handful of techniques to get something basic working, and from there you’d be surprised at how far you can go. Don’t worry about code quality or trying to do it right, just try to figure out how you can get the game to the next step.

matthewfcarlson 3y ago

Even better, make a simple networked game. Socket.io makes it quite trivial to send messages. What I found works really well is keeping state as a series of mutations. Then a client emits a mutation and its broadcast out, if the mutation can’t apply, then it gets discarded and the server sends its copy of the state to the client that emitted the bad mutation. Makes it really hard to cheat but only requires sending mutations to the clients. https://matthewc.dev/projects/vuex-sync-p1/ https://matthewc.dev/projects/vuex-sync-p1/

swatcoder 3y ago

That's sort of the point. A lot of people got drawn into the industry in its latest boom and found themselves glueing together remote services using an ever-changing collection of heavy frontend frameworks and never experienced actually modeling an application from top to bottom. It doesn't need to be a game, but doing more of the dirty work that "[you] have no idea how to model" andis "more complicated than anything [you]'ve ever seen" can help induct you into a much richer and more cognizant craft practice.

solardev 3y ago
This isn't so much the old argument of (say) Next.js v HTML(x), but of the different degrees of state complexity required in a typical business app vs an actual game (at least to my mind). To me, it's a lot clearer how to deal with a traditional ecommerce database setup like Northwind Traders (https://en.wikiversity.org/wiki/Database_Examples/Northwind https://en.wikiversity.org/wiki/Database_Examples/Northwind). I've had to do that many times and know how to model such a thing. I have no idea how to start modeling the state for a game like Wingspan (https://boardgamearena.com/gamepanel?game=wingspan https://boardgamearena.com/gamepanel?game=wingspan), much less something more complicated, like Magic: The Gathering, where any of several tens of thousands of cards can interact with each other in novel ways, maybe even leading to infinite loops and such. In my mind it's like a giant if-then flowchart with a billion flows. I wish I could see the source code for the rules engine of such a thing, but with a step-by-step tutorial...
- csande17 3y ago
  The Magic the Gathering Comprehensive Rules are a fun read: https://blogs.magicjudges.org/rules/cr/ https://blogs.magicjudges.org/rules/cr/ It's in English rather than computer code, but it sets out the data model and game loop in a way that should feel pretty familiar to programmers.
- ape_key 3y ago
  I’d be deeply surprised if a webapp requiring Next.js doesn’t have a state machine in any components. If you’re past the complexity threshold for Next.js, you’ve run into what’s really probably the most fundamental construct in computing. They’re not that complex. They’re just presented in academic language. If you can program professionally, you’re very capable of self-studying a bachelor’s degree’s worth of CS.
- danielheath 3y ago
  https://github.com/radar/mtg https://github.com/radar/mtg

taeric 3y ago

Honestly, feel free to do it in HTML/CSS/JS. The goal isn't to go as hard as you possibly can, simply to start realizing how much more "first class" knowledge of items on the screen you probably want. One thing I will caution is to not try and lean into making DOM layout do what you want. Represent the different elements as divs that are absolutely positioned, and you can go a long way. You'll probably still want a lot of seemingly duplicated data in places that you control directly, but that is part of the point.

o11c 3y ago
I'm far from an HTML expert, but there are a few things that absolutely need to be done The HTML Way™: scrolling - both in terms of event dispatch, and in terms of sizing (incorrect absolute positioning can break this), possibly focus as well. I don't pretend to understand under what exact circumstances the spacebar works for pagedown, but it's certainly something that fails often on fancy webpages but works intuitively on simple ones. copy-paste. No, middle click is not just another way of meaning ctrl-v, I want the correct buffer dammit! rich text editing is poorly supported however you do it, but be sure to have a fallback to a plain text mode that uses the browser controls
- taeric 3y ago
  I mean... yes, if you are building a webpage, you should consider the capabilities of the web browser. I'd be surprised if copy/paste is something you want in your game. Scrolling for a game is again something you probably have specific ideas on. You could make it so that a side scroller builds everything so that html scrolling gets what you want. Odds are high that you'd have an easier time taking over a lot of that on your own. (Indeed, this is essentially how popular mapping "tiles" work. You don't have all tiles in the DOM, but play with the ones visible to work as desired.) And what I mean for absolute positioning is more in line with what I do in https://taeric.github.io/cube-permutations-1.html https://taeric.github.io/cube-permutations-1.html. And even there, I do not keep some things in state such that I have no control over the actual path a face travels as it moves into its new current spot.

mathgladiator 3y ago

I'm in the camp of f = ui(state), and the reason for this is the extreme of streaming games where UI = frame buffer. I'm inventing my own framework for radically simplifying traditional Web apps via RxHTML which works great for crud apps. However, games requires more insight into state machines and what-not. In terms of the logic, I wrote an entire platform to simplify multi-player board games which I'm evolving to tackle various businesses. https://www.adama-platform.com/ https://www.adama-platform.com/

ape_key 3y ago

You absolutely should learn about state machines. Also event-driven programming. (especially the idea of delaying effects, e.g. so in an RPG someone can perform a Reaction which disables the effects of an Action performed by another character before they’re applied). Learn about stacks. When you’re ready to make your brain bleed a little, try designing on paper the data structure to make D&D turns work. Hints: player initiative is a circular array, reactions are a stack, actions/reactions are events. Actions are events which modify characters, reactions are events which modify other players events. Ignore abilities which e.g. create new terrain or whatever. Ignore movement, positioning, targetting entirely. This will be fun! Also I can recommend the free book Game Programming Patterns. It’s useful for programming concepts even if you don’t make games

wonger_ 3y ago
I agree: take the time to learn about state machines. I remember the first time hearing about them and being totally confused by the wikipedia page. I think the first article that made sense to me was this one, because it used a webapp example: https://www.infoq.com/articles/robust-user-interfaces-with-state-machines/#:~:text=Refactoring%20towards%20state%20machines https://www.infoq.com/articles/robust-user-interfaces-with-s... And then developing a few sample applications, especially with Elm or another language with custom types, really completed my understanding. The diagrams and math notation are more intimidating than the actual code.
- ape_key 3y ago
  Nah, diagrammatic reasoning is part of it. Separate yourself from syntax. Doodling on paper (or just mentally envisioning a data structure) is way more fun than writing actual code. I certainly would dissuade the OP from trying Elm. Not as part of learning state machines at least. Too many things at once and not necessary.
- solardev 3y ago
  Thanks for sharing that link! I've tried reading about them in the past and always walked away more confused, but this article seems more readable. I'll give it a thorough read this weekend. Thank you!

JoeyJoJoJr 3y ago

You might be very surprised at how achievable it is to build a game, as long as you start small and limit your scope. I’d to steer clear of turn based games if you are starting out, as they generally entail a lot of complicated UI. Instead I would attempt to do some kind of action game with the 2D canvas context. You might start by just trying to get a dot moving around with the keyboard arrows. Do a little research into a very basic “game loop”, which is basically. function update(){ //handle the input //do some other stuff } function draw(){ // render code here } Once you get a ball moving around, tweak you program to add something else, like giving the ball gravity. Then add something else, like making it bounce off the sides of the canvas. Keep doing this until you have a basic game. You really only need to know a handful of techniques to get something basic working, and from there you’d be surprised at how far you can go. Don’t worry about code quality or trying to do it right, just try to figure out how you can get the game to the next step.