<!DOCTYPE html>
<html lang="pl">
	<head>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

		<title>Battleship!</title>
		<meta charset="utf-8" />
		<script language="JavaScript" type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
		<script language="JavaScript" type="text/javascript" src="script.js"></script>	
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
		<div id="container">
			<h1>Battleships!</h1>
			<div id="left">
				<div id="maps">
					<h2>Opponent's map</h2>
					<div id="map1"></div>
					<hr />
					<h2>Your map</h2>
					<div id="map2"></div>
				</div>
			</div>
			<div id="right">
				<textarea name="log" id="log"></textarea><br/>
				<button name="Start" onClick="ready()">Start!</button>
				<button name="Reset" onClick="reset()">Reset!</button>
				
				<ul id="legend">Legend:
					<li><div class="ourShip"></div>: your ships</li>
					<li><div class="hit"></div>: ships hit</li>
					<li><div class="miss"></div>: shots missed</li>
					<li><div class="around"></div>: empty place</li>
				</ul>
				
			</div>
		</div>
	
	</body>
</html>
* {
	margin: 0;
	padding: 0;
}

body {	
	background-color: black;
}

#left {
	float: left;
	margin: 50px;
	margin-left:150px;
	border-right: 1px white solid;
	height: 650px;
}

#right {
	margin-top: 80px;
}

button {
	width:150px;
	height:45px;
	margin-top: 5px;
	margin-left:5px;
	background-color:white;
	border: 2px solid black;
}

button:active {
	background-color: gray;
	color: white;
	border: 2px solid white;
}

#log {
	width:300px;
	height: 260px;
	border-radius: 15px;
	padding: 5px;
	background-color: black;
	color: white;
	font-family: Tahoma, sans-serif;
	border: 2px white solid;
}

h1 {
	text-align: center;
	padding-top: 10px;
	font-weight: bold;
	color: white;
	text-shadow: -5px 5px 0 black;
}

h2 {
	padding-left: 20px;
	margin-bottom: 10px;
	font-size: 22px;
	letter-spacing: 3px;
	text-shadow: 2px 2px 0 white;
}

hr {
	color: white;
	background-color: white;
}


.letters {
	letter-spacing: 4px;
	margin-left: 15px;
}


#container {
	margin: 50px auto;
	width: 900px;
	height: 800px;
	background-color:gray;
	border-radius: 15px;
	border: 1px white solid;
}

#map1, #map2 {
	width:300px;
	height: 250px;
	
}

#map1 div, #map2 div {
	display: inline-block;
	width:20px;
	height:20px;
	background-color: white;
	margin-bottom: -4px;
	border: 1px black solid;
}

hr {
	margin-bottom: 15px;
}

.hit {
	background-color: red !important;
}

.miss {
	background-color: lightblue !important;
}

.ourShip {
	background-color: lightgreen !important;
}

.around {
	background-color: brown !important;
}

#legend {
	margin-top: 70px;
	margin-right: 50px;
	margin-left: 450px;
	padding-left: 150px;
	padding-top: 50px;
	border-top: 1px white solid;
	font-size: 20px;
}

#legend div {
	display: inline-block;
	width: 15px;
	height: 15px;
	border: 1px black solid;
}

ul
{
	list-style-type: none;
}
$(document).ready(function() {
	
	initialize();
	
});
	var begin = "To begin the game you have to set your ships first.\n\nYou can do this by clicking on lower map. There must be a space between any two ships.\n\nWhen you have 6 ships, click start and try to find your opponnent's ships by clicking on upper map. Have fun!\n\n"
	var places = [];
	var letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I"];
	var nums = ["q1","q2","q3","q4","q5","q6","q7","q8","q9"];
	var shipsArray = [];
	var yourShipsArray = [];
	var started = false;
	var finished = false;
	var placesToShoot = places;

function hover()
{
	$('#map1 > div, #map2 > div').hover(function()
		{
			$(this).css("background-color", "blue");
		},
		function()
		{
			$(this).css("background-color", "white");
		}
		
		);
}


function makeplaces()
{
	nums.forEach(function(element, index)
	{
		for(i=0;i<letters.length;i++)
		{
			places.push([element, letters[i]]);
		}
	});
}
	
	
function makeboard()
{
	$('#maps div').each(function() 
	{
		$(this).append('<span class="letters">A B C D E F G H I</span> <br/>');

		var j=0;
	
		for(var i=0;i<81;i++)
		{					
			if(places[i][1]==="A")
			{
				$(this).append('<span class="number">'+(j%9+1)+' </span>');
				j++;
			}	
			$(this).append('<div class=\"'+places[i][0]+' '+places[i][1]+'"></div>');
					
			if(places[i][1]==="I")
				$(this).append('<br/>');
		}
	});
			
};

