Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HITSHIP</title>
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<link rel="stylesheet" type="text/css" href="css/win.css">
	</head>
	<body>
	
	<div class="main">
	<h1 class="main-heading">
    <span class="main-heading-primary">HITSHIP</span>
    <span class="main-heading-secondary">sink the ships!</span>
	</h1>
	</div>
	
	
	<div id="spielBrett"></div>
	<div id="popup"></div>
	
	<section id="navigation">

		<p>Klicke auf die Map, um jedes Schiff zu versenken!</p>
		<p>Es müssen 17 hit's (Treffer) gelandet werden um das Spiel zu schaffen</p>
		<ul>
				  <li>Carrier     - 5 hits</li>
				  <li>Battleship  - 4 hits</li>
				  <li>Destroyer   - 3 hits</li>
				  <li>Submarine   - 3 hits</li>
				  <li>Patrol Boat - 2 hits</li>
		</ul>
		<button id="mischen" class="btn">Start Game</button>
		<button id="reset" class="btn">Restart</button>
		<div id="infofeld">
			<p id="torpedos"></p>
			<p id="infos"></p>
		</div>
	
	</section>
	<script src="js/hitship.js" async></script>
	</body>
</html>
              
            
!

CSS

              
                @charset "utf-8";
/* CSS Document für das Spiel Versenk die Schiffe von Thomas Egner*/

*    {
      box-sizing: border-box;
     }


body {
	font-size:16px;
    margin:0 auto;
    width: 100vw;
	height: 100vh;
    max-width: 950px;
	font-family:'Helvetica', 'Arial', 'Sans-Serif';
	background-repeat:no-repeat;
	overflow:hidden;
}

h1 {
    font-size: 3em;
    font-family:'Georgia', 'serif';
	text-align:center;
	color: rgba(2, 12, 29, 0.53);
}

/*Dies ist die Kopfanimation*/

.main {
	position:relative;
	left:50%;
	top:5%;
    transform: translate(-50%, -50%);
}

.main-heading {
  color: #777;
  text-transform: uppercase;
}

.main-heading-primary {
  display: block;
  font-size: 5.0rem;
  font-weight: 400;
  letter-spacing: 0.55em;
  animation: moveInLeft 1s ease-out;
}

.main-heading-secondary {
  font-family: sans-serif;
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  letter-spacing: 1.20em;
  color: rgba(61, 200, 255, 1);
  animation: moveInRight 1s ease-out;
}

@keyframes moveInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }
  
  80% {
    transform: translateX(10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

@keyframes moveInRight {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }
  
  80% {
    transform: translateX(-10px);
  }
  
  100% {
    opacity: 1;
    transform: translate(0);
  }
}

/*Section Bereich*/

section {
	float:right;
	width: 40%;
}

#infofeld {
	position:relative;
	display:block;
	height: 12em;
	border-radius: 5px;
	background-color: rgba(2, 12, 29, 0.53);
	padding: 1em;
	color:white;
}
#infofeld p {color:white;}

p, button, input {
    font-size: 1em;
    line-height: 1.4em;
    color: #333;
	margin-bottom:1em;
}

#spielBrett {
	z-index: 10;
	float:left;
	position:relative;
	margin:1em auto 2em auto;
	width:500px;
	height:500px;
}
#spielBrett #letternumber div{
	z-index: 20;
	position:absolute;
	background-color:#fff;
	border: 1px solid #ddd;
	width:45px;
	height:45px;
	color: rgba(2, 12, 29, 0.53);
	opacity: 80%:
}
#sperrbox {
	position:absolute;
	background-color: rgba(255, 255, 255, 0.8);
	width: 500px;
	height: 500px;
	z-index:9999;
}

#out {
	background-color: #000000;
	text-align:center;
	padding-top:0.1em;
	font-size: 2em;
    font-family:'Helvetica', 'Arial', 'Sans-Serif';
}

