What do you need and need to know to make an html game?

[Blayneployd]

I want to see if I can learn to code and make an html game but not sure where to start.
I think I would need to know html language and javascript.

I figure simple choices would be easy like linking pages together for travelling locations.
But then how do you link play stats with eating makes the hunger bar go up and things like that.

 

[Ryahn]

You can look into using HTML engines. Like Twine

It should be pretty easy to pick up and learn. But know how HTML works, along with CSS will help you out. JavaScript may be needed as well but not entirely sure.

 

[User_920791]

1.

You must be registered to see the links

2.

You must be registered to see the links

3.

You must be registered to see the links

3.1

You must be registered to see the links

You don't need to reinvent the wheel. Use

You must be registered to see the links

engine.

 

[Blayneployd]

Ok thanks, and also, is there anyway to edit the html games on here. Like FreshStart or is the code encrypted or something?

 

[User_920791]

Ok thanks, and also, is there anyway to edit the html games on here. Like FreshStart or is the code encrypted or something?

You can edit html/css/js files in any text editor, but the developer can make this process difficult by obfuscating those files and packaging the game using Electron, for example.

 

[Blayneployd]

Thanks for the help, I started using Twine 2.

 

[HiEv]

Thanks for the help, I started using Twine 2.

If you're using Twine, then I'd recommend using the SugarCube story format in Twine (you can select that from the pop-up menu on the lower-left side of your story in Twine by clicking "Change Story Format"). It's an easy format to start with and has a lot of nice built-in tools, so it gives you plenty of room to grow. You can download the latest version of

You must be registered to see the links

(follow

You must be registered to see the links

).

For a basic primer on Twine 2 and SugarCube 2 see "

You must be registered to see the links

".

Next, the best thing to do is start by reading through the

You must be registered to see the links

and the

You must be registered to see the links

, just so you get an idea of what all they can do for you, and keep those links as a reference. I have

You must be registered to see the links

you can take a look at as well.

Most of the rest is basic web design stuff and JavaScript. Check out

You must be registered to see the links

and

You must be registered to see the links

sites for help with HTML, CSS, and JavaScript coding if you want to do something trickier than plain text and images. Next, and I use this significantly less than the previous two links, but if you need it

You must be registered to see the links

has some additional information you may find useful. jQuery is mainly useful for handling user interactions and modifying the way pages are displayed without loading a new passage.

If you get stuck,

You must be registered to see the links

is pretty helpful, as is the

You must be registered to see the links

section of the

You must be registered to see the links

forum (since the creator of SugarCube often hangs out there, and also I've posted

You must be registered to see the links

).

As for the game itself, start small! Too many people want to start with an open-world sandbox type game, and then get overwhelmed/burnt out and end up with yet another incomplete game. You want your first few games to build up your skills and toolkit, and only then should you start thinking about making bigger games. Think of it like trying to make GTA. You don't start with GTA, you start with maybe a shooting game. Then a racing game. Then a story-based game. Only once you have enough tools like those are you ready to start putting them all together to make a GTA-type game.

So, try to think of something that takes place in a limited environment, with few people, places, and things to interact with. Perhaps consider joining

You must be registered to see the links

. If you have an idea for a big game, feel free to keep track of any notes you have for it while you work on your first few other games, as you'll probably come across problems and ideas you wouldn't have thought of otherwise.

Also, make sure you have an idea for an attention grabbing start, a few interesting endings, and at least have a general idea of how you're going to get from that beginning to those endings. If you don't plan out how your game will end ahead of time, it can be easy to write yourself into a corner and then stall out. It's much easier to reach your destination if you know where you're going.

Finally, be original. Even if it's the classic story, try to add your own new twist to it. People are always craving new things, so try to tap into that with your story/game.

Ok thanks, and also, is there anyway to edit the html games on here. Like FreshStart or is the code encrypted or something?

If it's a Twine game then you can import it into Twine and edit it there. Note that if it's a Twine 1 game, then you'll either need Twine 1 to import it, or you'll need to use

You must be registered to see the links

first, so you can then import it into Twine 2.

So, for example, if you download

You must be registered to see the links

(plus

You must be registered to see the links

), you can then use the "Import From File" button on the right-hand UI bar to import that code into Twine. Once you've done that, you can open it up, see and edit its code, and publish it as HTML with any modifications you've made.

Hope that helps!

 

[Blayneployd]

