Rendering on a canvas

Yesterday was a great day working with ChatGPT4. I am very happy to have invested those $20 into that plus license - availability and speed are amazing. 

Now that I spent some time creating first, shabby versions of player, monsters, NPCs, trees, walls, stone floor, it's time to do a first simple rendering. 

Nicely, ChatGPT remembers your conversation if you click on it, so I started over where I left a week ago and asked:

can we continue this conversation? Now I have all the images ready to continue; I would like to first start with the code to draw on the Canvas. can you show me an example: assume I have to coordinates xmax and ymax, and I want to draw a grid of 0..xmax-1 by 0..ymax-1 . I have a class called Level with a method getDrawingObjectsAt(x,y) that returns a sorted list of DrawingObject objects that need to be drawn on this coordinate after each other. A DrawingObject has a method getImage() that returns an image URL pointing to a .png file. Can you show me the code to draw this on a canvas?

And it created nice JS code to do just that. I like that I can tell it that there is a class X with method Y that provides the data.

Then I needed many changes to my existing classes - enhance the super class Creature and all subclasses like Warrior to provide the URL of graphics that draw them, and a few more things.

This formula seems to work very well: describe the code change you want. Be sure to NOT rely on history but paste all relevant classes into the chat window. Describe precisely what you want to change.

For example I asked:

Here's a HTML page that you generated and that I then added more stuff to. This is a big mess. It doesn't work, but let's cover this later. My question is: how can I clean up the JS code; ideally I want to have it in a separate JS file, but I need to interact with the canvas. How would you do it?

 (html page snipped)

and it answered:

You can clean up the code by moving the JavaScript code to a separate file, say game.js. You'll still be able to interact with the canvas and other DOM elements in the new file.

First, create a new JavaScript file called game.js and move the script content from the HTML file to it. Make sure to remove the script tags, and keep only the JavaScript code in game.js. Your game.js should look like this:

(extracted JS code)

Next, update your HTML file to include the game.js file as a module. Remove the current script tag and replace it with the following:

<script type="module" src="game.js"></script>
 

Your updated HTML file should look like this:

(html page with removed JS code)

Pretty perfect...

And after fixing a few bugs I had a first level (only floor for now):


Yes, this is all ugly, but hey it has drawn a level!

Happy! :-)

 

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

ChatGPT as a teacher

Bild
Today I came to the conclusion that without a good understanding of asynchronous programming in Javascript, I cannot hope to come up with a game that uses asynchronous events for all player interaction and other asynchronous events to talk to a remote ChatGPT for NPC actions. My code was a mess, and even more important, after 3 refactorings of my game.js class following ChatGPT's suggestions, my mind was a mess as well. And (see other posts) I don't think that handing ChatGPT the control over the overall concepts, design, architecture, is a good idea. So I asked it to explain asynchronous JS programming to me. And it did. Quite exceptionally. See, in normal life you can learn something like this in several ways: You can read a book. I actually have a good JS book. A very, very tedious affair. I have 30+ years of serious programming experience (not counting my "geek teenager programs the heck out of his Sharp MZ-80A with 48K RAM and 1K ROM" time here). A JS book is 95
Mehr anzeigen

How it started...

Intro - why this blog? This blog is mostly for people who know software development and would like to understand how ChatGPT can and will change the way we are developing software.  Warning: this is about real (Javascript, Java) code. Back then, in the old days,   I had developed an Android RPG I and a few hundred users found fun. In retrospective it was probably way too complicated for an app. The idea of the game was: turn any web page into a dungeon: words are turned into monsters and weapons - the longer the word the more powerful the monster or weapon. Vowels determine the elements of the monster and weapon, consonants define the behavior of the monster. I also used the web page to dynamically generate the dungeon - nothing you saw was random or pre-thought, all came from the web page.  That was the mighty home page of the game I did: web raid mobile . Reboot, simplified, in Javascript I still like the core idea of fighting complicated words like " butyrylcholinesterase"
Mehr anzeigen

Pathfinding and A*

If I want my NPCs to move towards the player on a nxm grid, and the grid can contain trees that the NPC cannot pass, I need an algorithm that finds the shortest path to the player. I gave this as a problem to ChatGPT: In class level I would like to have a new method shortestPath that finds out the shortest path that an NPC on coordinate startX, startY has to take to reach coordinate endX, endY, avoiding any squares where the top levelObject cannot be traversed. The result should be a list of coordinates starting with startX, startY and ending with endX, endY where each coordinate can be reached horizontally, vertically or diagonally from the previous one. To which it responded with: This sounds like a pathfinding problem, which can be solved using various algorithms such as A*, Dijkstra's Algorithm, or Breadth-First Search. Since you want to allow diagonal movement as well, A* would be a good choice here. However, please note that implementing such algorithms in a complex env
Mehr anzeigen