Pure CSS Tic-tac-toe

.tic-tac-toe

  - for (var turn = 1; turn <= 9; turn++)

    - for (var row = 1; row <= 3; row++)

      - for (var column = 1; column <= 3; column++)

        - var player = "1"

        - var positionHorizontal = ""

        - var positionVertical = ""

        - var positionDiagonal = ""

        if( turn % 2 == 0 )

          - var player = "2"

        if( column == 1 )

          - var positionHorizontal = " left first-column"

        else if( column == 2 )

          - var positionHorizontal = " middle second-column"

        else if( column == 3 )

          - var positionHorizontal = " right third-column"

        if( row == 1 )

          - var positionVertical = " top first-row"

        else if( row == 2 )

          - var positionVertical = " center second-row"

        else if( row == 3 )

          - var positionVertical = " bottom third-row"

        if( row == 1 && column == 1 )

          - var positionDiagonal = " first-diagonal"

        else if( row == 1 && column == 3 )

          - var positionDiagonal = " second-diagonal"

        else if( row == 2 && column == 2 )

          - var positionDiagonal = " first-diagonal second-diagonal"

        else if( row == 3 && column == 1 )

          - var positionDiagonal = " second-diagonal"

        else if( row == 3 && column == 3 )

          - var positionDiagonal = " first-diagonal"

        input(id="block" + turn + "-" + row + "-" + column type="radio" class="player-" + player + positionHorizontal + positionVertical + positionDiagonal + " turn-" + turn)

        label(for="block" + turn + "-" + row + "-" + column class="turn-" + turn)

​

  .end

    h3

    a(href="") Restart

h5 Note: use the Full Page view for the best experience.