#javascript game tutorial

[retroghost16]

The next prerequisite class in taking is a code one.

[l0stw00d]

local guy tries 2 learn javascript. decides it might be a mistake actually.

[chriisduran]

Onboarding - html, css y js demo

[losergames]

OH MY GOSH... I never knew UI database was a thing!! I'm so incredibly grateful you responded to my ask with that link, it's a game changer for sure. I've been referencing some of my favorite games when thinking through UI for my own game (Cyberpunk 2077, my beloved) but I never knew there was a site like that for more cohesive referencing. Thank you!!!!

hi!! i am so incredibly sorry i am late answering these. life! you know how it goes.

i recommend w3schools for html, css and javascript! they have a lot of beginner tutorials for things you might be interested in, as well good explanations alongside examples.

i also watched a lot of dan cox's tutorials on youtube. he has a bunch of stuff on his page for sugarcube 2. as far as i know he has a few video for the new 2.37 version, where as i'm using 2.36 but that's up to you! super SUPER helpful to watching someone actively using the programme and talk through it.

idrellegames' coding in twine tag is also super helpful! i was scrolling through it all the time when i got started with twine lol

my best advice for coming up with a design that is unique is to not go straight into the coding first! i mocked up all of chop shops designs in photoshop before i started building it in twine. here are some old mock ups. it doesn't have to be photoshop, that's just the tool i have on hand, but something like canva would definitely work just as well! or, if you don't have access to anything digital, just using a pen and paper would work just as well. it's much easier to draw out a design than start coding it when you're not sure how it's even supposed to look yet.

i hope that helps a little! <3

[sinfulsalutations]

the bad batch irl headcanons: brainrot edition.

hunter

watches the boys, breaking bad, and basically anything with jk simmons in it

his top artist on his spotify wrapped was lana del rey and has been lana for 3 years straight

listens to self help audiobooks and true crime podcasts

stopped posting on tiktok because 30 year old moms kept commenting weird freaky shit

makes capcut template edits of himself

snap score is in the millions; his parents were confused on the questionnaire and instead ordered a thot son

tech

listens to playboi carti, earl sweatshirt, and ken carson. below them is classical music

never beats the “erm, actually” allegations. his friends turned him into a nerd sticker to use in conversations

reddit WARRIOR. his karma score is in the millions. he posts, no matter what, every two hours (schedules the posts if needed to). most active in the subreddits r/techtips and r/javascript

obeys the traffic laws in gta but if a pedestrian says some shit like “hey watch where you’re going asshole” he is CLOCKING that mfer

plays swipe games on tiktok religiously and will change his answers to fit better with the “lore”

watches jujutsu kaisen, has a tiktok collection dedicated entirely to gojo edits. despite that, maki is his favorite character

wrecker

his entire tiktok for you page consists of workout videos and cute animals

did the trend of tying a bow on the bicep and breaking it while he flexes

doesn’t know how to take photos of himself; watches tutorials on every social media he can find but still can’t figure it out

listens to bad bitch music. beyoncé, megan thee stallion, tinashe, doja cat, glorilla, nicki minaj, all that stuff.

comments “looked at my girl and smiled because she’s perfect” on a hot girls post

says “what the dog doin” all the time. all. the. time.

crosshair

serves cunt; serves all of the cunt

a back arching straight man; ur gay tote-bag carrying boyfriend

almost all his friends are lesbians. they take him to the queer/sapphic clubs and the chappel roan concerts

comments “why no one hating” on the most INNOCENT and PURE videos just to start arguments

is a biker boy but hates the whole “biker tok” stereotype and so he doesn’t go out on the bike anymore out of fear of being recorded without his consent

instagram notes is his main form of communication; he is an olympic ghoster

echo

his vocabulary contains “skibidi” “what the sigma” and “gyatt”

his most used “social medias,” in order, are pinterest, whatsapp, and tiktok