Yes thanks for all the information. I started using Harlowe but maybe Sugarcube is worth the switch. I looked at the code for FreshStart and I think its in javascript. Coding is pretty challenging. I'm trying to make a basic inventory system for starters and despite all the material out there on google and youtube it's still hard.

 

[HiEv]

Yes thanks for all the information. I started using Harlowe but maybe Sugarcube is worth the switch. I looked at the code for FreshStart and I think its in javascript.

"Fresh Start" uses SugarCube, but SugarCube is very JavaScript-like in many ways. You'll find that most of the big Twine games from the last year or so use the SugarCube story format because of its flexibility and ease of use.

Coding is pretty challenging. I'm trying to make a basic inventory system for starters and despite all the material out there on google and youtube it's still hard.

Funny you should say that, I'm working on a Twine 2/SugarCube 2 "plugin" to make inventories simple for people developing in Twine with little or no coding experience. It's called the Universal Inventory System, or "UInv" for short.

It's still in pre-release at this point, but it works well enough that you can use it. You can see a short bit of

You must be registered to see the links

, take a look at the (partially incomplete)

You must be registered to see the links

, or download the

You must be registered to see the links

. I'm actually hoping to have the next big update out within a couple of days, and it will add a bunch of new features.

If you have any questions, problems, or suggestions regarding UInv, please let me know. I'd love to hear your feedback.

Enjoy!

 

[Blayneployd]

Very cool thanks again.

 

[vnAdult]

html5 and js: Construct2 is excellent for 2d games. Very quick to get something working. You can load text from Json if your building a text heavy game.

 

[Blayneployd]

"Fresh Start" uses SugarCube, but SugarCube is very JavaScript-like in many ways. You'll find that most of the big Twine games from the last year or so use the SugarCube story format because of its flexibility and ease of use.


Funny you should say that, I'm working on a Twine 2/SugarCube 2 "plugin" to make inventories simple for people developing in Twine with little or no coding experience. It's called the Universal Inventory System, or "UInv" for short.

It's still in pre-release at this point, but it works well enough that you can use it. You can see a short bit of

You must be registered to see the links

, take a look at the (partially incomplete)

You must be registered to see the links

, or download the

You must be registered to see the links

. I'm actually hoping to have the next big update out within a couple of days, and it will add a bunch of new features.

If you have any questions, problems, or suggestions regarding UInv, please let me know. I'd love to hear your feedback.

Enjoy!

I tried using the UInv. I put the ItemTable style into css and the ItemTable code into a couple different passages but nothing is happening.
I can't find UniversalInventorySystem.js to open with a text editor.

I also tried a couple other inventory systems such as

You must be registered to see the links

.

For example this part,

// Starts your inventory. You need to call this once at the start of your game in order to make the inventory work.
// Usage: Place <<initInv>> in your StoryInit passage. Don't have a StoryInit passage? Make one.
macros.initInv = {
handler: function(place, macroName, params, parser) {
state.active.variables.inventory = [];
}
};


Where does macros.initInv go? is it javascript? also if i use <<initInv>> it gives me an error.

Thanks.

 

[HiEv]

I tried using the UInv. I put the ItemTable style into css and the ItemTable code into a couple different passages but nothing is happening.

You also need to include the UInv code in your JavaScript section or it won't work.

You'll also want to edit the part of the UInv JavaScript code where you define your default bags and default items. Read the "

You must be registered to see the links

" and "

You must be registered to see the links

" sections of

You must be registered to see the links

to help you understand how to start.

I can't find UniversalInventorySystem.js to open with a text editor.

It's inside the .ZIP file

You must be registered to see the links

. It's also in the .JS file at that link, plus inside of the JavaScript section of the "UInv_Sample_Code.html". Just take a look at that sample code and it shows you exactly how you can use UInv.

I also tried a couple other inventory systems such as

You must be registered to see the links

.

For example this part,

// Starts your inventory. You need to call this once at the start of your game in order to make the inventory work.
// Usage: Place <<initInv>> in your StoryInit passage. Don't have a StoryInit passage? Make one.
macros.initInv = {
  handler: function(place, macroName, params, parser) {
    state.active.variables.inventory = [];
  }
};

Where does macros.initInv go? is it javascript? also if i use <<initInv>> it gives me an error.

The code at that page is all JavaScript, thus it all has to go in your JavaScript section in order for it to work.

None of

You must be registered to see the links

will work if you don't actually put their code into your story.