function addAroundClass(row, column, xclass, where)
{
	
	var indexOfRow =nums.indexOf(row);
	var indexOfColumn = letters.indexOf(column);
	
		for(i=indexOfRow-1;i<=indexOfRow+1;i++)
		{	
			for(j=indexOfColumn-1;j<=indexOfColumn+1;j++)
			{
				if(!(i==indexOfRow && j==indexOfColumn))
				$(where+'>.'+letters[j]+'.'+nums[i]).addClass(xclass);
			}
		}

}

function removeAroundClass(row, column, xclass)
{
	
	var indexOfRow =nums.indexOf(row);
	var indexOfColumn = letters.indexOf(column);
	
		for(i=indexOfRow-1;i<=indexOfRow+1;i++)
		{	
			for(j=indexOfColumn-1;j<=indexOfColumn+1;j++)
			{
				if(!(i==indexOfRow && j==indexOfColumn))
				$('#map2>.'+letters[j]+'.'+nums[i]).removeClass(xclass);
			}
		}

}

function makeShips()
{
		$('#map2 > div').click(function() 
		{
			if(started===false)
			{
				if(yourShipsArray.length>5)
				{
					//console.log(yourShipsArray);
					$('#log').html($('#log').html()+"You've got 6 ships already'\n");
					ready();
				}
				else
				{	
					if($(this).hasClass("around"))
					{
						$('#log').html($('#log').html()+"Remember to leave some space!\n");
						$("#log").scrollTop(99999);
      					$("#log").scrollTop($("textarea").scrollTop()*12);
						
					}
					else
					{
						for(var j=0;j<yourShipsArray.length;j++)
						{
    						if(yourShipsArray[j][0] == $(this).attr("class").split(" ")[0] 
    							&& yourShipsArray[j][1] == $(this).attr("class").split(" ")[1])
    						{
        						makeShips();
        						return false;
    						}
						}	
				
						yourShipsArray.push($(this).attr("class").split(" "));
						addAroundClass($(this).attr("class").split(" ")[0], $(this).attr("class").split(" ")[1], "around", "#map2");
						
						$('#log').html($('#log').html()+"Ship added on: " 
							+ $(this).attr("class").split("")[3]+":"+$(this).attr("class").split("")[1]+"\n");
						$("#log").scrollTop(99999);
      					$("#log").scrollTop($("textarea").scrollTop()*12);
						
						$(this).addClass("ourShip");				
					}
				}
			}
		});
}


function makeRandomShips()
{
	while(shipsArray.length<6)
	{
		var row = Math.floor(Math.random()*8)+1;
		var col = Math.floor(Math.random()*8)+1;
		var newShip = [nums[row], letters[col]];
		
		for(var j=0;j<shipsArray.length;j++)
			{
    			if(shipsArray[j][0] == newShip[0] && shipsArray[j][1] == newShip[1] ||
    				shipsArray[j][0] == nums[row-1] && shipsArray[j][1] == letters[col-1] || shipsArray[j][0] == nums[row-1] && shipsArray[j][1] == letters[col] || shipsArray[j][0] == nums[row-1] && shipsArray[j][1] == letters[col+1] ||
    				shipsArray[j][0] == nums[row] && shipsArray[j][1] == letters[col-1] || shipsArray[j][0] == nums[row] && shipsArray[j][1] == letters[col+1] || 
    				shipsArray[j][0] == nums[row+1] && shipsArray[j][1] == letters[col-1] || shipsArray[j][0] == nums[row+1] && shipsArray[j][1] == letters[col] || shipsArray[j][0] == nums[row+1] && shipsArray[j][1] == letters[col+1])
    			{
        			makeRandomShips()
        			return false;
    			}
    			
			}
		shipsArray.push([nums[row], letters[col]]);
	}
	//console.log(shipsArray);
}


