About 3 weeks ago I decided to teach myself HTML, CSS and Javascript. After a week and half of skimming a basic online guide for the three I decided to jump in the deep end (where does this pattern sound familiar?) to accelerate learning and have fun by making a game.
I’m sharing it on here with hopes that some people better at coding can tell me how much I suck and what I need to do to not suck, and people who don’t have experience with coding could maybe provide suggestions for this or future games, bugs they come across, or suggestions for UI. I really haven’t done anything with UI and yet that I plan on keeping for sure, and design in general is just something I’m bad at currently.
Essentially the goal is to provide kanji containing the given component. You have a time limit and if you don’t answer within the time limit you lose a life. You don’t have to answer with just the kanji. If you get 言 as a component you can answer with “語” or something like “語る” and it will get the kanji that has the component. That way tends to be faster and more convenient. Endless is the same idea but there is no score limit and you can answer up to 3 kanji if you wish. However, once you have used a kanji it can no longer be used, so be careful about carelessly using kanji that have many components like 鬱
The site is made with Flask and mainly javascript, css, and html. I’ve got it deployed on heroku and served with gunicorn. I used python for making the question/answer lists, but then I stored them in a json which I just pass to the frontend using jinja when I render the html template. Honestly not very happy about this solution. I used animista for 2 of my animations but other than that I haven’t used CSS frameworks as I want to get a basic understanding of it myself. I am probably using a lot of bad practices, so please feel free to tell me any small or horrendous issues you see. The project is still very much in development and if you see any ways I can make my future life easier, I’m all ears. If there are some things I really did poorly from the getgo and its too late to fix, I’d still like to hear your input so I could avoid those pitfalls in my next projects. I plan on continuing to improve myself.
P.S. The game is not easy. Its not really made with beginners in mind, so if you are a newer WK user I would be prepared to have a hard with even with easy mode.
P.S. 2: Insane has yet to be beaten. The closest I have gotten is 18/20. If someone manages to beat it, please do inform!
Oh, this is a ton of fun. It’s really well done. The only real thing I can spot in the code at a glance is the var pile in radicalRush.js. I don’t think there’s a reason why those can’t be lets and var is generally to be avoided in modern code
Exactly the kinda stuff I was hoping to hear. I was aware that the two exist, but I assumed there was no difference. What makes var avoided in modern code?
Also, I kinda hated just declaring a buncha global variables like that at the start. Apparently its bad practice just to refer to the element ID’s in question as JS variables, but is there any other better way to keep track of a bunch of different aspects of the page that are used both in the HTML and javascript?
It’s doing a thing called hoisting. Which means, that if you have a var declared in code anywhere you can also access it anywhere. Especially before it was initialized. It’s just a footgun
Yeah, it’s bad practice, because if you suddenly put in a variable named the same (and I think the variable doesn’t even need to be in the same scope for this) then you suddenly get broken code.
There’s no way that doesn’t involve having a ton of variables. But you could break up your code into separate classes and that would at least make the whole thing a bit more organized.
Thanks, I’ll look more into that when I wake up. I’ll see if there’s something I can do with classes on my next project to make it more organized, as well. It does feel like such a shame we can’t just use id’s as variable names without it being bad practice. It seems so much more convenient lol
Yeah, Leebo already knows but to everyone else there will be some thay look like they should be accepted but won’t be. For those, just lmk and I should be able to add them pretty quick
I wonder if scooter with two dots (辶) doesn’t accept ones with one dot (⻌)? (In Standard >> Normal)
乙 is more accepting.
I believe standard JavaScript code should be put in IIFE with use strict ((function () { 'use strict'; })();) . One of the reason is that, otherwise I would be able to accidentally reference top-level JavaScript variables from another file. let doesn’t allow declaring twice (even at top level in different files), while var does. – This one is practically same as a new UserScript template.
A way to escape IIFE and “use strict” is just to use <script type="module">. It would be strict and scoped by default.
I think it would be fun with a level-based game, kinda like in Super Mario Bros (and Wanikani, I guess). Clear one level to unlock the next one. And each difficulty has its own path so you don’t have to clear Easy to have a go at Insane (exactly like it is now).
I did kinda debate if I should have user login and store data which would make something like this possible. Currently, I believe the entire easy question pool is about 50 quetions, which might not be enough to make stages and stuff centered around easy without it being the same questions every time
Could just use localstorage. As long as someone doesn’t migrate between two computers often. Unless they are playing it at woek, that would be unethical, and I would never.
It’s also hard if you never do output and just read. I couldn’t even beat easy mode because I don’t really know kanji by their parts and can’t “picture” them either.
Yeah the game requires being able to picture kanji in your head, so people who are able to write are going to do significantly better on average I imagine. One of the next games I was thinking of making would be jukugo shiritori where you have to play shiritori using only jukugo and connect the last kanji
Eg 手話 →話題 → 題名
That would probably be easier for me and other people who just read a bunch
Interesting, so if I were to do the stage idea, for example, I could have keys for each level and values for their progression in that level? Then just retrieve it and choose what to display accordingly?
Probably create a top level README.md in the repo, if it is too much or irrelevant, to put in the forum.
Japanese display and input probably need lang="ja", to not risk showing a non-Japanese variant. (<p id="currRadical" lang="ja">, <input placeholder="答え" lang="ja">)
To allow pasting a bare link, and description and image showing in the forum (and search engine), you would need. (Well, there are many more. These are bare minimum.)
In addition, you should consider putting in favicon.ico and <link rel="icon" href="/favicon.ico">. Web browsers would try to fetch one anyway. (Maybe it’s possible to put other formats than *.ico as well, but I forgot how to. Also, old browser compatibility.)
Lastly, be careful of mobile / small screen layout. There can be previewed from desktop.
