Thank you!
here is my code.
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NimGame App</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen and (max-width: 639px)" href="portrait.css">
<style>
@media (max-width: 480px) {
#picblock {
background-image: url(mobile.png);
background-repeat: no-repeat;
background-size: contain ;
}
}
@media (min-width: 481px) {
#picblock {
background-image: url(desktop.png);
background-repeat: no-repeat;
background-size: contain ;
}
}
button {
font-size: 18px;
padding: 10px 15px;
color: #fff;
background-color: #004444;
border: none;
border-radius: 5px;
cursor: pointer;
}
.bricks {height:50px;width:50px;border:3px solid brown;border-radius: 20px ;display:inline-block;margin:0;padding:0;background:green;}
.heap2 .bricks{background:green;border:3px solid brown;}
.heap3 .bricks{background:green;border:3px solid brown;}
.theading{font-weight:bolder;font-size:30px;text-align:center;color: rebeccapurple}
.pheading{font-weight:bolder;font-size:30px;text-align:center;color: rebeccapurple}
.boxed {
border: 10px solid brown ;
border-radius: 20px ;
-moz-border-radius: 20px ;
}
</style>
<style>
.stick #bricks:hover{visibility:hidden;display:none;}
</style>
<style>
<style>
h2 {
color: rgb(0, 232, 15);
}
p {
color: rgb(191, 0, 255);
}
</style>
</head>
<body>
<div id="brick-1" class="brick"></div>
<div id="header">
<div class="t">
<br>
<span class="theading">The NIM Game</span>
<br>
</div>
</div>
<div id="intro">
<span><p style="color:darkblue">About the game and the rules : NIM is a mathematical game of strategy in game theory where two players take turns removing objects from distinct heaps.On each turn, a player must remove at least one object, and may remove any number of objects provided they all come from the same heap - in this case a heap is a row. The player to draw the last object from the game loses.</p></span>
</div>
<br>
<h2><strong>Roles!</strong></h2>
<blockquote>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="1"></font></p>
<p>In one move, you can remove any number of bricks but only from one row.Select any 'Row button' and click it to REMOVE bricks.<br> After each
move click 'Computer' to make the computer play. You lose if you leave the LAST match for the computer.<br>
Who Moves First At the start of a game, you have the first move, unless you allow the computer to play first by pressing the 'Play' button.</p>
</blockquote>
<br />
<hr />
<div class="heap" id="heap1">
<br>
<div class="stick">
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
</div>
</div>
<br>
<div id="picblock"></div>
<div class="heap2" id="heap2">
<br>
<div class="stick">
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
</div>
</div>
<br>
<div id="picblock"></div>
<div class="heap3" id="heap3">
<br>
<div class="stick">
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
<div class="bricks" id="bricks" onclick="myFunction()"></div>
</div>
</div>
<br>
<hr />
<form>
<table BORDER=0 cellpadding="1" cellspacing="1" id="nim game">
<tr align="center" valign="top">
<td COLSPAN="3"></td>
<td width="32"><img SRC="matcho1.gif"></td>
<td COLSPAN="3"></td>
</tr>
</table>
</form>
<div id="playerConsol">
<div class="p">
<span class='pheading'>Choose opponent </span>
</div>
<br>
<div className="opponent-choice">
<div class="p" id="Computer">
<span class="Names"><button class="move" id="click me" onclick="pcPlay()">Computer</button></span><br />
</div>
<br>
<div class="p" id="Human">
<span class="Names"><button class="move" id="click me" onlick="myFunction()">Human</button></span><br />
</div>
</div>
<br/>
<div class="p" id="Play Again">
<span class="Names"><button class="move" id="click me"
onClick="myfunction()">Play Again</button>
</span><br/>
</div>
<br />
<br />
<label>From heap : </label>
<select class='pickheap' id='pickheap'>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<label>Move : </label>
<input type="number" value="1" id='numberofbricks'/>
<label>Bricks(s)</label>
<br>
<br />
<span>Overall Move Count : <span class="MoveCount">0</span></span>
<button class="connect1" onclick="myFunction()">Colorful</button>
<button class="connect2" onclick="play()">Play</button>
<button class="connect3" onclick="reset()">Reset</button>
<br>
<br/>
<tr align="center" valign="middle"> <td height="70" colspan="7"><input name="button2" type="button" class="button" onclick="new_game()" value="New game">
<input name="button2" type="button" class="button" onclick="javascript:window.close()" value="Close window">
</td>
</tr>
</div>
<script>
const rainbow = ['red','orange','yellow','green','blue','rebeccapurple','violet'];
function selectMultiple() {
document.getElementById("heap 1.bricks").multiple = true;.style.background = rainbow[Math.floor(7*Math.random())];
}
</script>
<script src='main.js'></script>
<script type="text/javascript"></script>
<script>
btn.addEventListener('click', change);
var brick = document.getElementById("brick-2");
brick.style.backgroundColor = 'orange';
</script>
<script>
//function for colorful
function myFunction() {
//
var elements=document.getElementsByClassName("bricks");
//
for(var i=0; i<elements.length; i++) {
elements[i].style.background='red';
}
}
</script>
<script>
//function for play
function play() {
//select the heap number based n user input
var heapnum = document.getElementById("pickheap").value;
//creates the heap id
var heap = "heap".concat(heapnum);
//selects all bricks within selected heap
var elements= document.getElementById(heap).getElementsByClassName("bricks");
//select the number of bricks to remove
var numbricks = document.getElementById("numberofbricks").value;
for(var i=elements.length-numbricks; i<elements.length; i++) {
elements[i].style.visibility='hidden';
}
}
</script>
<script>
//pc play
function pcPlay(){
//select the heap number based n user input
var heapnum = Math.floor((Math.random() *3) + 1);
document.getElementById("pickheap").value=heapnum;
//creates the heap id
var heap = "heap".concat(heapnum);
//selects all bricks within selected heap
var elements= document.getElementById(heap).getElementsByClassName("bricks");
//select the number of bricks to remove
var numbricks = Math.floor((Math.random() *30) + 1);
document.getElementById("numberofbricks").value=numbricks;
for(var i=elements.length-numbricks; i<elements.length; i++) {
elements[i].style.visibility='hidden';
console.log(heapnum);
}
}
</script>
<script>
//humanplay
function humanPlay(){
//select the heap number based n user input
var heapnum = Math.floor((Math.random() *3) + 1);
document.getElementById("pickheap").value=heapnum;
//creates the heap id
var heap = "heap".concat(heapnum);
//selects all bricks within selected heap
var elements= document.getElementById(heap).getElementsByClassName("bricks");
//select the number of bricks to remove
var numbricks = Math.floor((Math.random() *10) + 1);
document.getElementById("numberofbricks").value=numbricks;
for(var i=elements.length-numbricks; i<elements.length; i++) {
elements[i].style.visibility='visible';
console.log(heapnum);
}
}
</script>
<script>
//reset
function reset(){
var elements= document.getElementsByClassName("bricks");
for(var i=0; i<elements.length; i++) {
//elements[i].style.display='block';
elements[i].style.visibility='visible';
}
}
</script>
</body>
</html>