function compshoots()
{
	
	var index = Math.floor(Math.random()*placesToShoot.length);
	var newShip = placesToShoot[index];
	var timesDisplayed = 0;
	var string = "";
	var indexOfRow = nums.indexOf(newShip[0]);
	var indexOfColumn = letters.indexOf(newShip[1]);
	var newHitShip = [];
	
	function delayedmessage () {
		if(timesDisplayed===0)
		{
			setTimeout(delayedmessage, 250);
			timesDisplayed++;
		}
		else
		{
			$('#log').html($('#log').html()+"Computer shoots at "+newShip[1]+":"+newShip[0].split("")[1]+string);
			$("#log").scrollTop(99999);
      		$("#log").scrollTop($("textarea").scrollTop()*12);
		}
		
	}
	
	for(var j=0;j<placesToShoot.length;j++)
				{
    				if(placesToShoot[j][0] == newShip[0] && placesToShoot[j][1] == newShip[1])
    				{
        				placesToShoot.splice(j,1);
        				
        				delayedmessage();
        				
        				if($('#map2 > .'+newShip[0]+'.'+newShip[1]).hasClass("ourShip"))
        				{
        					
        					$('#map2 > .'+newShip[0]+'.'+newShip[1]).removeClass("ourShip").addClass("hit");
        					string+="... HIT!\n\n";
        					
        					addAroundClass(newShip[0],newShip[1], "around", "#map2");
        					newHitShip = newShip;
        					for(var i=0;i<yourShipsArray.length;i++)
        					{
        													
								if(yourShipsArray[i][0] == newShip[0] && yourShipsArray[i][1] == newShip[1])
    							{
        							yourShipsArray.splice(i,1);	
        						}
							}							
        				}	
        				else
        				{  						
        					$('#map2 > .'+newShip[0]+'.'+newShip[1]).addClass("miss");
        					string+="... MISS!\n\n";
        				}
    				}
    				
				}
	if(newHitShip!="")
	{
		var indexOfRow2 = nums.indexOf(newHitShip[0]);
		var indexOfColumn2 = letters.indexOf(newHitShip[1]);			
		for(var j=0;j<placesToShoot.length;j++)
		{
			for(k=indexOfRow2-1;k<=indexOfRow2+1;k++)
			{		
				for(l=indexOfColumn2-1;l<=indexOfColumn2+1;l++)
				{
					if(placesToShoot[j][0] === nums[k] && placesToShoot[j][1]===letters[l] )
					{						
						placesToShoot.splice(j,1);	
					}
				}
			}
		}	
	}
			
			
}


function isHit($place)
{
		for(var i=0;i<shipsArray.length;i++)
		{
			if($place.hasClass(shipsArray[i][0]) && $place.hasClass(shipsArray[i][1]))
			{ 
				for(var j=0;j<shipsArray.length;j++)
				{
    				if(shipsArray[j][0] == $place.attr("class").split(" ")[0] 
    							&& shipsArray[j][1] == $place.attr("class").split(" ")[1])
    				{
        				shipsArray.splice(j,1);
        				addAroundClass($place.attr("class").split(" ")[0], $place.attr("class").split(" ")[1], "around", "#map1");
        				break;
    				}
				}
				return true;
        	}
		}
		return false;
}
				

function ready()
{
	var timesDisplayed =0;
	function delayedmessage () {
		if(timesDisplayed===0)
		{
			setTimeout(delayedmessage, 250);
			timesDisplayed++;
		}
		else
		{
			alert("YOU LOST!");
			$('#log').html($('#log').html()+"YOU LOST!");
			finished = true;
			$("#log").scrollTop(99999);
      		$("#log").scrollTop($("textarea").scrollTop()*12);
		}
	}
		
	if(started===true)
	{
		alert("Game has started already!");
	}
	else
	{	
		if(yourShipsArray.length<6)
		{
			alert("Add some ships on your map (you need 6)");
		}
		else
		{
				$('#map2 > .around').removeClass("around");
				$('#log').html($('#log').html()+"Game starting now!\n");
						$("#log").scrollTop(99999);
      					$("#log").scrollTop($("textarea").scrollTop()*12);
				
				started=true;
				
				
				$('#map1 > div').click(function() 
				{
					if($(this).hasClass("hit") || $(this).hasClass("miss") || $(this).hasClass("around"))
					{		
						return false;
					}
					else
					{
						if(finished!=true)
						{
							$('#log').html($('#log').html()+"You shoot at "
								+$(this).attr("class").split("")[3]+":"+$(this).attr("class").split("")[1]+"... ");
							
							if(isHit($(this)))
							{
								$('#log').html($('#log').html()+"HIT! \n");
								$(this).addClass("hit");
								if(shipsArray.length===0)
								{
									alert("YOU WIN!");
									$('#log').html($('#log').html()+"YOU WIN!");
									finished = true;
									$("#log").scrollTop(99999);
      								$("#log").scrollTop($("textarea").scrollTop()*12);
									return true;
								}
							}
							else
							{
							$('#log').html($('#log').html()+"MISS! \n");
							$(this).addClass("miss");
							}
						
							compshoots();
							if(yourShipsArray.length===0)
							{
								delayedmessage ()
							}
						}
						
						$("#log").scrollTop(99999);
      					$("#log").scrollTop($("textarea").scrollTop()*12);
					}					
				});
				
				
			}
		
	}
}


function initialize()
{
	$('#log').html(begin);
	makeplaces();
	makeboard();
	makeRandomShips();
	makeShips();	
	hover();	
}		


function reset()
{	
	shipsArray = [];
	yourShipsArray = [];
	$('#map1 *').remove();
	$('#map2  *').remove();
	$('#log').html(begin);
	started = false;
	finished = false;
	places = [];
	makeplaces();
	
	placesToShoot = places;	
	makeboard();
	hover();
	makeShips();
	makeRandomShips();
	alert("Game reset!");
}
Created from scratch
fork 0 forks
view 19 views

Browse more Codebits