take the snake game challenge

[Edward De Jong]

Am buiding a website that compares different next-gen languages like Elm, Eve, Red, Luna, ParaSail, etc., perhaps some Haxe programmer will take this challenge. There is a video on youtube of someone building a subset of the game in under 5 minutes in JavaScript. I am sure that it is more like an hour to do this.

PROGRAMMING CHALLENGE

A Snake Game  / basic version

 

specification by Edward de Jong, version 1

 

Screenshot:

 

:

 

            The game runs at 6 frames per second, and the snake moves one cell per frame.  If the snake moves into the apple the length is increased by one, a crunch sound is emitted, and the apple is moved to a new cell. If the snake crosses over itself, then a beep is emitted and the part of the snake from that cell onward is erased. The snake wraps around the board in all four directions.

 

            The playing board, drawn solid black, is subdivided into square cells of 42 points at the screen resolution. Since the window size will not be an even number of cells, the cells are stretched slightly so that all screen space is used by the grid. At the start, the snake is set to length 1 and positioned at cell (4,4). The apple, which is the goal of the snake to eat, is one cell drawn as a circle in HTML color crimson, and is placed at a random location on the board.

 

At the start of the game the snake is paused. As soon as an arrow key is pressed, the snake begins to move in that direction, and leaves a trail behind. Initially the trail is limited to 5 cells total. If the snake moves into the Apple, the snake's length grows by 1. Once the apple is eaten, it is immediately respawned into a random new cell. The apple may end up on occasion placed inside the body of the snake, however, the snake only is considered to have eaten the apple if the head moves onto the apple.  The snake cells are drawn as 40 point squares with 2pts on the right and bottom to create a separation. The snake cells are drawn in alternating colors lime green and lawn green. The head of the snake is drawn as a rounded rectangle with a corner radius of 8 pt and a border of 2 pt dark green. The remaining cells of the snake are drawn as a rounded rectangle with 2 pt corner radius. If the snake cells had to be reduced from 42 pt due to window size limitations, then the radii and border thickness are reduced accordingly.

 

            The only input to the game is the keyboard. The arrow keys change the direction of the snake, however, to prevent frustration the player is not allowed to move the snake head back into itself. So if the snake is traveling east, any attempted movement west is ignored. A command to move in the direction already in motion is ignored. To permit fast maneuvers the direction inputs are queued, so that the player can do WEST - SOUTH - EAST to perform a 180 degree turn in 3 consecutive frames.  Pressing the space bar pauses or resumes the game.

 

            As the snake grows and shrinks, the current size and high score is reported at the top of the screen as a topmost layer at 30% opacity, centered in 28 pt black text, for example: "8   high:22".

 

            The default starting window size is 700 x 700 interior pixels. If the user resizes the window, the game is reset back to the starting state.

 

            Note: since the window size will not usually be an even multiple of 42 points, the cells are slightly stretched to not have any dead space leftover.  If the given window size is too small to accommodate at least 10 cells in both directions, the cellsize is reduced. So the program must first figure out how many the proper cell size such that at least 10 cells can fit in the X and Y directions, but no larger than 42 pts in size, then divide the width and height by the number of cells in each direction, and then pad the cells by the leftover amount so that the cell grid fills the space perfectly.

           

External resources:

n  crunch.mp3 sound

n  beep.mp3 sound

n  you are given a window size in pixels, and the resolution of the device.

o   device resolution might vary from 86 dpi (desktop), to 500+ dpi (mobile)

 

An example of a subset of this game, written in real time in under 5 minutes in JavaScript can be seen on youtube at:  https://www.youtube.com/watch?v=xGmXxpIj6vs

 

The 5 minute coding example has no scaling of the grid, doesn't keep score, and a few other things, but does show impressive coding speed.

 

 

 

[JLM]

Edward

I have ported the original js code to Haxe, it's possible it could be improved, Timer may not be ideal, but I did not want to spend too long, others are free to improve.  Obviously this is very Javascript Haxe specific version I could look at cross target implementations but this should atleast show differences between Javascript and Haxe Javascript.

https://try.haxe.org/#D0324

I don't have enough interest to create an extended version, but should give you ideas on using Haxe.

Best

Justin

[Jeff Ward]

FYI, if you're not familiar with Haxe (which cross-compiles to many target languages), Justin ported the JavaScript version of snake to "Haxe that targets JavaScript." In other words, the intent is to still run in a browser. This highlights one important use of Haxe: easy porting of existing platform-specific code to Haxe. The benefit is compile-time safety.

If you wanted to target platforms other than the browser (e.g. Windows / OSX / mobile / etc), you'd want to write cross-platform Haxe code. This is also possible, but carries the necessity of choosing a cross-platform framework (that supports the requirements of display, keyboard, audio, etc.) Such frameworks in Haxe are actually fairly abundant: OpenFL, NME, Kha, SnowKit, HaxeFlixel, Heaps, Flambe, etc.

The choice of framework would then shape much of the project code, and where the resulting program can be run. Some of the above frameworks present DisplayList APIs that resemble Flash, others present drawing APIs that more resemble the canvas context found in the JS code.

In still other scenarios, you might use Haxe for parts of your project and rely on externs for existing libraries in your target language / platform. (Technically this is what the JS port does -- it says, hey, all these JS primitives exist natively in the browser, e.g. Canvas, let's use them.)

Bottom line: be aware that Haxe is extremely flexible and supports various workflows, various migration and interoperability paths, and various target platforms. Much of the value of Haxe is in these workflow nuances, and simply comparing example code with other languages doesn't tell the whole story.

Best,

-Jeff

[Justin L Mills]

Edward

Jeff's suplementary reply is very good, please read carefully in
relation to both the Kha and Canvas Haxe solutions.

I have implemented the same code in the Kha toolkit, it's just to give
you an idea, not sure if it was ideal to use static everywhere - it was
just a quick port - render and update default to static in the
template, I think Keyboard interaction details may vary slightly in the
latest github Kha, but my last knowledge was that Kodegarden test space
has not been updated recently with latest Kha so if you try in Kode
editor you may need to tweak the keyboard code checking against latest API.

http://kodegarden.org/#321a7a391ff4a580e0b1c0c6f2a7398265c9348141f9fa23095cd14df049d540

I could implement this code in Haxe Flash AIR easy enough, it is very
easy to mix as3 and Haxe flash code and have done on quite a few
occasions ( ie: VideoScribe uses some Haxe and AS3) . But I believe
solutions like Kha, are more flexible and expandable than AIR so better
to provide a quite Kha example.

This is using WebGL ( or some GPU for other Kha targets ) so is not
pixel based. If you want to commission me to create a game to a
specific brief I would be happy to do so, but I need to look for paid
work or create more interesting code projects, so I am not willing to
add features for free, or not interested enough to consider the extra
tweaks. But hopefully this should be plenty to get you started :) and
Kha or Haxe IRC can help with more specific game details.

Best Justin

On 22/08/2017 18:13, Edward de Jong wrote:
> That was fast. thanks for the fast response.
>
> unfortunately it inherited the JS’ versions bugs, like the snake moves both both the head and tail if you press the up or down key,
> and it has no counter, and it is using absolute pixel values for things on the screen.
> The ability to rescale gracefully depending on the target DPI of the screen is an intrinsic part of what makes Adobe AIR and Haxe so powerful, and what makes JS such a pain!.
>
> To me thi