start.html

﻿<!DOCTYPE html>
<html>
<head>
    <style>
        body, canvas {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        #canvas-id{
            border: black 1px solid;
        }

        .gamebtn{
            margin: 30px 30px 30px 30px;
            padding: 10px 10px 10px 10px;
            font-size: 20px;
            color: white;
            background-color: chocolate;
        }
        
        .gamebtn:hover{
            color: black;
            background-color: rgb(225, 157, 109);
            border: black 3px solid;
            border-radius: 3px;
        }
    </style>
</head>
<body onload="init()">
    <center>
        <canvas id="canvas-id"></canvas>
        <br>
        <button class="gamebtn" onclick="resetGame(6)">New game 6x6</button>
        <button class="gamebtn" onclick="resetGame(8)">New game 8x8</button>
    </center>
    <!-- Scripts -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <script src="entities/board.js"></script>
    <script src="Utils/point.js"></script>
    <script src="entities/Piece.js"></script>
    <script src="Utils/Move.js"></script>
    <script src="Utils/Rewards.js"></script>

    <script src="entities/RL/QLearning.js"></script>
    <script src="entities/RL/RandomAgent.js"></script>
    <script src="entities/RL/MiniMax.js"></script>
    <script src="entities/Simulation.js"></script>

    <script src="game.js"></script>
    <script src="init.js"></script>
</body>
</html>