<div class="container header">
<div class="row">
<div id="messageArea">Battleship</div>
<div class="input-group input-group-lg">
<input type="text" class="form-control" id="guessInput" placeholder="Enter a letter (A-E) and number (1-6)">
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="fireButton">Fire!</button>
</span>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row title">
<div class="col-xs-1 col-sm-2">A</div>
<div class="col-xs-1 col-sm-2">B</div>
<div class="col-xs-1 col-sm-2">C</div>
<div class="col-xs-1 col-sm-2">D</div>
<div class="col-xs-1 col-sm-2">E</div>
</div>
<div class="row one">
<div class="col-xs-1 col-sm-2" id="01"></div>
<div class="col-xs-1 col-sm-2" id="02"></div>
<div class="col-xs-1 col-sm-2" id="03"></div>
<div class="col-xs-1 col-sm-2" id="04"></div>
<div class="col-xs-1 col-sm-2" id="05"></div>
</div>
<div class="row two">
<div class="col-xs-1 col-sm-2" id="11"></div>
<div class="col-xs-1 col-sm-2" id="12"></div>
<div class="col-xs-1 col-sm-2" id="13"></div>
<div class="col-xs-1 col-sm-2" id="14"></div>
<div class="col-xs-1 col-sm-2" id="15"></div>
</div>
<div class="row three">
<div class="col-xs-1 col-sm-2" id="21"></div>
<div class="col-xs-1 col-sm-2" id="22"></div>
<div class="col-xs-1 col-sm-2" id="23"></div>
<div class="col-xs-1 col-sm-2" id="24"></div>
<div class="col-xs-1 col-sm-2" id="25"></div>
</div>
<div class="row four">
<div class="col-xs-1 col-sm-2" id="31"></div>
<div class="col-xs-1 col-sm-2" id="32"></div>
<div class="col-xs-1 col-sm-2" id="33"></div>
<div class="col-xs-1 col-sm-2" id="34"></div>
<div class="col-xs-1 col-sm-2" id="35"></div>
</div>
<div class="row five">
<div class="col-xs-1 col-sm-2" id="41"></div>
<div class="col-xs-1 col-sm-2" id="42"></div>
<div class="col-xs-1 col-sm-2" id="43"></div>
<div class="col-xs-1 col-sm-2" id="44"></div>
<div class="col-xs-1 col-sm-2" id="45"></div>
</div>
<div class="row six">
<div class="col-xs-1 col-sm-2" id="51"></div>
<div class="col-xs-1 col-sm-2" id="52"></div>
<div class="col-xs-1 col-sm-2" id="53"></div>
<div class="col-xs-1 col-sm-2" id="54"></div>
<div class="col-xs-1 col-sm-2" id="55"></div>
</div>
</div>@import "compass";
$green: rgb(83, 175, 19);
$grey: rgba(#929292, .25);
body {
background: #000;
}
.header {
margin-bottom: 15px;
}
.form-control,
input {
background: transparent;
border: $green;
box-shadow: 0 0 2px $green;
&:focus {
box-shadow: 0 0 2px $green;
}
}
button {
background-color: $green;
color: #000;
&:hover {
cursor: pointer;
}
}
#messageArea {
color: $green;
font-size: 16px;
margin: 10px 0;
}
.one,
.two,
.three,
.four,
.five,
.six {
div {
border: 2px solid $green;
min-height: 10vh;
background: $grey;
}
}
.title {
border: none !important;
color: $green;
font-size: 16px;
text-align: center;
}
.hit {
position: relative;
&::before {
content: '\f140';
font-family: FontAwesome;
position: absolute;
left: 50%;
font-size: 6vh;
color: $green;
display: block;
height: 100%;
}
}
.miss {
position: relative;
display: block;
height: auto;
&::before {
content: '\f00d';
font-family: FontAwesome;
position: absolute;
left: 50%;
font-size: 6vh;
color: $green;
}
}var ids=[]
for (var i=0;i<6;i++){
for (var j=1;j<6;j++){
tempId=i.toString()+j.toString();
ids.push(tempId);
}
}
//console.log(ids)
var ship=ids[Math.floor(Math.random()*ids.length)];
console.log(ship);
document.getElementById("fireButton").onclick= function() {
var fullId;
var secondId;
var choice = document.getElementById("guessInput").value;
var rowsAndCols = {
column: choice[0],
row: choice[1]
};
//console.log(rowsAndCols.column);
if (rowsAndCols.column=="A"){
secondId="1";
}
else if (rowsAndCols.column=="B"){
secondId="2";
}
else if (rowsAndCols.column=="C"){
secondId="3";
}
else if (rowsAndCols.column=="D"){
secondId="4";
}
else if (rowsAndCols.column=="E"){
secondId="5";
}
var realId= parseInt(rowsAndCols.row)-1;
fullId=realId.toString()+secondId.toString();
console.log(fullId);
//console.log(ship);
if (fullId==ship){
document.getElementById(ship).style.backgroundColor="green";
document.getElementById("fireButton").disabled=true;
}
else {
document.getElementById(fullId).style.backgroundColor="red";
}
document.getElementById("guessInput").value="";
//console.log(rowsAndCols.column);
//console.log(rowsAndCols.row);
}
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.