Draw an ASCII Checkerboard

Question

Summary

Inspired by the recent popularity of ASCII art challenges, this challenge's purpose is to draw an ASCII checkerboard, like one on which Chess can be played.

Write a program that takes a positive integer n as an argument, in stdin, or as user input, and output an checkerboard with nxn squares, along with a border that is 1 character thick.

Each square should be 2x2 characters. The squares should follow the normal alternating white-black (white first, as in top-left corner) pattern of a checkerboard. White squares should be made out of space () characters, and black squares should be made out of pound (#) characters.

The border should be made out of dashes (-) with a plus (+) on the border or perpendicular point of a square.

Input

Positive integer in representing the number of squares (dimensions in squares) to draw in the checkerboard, with each square being 2x2 characters.

Example Results

n=2

+--+--+
|  |##|
|  |##|
+--+--+
|##|  |
|##|  |
+--+--+

n=3

+--+--+--+
|  |##|  |
|  |##|  |
+--+--+--+
|##|  |##|
|##|  |##|
+--+--+--+
|  |##|  |
|  |##|  |
+--+--+--+

n=4

+--+--+--+--+
|  |##|  |##|
|  |##|  |##|
+--+--+--+--+
|##|  |##|  |
|##|  |##|  |
+--+--+--+--+
|  |##|  |##|
|  |##|  |##|
+--+--+--+--+
|##|  |##|  |
|##|  |##|  |
+--+--+--+--+

... and so on.

---

Notes

• Trailing spaces and new lines are acceptable.
• You may write either an entire program or a function.
• No leading spaces.
• Your program should display correct results for n=15.
• For less-known esoteric languages and similar, provide a link to the language.
• n=0 should produce +. (optional, but highly recommended and encouraged.)
• Shortest code in bytes wins, as this is code golf.

Answer 1

J, 24 bytes

An anonymous function:

2 2&$&.>@(' #'{~2|+/~@i.)

Usage:

   f =: 2 2&$&.>@(' #'{~2|+/~@i.)
   f 4
+--+--+--+--+
|  |##|  |##|
|  |##|  |##|
+--+--+--+--+
|##|  |##|  |
|##|  |##|  |
+--+--+--+--+
|  |##|  |##|
|  |##|  |##|
+--+--+--+--+
|##|  |##|  |
|##|  |##|  |
+--+--+--+--+

Answer 2

Python 2, 79

N=3*input()+1
for i in range(N):print('+||- #- #+||-# -# '*N)[3**i%7/2%3:3*N:3]

For each row, selects one of the patterns

+--+--+--+--+--+
|  |##|  |##|  |
|##|  |##|  |##|

and prints 3*n+1 characters from it. The pattern is chosen by repeating its first 6 characters, selected with the string interleaving trick, which also serves to extract a snippet of the correct length.

The correct pattern is selected based the value of the row index i modulo 6 by an arithmetic expression 3**i%7/2%3 that gives the repeating pattern [0,1,1,0,2,2]. I found it using the fact that x**i%7 has period 6, then trying different values of x and different postprocessing to get the right pattern.

Answer 3

Pyth, 37

VJh*3Qsm@?+\|*2@" #"+/N3/d3%N3"+--"dJ

Rather hacked together, but short.

Demonstration.

Answer 4

CJam, 43 42 bytes

ri3*)_2m*{_3f%:!2b\3f/:+2%(e|"#|-+ "=}%/N*

Try it online.

Each coordinate is mapped to a char, e.g. the top left corner is (0, 0) -> "+". Specifically, we calculate

[(y%3 == 0)*2 + (x%3 == 0)] or [(x//3 + y//3) % 2 - 1]

and index into the string "#|-+ " accordingly.

Answer 5

Retina, 106 bytes

1
$_0$_x
1(?=1*0)
+--
1(?=1*x)
s
(0s.*?0)s
$1o
(s\D*?)s
$1o
s
|  
o
|##
\D*?x
$0$0
0
+n
x
|n
(.*?n).*
$0$1

Takes input as unary (based on this meta discussion).

Each line should go to its own file and n should be changed to newline in the files. This is impractical but you can run the code as is, as one file, with the -s flag, keeping the n markers. You can change the n's to newlines in the output for readability if you wish. E.g.:

> echo -n 111|retina -s checkerboard|tr n '\n'
+--+--+--+
|  |##|  |
|  |##|  |
+--+--+--+
|##|  |##|
|##|  |##|
+--+--+--+
|  |##|  |
|  |##|  |
+--+--+--+

Further golfing and some explanation comes later.

Answer 6

JavaScript (ES6), 117

n=>Array(n*3+1).fill("+--".repeat(n)+"+").map((v,i)=>v.replace(/./g,(k,x)=>i%3?"|  |##|  "[x%6+(i%6>2)*3]:k)).join`
`

Snippet:

<input type="range" min=2 max=15 step=1 value=1 id="i" oninput="o.textContent=f(this.value)"><pre id="o"></pre><script>function f(n){ return Array.apply(0,Array(n*3+1)).map(function(){return "+--".repeat(n)+"+"}).map(function(v,i){ return v.replace(/./g,function(k,x) { return i%3?"|  |##|  "[x%6+(i%6>2)*3]:k}) }).join("\n") };o.textContent=f(2)</script>

Anonymous function. Starts with a full array of +--+--+--... lines, and on appropriate lines, replaces the + for | and - for or # as appropriate.

The expression that decides the replacement character, "| |##| "[x%6+(i%6>2)*3], could probably be golfed further, but I've found that using a longer, redundant string saves more characters than a complex calculation.

Answer 7

CJam, 59 bytes

This .. is .. too .. long ..

ri:I," #"f=2f*_I({__sff^_}*]'|I)*f.\2/Nf*'+I)*"--"*aI)*.\N*

Try it online here

Answer 8

CoffeeScript with ES6, 106 bytes

f=(n,y=z='+--'[r='repeat'](n)+'+\n')->y+=('|##|  '[r](n).substr(i%2*3,n*3)+'|\n')[r](2)+z for i in[1..n];y

---

JavaScript (ES6), 111 bytes

Newlines are significant and counted as 1 byte each.

The explicit return made it a bit longer:

f=n=>{for(i=0,y=z='+--'[r='repeat'](n)+`+
`;i<n;)y+=('|##|  '[r](n).substr(++i%2*3,n*3)+`|
`)[r](2)+z;return y}

Demo

At time of writing, Firefox is the only major browser compatible with ES6.

f=n=>{for(i=0,y=z='+--'[r='repeat'](n)+`+
`;i<n;)y+=('|##|  '[r](n).substr(++i%2*3,n*3)+`|
`)[r](2)+z;return y}

// Demonstration related things
document.getElementById('O').innerHTML = f(document.getElementById('n').value);

document.getElementById('n').addEventListener('change', function () {
  document.getElementById('O').innerHTML = f(this.value);
});

<p><input id=n type=number min=0 step=1 value=6></p>
<pre><output id=O></output></pre>

Answer 9

Python 3, 114 108 100

def f(n):
 for i in range(3*n+1):print(("|##|  "*n+"|")[::i//3%2*2-1][:3*n+1]if i%3 else"+--"*n+"+")

---

---

Previous solutions

108

def f(n):
 for i in range(3*n+1):
  a=("|##|  "*n+"|")[::i//3%2*2-1][:3*n+1];print(a if i%3 else"+--"*n+"+")

114

def f(n):a="+--"*n+"+\n";b="|  |##"*n+"|";print(a+a.join(([(b[:3*n+1]+"\n")*2,(b[::-1][:3*n+1]+"\n")*2]*n)[:n])+a)

118 (not submitted)

def f(n):
 for i in range(3*n+1):print((("|##|  "*n)[:3*n+1]if i//3%2 else("|  |##"*n)[:3*n+1])if i%3 else"+--"*n+"+")

Answer 10

Ruby, 87

->n{a=[b="+--",c="|  |##",c,b,d="|##|  ",d]
0.upto(n*3){|i|puts"".ljust(n*3+1,a[i%6])}}

This is an anonymous function. Call it like this (all possibilities from 0 to 5)

f=->n{a=[b="+--",c="|  |##",c,b,d="|##|  ",d]
0.upto(n*3){|i|puts"".ljust(n*3+1,a[i%6])}}

6.times{|j|f.call(j)}

It makes use of the ljust method on an empty string. Ruby allows a padding string to be specified for justification, so we use ljust with one of the three possible padding strings b,c,d per array a, ordered as bccbdd.

Answer 11

CJam, 46 bytes

li3*)_2m*[{_3f/2f%:=\3f%:g+2b"+-|#+-| "=}/]/N*

Try it online

Well, I was hoping that I would at least have an original solution (I normally don't look at other answers before working on my own). Turns out that @Sp3000 had already done something very similar, only better. But since I already did the work, I thought I'd post it anyway.

Explanation:

li    Get input n.
3*)   Calculate 3*n+1, which is the total width/height.
_     Copy size. We'll need it at the end to insert the newlines.
2m*   Calculate cartesian power with 2. This enumerates all coordinate pairs.
[     Wrap characters in array for split operation at the end.
  {     Loop over all coordinate pairs.
    _     Copy coordinate pair.
    3f/   Divide coordinates by 3.
    2f%   Modulo 2. This characterizes even/odd squares.
    :=    Compare the two coordinates. This gives 0/1 for white/black squares.
    \3f%  Grab second copy of coordinates, and calculate modulo 3.
    :g    Sign. This gives 0 for grid lines, 1 for interior of squares.
    +     Concatenate the two results. We now have a 3 bit code.
    2b    Convert the 3 bits to a number in range 0..7.
    "+-|#+-| "
          Lookup table to convert 0..7 number to character.
    =     Lookup character.
  }/    End loop over coordinate pairs.
]     End wrapping characters.
/     Split character array into lines.
N*    And join them with newlines.

Answer 12

HackVM, 158 bytes

Definitely not a winner, but this looked like a nice challenge to do in HVM.

Place the size into the first memory cell and use the following code:

77*1+c0<0^84*1+?1-11<-1>99*85++0^cc77*1+c066*5+-g!0<0^45*2+?1-95*0^0^2-PPP064*-6-gd95*2-P25*P$1<2>555**1-P0<0^76*6-?1-12<-2>2<3*48*+0^PP555**1-P076*2+-gd25*P$

Note: The code needs to be exactly in one line to work.

Explanation:

Call PLUSHDASHLINE
77*2+c

Read the cell and skip if done
0<0^84*1+?1-

  Flip row parity
  11<-1>

  Call NORMALLINE twice
  99*85++0^cc

  Call PLUSHDASHLINE
  77*1+c

Jump back to start of loop
066*5+-g!


DEFINE_PLUSDASHLINE
0<0^45*2+?1-95*0^0^2-PPP064*-6-gd95*2-P25*P$

DEFINE_NORMALLINE
1<2>555**1-P0<0^76*6-?1-12<-2>2<3*48*+0^PP555**1-P076*2+-gd25*P$

The code calls 2 functions PLUSHDASHLINE and NORMALLINE, maintains a global state for parities (i.e. whether to put a ' ' or a '#' in a cell).

Explanation for PLUSDASHLINE:

Repeat N times
0<0^45*2+?1-

  Print "+--"
  95*0^0^2-PPP

End Repeat
064*-6-g

Print "+"
d95*2-P

Print "\n"
25*P

Return
$

Explanation for NORMALLINE:

Copy Parity into Cell 2
1<2>

Print '|'
555**1-P

Repeat N times
0<0^76*6-?1-

  Flip Cell 2 (i.e. Flip Column Parity)
  12<-2>

  Calculate ' ' or '#' based upon parity
  2<3*48*+0^

  Print it twice
  PP

  Print '|'
  555**1-P

End Repeat
076*2+-g

Print "\n"
d25*P

Return
$

Would appreciate it if someone gave tips for improving it further :)

Answer 13

Python 2, 98

n=input()
f=lambda a,b,s:s+s.join(([a*2,b*2]*n)[:n])+s+'\n'
print f(f(*' #|'),f(*'# |'),f(*'--+'))

Not the shortest way, but an amusing method. The function f takes in two strings a,b and a separator s and interleaves its arguments like saasbbsaasbbsaas. The rows of the board are created in this form with their respective characters, then are themselves interleaved this way to produce the result.

Answer 14

Ruby: 83 characters

f=->n{puts d=?++'--+'*n,(0...n).map{|i|[?|+'%2s|'*n%(['','##',''][i%2,2]*n)]*2<<d}}

Sample run:

irb(main):001:0> f=->n{puts d=?++'--+'*n,(0...n).map{|i|[?|+'%2s|'*n%(['','##',''][i%2,2]*n)]*2<<d}}
=> #<Proc:0x000000007c51a0@(irb):1 (lambda)>

irb(main):002:0> f[0]
+
=> nil

irb(main):003:0> f[1]
+--+
|  |
|  |
+--+
=> nil

irb(main):004:0> f[2]
+--+--+
|  |##|
|  |##|
+--+--+
|##|  |
|##|  |
+--+--+
=> nil

irb(main):005:0> f[3]
+--+--+--+
|  |##|  |
|  |##|  |
+--+--+--+
|##|  |##|
|##|  |##|
+--+--+--+
|  |##|  |
|  |##|  |
+--+--+--+
=> nil

Answer 15

Vyxal, 52 bytes

(x|`+--`*\++,2(⁰(n←x+₂[`|  `|`|##`]₴)\|,))`+--`*\++,

Try it Online!

A. Big. Mess.

Answer 16

Julia, 124 bytes

n->(t="+--"^n*"+";a="|  ";b="|##";m=n÷2;c=n%2>0;p=println;p(t);for i=1:n p(((i%2<1?(b*a)^m*b^c:(a*b)^m*a^c)*"|\n")^2*t)end)

This creates an unnamed function that accepts an integer and prints to stdout.

Ungolfed + explanation:

function f(n)
    # Define the portions of the board
    t = "+--"^n * "+"
    a = "|  "
    b = "|##"

    # There will be n÷2 repeated a*b or b*a per line
    m = n ÷ 2

    # If n is odd, there will be an extra a or b
    c = n % 2 != 0

    # Print the top
    println(t)

    # Print each horizontal section of the board
    for i = 1:n
        # In even numbered sections, b precedes a
        j = (i % 2 == 0 ? (b*a)^m * b^c : (a*b)^m * a^c) * "|\n"
        println(j^2 * t)
    end
end

Answer 17

Javascript, ES6 149

n=>(r="+--".repeat(n)+"+",[...r].map((_,i)=>i%3?(x=i%6&&i%6<3?" ":"#",[...r].map((_,e)=>e%3?e%6&&e%6<3?x:"#"==x?" ":"#":"|").join('')):r).join('\n'))

Pretty fun to write though it's a bit long

Works on firefox

1 - Open console

2 - Type the following

console.log((n=>(r="+--".repeat(n)+"+",[...r].map((_,i)=>i%3?(x=i%6&&i%6<3?" ":"#",[...r].map((_,e)=>e%3?e%6&&e%6<3?x:"#"==x?" ":"#":"|").join('')):r).join('\n')))(15));

Output (n=15):

+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+

Answer 18

Haskell, 99

This is partially inspired by the previous Haskell answer by catgocat; I wrote my own version, then looked at it, then wrote another. I'm playing by the same rules — the input is an argument, but the output is stdout. (If it could be a pure function, subtract 7 characters putStr$.)

f n=putStr$unlines$t$map t$y[a,b,b,a,c,c]where t=take(n*3+1)
a=y"+--"
b=y"|  |##"
c=drop 3b
y=cycle

We use t to take a region of 3n + 1 characters from an infinite checkerboard built using cycle, and that's it. The primary idea I took from the other answer is that of putting the patterns of both the border and checker cells together in strings.

My first version (140 characters) used the strategy of calculating the character at each point, which might be better for a more complex problem than this one.

f n=putStr$unlines$map(\y->map(g y)r)r where r=[0..n*3]
g y x=s(s '+'y '|')x$s '-'y$cycle" #"!!(x`div`3+y`div`3)
s c i d|i`mod`3==0=c|True=d

Answer 19

Haskell, 118

This is my first haskell code golf answer and here it is:

f n=mapM_(putStrLn.s)[0..3*n]where;d x=(++)$take(3*n)$cycle x;s x|x`mod`3<1=d"+--""+"|x`mod`6<3=d"|  |##""|"|1<2=d"|##|  ""|"

More readable version:

func num = do
    let -- Range
        rag = 3 * num
        -- `+--+`
        a = d "+--" "+"
        -- `|  |##`
        b = d "|  |##" "|"
        -- `|##|  `
        c = d "|##|  " "|"
        -- generate line
        d x y = take rag (cycle x) ++ y
        -- step
        step x
            | x `mod` 6 `elem` [1, 2] = b
            | x `mod` 3 == 0          = a
            | otherwise               = c

    mapM_ (putStrLn . step) [0..rag]

Output

*Main> :load test
[1 of 1] Compiling Main             ( test.hs, interpreted )
Ok, modules loaded: Main.
*Main> f 1
+
*Main> f 4
+--+--+--+--+
|  |##|  |##|
|  |##|  |##|
+--+--+--+--+
|##|  |##|  |
|##|  |##|  |
+--+--+--+--+
|  |##|  |##|
|  |##|  |##|
+--+--+--+--+
|##|  |##|  |
|##|  |##|  |
+--+--+--+--+
*Main> f 15
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
|##|  |##|  |##|  |##|  |##|  |##|  |##|  |##|
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
|  |##|  |##|  |##|  |##|  |##|  |##|  |##|  |
+--+--+--+--+--+--+--+--+--+--+--+--+--+--+--+

Answer 20

C - 119 101

Uses now the calculation similar to @Sp3000 answer. Also couple optimizations.

i,j;f(n){for(i=j=0;j<=n*3;i++)putchar(i-n*3-1?" -|+#"[!(j%3)+2*!(i%3)?:(i/3+j/3)%2*4]:(j-=i=-1,10));}

I think that ?: is a GCC extension...

Old answer:

f(n){int i,j;char p[]=" -|+";for(i=j=0;j<=n*3;*p=" #"[(i++/3+j/3)%2])putchar(i-n*3-1?p[!(j%3)+2*!(i%3)]:(j-=i=-1,10));}

It maintains 2 coordinates and honestly calculates which character to print for each pair. List of characters to print is stored in array and this alone prints an "uncolored" grid. First element of the array is modified to draw black squares.

I might change this so that instead of two independent coordinates it's one value counting up or (maybe even better) down, but can't wrap my head around that right now.

Bonus - replacing 3 with any other number results in a program that draws valid checkerboard with different cell size.

Answer 21

awk - 91

{
    for(k=i=3*$0+1;i--;print"")
        for(j=k;j--;)printf i%3?j%3?234~(i+j)%6?FS:"#":j%3?"-":"|":"+"
}

Was quite a fight to get it below 100. Counting backwards and using the match operator were the breakthroughs ;) The rest is pretty much straightforward logic.

Answer 22

Pyke, 47 bytes

"+--"Q*\+j+i
QQ]Uas 2%" #"@2*)F\|JjR+"+
"+2*pi
<Newline needed>

Try it here!