Little game I made: Recursive Tic Tac Toe

[SomeUnusualGames]

I remember finding this library in a post made on r/gamedev almost 2 years ago, when I think the repo had <100 stars. I really liked how the examples were easy to read, so I gave it a try.

It was my first non-trivial JS project, so the code may not be the most optimal, still the game works pretty well.

Gameplay video, you can see I'm using a really old version of littlejs

recursive_tictactoe_littlejs.mp4

(has sound)

This code sat still on my computer all this time and I completely forgot about it. The lib version is 1.1.1, so it's extremely ancient.

I really like how I implemented the buttons on the menu, the file that implements it is only 64 lines of code, and you can see it changes when hovering and clicking it:

Code

"use strict";

const ButtonState = {
    PRESSED: 0,
    HOLDING: 1,
    RELEASED: 2,
    NOTHING: 3
}

class Button {
    constructor(origin, text, color, hoveredColor, pressedColor) {
        this.origin = origin;
        this.text = text;
        this.color = color;
        this.hoveredColor = hoveredColor;
        this.pressedColor = pressedColor;
        this.state = ButtonState.NOTHING;
        this.clicked = loadAudioFile("sfx/player1_placed_piece.mp3");
    }

    pressed() {
        return this.state == ButtonState.RELEASED;
    }

    render() {
        overlayContext.font = "30px Cooper Black";
        const pos = worldToScreen(this.origin);
        const size = overlayContext.measureText(this.text);
        const rectWidth = 12+size.width;
        const rectHeight = 40;
        const mouseColl = Rectangle.collision(pos.x, pos.y-16, rectWidth, rectHeight, mousePosScreen.x, mousePosScreen.y);
        const mouseDown = mouseIsDown(0);
        let color = this.color;
        if (mouseColl) {
            if (mouseDown && (this.state == ButtonState.NOTHING || this.state == ButtonState.RELEASED)) {
                this.state = ButtonState.PRESSED;
            } else if (mouseDown && (this.state == ButtonState.PRESSED)) {
                this.state = ButtonState.HOLDING;
            } else if (!mouseDown && (this.state == ButtonState.PRESSED || this.state == ButtonState.HOLDING)) {
                this.state = ButtonState.RELEASED;
                if (hasSound) {
                    this.clicked.cloneNode().play();
                }
            } else if (!mouseDown && this.state == ButtonState.RELEASED) {
                this.state = ButtonState.NOTHING;
            }
        } else {
            this.state = ButtonState.NOTHING;
        }
        switch (this.state) {
            case ButtonState.NOTHING:
            case ButtonState.RELEASED:
                color = mouseColl ? this.hoveredColor : this.color;
                break;
            case ButtonState.HOLDING:
            case ButtonState.PRESSED:
                color = this.pressedColor;
                break;
        }
        overlayContext.strokeStyle = "#000";
        overlayContext.strokeRect(pos.x-1, pos.y-17, rectWidth+1, rectHeight);
        overlayContext.fillStyle = color.rgba();
        overlayContext.fillRect(pos.x, pos.y-16, rectWidth, rectHeight);
        overlayContext.strokeText(this.text, pos.x+rectWidth/2-(size.width/2)-1, pos.y+14);
        overlayContext.fillStyle = "#FFFFFF";
        overlayContext.fillText(this.text, pos.x+rectWidth/2-(size.width/2), pos.y+15);
    }
}

Rectangle is a class with a simple collision detection with the mouse.

Button gif

Again, I'm not an expert in js, this could probably be done better, especially with the newer releases.
(I used mp3 files for the sounds because, according to this it's the only one supported by IE, idk why would anyone want to support that old browser in the current year...)

The only thing that I remember bothering me (kind of) at the time was the fact that I had to use overlayContext.drawImage() if I wanted to draw something with a different size than the tiles image, e.g the little games shown to the sides in the menu, but I guess the library was designed that way.

Maybe at some point I'll upload it somewhere and open source it, but I have a couple of bugs to fix and also upgrade littlejs to the newest version.

Really good library, simple to use and let's you make really cool stuff :)

[KilledByAPixel]

That's great, thanks for sharing!

You don't need to call drawImage at all, that is all handled in drawTile, and you can change the size. In draw tile size is the size in world space and tileSize is the size of tile in pixels.

There is also a function for drawing stroked text, basically the same as the code you wrote but you can call drawText to simplify.

[SomeUnusualGames]

You don't need to call drawImage at all, that is all handled in drawTile, and you can change the size. In draw tile size is the size in world space and tileSize is the size of tile in pixels.

Sorry, I now realize I didn't explain myself correctly, what I meant to say is that I couldn't find a way to draw a specific part of the tile image, e.g draw a rectangle which is at a certain x-y position with certain width-height in the tile image, that's why the only what to draw that was using drawImage, since drawTile doesn't have a "source" rectangle as far as I can tell.

There is also a function for drawing stroked text, basically the same as the code you wrote but you can call drawText to simplify.

Nice, I just saw it in the docs, that will make things easier :)