Core war is an old game concept that dates back to 1984. If you imagine a simple CPU with small programs written in assembly language trying to wipe each other out, that’s Core War and you can read about it in a lot more detail on Wikipedia.
Inevitably for a game of that vintage there is a C implementation on GitHub by developer Emil Wallner. There’s an animated version of the screenshot showing the game play in action.
The programs (representing viruses) are small assembly language programs that move themselves around the virtual memory and duplicate themselves and try to wipe out the opposition. I’ll always meant to write one of these myself but for now there’s this.
Back in 2014, an Italian developer called Gabriele Cirulli devised a puzzle game called 2048. It has been implemented on many platforms (I have it on my iPhone) and here is a link to a C version of it (in 300 lines) by developer Nishchith Shetty that plays it in a browser using WebAssembly.
The idea behind the puzzle is that you combine the numbered pieces by moving pieces intro same numbered pieces. 2 into 3, 4 into 4 and so on.
WebAssembly is the technology that lets you run programs in many languages (including C and C++) in your browser at speeds up to 50% of native code. It’s also used in Blazor where you can write C# programs that run in the browser.
To convert the C code to WebAssembly, you have to install a transpiler (a program that converts one programming language to another) called Emscripten, then it’s a single command line instruction to build the WebAssembly from the C sources and SDL2. Or you can just play it online here.
I’ve been meaning to do a WebAssembly version of my asteroids game using Emscripten. it’s just been sheer laziness that I haven’t got round to it.
This is another post in the Inselkampf series. Having spent much of my career creating “desktop” application, web always feels a bit different. If it’s a website then HTML/CSS/PHP + MySql is a reasonable way of working. But when its a web application like a browser game that uses a SQL database, then there’s a bit of architecting involved.
I’m using Blazor because it lets me write C# that runs in the browser. I’ve never been a JavaScript fan though I realise many people are. I also have to use database. As I’ve said before Blazor gives you two choices- The WebAssembly version that runs completely in the browser and the Server version that talks to a server using a protocol called SignalR.
I’m trying to be clever by using the WebAssembly version but having the C# talk to a restful interface. Restful just means it has a bunch of http calls to do things like update, fetch data, login etc. On the server runs a ASP.NET program implementing this. It’s headless, as in its not outputting any webpages to the browser but just returns data in JSON (or maybe MessagePack).
This avoids having a SignalR connection for every user logged into the site which is one way to bring a server to its knees. When you create a Blazor Server application, it has a few disadvantages. As Microsoft says: when you use Blazor server.
Higher latency usually exists. Every user interaction involves a network hop.
There’s no offline support. If the client connection fails, the app stops working.
Scalability is challenging for apps with many users. The server must manage multiple client connections and handle client state.
An ASP.NET Core server is required to serve the app. Serverless deployment scenarios aren’t possible, such as serving the app from a Content Delivery Network (CDN).
I’m also not using the Microsoft authentication but rolling my own. Yes it’s possibly not perfect but I’ve done it before. This way I get to generate recovery numbers. (Both GitHub and Gmail offer these). A bunch of one off codes that are used to authenticate you, if you’ve lost your password or messed up your email then you login with your account number and an authentication code. This is the only way you get to change email and/or password. You just have to keep the codes safe.
Rolling my own Interface
So things like logging in, getting current status, updating game play are all done by making a call to an HTTPS routine. This is all behind the scenes so players see nothing. Values are sent as POST parameters and also include a nonce. This word (that unfortunately means sex offender in UK English!) , refers to a special code that has to be supplied with each call to the server to authenticate it. Successful logging in returns a nonce that has to be added as a parameter with every call to the server.
The program on the server that serves the restful calls is a simple ASP.NET Razor pages application (Well maybe Razor, I’m not sure if I need them). Behind the scenes I’m using MySQL which was installed as part of VirtualMin (the excellent software I use to setup the VPS).
I did some investigative work on this at the weekend, This is my Inselkampf type web game. Although I know C#, I’m fairly new to ASP.NET and Blazor. Now the first thing you’ll notice about most Blazor examples on the web is that many look like the screenshot. In particular, the purple gradient down the left hand side.
So my first job was find out where that’s defined and try changing it. In the project which is Blazor WebAssembly, there’s a shared folder and it contains two .css files. MainLayout.razor.css and NavMenu.razor.css. These are the files you need to alter.
Now its probably seven or eight years since I last touched CSS and it has come on quite a bit since then. I discovered css-grid which simplifies things enormously. If you want to find out more about CSS, take a look on FreeCodeCamp.org. This site has lots of example layouts using CSS-Grid and I went for Redefining Grid Areas with Media Queries.
This lets you specify a width so you can have a responsive website which adapts to mobile phones as well as desktop. I merged the css and HTML from the example into the project and although its an early stage, I’m quite pleased with it.
This is very early. The font, colours etc will all change but this has given me a web template with round corners, header, footer and two sidebars.
If I shrink the width of the browser the two sidebars move to positions above and below the main content like this below. It would have taken a lot more effort before css-grid to do this.
These are from game-icons.net and are 512 x 512 pixels two colour icons and completely free to use so long as you give credit and include a copy of the licence or a link to it. There are over 4,000 but you can download a subset if you don’t want the lot. The download file zip file size for all of them as .png is only 33 MB.
Subsets include Animal (182), Building & Place (181), Weapon (172), Symbol & Emblem (171), Body (158), Arrow & Spear (146), GUI (140), Spike, Slash & Crack (138), Head & Face (126), Blade, Sword & Knife (126), Food (125), Liquid (122)Creature & Monster (119), Tool (117) and Board & Card (116).
What’s nice is you can have them as .svg (vector) or .png and have black on white or white on black.
They may look small when shown here but each is 512 x 512 pixels which is a lot.
This is the latest in a series on the design of a web game based loosely on a no-longer-run game called Inselkampf. It won’t be exactly the same as the original game, I have my own ideas. To see other articles in this series, click here or on the category: Blazor on the right hand side.
There are two models with Blazor. Server and WebAssembly. Both are similar but the crucial difference is that WebAssembly can run completely standalone whereas Server needs a connection to a webserver. Server uses SignalR technology.
The danger with using the Server model is that each person playing the game implicitly creates a connection. With the WebAssembly version, there is no direct connection though it makes sense to have a connection of sorts perhaps a Restful type interface. This means running a query to fetch game data and then running update queries.
So Blazor with WebAssembly it is. Why Blazor? Because it simplifies updating controls on the page.
Looking after Time
The nature of this type of game is any construction (buildings and units) takes a finite length of time. which can range from seconds to a day or so I want to see how long before my gold mine goes up a level and so on. It’s normal to have all times countdown in the browser. This should put no strain on the server as its running in the browser. Keeping server and client in sync needs a bit of care in case someone figures out how to make the browser code run faster. Once it reaches 0, an update should be sent to the server which should do a quick comparison with its time and if shenanigans has occurred, return an update status and resync the browser to the server. The rule is “If you give em a chance to cheat- they will“.
Procuring Graphics
Much though I like the Inselkampf graphics for all the buildings, I’m not going to use theirs. It’s infringing copyright (reimagining the game is not copyright infringement BTW!) . As well as the free kenney graphics that I’ve mentioned before and various other websites such as opengameart, (shown in the screenshot) there is also the Reddit game assets subreddit so between these and some others I hope I can find what I’m looking for. My requirements are quite modest.
If you visit this site often, you’ll find many many links to projects on GitHub and not just mine. One of the thing I like about GitHub is how easy it is to search for stuff. So I put games in the top left search box and then ticked the C checkbox.
That returned 2,569 results but not all are playable games. Some are one off projects for other hardware such as Wii, GameBoy, Switch and similar. One gem I found was BSDGames. This is quite old and the 43 games are text based including the original Adventure. I get the feeling many of these are from the Basic Computer Games books but at least these are in C not BASIC.
These will probably compile better on Linux and with difficulty and lots of fixes on Windows. And yes there is a Tetris game in the collection!
I’ve talked about Inselkampf in a previous post. it was an example of a PBBG (Persistent Browser Based Game). Currently if you want to write a web application that updates part of a page without refreshing itself, you have to do it via a JavaScript toolkit. People have been doing this going back about 15 years or so initially using a technology called AJAX.
Refreshing an entire web page takes a few seconds- some of the pages have got really big what with trackers and other things that bloat them up. So being able to update just part is a massive time saver plus it looks good. Browser games couldn’t work without it.
Blazor takes things further by letting you update parts of pages, controls but in C#. There are two types of Blazor. WebAssembly (the machine code of the web) which does everything in the browser. It’s how the trains program works. The other type uses a server and does everything server side (controls and data) then sends it to the browser to be rendered.
For my purposes, the WebAssembly one is better. If you have a lot of people connected to a server then the Blazor server can use a fair whack of server resources. Th Blazor WebAssembly will also connect to the server but just to fetch or update data. So I’ve bought a Udemy course and am soaking up Blazor.
There’s still all sorts of questions. For example keeping the tick in synch. PBBG games often have a clock where new resources, building construction happen after a few seconds or longer. If you do this on the server then it’s not so difficult if the browser gets disconnected. In the browser though, it has to update the server or come up with some scheme so the browser and server don’t drift part. These are all part of the fun designing and programming such games. But I definitely think Blazor offers a lot of potential here.
I continue my quest, looking around for open source games in C that use SDL 2. The latest one is DungeonRush by developer Rapiz1 (does no one ever use their real names these days?) who hails from Wuhan.
It is not a rogue-like, but more a Snake-like game. You move your hero around the playing area avoiding monsters and things fired at you while picking up stuff and people to give you extra lives. As well as the difficulty levels it includes multiplayer mode as well though I haven’t tried that.
If you are learning C or games programming, it’s worth studying to see how others do things; this includes its own text drawing and high scoring and saving high scores. It’s quite fun to play though I am rubbish playing it, even at the normal level. I’ve added this to the C Code links page. (Accessed on the top menu),
Snake games are interesting because if you use a circular buffer, no matter how big the snake grows, you can move it by just moving the head and tail elements. An O(1) operation!
I watched the five-minute video for this where the developer explained how he started with isometric graphics. His hardware for the game was a Ti-84 calculator which has some quite severe restrictions (no floating point I believe).
He didn’t use any graphics libraries but just created the code himself; not bad for self-taught! His code is on GitHub.