roozbehk/battleship
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity
749f066af8
battleship/index.html

389 lines
18 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Bangers&family=Montserrat&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="css/style.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script defer src="script/script.js"></script>
</head>
<body>
<header>
<div>
<h1>BATTLE SHIP</h1>
</div>
</header>
<main class="box">
<div id="player-ships-stats" class="stats">player ships stat</div>
<div id="player-ships">
<div id="carrier" class="ships" draggable="true">
<div id="carrier-0"></div>
<div id="carrier-1"></div>
<div id="carrier-2"></div>
<div id="carrier-3"></div>
<div id="carrier-4"></div>
</div>
<div id="battleship" class="ships" draggable="true">
<div id="battleship-0"></div>
<div id="battleship-1"></div>
<div id="battleship-2"></div>
<div id="battleship-3"></div>
</div>
<div id="submarine" class="ships" draggable="true">
<div id="submarine-0"></div>
<div id="submarine-1"></div>
<div id="submarine-2"></div>
</div>
<div id="cruiser" class="ships" draggable="true">
<div id="cruiser-0"></div>
<div id="cruiser-1"></div>
<div id="cruiser-2"></div>
</div>
<div id="destroyer" class="ships" draggable="true">
<div id="destroyer-0"></div>
<div id="destroyer-1"></div>
</div>
</div>
<div id="player-table-stat" class="stats">player Table</div>
<div>
<table class="player-table" id="player-table">
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr>
<th class="headers">A</th>
<td class="player-cell" id="PA1"></td>
<td class="player-cell" id="PA2"></td>
<td class="player-cell" id="PA3"></td>
<td class="player-cell" id="PA4"></td>
<td class="player-cell" id="PA5"></td>
<td class="player-cell" id="PA6"></td>
<td class="player-cell" id="PA7"></td>
<td class="player-cell" id="PA8"></td>
<td class="player-cell" id="PA9"></td>
<td class="player-cell" id="PA10"></td>
</tr>
<tr>
<th class="headers">B</th>
<td class="player-cell" id="PB1"></td>
<td class="player-cell" id="PB2"></td>
<td class="player-cell" id="PB3"></td>
<td class="player-cell" id="PB4"></td>
<td class="player-cell" id="PB5"></td>
<td class="player-cell" id="PB6"></td>
<td class="player-cell" id="PB7"></td>
<td class="player-cell" id="PB8"></td>
<td class="player-cell" id="PB9"></td>
<td class="player-cell" id="PB10"></td>
</tr>
<tr>
<th class="headers">C</th>
<td class="player-cell" id="PC1"></td>
<td class="player-cell" id="PC2"></td>
<td class="player-cell" id="PC3"></td>
<td class="player-cell" id="PC4"></td>
<td class="player-cell" id="PC5"></td>
<td class="player-cell" id="PC6"></td>
<td class="player-cell" id="PC7"></td>
<td class="player-cell" id="PC8"></td>
<td class="player-cell" id="PC9"></td>
<td class="player-cell" id="PC10"></td>
</tr>
<tr>
<th class="headers">D</th>
<td class="player-cell" id="PD1"></td>
<td class="player-cell" id="PD2"></td>
<td class="player-cell" id="PD3"></td>
<td class="player-cell" id="PD4"></td>
<td class="player-cell" id="PD5"></td>
<td class="player-cell" id="PD6"></td>
<td class="player-cell" id="PD7"></td>
<td class="player-cell" id="PD8"></td>
<td class="player-cell" id="PD9"></td>
<td class="player-cell" id="PD10"></td>
</tr>
<tr>
<th class="headers">E</th>
<td class="player-cell" id="PE1"></td>
<td class="player-cell" id="PE2"></td>
<td class="player-cell" id="PE3"></td>
<td class="player-cell" id="PE4"></td>
<td class="player-cell" id="PE5"></td>
<td class="player-cell" id="PE6"></td>
<td class="player-cell" id="PE7"></td>
<td class="player-cell" id="PE8"></td>
<td class="player-cell" id="PE9"></td>
<td class="player-cell" id="PE10"></td>
</tr>
<tr>
<th class="headers">F</th>
<td class="player-cell" id="PF1"></td>
<td class="player-cell" id="PF2"></td>
<td class="player-cell" id="PF3"></td>
<td class="player-cell" id="PF4"></td>
<td class="player-cell" id="PF5"></td>
<td class="player-cell" id="PF6"></td>
<td class="player-cell" id="PF7"></td>
<td class="player-cell" id="PF8"></td>
<td class="player-cell" id="PF9"></td>
<td class="player-cell" id="PF10"></td>
</tr>
<tr>
<th class="headers">G</th>
<td class="player-cell" id="PG1"></td>
<td class="player-cell" id="PG2"></td>
<td class="player-cell" id="PG3"></td>
<td class="player-cell" id="PG4"></td>
<td class="player-cell" id="PG5"></td>
<td class="player-cell" id="PG6"></td>
<td class="player-cell" id="PG7"></td>
<td class="player-cell" id="PG8"></td>
<td class="player-cell" id="PG9"></td>
<td class="player-cell" id="PG10"></td>
</tr>
<tr>
<th class="headers">H</th>
<td class="player-cell" id="PH1"></td>
<td class="player-cell" id="PH2"></td>
<td class="player-cell" id="PH3"></td>
<td class="player-cell" id="PH4"></td>
<td class="player-cell" id="PH5"></td>
<td class="player-cell" id="PH6"></td>
<td class="player-cell" id="PH7"></td>
<td class="player-cell" id="PH8"></td>
<td class="player-cell" id="PH9"></td>
<td class="player-cell" id="PH10"></td>
</tr>
<tr>
<th class="headers">I</th>
<td class="player-cell" id="PI1"></td>
<td class="player-cell" id="PI2"></td>
<td class="player-cell" id="PI3"></td>
<td class="player-cell" id="PI4"></td>
<td class="player-cell" id="PI5"></td>
<td class="player-cell" id="PI6"></td>
<td class="player-cell" id="PI7"></td>
<td class="player-cell" id="PI8"></td>
<td class="player-cell" id="PI9"></td>
<td class="player-cell" id="PI10"></td>
</tr>
<tr>
<th class="headers">J</th>
<td class="player-cell" id="PJ1"></td>
<td class="player-cell" id="PJ2"></td>
<td class="player-cell" id="PJ3"></td>
<td class="player-cell" id="PJ4"></td>
<td class="player-cell" id="PJ5"></td>
<td class="player-cell" id="PJ6"></td>
<td class="player-cell" id="PJ7"></td>
<td class="player-cell" id="PJ8"></td>
<td class="player-cell" id="PJ9"></td>
<td class="player-cell" id="PJ10"></td>
</tr>
</table>
</div>
<div id="computer-table-stat" class="stats">computer table</div>
<div>
<div>
<table class="computer-table" id="computer-table">
<tr>
<th></th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
<tr>
<th class="headers">A</th>
<td class="computer-cell" id="CA1"></td>
<td class="computer-cell" id="CA2"></td>
<td class="computer-cell" id="CA3"></td>
<td class="computer-cell" id="CA4"></td>
<td class="computer-cell" id="CA5"></td>
<td class="computer-cell" id="CA6"></td>
<td class="computer-cell" id="CA7"></td>
<td class="computer-cell" id="CA8"></td>
<td class="computer-cell" id="CA9"></td>
<td class="computer-cell" id="CA10"></td>
</tr>
<tr>
<th class="headers">B</th>
<td class="computer-cell" id="CB1"></td>
<td class="computer-cell" id="CB2"></td>
<td class="computer-cell" id="CB3"></td>
<td class="computer-cell" id="CB4"></td>
<td class="computer-cell" id="CB5"></td>
<td class="computer-cell" id="CB6"></td>
<td class="computer-cell" id="CB7"></td>
<td class="computer-cell" id="CB8"></td>
<td class="computer-cell" id="CB9"></td>
<td class="computer-cell" id="CB10"></td>
</tr>
<tr>
<th class="headers">C</th>
<td class="computer-cell" id="CC1"></td>
<td class="computer-cell" id="CC2"></td>
<td class="computer-cell" id="CC3"></td>
<td class="computer-cell" id="CC4"></td>
<td class="computer-cell" id="CC5"></td>
<td class="computer-cell" id="CC6"></td>
<td class="computer-cell" id="CC7"></td>
<td class="computer-cell" id="CC8"></td>
<td class="computer-cell" id="CC9"></td>
<td class="computer-cell" id="CC10"></td>
</tr>
<tr>
<th class="headers">D</th>
<td class="computer-cell" id="CD1"></td>
<td class="computer-cell" id="CD2"></td>
<td class="computer-cell" id="CD3"></td>
<td class="computer-cell" id="CD4"></td>
<td class="computer-cell" id="CD5"></td>
<td class="computer-cell" id="CD6"></td>
<td class="computer-cell" id="CD7"></td>
<td class="computer-cell" id="CD8"></td>
<td class="computer-cell" id="CD9"></td>
<td class="computer-cell" id="CD10"></td>
</tr>
<tr>
<th class="headers">E</th>
<td class="computer-cell" id="CE1"></td>
<td class="computer-cell" id="CE2"></td>
<td class="computer-cell" id="CE3"></td>
<td class="computer-cell" id="CE4"></td>
<td class="computer-cell" id="CE5"></td>
<td class="computer-cell" id="CE6"></td>
<td class="computer-cell" id="CE7"></td>
<td class="computer-cell" id="CE8"></td>
<td class="computer-cell" id="CE9"></td>
<td class="computer-cell" id="CE10"></td>
</tr>
<tr>
<th class="headers">F</th>
<td class="computer-cell" id="CF1"></td>
<td class="computer-cell" id="CF2"></td>
<td class="computer-cell" id="CF3"></td>
<td class="computer-cell" id="CF4"></td>
<td class="computer-cell" id="CF5"></td>
<td class="computer-cell" id="CF6"></td>
<td class="computer-cell" id="CF7"></td>
<td class="computer-cell" id="CF8"></td>
<td class="computer-cell" id="CF9"></td>
<td class="computer-cell" id="CF10"></td>
</tr>
<tr>
<th class="headers">G</th>
<td class="computer-cell" id="CG1"></td>
<td class="computer-cell" id="CG2"></td>
<td class="computer-cell" id="CG3"></td>
<td class="computer-cell" id="CG4"></td>
<td class="computer-cell" id="CG5"></td>
<td class="computer-cell" id="CG6"></td>
<td class="computer-cell" id="CG7"></td>
<td class="computer-cell" id="CG8"></td>
<td class="computer-cell" id="CG9"></td>
<td class="computer-cell" id="CG10"></td>
</tr>
<tr>
<th class="headers">H</th>
<td class="computer-cell" id="CH1"></td>
<td class="computer-cell" id="CH2"></td>
<td class="computer-cell" id="CH3"></td>
<td class="computer-cell" id="CH4"></td>
<td class="computer-cell" id="CH5"></td>
<td class="computer-cell" id="CH6"></td>
<td class="computer-cell" id="CH7"></td>
<td class="computer-cell" id="CH8"></td>
<td class="computer-cell" id="CH9"></td>
<td class="computer-cell" id="CH10"></td>
</tr>
<tr>
<th class="headers">I</th>
<td class="computer-cell" id="CI1"></td>
<td class="computer-cell" id="CI2"></td>
<td class="computer-cell" id="CI3"></td>
<td class="computer-cell" id="CI4"></td>
<td class="computer-cell" id="CI5"></td>
<td class="computer-cell" id="CI6"></td>
<td class="computer-cell" id="CI7"></td>
<td class="computer-cell" id="CI8"></td>
<td class="computer-cell" id="CI9"></td>
<td class="computer-cell" id="CI10"></td>
</tr>
<tr>
<th class="headers">J</th>
<td class="computer-cell" id="CJ1"></td>
<td class="computer-cell" id="CJ2"></td>
<td class="computer-cell" id="CJ3"></td>
<td class="computer-cell" id="CJ4"></td>
<td class="computer-cell" id="CJ5"></td>
<td class="computer-cell" id="CJ6"></td>
<td class="computer-cell" id="CJ7"></td>
<td class="computer-cell" id="CJ8"></td>
<td class="computer-cell" id="CJ9"></td>
<td class="computer-cell" id="CJ10"></td>
</tr>
</table>
</div>
</div>
<!-- <div id="computer-ships-stats" class="stats" >computer ships stat</div>
<div id="computer-ships">computer ships</div> -->
</main>
<footer>
<div>
<button id="player-random-game-button">Player Random</button>
</footer>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink