<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 and number">
			<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 class="col-xs-1 col-sm-2">F</div>
	</div>
	<div class="row one">
		<div class="col-xs-1 col-sm-2" id="a1"></div>
		<div class="col-xs-1 col-sm-2" id="b1"></div>
		<div class="col-xs-1 col-sm-2" id="c1"></div>
		<div class="col-xs-1 col-sm-2" id="d1"></div>
		<div class="col-xs-1 col-sm-2" id="e1"></div>
		<div class="col-xs-1 col-sm-2" id="f1"></div>
	</div>
	<div class="row two">
		<div class="col-xs-1 col-sm-2" id="a2"></div>
		<div class="col-xs-1 col-sm-2" id="b2"></div>
		<div class="col-xs-1 col-sm-2" id="c2"></div>
		<div class="col-xs-1 col-sm-2" id="d2"></div>
		<div class="col-xs-1 col-sm-2" id="e2"></div>
		<div class="col-xs-1 col-sm-2" id="f2"></div>
	</div>
	<div class="row three">
		<div class="col-xs-1 col-sm-2" id="a3"></div>
		<div class="col-xs-1 col-sm-2" id="b3"></div>
		<div class="col-xs-1 col-sm-2" id="c3"></div>
		<div class="col-xs-1 col-sm-2" id="d3"></div>
		<div class="col-xs-1 col-sm-2" id="e3"></div>
		<div class="col-xs-1 col-sm-2" id="f3"></div>
	</div>
	<div class="row four">
		<div class="col-xs-1 col-sm-2" id="a4"></div>
		<div class="col-xs-1 col-sm-2" id="b4"></div>
		<div class="col-xs-1 col-sm-2" id="c4"></div>
		<div class="col-xs-1 col-sm-2" id="d4"></div>
		<div class="col-xs-1 col-sm-2" id="e4"></div>
		<div class="col-xs-1 col-sm-2" id="f4"></div>
	</div>
	<div class="row five">
		<div class="col-xs-1 col-sm-2" id="a5"></div>
		<div class="col-xs-1 col-sm-2" id="b5"></div>
		<div class="col-xs-1 col-sm-2" id="c5"></div>
		<div class="col-xs-1 col-sm-2" id="d5"></div>
		<div class="col-xs-1 col-sm-2" id="e5"></div>
		<div class="col-xs-1 col-sm-2" id="f5"></div>
	</div>
	<div class="row six">
		<div class="col-xs-1 col-sm-2" id="a6"></div>
		<div class="col-xs-1 col-sm-2" id="b6"></div>
		<div class="col-xs-1 col-sm-2" id="c6"></div>
		<div class="col-xs-1 col-sm-2" id="d6"></div>
		<div class="col-xs-1 col-sm-2" id="e6"></div>
		<div class="col-xs-1 col-sm-2" id="f6"></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;
		color: white;
	}
}

.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 stage;
var temp;
var temp_string;
var temp_cord = [];
var user_ship;
var cpu_ship = [];

function input(){
	temp = document.getElementById('guessInput').value;
	return(temp.split(""));
}

function input_string(){
	return(document.getElementById('guessInput').value);
}

document.getElementById('fireButton').onclick = function(){
	if(stage == 'a'){
		user_ship = input();
		console.log(user_ship);
		reset();
	}else{
		temp = input();
		temp_string = input_string();
		console.log(temp);
		console.log(cpu_ship);
		if(JSON.stringify(temp) == JSON.stringify(cpu_ship)){
			document.getElementById(temp_string).innerHTML = "Hit";
			win();
		}else{
			console.log('You miss');
			document.getElementById(temp_string).innerHTML = "Miss";
			cpu_guess();
		}
	}
};

function win(){
	console.log("Win");
	document.getElementById('messageArea').innerHTML = "Battleship - You Win";
	document.getElementById('fireButton').disabled = true;
}

function lose(){
	console.log("Lose");
	document.getElementById('messageArea').innerHTML = "Battleship - You Lose!";
	document.getElementById('fireButton').disabled = true;
}

(function (){
	document.getElementById('messageArea').innerHTML = "Battleship - Enter were you want to place your ship...";
	document.getElementById('fireButton').innerHTML = "Select";
	stage = 'a';
	cpu_ship[1] = String(Math.floor(Math.random()/0.1666666666) + 1);
	switch(Math.floor(Math.random()/0.1666666666)){
		case 0:
			cpu_ship[0] = 'a';
			break;
		case 1:
			cpu_ship[0] = 'b';
			break;
		case 2:
			cpu_ship[0] = 'c';
			break;
		case 3:
			cpu_ship[0] = 'd';
			break;
		case 4:
			cpu_ship[0] = 'e';
			break;
		case 5:
			cpu_ship[0] = 'e';
			break;
		default:
			console.log('error');
	}

})();

function reset(){
	document.getElementById('messageArea').innerHTML = "Battleship - Enter were you want to fire...";
	document.getElementById('fireButton').innerHTML = "Fire!";
	stage = 'b';
}

function random_cord(){
	temp_cord[1] = String(Math.floor(Math.random()/0.1666666666) + 1);
	switch(Math.floor(Math.random()/0.1666666666)){
		case 0:
			temp_cord[0] = 'a';
			break;
		case 1:
			temp_cord[0] = 'b';
			break;
		case 2:
			temp_cord[0] = 'c';
			break;
		case 3:
			temp_cord[0] = 'd';
			break;
		case 4:
			temp_cord[0] = 'e';
			break;
		case 5:
			temp_cord[0] = 'e';
			break;
		default:
			console.log('error');
	}
	return(temp_cord);
}

function cpu_guess(){
	if(JSON.stringify(random_cord()) == JSON.stringify(user_ship)){
		lose();
	}else{
		console.log('The CPU missed');
	}
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.