I really like this board game from the 1960s called TwixT. I’ve never played the physical board game, but my friend and I used to play it on pen and paper more than a decade ago. I’ve only had the opportunity to play it a couple of times since then.
The rules (for the pen and paper version) are relatively simple. The game is played by two players. The only equipment needed is a printed board and two differently coloured writing implements, like a blue and a red pen.
Each player’s goal is make a continuous line between opposite sides of the board. Players take alternating turns claiming a point on the grid by colouring it in. They can then optionally connect that point to any other of their claimed point that are a knight’s move away from it. In the pen-and-paper version, a player’s lines can never intersect another player’s lines, but they can intersect their own (though it doesn’t connect them at that intersection).
For fun, I decided to implement a printable board for playing it on pen and paper using SVG. The backend of my website is built using Phlex, so I built this as a simple view component that renders the whole HTML page, which just contains a single SVG.
class TwixtView < ApplicationView
# Register SVG elements.
register_element :rect
register_element :circle
def template
doctype
html do
body do
svg width: size, height: size do
rect(
width: "100%",
height: "100%",
fill: "none",
stroke: "black",
stroke_width: "1"
)
(0...grid_size).each do |x|
(0...grid_size).each do |y|
circle(
cx: x * board_size / (grid_size - 1) + (size - board_size) / 2,
cy: y * board_size / (grid_size - 1) + (size - board_size) / 2,
r: "1.25",
fill: "white",
stroke: "black",
stroke_width: "0.33"
)
end
end
rect(
x: (size - game_size) / 2,
y: (size - game_size) / 2,
width: game_size,
height: game_size,
fill: "none",
stroke: "black",
stroke_width: "2",
transform_origin: "center",
transform: "rotate(-26.6)"
)
end
end
end
end
private
def size = 800
def game_size = size / 1.7
def board_size = size / 6 * 5
def grid_size = 24
end
You can find the result here. The layout matches the one labeled as “Diagonal Twixt version 2” on Wikipedia. I’ve not yet tested printing it, so your mileage may vary, but I’m sure I’ll sort that out shortly.
