I have always wanted to create my own JacaScript game, but I have never had the time to crawl through the internet to find frameworks for the style of game that I wanted to create. I am interested in creating a simple 2D adventure style game. Kinda like those old Pokemon games.
I do have a basic understanding of HTML, CSS, & Python but I am far from an expert when it comes to JavaScript. I tend to get stuck on syntax errors and building a framework was always a drawn out chore. But now I can use GenAI to build a simple frameworks, and I can then quickly modify the code to suit my needs.
Anyone considering a project of their own and wishes to use GenAI for building a framework should know this. This is not as simple as copy and paste. You do need to understand basic code structure, you will need to understand what variables are, parameters and how loops & lists works work. You will need to build upon the framework by modifying the code. GenAI will not do all the work for you, but it can teach you.
Below, I include an example of a simple JavaScript program. You can interact with the program right now from the browser. The good thing about JavaScript is that you dont need to download anything as most browsers already support it. This simple program includes a blue dot and two square boxes. The Blue dot can freely move across the screen but will collide with the red box, give it a try below.
Click here to demo the JavaScript Path Finding & Collision
prototype game (opens in a new tab)
Why would I make such a game may you ask? Well, this can serve as a prototype for a bigger game. When the character moves on the screen this character is going to encounter static objects in the game world. The character will collide with these static objects.
Within the JavaScript framework, GenAI recommended the Bresenhams algorithm. Now I am no mathematician, but from what I understand about the Bresenhams algorithm that it is used for drawing lines on a grid. This algorithm was used to determine if a path was clear for the character or if it contained an obstacle.
In the future, I will be looking at improving the pathfinding method by using A* (A-star) or the Dijkstra's algorithm (that GenAI recommended). This should improve functionality for the character to find an alternative route if an object is blocking their route.
Regarding collision, grid cells were included in this program and marked with a value of 1 or a value of 0. With 1 representing a cell that a character can walk across and 0 representing a cell that a character cant walk across. Each cell has its own row and column value.
Also, in future versions I will be exploring making use of other JavaScript files that can be used for the code for creating buildings or areas, so the character can enter buldings and multiple areas in the game. I have not included my own graphic assets yet. I can create artwork of a character and simulate character movement and actions by using multiple frames of images.
I will also like to explore using X and Y axis for object placement. I would like to include a toggleable X & Y overlay so I can quickly acquire X & Y coordinates.
I will update my blog from time to time with my progress. This is not something I am doing for financial gain, its more of a hobby. Will give me something to do during the upcoming winter. Cant let it distract me to much though, I got a Uni assignments that is due in a couple of days.