worked at a waffle house before he got fired for starting a fight

kpop fan. stans newjeans, tomorrow x together, and le sserrafim

the definition of “female rage”; also, indeed, serves cunt. not as much as crosshair, but serves cunt nonetheless.

has 13 daily hours of screen time. what is he doing for those hours? fuck if i know. fuck if he knows. fuck if his PHONE knows. (in reality, he leaves youtube videos playing all night and doesn’t even realize it)

[ataleofcrowns]

Hi so sorry to bother you but I want to learn how to make IFs, so I've been using twine and trying to learn how to use sugarcube but like how 😭😭😭

Babes I am so embarassed I'm literally studying computer science oh my god. Like in theory I know that programming languages are different but this is the first time java vs javascript is really hitting,,,,

Do you have links to any resources you used to learn? Like how you randomized variables (for the 'i'm into both men and women' option's gender setting) and how to do the pronoun thing properly, and stuff like the codex, plus if you can how you customized that sidebar

Thank you and I'm sorry to bother you!!

No worries at all!! Here's a masterlist of Twine resources you can use for the things you mentioned and more. It includes tutorials for beginners, including multiple different ways on how to code pronouns, CSS customization and templates for your game, etc.

For the randomization of variables, the line of code you want is <<set $variable to either("option1", "option2", "option3", ...)>>

But for my purposes specifically, to maintain an even 2 male/2 female LI split, I had to use the code in a little more convoluted way since randomizing all the genders with that code could end up with an "uneven" balance (like 3 out of 4 LIs being randomized as female, or all LIs ending up as male).

If you want to do something similar with having a 2 male/2 female LI randomization, here's how I went about it, though I'm sure there's a much quicker way to do it. Mind you I was a total beginner when I wrote this haha:

Basically what this does is randomize R's gender and randomize X's gender first to either male or female with the first two lines. If R and X are both set as male or female, then A and D will both be set as the opposite. If R and X are set as different genders, however, then A's gender will be randomized next. Then, based on whether A is male or female, D's gender will be selected to complete the 2/2 split.

Hope this helps!!

[darkfictionjude]

Hi, how do you do?

This is somewhat of a follow-up from the romance system ask. I ended up deciding to do something similar to what you are going to do with EC: Having two flirt options, the opposite of each other, but specific to each RO. It just works so well I had to copy that idea. I had considered something like that at one point, but I thought it was too much effort. Then I realized that the contrary was true. It's less effort, because now I don't have to force myself into binaries that do not work for the RO's.

For example, one my RO's simply wouldn't be with an MC who is antagonistic. So, instead, I went for a dichotomy between Oblivious and Assertive. So either the MC basically has feelings for the RO, but doesn't realize. Or actively pursues something more than the relationship they currently have.

That doesn't sound like much, but that's because I'm lacking context. It sounds better with it. Sigh.

Well, besides that, I got to another stopping point. I have been messing with the code, and realized I wanted to use icons to show when an option was meant to be romantic, or special in some kind.

And that meant going to search for tutorials about how to do that. I found some... Then I always felt I was missing a step or something, because I simply couldn't figure out how to do it.

The only thing I understood was that many used FontAwesome to get the icons. Then they either used the Stylesheet, the Javascript or both. They used a link, but I could never find a link that worked for me. I know you can link fonts (which I did before), so I know you can link things of that sort.

So, I ask you, darling author: How did you add icons on your projects? I know WWC has them (I even checked, even though I was sure you used them there). So, it seems reasonable to assume you know how to do it. Or at least a way to do it.

Maybe I'm overcomplacating myself, which wouldn't be the first time. But it can be a useful question, even if it ends up being basic or easy.

Thank you in advance for your help.

Have a nice day!

Honestly? I just use the icons for google docs

I go on the tab that says insert, then special characters and select from there. After I just copy and paste haha

I’ve gone a crazy with it for OYHS but damn I really think the icons I chose for that game go with the vibe

