Classic snake game that demonstrates basic game mechanics and good object oriented design. This is a good starting place for someone learning JavaScript and games from scratch and maybe wants to do their own game engine. This is also just a good JavaScript OOP example as well.
I've been having fun working with the AI in this game. I've included the functions that worked out to keep the code clear. Working on this show me how games arrived at many of the solutions that they did. My approach here was a fuzzy one meaning I am using random checking that can ultimately fail making the snake fallible. This was easy to do but an absolute approach would check every box in order. What I'm working on next is more advanced then the low over hanging fruit I put in here. This is super fun and you can dive right in with this sample.
I've downloaded and looked at a lot of JavaScript and JavaScript games. I've noticed that JavaScript has several ways to do classes or class like objects with functions plus arrow functions that really aren't good object oriented programming. They lacked organizational readability IMHO. I found the correct way to write classes in JavaScript and now the code I'm producing looks as good as the C/C++, Java or Python that I've written and I'm able to basically reproduce my clear clean readable object oriented style in this language.
I wanted to share this because it would have been good to have quality OOP samples like this earlier on. At the very least my impression of JavaScript wouldn't have been so bad and I would have gotten into it much sooner. That said all it took was for me to sit down and earnestly try to learn the language from the get go the way I needed to by using the documentation instead of learning it in cruise control from samples. I hope this helps improve the quality of the JavaScript code out there and increases the number of games as well.
When you are ready for more game magic there are plenty of JavaScript game libraries out there like LittleJS, MelonJS, Babylon.js, Phaser, PixiJS and Kiwi to name a few. I have no recommendation here as I'll probably be making or customizing my own but LittleJS seems like a good light weight engine to start with especially if your looking to make your own custom engine. I personally believe the engine really should fit the project, that it's not a one size fits all scenario. For small games I want light or custom and large games you may need a heavy hitter as there is really no way to do all this on your own. There are a lot of good reviews on these as well if you need to choose one. I just have one bit of advice, in this new and dangerous world of software, know all your released bits. Do at least a code review and look for anomalies, URLs and generally suspicious code. This may seem a little daunting with the size of some products like React or websites after installing Node.js libraries but that is why I'm not rushing into this and using smaller libraries and web designs to start with.
Check out Frank Force's JS13k entry SpaceHuggers. This is well written and has fun game play and is a good example of a more advanced 2D game (side scroller). If nothing else study it for particle objects which you will need after sprites to make your game exciting. This is my next step right after I play it some more :) I added display for grenades and the ability to add more grenades, more lives, jump to level and more. Look for godmode which is in the debug engine (I believe) for where to add this code. I always start with added more cheat codes to break the game down, this one has some good ones already with godmode (but that's too easy :), teleport, next level etc. This uses LittleJS I believe but wasn't 100% clear if Frank wrote this or not (I'll look into this).
There is also a lack of classic game design. I studied and wrote some basic game samples in DirectX9 in C++ putting together a core, 2D and 3D game engines. I've also done some game programming in Python using Pygame. I use the classic update render loop model that often gets condensed down to an update loop and that will work but is not good game organization and will not support the growth of the game very well.
The run function allows high level control of the update and render functions. Checking keys can be put here if needed etc. My previous engines utilized this more abstracting out functionality but at the very least you may find it useful when you get to stopping and restarting games. Something his particular sample doesn't do yet since I'm trying to focus on OOP and game basics.
Update and render can be called from a run function that can be standardized in a game class. AI can other functions can be specialized update functions which will keep the update function readable. The update function should update all data for the frame but do no drawing.
The render function should change nothing and just draw the frame that has been created. This makes it easy to pause by not updating but rendering usually is still needed as other activities may take place while the game is paused. In the case of this snake game I allow targets to be added and removed using the mouse and this can be done while paused. This won't work easily if the updating and rendering is not properly abstracted.
Keeping AI in it's own function allows AI to be set or removed to automate a player character as well as computer opponents.
Good object orientation isn't achieved by using classes alone. You must create objects that rely on external knowledge as little as possible. The more it does the more proprietary and less universal it gets.
I like a layered approach with a generic API at the bottom, then built up classes, then specific implementation. Each component should focus solely on it's small task in the world and like functional programming just try to do one thing. In each function you should organize the code like it can be broken up at anytime into smaller functions.
Objects should be analogous to objects in the real world and be as focused as possible as well. I'm always using real world examples to decide how to objectify something. Its just a virtual mathematical world and math has a perfect relationship with and is modeled upon reality.
A class is like a metaphor. A good one will work well in all situations but a bad one may only barely work in one fixed way. I'm always fixing issues by thinking small and fixing the component. Make sure they work correctly and the whole will work correctly and you won't even need good architecture as it will practically build itself.
This project also has started a basic game engine module that has the very basic starter game class to put all your common game code and a sprite class which will handle all sprites and most things in your game will be sprites. You can initialize a sprite to handle images, backgrounds, drawings, animations, etc.
The animation portion isn't complete but the timing is in there. I'm building this up quickly recreating another game I've already done in Python and I took the time to create this sample from my work as it's in the right shape for this and will only get more advanced and less useful as a demo starter project in the future.
The background image is from Pixabay I believe (thank you). I've been only trying to get free to use resources but haven't recorded their origins as well as I should have. The standard I'm working towards is links, names for all resources and code used. I borrowed the original snake project from Muhammad Qasim as I like the basic design and layout but there are only bits of that code left in this one but the CSS and HTML are largely unchanged, still worth a mention. That project has no license but is public and I'm not using anything I can't reproduce by hand easily I just didn't which is leveraging someone's work. Rather then do so and therefore have clearly owned code I want to explore scenario's like this one because I is central to my business model and I need to understand not just the legalities but the social ideologies around this issue or in other words how to be a good netizen.
One of the weird questions I have rolling around is Q: are the bits you wrote that are almost exactly the same as the bits you downloaded which that may be due to the fact that you learned a little bit from this code or not or may be due to the fact that this is now what you have in your brain or not or may be due to the fact that is the right way to do it or not. Are these bits legal vs. the illegal but identical bits you downloaded? In other words do legally I intertwine myself with the downloaded bits just by downloading them in theory even if not so much in practice?
So do I just rewrite this and drop any reference to the original source that inspired me to move forward on this project, that helped me until I changed the code to what I wanted exactly speeding my development along?
Another questions is do I have to collect all licenses that are different from source material with the new material or just the least restrictive. Seems like legally all would apply. This idea seems unwieldy.
In the end I want to attribute more not less but not get into a legal bind doing so. This is fundamental and core to how I would like to operate so I'm hammering this out and this is a project that brings up this question which is why I'm presenting it here.
In the future I would hope to carve out a portion, albeit a small one (but that is more irrelevant in a micro finance driven future i.e. where you have many smaller income sources instead of one large or larger ones) even for small contributions like this where it's really just saving me some time, even if only a few hours, therefore money.
After writing this I realize since the source material is unlicensed, maybe unintended, but still so, I can't use any of it and will rewrite the CSS and HTML which means using source I already have and going from there which I will have done before check in. I'll leave the reference for the sake of discussion but this code is no longer associated with referenced version in any way making this licensed once with the open MIT license with no strings attached. That is probably best for a beginning project sample anyway.
Any issues with attributions and resources or if you have issues please contact ifnowcode@gmail.com. Thank you.
I plan to keep as many attributions as possible in my work. Rather then try to present others work as my own I actually really like the idea of presenting collaboration attributions that include necessary data for a micro economic model. I envision more people working for themselves networking and collaborating together and much of it will be people using others work which so far is modeled through the use of open source licenses. I want to support a more virtual tech company environment crowd sourced through open source where rather then employees it uses contributions and contributes back to what it finds valuable through usage.
If my company is successful I'd even like to set up a micro finance payment percentages that get payed out to parties that have contributions based on a model that calculates valuation of those contributions. If I am successful here I will open source the business model.
The core presumption here is that a business can make paying contributors as viable or even more viable then direct employees. If this model flourished and was fast paced I believe it could match the speed and group power of a traditional corporation with theoretically no employees. This would radically change business as we know it.