HTML, CSS and JavaScript demo

<!DOCTYPE html>
<html>
<head>
<title>HTML, CSS and JavaScript demo</title>
</head>
<body>

import pygame, sys
import numpy as np

pygame.init()

HEIGHT = 600
WIDTH = 600
RED = (255, 0, 0)
BGCOLOUR = (191, 255, 0)
LINECOLOUR = (186, 230, 0)
LINEWIDTH = 15
BOARDROWS = 3
BOARDCOLS = 3
CIRCLERADIUS = 60
CIRCLEDIAMETER = 15
CROSSWIDTH = 25
SPACE = 55
CIRCLECOLOUR = (23,145,135)
CROSSCOLOUR = (66,66,66)
myfont = pygame.font.SysFont("monospace", 15)

display = pygame.display.set_mode( (WIDTH, HEIGHT))
pygame.display.set_caption( 'TIC TAC TOE')
display.fill (BGCOLOUR)

#board
board = np.zeros( (BOARDROWS, BOARDCOLS) )
#print(board)

def draw_lines():
    # The 4 lines below draw out the board on which TIC TAC TOE will be played on
    # First Horizontal line
    pygame.draw.line(display, LINECOLOUR, (0, 200), (600, 200), LINEWIDTH)
    # Second Horizontal Line
    pygame.draw.line(display, LINECOLOUR, (0, 400), (600, 400), LINEWIDTH)
    # First Vertical Line
    pygame.draw.line(display, LINECOLOUR, (200, 0), (200, 600), LINEWIDTH)
    # Second Vertical Line
    pygame.draw.line(display, LINECOLOUR, (400, 0), (400, 600), LINEWIDTH)

def mark_square(self, row, col, player):
    self.square[row][col] = player
    self.marked_square += 1

def check_win(player):
        # checks for a vertical win
        for col in range(BOARDCOLS):
            if board[0][col] == player and board[1][col] == player and board[2][col] == player:
                 draw_vertical_winning_line(col, player)
                 return True
        # Checking for horizontal win
        for row in range(BOARDROWS):
            if board[row][0] == player and board[row][1] == player and board[row][2] == player:
                draw_horizontal_winning_line(row, player)
                return True

# checking for diagonal win
        if board[2][0] == player and board[1][1] == player and board[0][2] == player:
            draw_asc_diagonal(player)
            return True

# checking for other diagonal win
        if board[0][0] == player and board[1][1] == player and board[2][2] == player:
            draw_desc_diagonal(player)
            return True
        #returns a 0 if there is no win yet

def draw_figures():
    for row in range(BOARDROWS):
        for col in range(BOARDCOLS):
            if board[row][col] == 1:
                pygame.draw.circle( display, CIRCLECOLOUR, (int(col * 200 + 200 /2),int(row * 200 + 200 / 2)),CIRCLERADIUS, CIRCLEDIAMETER )
            elif board[row][col] == 2:
                pygame.draw.line(display, CROSSCOLOUR, (col * 200 + SPACE, row * 200 + 200 - SPACE), (col * 200 + 200 - SPACE, row * 200 + SPACE), CROSSWIDTH)
                pygame.draw.line( display, CROSSCOLOUR, (col * 200 + SPACE, row * 200 + SPACE), (col * 200 + 200 - SPACE, row * 200 + 200 - SPACE), CROSSWIDTH)

def mark_square(row, col, player):
    board[row][col] = player

def avaliable_square(row,col):
    if board[row][col] == 0:
        return True
    else:
        return False

def is_board_full():
    for row in range(BOARDROWS):
        for col in range(BOARDCOLS):
            if board[row][col] == 0:
                return False
    return True

def draw_vertical_winning_line(col, player):
    posX = col * 200 + 100

if player == 1:
        color = CIRCLECOLOUR
    elif player == 2:
        color = CROSSCOLOUR
    pygame.draw.line( display, color, (posX, 15), (posX, HEIGHT - 15), 15)
    print("game win")

def draw_horizontal_winning_line(row, player):
    posY = row * 200 + 100

if player == 1:
        color = CIRCLECOLOUR
    elif player == 2:
        color = CROSSCOLOUR

pygame.draw.line( display, color, (15, posY), (WIDTH - 15, posY), 15 )
    pass

def draw_asc_diagonal(player):
    if player == 1:
        color = CIRCLECOLOUR
    elif player == 2:
        color = CROSSCOLOUR

pygame.draw.line(display, color, (15, HEIGHT - 15), (WIDTH - 15, 15), 15)
    pass

def draw_desc_diagonal(player):
    if player == 1:
        color = CIRCLECOLOUR
    elif player == 2:
        color = CROSSCOLOUR

pygame.draw.line(display, color, (15, 15), (WIDTH - 15, HEIGHT - 15), 15)
    pass
#

#This will restart the program once the game is finished
def restart():
    display.fill( BGCOLOUR )
    draw_lines()
    player = 1
    for row in range(BOARDROWS):
        for col in range(BOARDCOLS):
            board[row][col] = 0

draw_lines()
player = 1
game_over = False

#The Code below keeps the display window open
while True:
    for event in pygame.event.get():
        if event.type == pygame.QUIT:
            sys.exit()

if event.type == pygame.MOUSEBUTTONDOWN and not game_over:

#For X Coordinate
            mouseX = event.pos[0]
            #For Y Coordinate
            mouseY = event.pos[1]

clickedrow = int(mouseY // 200)
            clickedcol = int(mouseX // 200)

print(clickedcol)
            print(clickedrow)

if avaliable_square(clickedrow, clickedcol):
                if player == 1:
                    mark_square(clickedrow, clickedcol, 1)
                    if check_win ( player) :
                        game_over = True
                    player = 2

elif player == 2:
                    mark_square(clickedrow, clickedcol, 2)
                    if check_win( player ):
                        game_over = True
                    player = 1

draw_figures()

if event.type == pygame.KEYDOWN:
            if event.key == pygame.K_r:
                game_over = False
                restart()

print(mouseY)
            print(mouseX)

pygame.display.update()

</body>
</html>