[obey-me-rewrite]

Hi! just wanted to ask on how you personally use Twine I've been a fan of OM, and wondered how u made the remake in that system lmao. I was wondering if you had any tips / tutorials u used, I've spent some time testing and have got the hang of variables and linking but i was really confused on how you designed it / removed the borders around the side bar and everything, along with how you made the intimacy system, Especially the notify / achievement bar system! No tutorials were helping me lol

Sure! I'll do my best to explain below; feel free to ask me to expand on anything if it's confusing.

Changing sidebar:

The way you do this is basically through CSS ("Story Stylesheet"). When your game is open in the browser, you can inspect elements to figure out what they're called, then change their styles. For example, I removed the border of the menu buttons by putting the following in the stylesheet:

(for the overall borders)

menu ul {

border: none;

}

(for the borders between each link)

menu li a {

border: none;

}

w3schools.com is a great website if you'd like to learn CSS - it's what will help you completely restyle your story. There are also plenty of Twine design templates for something easier to use without having to learn code.

Intimacy system:

This one is a little more complicated. I'm actually completely rehauling the intimacy system for version 1.1. Right now, it uses a lot of if statements to check the amount of intimacy the player has collected with a character - and this intimacy is in a variable initialized in the special StoryInit passage. However, that's bandaid code which is messy and easily runs into bugs, as has happened ever since release lol. To fix it, I've essentially created a proper levelling system using custom macros and JavaScript. That requires a good grasp on behind-the-scenes programming, though. If your game isn't a huge project, keeping intimacy in variables should work just fine. Just make sure to keep a spreadsheet or notes somewhere that list how much intimacy is possible to gain and in which passages. It will make your life easier in the long run.

Notifications:

This one I actually got from one of Chapel's custom macros! They're super easy to use and do a lot of cool things. I highly recommend checking these out because they can make your life easier: link

Achievements:

I'm going to assume you're talking about achievements that persist over different saves - for this, you'll need to utilize Twine's special StoryInit passage again. In case you are not sure of what that is, it's essentially all the variables that will be initialized when the game is first loaded into the browser. Your achievements and important story-spanning variables (like personality traits, intimacy counters, etc) will go here. To create an achievement, you'd put something like this in your StoryInit:

<<set $achievement1 to recall('achievement1')>>

If the player hasn't obtained the achievement, $achievement1 will automatically be set to false. To have them actually get the achievement, put

<<run memorize($achievement1, true)>>

<<set $achievement1 to true>>

in the passage where the achievement is gained. Also, be sure to have your players know that keeping saves and achievements like these relies on browser cache - if that's cleared, their progress will be lost.

Hope that helps! I wasn't sure how familiar you are with Twine beyond variables and linking as it's a pretty big engine with many things, so I just covered things without going into deeper mechanics like Twine's special passages, scripts/stylesheets, macros, etc. I'm happy to explain those too if you're having trouble. Also, everything I explained is specifically in the Sugarcube language - it won't work in Harlowe, Snowman, etc.

Helpful links:

Twine cookbook

Chapel's custom macros

Cycy's custom macros

Albie's Twine Tutorial with tons more resources

[m3djed]

was just thinking to myself "there should be a social media app thats like a mini internet and the profiles are set up like websites and maybe the profile editor could have some kind of simplified coding or a simple tutorial so even non coders could use it and there would be more individuality and let everyone make their own ui to their own preferences. and people could make boxes on their page to put javascript in and make little games on their social media profile" and realized thats just what youd get if you combined neo/geocities, tumblr, and deviantart into one program and put it on a phone. which i think is still a better concept for a social media than any real one that exists right now. im imagining what it would look like right now i should be paid just for thinking of something thisgood

[agatedragongames]

Learn how to code the object pool pattern by pre-allocating memory and reusing objects. Which can greatly improve performance when reusing short lived objects like bullets and particles.