#spielBrett #spielBereich div {
	z-index: 30;
	position:absolute;
	-webkit-box-sizing: border-box; /* Safari 3.0 - 5.0, Chrome 1 - 9, Android 2.1 - 3.x */
	-moz-box-sizing: border-box;    /* Firefox 1 - 28 */
	box-sizing: border-box;         /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */
	background-color: #f6f8f9; /* Old browsers */
	border: 1px solid #ddd;
	width:45px;
	height:45px;
}

/* Button Design */
#mischen{
float: left;
}

.grey {
color: rgba(2, 12, 29, 0.53);
}

button,
button::after {
  -webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
  -o-transition: all 0.3s;
	transition: all 0.3s;
}

button {
  background: none;
  border: 2px solid #fff;
  border-radius: 5px;
  color: black;
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0.5em 1em;
  position: relative;
  text-transform: uppercase;
  height:3em;
}

button::before,
button::after {
  background: black;
  content: '';
  position: absolute;
  z-index: -1;
}

button:hover {
  color: rgba(61, 200, 255, 1);
}

/* Btn Class */
.btn {
  overflow: hidden;
}

.btn::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(30deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.btn:hover:after {
  height: 100%;
  width: 135%;
}

.buttonst {
float:left;
margin-top:5%;
margin-left:5%;
background-color:white;
}

/*Schwierigkeits Bereich*/

.mode {
position: absolute;
	z-index: 500;
	width: 400px;
	height: 100px;
	border-radius: 5px;
	left: 0;
	right: 0;
	margin: 0 auto;
	background-color: rgba(2, 12, 29, 0.53);
}

#remove {
display: none;
}
#popup{
	position: relative;
}

#windiv{
	position: absolute;
	z-index: 600;
	width: 865px;
	border-radius: 5px;
	height: 400px;
	left: 0;
	right: 0;
	margin: 0 auto;
	background-color: rgba(2, 12, 29, 0.53);
}
#outtext{
	color: white;
	text-align: center;
	margin-top:5rem;
}


.firework {
	margin: 25px auto 25px;
	width: 15px;
	height: 15px;
	border-radius: 100%;
	animation: firework ease-out infinite 2s;
}

#win {
	font-size: 3em;
	font-family:'Georgia', 'serif';
	text-align:center;
	color: white;
	margin-top:3em;
	font-weight: 400;
	letter-spacing: 0.6em;
}

@keyframes firework {
	10% {
		box-shadow: 
      -10px 10px yellow,
      10px 10px yellow,
      10px -10px yellow,
      -10px -10px yellow,
      
      -10px 0px white,
      10px 0px white,
      0px -10px white,
      0px 10px white;
	}
  100% {
    box-shadow: 
      -80px 80px 10px rgba(255,255,255,0),
      80px 80px 10px rgba(255,255,255,0),
      80px -80px 10px rgba(255,255,255,0),
      -80px -80px 10px rgba(255,255,255,0),
    
      -100px 0px 10px rgba(255,255,255,0),
      100px 0px 10px rgba(255,255,255,0),
      0px -100px 10px rgba(255,255,255,0),
      0px 100px 10px rgba(255,255,255,0);
  }
}

.center {
	position: absolute;
	margin: auto;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}

#position {
 	position: absolute;
	margin: auto;
	left: 20%;
	top: 5%;
	bottom: 0;
	right: 0;
  animation: firework ease-out infinite 1.5s;
}

#position2 {
 	position: absolute;
	margin: auto;
	left: 40%;
	top: 5%;
	bottom: 0;
  animation: firework ease-out infinite 2.5s;
}

/*Fade out / Fade in CSS*/
.show {
  z-index:100;
  opacity: 1;
  transition: opacity 3000ms;
}

.hide {
  z-index:1;
  opacity: 0;
  transition: opacity 3000ms;
}
              
            
!

JS

              
                "use strict";