This tutorial will show you how to create and manage a pool of bullet objects. For example, this is useful in shooter and bullet hell games which have thousands of bullets on the screen.

The tutorial is written in the Java programming language, and uses the free Processing graphics library and integrated development environment.

The object pool pattern can be especially useful with programming languages which use automatic garbage collection like Java, C#, JavaScript, Python, etc.

Since automatic garbage collection can stall your program and reduce your frame rates. The object pool pattern gives you more control over when the garbage collector comes to reclaim the memory.

The downside of the object pool pattern is that it complicates the life cycle of the object. Meaning you need to reset the variables of the object before you can reuse it. Since its variables are unlikely to match the defaults after repeated use.

There are a few ways to implement the object pool pattern, this tutorial will show you one method.

Walkthrough and full code example on the blog:

[soophia-studies]

100 days of code - day 15

31.10.23

Hi 😊

Today I continued reading about DOM manipulations. I read some articles and tutorials that the course suggested me.

After that, I went back to the rock, paper, scissors 🪨📜✂️ game that I made some days ago, with the mission to add a UI to the game and make it playable in the browser.

First I created the basic website and put some style in it, then I started to refactor the JavaScript code to fit to the website and to work as expected, manipulating the HTML and listening to events (clicks).

After some work, this is the final result.

I don't know much about design and colors yet, but I tried to make it looks pretty. I searched for color palettes 🎨 and found this one that I liked.

That's it, this post was supposed to be uploaded yesterday, but I had a headache, so I went to sleep to get better. Maybe I shouldn't look at the computer screen all day without my glasses again 🤓.

[trainee-uhp]

YouTube Intro Splash Screen Animation Using Only HTML & CSS | No JavaScript

🔥 Recreate YouTube's iconic intro animation using only HTML and CSS — no JavaScript required! In this quick and easy tutorial, you'll learn how to build a stunning, smooth animation just like the YouTube app splash screen.

👨‍💻 Whether you're a beginner or a pro, this CSS animation trick will level up your UI game!

✅ What You’ll Learn: • How to animate elements with keyframes • How to center and style elements with flexbox • How to create a triangle play icon using clip-path • How to mimic professional splash screens

[eddieripps]

your art is so pretty! that snippet of the gameplay was so cool to see. I was wondering where you learned to code and what language you're using? i'd love to learn how to code and make something a fraction as good

hiiii :((( this is so sweet thank you so so much <33

as far as language goes, im in college for programming and compsci so I've learned like.. too many languages to keep track. the ones I use most are python and javascript though!!

for the game, it's built in a program called gdevelop 5 which is basically like scratch just like. adult scratch. imagine lego duplo vs legos. same concept just more shit to it. and it's javascript compatible if I ever hit a roadblock and need to write something out. i find it to be most similar to visual basic in terms of actual use though, if you've ever used microsoft visual studio

i would probably get more control over it / be able to make it less messy if I rebuilt it entirely in javascript from the ground up but also its a silly pixel game for my favorite show. it's saved on my computer as "yellerjackers". i simply wanted it to work enough for stupid posts on my tumblr and I achieved that no shame in my game (ba dum tss.. anyone? hello? is this thing on?)

but if you ever do wanna just hop into something without having to spend an entire semester learning a programming language, gdevelop is great. they've got tutorial games you can follow along with to teach you basic framework as well.

im a guy who hates when creativity is limited by skill and knowledge gap (comes with having dyscalculia and majoring in a math based field) so I'm always gonna encourage using your resources. doesn't matter as long as you have fun with it!

[izicodes]

Any tips on learning python? I already know Java, C++, and JavaScript.

Hiya! 💗

Since you already know those other languages, Python will be literally a piece of cake. It'll be easy for you, in my opinion.

Tips? I would say:

Start with the Basics: Begin by understanding the fundamental syntax and concepts of Python. After learning those, you can basically apply the languages you know logic into Python code and you'll be done. You can use online tutorials on YouTube or free online pdf books to get a good grasp of the basics.

Leverage Your Programming Experience:Like I mentioned Python shares similarities with many languages, so relate Python concepts to what you already know. For example, understand Python data types and structures in comparison to those in Java, C++, or JavaScript.

Projects and Practice:I sing this on my blog but practice is crucial. Start small projects or challenges to apply your Python knowledge. Depends what you want to build e.g. console apps, games, websites etc. Just build something small every so often!

Hope this helps! More tips I made: ask 1 | project ideas | random resources

⤷ ♡ my shop ○ my mini website ○ pinned ○ navigation ♡

[greenplumbboblover]

Hi! Do you think potentially that with this new age if AI, do you think it would be able to create mods and animations for us for games like the sims 3 and so on? I was wondering how amazing it would be if we can use it to our advantage and create all the content we ever desired lol

Hey!! Sorry for not gettting to this in like an entire month! I actually wanted to do some research on it (including asking some people I know who are super into AI stuff right now).

Just a disclaimer: I'm not much of a fan of using AI when it comes to artistic works. Such as Artwork generative AI, or even Photography. Especially when things people worked hours on are being used without their consent for an AI to poop out an artwork/photograph.

With that out of the way, here are my findings:

Textures:

So, as of right now, AI texture generating is something that is actually used these days in games to cut the cost of otherwise purchasing licenses of already made bundles of ground textures and what-not. Indie developers make use of this a lot too. So technically this is already possible, but I'd definetly only use this approach to train the AI on your own portfolio of textures or imagery to make something cool.

Animations:

However, animations, I think would be sort of possible, I just don't know if it would be fully AI though, judging from the industry's development as of right now.

Assuming that the RIG is setup in such a way that it meets the requirements to animate the item from a huge library of movements (think Mixamo, I'm hoping to soon release a tutorial on how to use that for the sims :)), then we really don't need AI really to create animations much. The only thing I'm a bit afraid of though, is that eventually it could feel a bit too "same-y" in mods or even games coming out, if they all used it. AI might change that up a bit though.

Though, as of right now, I don't really believe AI is up for the test though :P Imagine, training a computer that has no limbs and head, to be a human... It just doesn't know how to lol. Here's a great example: https://www.youtube.com/watch?v=LJHQXmOpkUE

Scripting:

Just like I don't think scripting will be fully AI anytime soon, I don't think scripting for the sims will either therefore. And here's the thing: AI takes snippets from Stackoverflow and other sources when you ask it to come up with code for a feature.

For example, if I ask ChatGPT for example to create a commenting system in javascript, it comes up with something somewhat great, but it's also missing a lot of crucial bits. For example, how do I delete replies? How do I edit replies? Etc.

With the sims I think that issue would be even bigger. AI simply wouldn't be able to answer properly how to help you create a, let's say, a grassmower mod. That's to do with the database of mods out there, open source like (think github, forums etc) is just too small for it to do. So unless that library gets bigger, I don't think this will be possible any time soon.

Conclusion:

AI is amazing right now with what it shows us what they can do with it. But once you've worked with it, you also realise how limiting it is right now. How counterintuitive it even can be to teach it something.

Sometimes, it's quicker to learn to do it yourself, than to teach AI to do it, because it takes such odd roundabout ways at times that you scratch your head and wonder "How tf did you even come up with that??". And that's because we're asking a computer to think and act like us in some way. It's like asking a puppy to be a cat. It could work out if you add a lot of energy and time into it, but it also won't 100% be the result you want.

At least, with the current way AI functions and learns.

If there's one thing I do hope would come to the sims, is actually those character language models like Skyrim has, where you can talk to your sim, and train it on that sim's background to give you appropiate answers. But I think we'll have to wait a while for that to come out :p.... I tried my hand at it one weekend but I'm not that well adversed into AI training and stuff yet.