// Spielfeld erzeugen
		// Alle Reihen und Zeilen für das Spielbrett Spieler 1
		var rows = 10;
		var cols = 10;
		var ocols = 11;
		var orows = 10;
		var squareSize = 45;

		// Auswahl des divcontainers spielBrett
		var spielBrettContainer = document.getElementById("spielBrett");
		// Das Spielbrett erzeugen mit Anordnung
		
		// outer Spielfeld
		var outdiv = document.createElement("div");
		spielBrettContainer.appendChild(outdiv);
		outdiv.id = 'letternumber';
		
		var letter = [ "","A","B","C","D","E","F","G","H","I","J" ]
		for (var x = 0; x < ocols; x++) 
		{
		var outsquarecol = document.createElement("div");
		outdiv.appendChild(outsquarecol);

				// Jedem Element eine id geben im Bezug auf Ihre Anordnung, Bsp. "outf0-10"
				outsquarecol.id = 'out';		

				// Die Div Elemente die Buchstaben zuweisen
				outsquarecol.innerHTML = (letter[x]);
				
				// Setzen der Koordinaten eines jeden Rasterfeldes: Vervielfachen der aktuellen Zeilen- oder Spaltennummer 
				var leftPosition = x * squareSize;			
				
				// Positioniertung über CSS mit absolute
				outsquarecol.style.top = topPosition + 'px';
				outsquarecol.style.left = leftPosition + 'px';
		
		}
		var numbers = ["1","2","3","4","5","6","7","8","9","10"]
		for ( var y = 0; y < orows ; y++) 
		{
		var outsquarerow = document.createElement("div");
		outdiv.appendChild(outsquarerow);

				// Jedem Element eine id geben im Bezug auf Ihre Anordnung, Bsp. "outf0-10"
				outsquarerow.id = 'out';

				// Die Div Elemente die Buchstaben zuweisen
				outsquarerow.innerHTML = (numbers[y]);
				
				// Setzen der Koordinaten eines jeden Rasterfeldes: Vervielfachen der aktuellen Zeilen- oder Spaltennummer 
				var topPosition = y * squareSize;		
				
				// Positioniertung über CSS mit absolute
				outsquarerow.style.top = topPosition + squareSize + 'px';
				//outsquare.style.left = leftPosition + 'px';	
		
		}
		
		// inner Spielfeld
		var indiv = document.createElement("div");
		spielBrettContainer.appendChild(indiv);
		indiv.id = 'spielBereich';
		
		for ( var i = 0; i < cols; i++) 
			{
				for (var j = 0; j < rows; j++) 
				{
					// Div html dokumente erzeugen
					var square = document.createElement("div");
					indiv.appendChild(square);

					// Jedem Element eine id geben im Bezug auf Ihre Anordnung, Bsp. "s00"
					square.id = 's' + j + i;		
					// Setzen der Koordinaten eines jeden Rasterfeldes: Vervielfachen der aktuellen Zeilen- oder Spaltennummer 
					var topPosition = j * squareSize;
					var leftPosition = i * squareSize;			
					
					// Positioniertung über CSS mit absolute
					square.style.top = topPosition + squareSize + 'px';
					square.style.left = leftPosition + squareSize + 'px';						
				}
			}

		
		//Es müssen 17 hit's (Treffer) gelandet werden um das Spiel zu schaffen
		//var	Carrier = 5 hits [1,1,1,1,1]
		//var	Battleship = 4 hits [1,1,1,1]
		//var	Destroyer = 3 hits [1,1,1]
		//var Submarine = 3 hits [1,1,1]
		//var	PatrolBoat = 2 hits [1,1]

		
		// Variablen für die Torpedos bzw. Klicks
		
		var hitCount = 0;
		var torpedoCount = 0;
		var torpedobox = document.getElementById("torpedos");
		var infobox = document.getElementById("infos")
		var torpedos = 50; // So Viel Schuss hat der Spieler
		var curentPlacement;
		var random10 = Math.floor((Math.random() * 10) + 1);
		
		function trefferverf() {
		var textschuss = document.createTextNode("Du hast " + torpedos + " Treffer zur Verfügung");
		torpedobox.appendChild(textschuss);
		}
         
			
		// Aufbau der Flotte	
		
		/* Mit disem 2D Array werden die Schiffe platziert. Dieses muss noch
		automatisiert und zur manuellen Eingabe der Schiffe gebracht werden.
		Random Knopf für das durchmischen.

		   0 = empty, 1 = Schiffsteil, 2 = gesunkenes Schiffsteil, 3 = daneben geschossen
		*/
		var spielBrett = [
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0],
						[0,0,0,0,0,0,0,0,0,0]
						]
			
		// Random Knopf
		
		var mischen = document.getElementById("mischen").addEventListener("click", mixen);
		
		//-------Erschafft die Flotte------------
		
		// Generiert die Schiffkoordinaten für die fünf Schiffe als Objekte in einem Array mit Länge https://javascript.info/class
		// wenn ein Platz schon belegt ist, wird ein neues Schiff generiert.
		class Ship 
		{
		  constructor(name, start, end) 
		  {
			this.name = name;
			this.spots = [];
			//console.log(this.spots);
			if (start.y == end.y) 
			{
			  for (var i = start.x; i <= end.x; i++) 
			  {
				this.spots.push({x: i, y: start.y});
			  }
			} else 
			{
			  for (var i = start.y; i <= end.y; i++) 
			  {
				this.spots.push({x: start.x, y: i})
			  }
			}
		  }
		}
		
		
		function mixen()
		{

			// Startet die Schwierigkeitsgradsauswahl
			changehard()
			
			// Generiert die Schiffe und setzt sie in ein Array

			//Array mit 10 x 10 Feldern
			var self = this;
			this.spielbereich = [];
			for (var i = 0; i < 10; i++) 
			{
			  this.spielbereich.push(new Array(10).fill(0));
			}
			this.ships = [];

			// Random Platzierung und Zuordnung horizontal und vertikal
			// Erstellt ein Array mit x und y koordinaten für ein mögliches Setzen (spots)
			function placeRandom(length) 
			{
				var randomX = -5;
				var randomY = -5;
				while (randomX+length < 0 || randomX+length > 9 || randomY+length < 0 || randomY+length > 9) 
				{
				  randomX = Math.floor(Math.random() * 10); // Random Zahl zwischen 0 und 9
				  randomY = Math.floor(Math.random() * 10);
				}
				var randomDir = Math.random() < 0.5 ? "H" : "V";
				var ship;
				if (randomDir == "V") 
				{
				  ship = new Ship({ship: length+1}, {x: randomX, y: randomY}, {x: randomX, y: randomY+length});
				  
				} else 
				{
				  ship = new Ship({ship: length+1}, {x: randomX, y: randomY}, {x: randomX+length, y: randomY});
				}
				console.log(ship)
				// Prüft ob der Bereich bereits besetzt wurde.
				var spotisValid = true
				ship.spots.forEach(spot => 
				{
				  if (self.spielbereich[spot.x][spot.y] != 0) 
				  {
					spotisValid = false;
				  }
				});

				if (spotisValid) {
				  self.ships.push(ship);
				  ship.spots.forEach(spot => 
				  {
					self.spielbereich[spot.x][spot.y] = 1;
				  });
				}
				return spotisValid;
			}
		
			//Spielbereich wird generiert / Länge wird angerechnet 
			// Merke die Länge der Schiffe von 5,4,3,3,2  muss -1 gesetzt werden.
			var stockShips = [4,3,2,2,1];
			stockShips.forEach(length => 
			{
			  var happened;
			  do 
			  {
				happened = placeRandom(length);
			  } 
			  while (!happened)
			});
			var count = 0;
			this.spielbereich.forEach(row => row.forEach(coord => {
			  if (coord == 1) { count++; }
			}));
			//console.log(this.spielbereich);
			spielBrett = this.spielbereich;
		}
		

		// Erst müssen die Schiffe gesetzt werden Info Meldung
		// Sperrbox
		
		var overdiv = document.createElement("div");
		
		function sperrbox() 
		{
			spielBrettContainer.appendChild(overdiv);
			overdiv.id = 'sperrbox';
			
			overdiv.addEventListener("click", firstShipsInfo);
			
			function firstShipsInfo () 
			{
				infobox.innerHTML = "Bitte starte erst das Spiel";
				infobox.style.color = "#fff533";
				setTimeout(function(){ 
				infobox.innerHTML = "";
				}, 1000);
			}
		}
		document.onload = sperrbox();
		
		// Löscht die SperrBox
		function deletesperr() {
			var exist = document.getElementById("sperrbox")
			if(exist)
			{
			spielBrettContainer.removeChild(overdiv);
			}
			}
		
		// Popupbox Schwierigkeitsgrad
		function changehard()
		{
			var popup = document.getElementById("popup");
			var mode = document.createElement("div");
			popup.appendChild(mode);
			mode.classList.add("mode");
			
			//EasyButton
			var easy = document.createElement("button");
			mode.appendChild(easy);
			easy.classList.add("buttonst");
			var easyt = document.createTextNode("EASY");
			easy.appendChild(easyt);
			easy.addEventListener("click", funkeasy);
			function funkeasy () 
			{
				var modeget = document.getElementById("mode");
				mode.id = 'remove';
				torpedos = 55;
				trefferverf()
				deletesperr()
				document.getElementById('mischen').removeEventListener("click", mixen);
				document.getElementById('mischen').classList.add("grey");
			}
			
			//NormalButton
			var normal = document.createElement("button");
			mode.appendChild(normal);
			normal.classList.add("buttonst");
			var normalt = document.createTextNode("NORMAL");
			normal.appendChild(normalt);
			normal.addEventListener("click", funknormal);
			function funknormal () 
			{
				var modeget = document.getElementById("mode");
				mode.id = 'remove';
				torpedos = 50;
				trefferverf()
				deletesperr()
				document.getElementById('mischen').removeEventListener("click", mixen);
				document.getElementById('mischen').classList.add("grey");
			}
			
			//HardButton
			var hard = document.createElement("button");
			mode.appendChild(hard);
			hard.classList.add("buttonst");
			var hardt = document.createTextNode("HARD");
			hard.appendChild(hardt);
			hard.addEventListener("click", funkhard);
			function funkhard () 
			{
				var modeget = document.getElementById("mode");
				mode.id = 'remove';
				torpedos = 42;
				trefferverf()
				deletesperr()
				document.getElementById('mischen').removeEventListener("click", mixen);
				document.getElementById('mischen').classList.add("grey");
			}
		}
		
		// Reset vom Spiel
		var reset = document.getElementById("reset")
		reset.addEventListener("click", resetgame);
		
		window.onload = function() {
			var reloading = sessionStorage.getItem("reloading");
			if (reloading) {
				sessionStorage.removeItem("reloading");
				mixen();
			}
		}
		
		function resetgame() 
		{
		sessionStorage.setItem("reloading", "true");
		document.location.reload();
		infobox.innerHTML = "ResetGame";
		infobox.style.color = "#fff533";
		}
		
		function reloadwindow()	
		{
		document.location.reload();
		
		function fadeOut(el){
			  el.classList.add('hide');
			  el.classList.remove('show');
			}
			
			fadeOut(windiv);
		}
		
		// Popupscreen beim Gewinnen des Spiels
		function popupscreen() 
		{
		var popup = document.getElementById("popup")
		var windiv = document.createElement("div");
		var firework = document.createElement("div");
		var firework2 = document.createElement("div");
		var headline = document.createElement("h1");
		var text = document.createTextNode("DU HAST GEWONNEN");
		var outtext = document.createElement("p")
		var text2 = document.createTextNode("click me");
		popup.appendChild(windiv);
		windiv.appendChild(firework);
		windiv.appendChild(firework2);
		windiv.appendChild(headline);
		windiv.appendChild(outtext)
		headline.appendChild(text);
		outtext.appendChild(text2);
		firework.classList.add("firework");
		firework2.classList.add("firework");
		firework.id = 'position';
		firework2.id = 'position2';
		headline.id = 'win';
		windiv.id = 'windiv';
		outtext.id = 'outtext';
		windiv.addEventListener("click", reloadwindow);
		windiv = document.getElementById("windiv")
		
		//Scoreeingabe mit Bestenliste noch anfügen
		}

		// onClick Event für jedes div auf dem Spielbrett um damit zu interagieren
		indiv.addEventListener("click", fireTorpedo, false);
		

		// Code um die Torpedos zu verschießen
		function fireTorpedo(mun) 
		{  
		
			if (torpedoCount < torpedos)
			{
			
				// Wenn die div Box geklickt wird, bzw. der Torpedo abgeschossen wird passiert folgendes:
				// Es wird geprüft ob das aktuelle Target schon geklickt wurde.
				if (mun.target !== mun.currentTarget)
				{
					// Extraktion von Zeile und Spalte der ID des HTML -Elements Bsp. "s00" zweiter und dritter wert
					var row = mun.target.id.substring(1,2);
					var col = mun.target.id.substring(2,3);
					//alert("Clicked on row " + row + ", col " + col);
							
					// Wenn der Spieler ein Feld klickt auf dem sich kein Schiff befindet, ändert Farbe
					if (spielBrett[row][col] === 0) 
					{
						mun.target.style.background = '#bbb';
						// er setzt den Wert auf 3 dass angegeben wird, dass er vorbei geschossen hat
						spielBrett[row][col] = 3;
						
					// Wenn der Spieler ein Schiff trifft, ändert Farbe
					} else if (spielBrett[row][col] === 1) 
						{
							mun.target.style.background = 'rgba(61, 200, 255, 1)';
							// er setzt den Wert auf 2 dass angegeben wird, dass er getroffen hat.
							spielBrett[row][col] = 2;
							
							// Zählt die Treffer und Beendet das Spiel
							hitCount++;
							if (hitCount === 17) 
							{
								infobox.innerHTML = "Alle gegnerischen Schiffe wurden ausgeschaltet. Du gewinnst!";
								document.getElementById("infos").style.color = "#fff533";
								popupscreen();
								windiv.classList.add('show');
							}
							//console.log(hitCount);
						
							// Wenn der Spieler auf ein bereits beschossenes Feld klickt info Meldung
						} 	else if (spielBrett[row][col] > 1) 
							{
								infobox.innerHTML = "Verbrauch deine Torpedos nicht, das Feld wurde schon unter Beschuss genommen";
								document.getElementById("infos").style.color = "#fff533";
								setTimeout(function(){ 
								infobox.innerHTML = "";
								}, 1000);
								
							}
						mun.stopPropagation();
				}
				
			}
			else
				{
					infobox.innerHTML = "Schade, du hast verloren";
					document.getElementById("infos").style.color = "#fff533";
				}
            	
            torpedoCount++;
            var torpedoabzug = torpedos - torpedoCount;
			//console.log (torpedoabzug);
			if (torpedoabzug > 0)
			{
				torpedobox.innerHTML = "Du hast noch " + torpedoabzug + " Treffer zur Verfügung"
			}
			else 
			{
				torpedobox.innerHTML = "Du hast noch " + 0 + " Treffer zur Verfügung"
			}
			//Finde die Schiffe und bezeichne Sie
			//Wird noch gemacht
			function Shipcount()
			{
				console.log(ship.name);
			}
    }
              
            
!
999px

Console