Jump to content
Sign in to follow this  
  • entries
    3
  • comments
    0
  • views
    233

Battleship Sim

MarklHarrison9

541 views

Small Battleship Simulator in JavaScript

BS.png.c9f99d618658439ff46f305f636e8ac3.png

above is the UI that i decided to use. you have 9 spots for yourself and the AI. At the start you pick 3 spots to be your ships.

Each spot is numbered 1-9 and at the start of the document the CPU picks both where it wants it's ships and where it is going to fire.

the code i use to randomly set where it will guess is

var nums = [1,2,3,4,5,6,7,8,9],
    cpuguess = [],
    i = nums.length,
    j = 0;

while (i--) {
    j = Math.floor(Math.random() * (i+1));
    cpuguess.push(nums[j]);
    nums.splice(j,1);
}

This sets an array filled with every possible slot, picks one number at random, then puts it into an array. 

Since the player and cpu play back and forth until one of them runs out of ships this lets the CPU guess each space once in a randomized order.

The Cpu uses the same type of code as above to pick where it wants it's 3 ships making a list of 9 and picking 3 at random by filling another array.

When you pick a spot that doesn't have a boat i use the code below.

function missed(pew){
console.log("pew = "+pew);
if (pew == 1) {
document.getElementById('A1').style.visibility = 'hidden';
} else if(pew == 2){
document.getElementById('A2').style.visibility = 'hidden';
}else if(pew == 3){
document.getElementById('A3').style.visibility = 'hidden';
}else if(pew == 4){
document.getElementById('B1').style.visibility = 'hidden';
}else if(pew == 5){
document.getElementById('B2').style.visibility = 'hidden';
}else if(pew == 6){
document.getElementById('B3').style.visibility = 'hidden';
}else if(pew == 7){
document.getElementById('C1').style.visibility = 'hidden';
}else if(pew == 8){
document.getElementById('C2').style.visibility = 'hidden';
}else if(pew == 9){
document.getElementById('C3').style.visibility = 'hidden';
}

This will check to see what button you pressed and run it into the function with pew being the guess.

it runs this else if statement to check where you shot and hide the button. A similar code is used for the cpu as well.

gameover() and victory() functions are the same code with the last line being different.

function gameover(){
document.getElementById('A1').style.visibility = 'hidden';
document.getElementById('A2').style.visibility = 'hidden';
document.getElementById('A3').style.visibility = 'hidden';
document.getElementById('B1').style.visibility = 'hidden';
document.getElementById('B2').style.visibility = 'hidden';
document.getElementById('B3').style.visibility = 'hidden';
document.getElementById('C1').style.visibility = 'hidden';
document.getElementById('C2').style.visibility = 'hidden';
document.getElementById('C3').style.visibility = 'hidden';
document.getElementById('D1').style.visibility = 'hidden';
document.getElementById('D2').style.visibility = 'hidden';
document.getElementById('D3').style.visibility = 'hidden';
document.getElementById('E1').style.visibility = 'hidden';
document.getElementById('E2').style.visibility = 'hidden';
document.getElementById('E3').style.visibility = 'hidden';
document.getElementById('F1').style.visibility = 'hidden';
document.getElementById('F2').style.visibility = 'hidden';
document.getElementById('F3').style.visibility = 'hidden';
document.getElementById("demo").innerHTML = "You lose :(";
}

This function will hide all the buttons and change the element named Demo to read "You lose :(" the victory code is exactly the same but says "You win! ;)".

That's the General idea of how it works.

Whole Code Below.

<!DOCTYPE html>
<html>
<body>

<h3>Battleship</h3>


<p>Click a button to fire
<br>
<id="demo">
</p>
<br>
<input type="button" id="A1" Value="A1" onclick="myFunction(1)"></input>
<input type="button" id="A2" Value="A2" onclick="myFunction(2)"></input>
<input type="button" id="A3" Value="A3" onclick="myFunction(3)"></input><br>
<input type="button" id="B1" Value="B1" onclick="myFunction(4)"></input>
<input type="button" id="B2" Value="B2" onclick="myFunction(5)"></input>
<input type="button" id="B3" Value="B3" onclick="myFunction(6)"></input><br>
<input type="button" id="C1" Value="C1" onclick="myFunction(7)"></input>
<input type="button" id="C2" Value="C2" onclick="myFunction(8)"></input>
<input type="button" id="C3" Value="C3" onclick="myFunction(9)"></input>

<p id="demo"></p>



<p>Your Ships
<br>
</p>

<input type="button" id="D1" Value="D1" onclick="myBoat(1)"></input>
<input type="button" id="D2" Value="D2" onclick="myBoat(2)"></input>
<input type="button" id="D3" Value="D3" onclick="myBoat(3)"></input><br>
<input type="button" id="E1" Value="E1" onclick="myBoat(4)"></input>
<input type="button" id="E2" Value="E2" onclick="myBoat(5)"></input>
<input type="button" id="E3" Value="E3" onclick="myBoat(6)"></input><br>
<input type="button" id="F1" Value="F1" onclick="myBoat(7)"></input>
<input type="button" id="F2" Value="F2" onclick="myBoat(8)"></input>
<input type="button" id="F3" Value="F3" onclick="myBoat(9)"></input>




<script>
//document.getElementById('A1').style.visibility = 'hidden';


document.getElementById("demo").innerHTML = "Bombs Away!";


var nums = [1,2,3,4,5,6,7,8,9],
    cpuguess = [],
    i = nums.length,
    j = 0;

while (i--) {
    j = Math.floor(Math.random() * (i+1));
    cpuguess.push(nums[j]);
    nums.splice(j,1);
}

var TURN=0;
var HP=3;
var EHP=3;


console.log("cpu guesses are = " + cpuguess);

var nums = [1,2,3,4,5,6,7,8,9],
    Eship = [],
    i = nums.length,
    j = 0;

while (i--) {
    j = Math.floor(Math.random() * (i+1));
    Eship.push(nums[j]);
    nums.splice(j,1);
}
console.log(Eship[1]);
console.log(Eship[2]);
console.log(Eship[3]);
var points = 10;
var F= 1;
var maiBoat=[];
maiBoat[0]="Boats";



function playerboatsymbol(xra){
console.log("xra = "+xra);
if (xra == 1) {
document.getElementById('D1').value = "b";
} else if(xra == 2){
document.getElementById('D2').value = "b";
}else if(xra == 3){
document.getElementById('D3').value = "b";
}else if(xra == 4){
document.getElementById('E1').value = "b";
}else if(xra == 5){
document.getElementById('E2').value = "b";
}else if(xra == 6){
document.getElementById('E3').value = "b";
}else if(xra == 7){
document.getElementById('F1').value = "b";
}else if(xra == 8){
document.getElementById('F2').value = "b";
}else if(xra == 9){
document.getElementById('F3').value = "b";
}
}



function myBoat(mB){
if (F<4){
console.log("F= "+F);
maiBoat[F] = mB;
console.log("my boats = " +maiBoat);
playerboatsymbol(mB);
}
if (F==3){document.getElementById("demo").innerHTML = "Boats set lets go!";
}
F ++
}



function rename(int){
console.log("int = "+int);
if (int == 1) {
document.getElementById('A1').value = "x";
} else if(int == 2){
document.getElementById('A2').value = "x";
}else if(int == 3){
document.getElementById('A3').value = "x";
}else if(int == 4){
document.getElementById('B1').value = "x";
}else if(int == 5){
document.getElementById('B2').value = "x";
}else if(int == 6){
document.getElementById('B3').value = "x";
}else if(int == 7){
document.getElementById('C1').value = "x";
}else if(int == 8){
document.getElementById('C2').value = "x";
}else if(int == 9){
document.getElementById('C3').value = "x";
}
}

function missed(pew){
console.log("pew = "+pew);
if (pew == 1) {
document.getElementById('A1').style.visibility = 'hidden';
} else if(pew == 2){
document.getElementById('A2').style.visibility = 'hidden';
}else if(pew == 3){
document.getElementById('A3').style.visibility = 'hidden';
}else if(pew == 4){
document.getElementById('B1').style.visibility = 'hidden';
}else if(pew == 5){
document.getElementById('B2').style.visibility = 'hidden';
}else if(pew == 6){
document.getElementById('B3').style.visibility = 'hidden';
}else if(pew == 7){
document.getElementById('C1').style.visibility = 'hidden';
}else if(pew == 8){
document.getElementById('C2').style.visibility = 'hidden';
}else if(pew == 9){
document.getElementById('C3').style.visibility = 'hidden';
}
}
function gameover(){
document.getElementById('A1').style.visibility = 'hidden';
document.getElementById('A2').style.visibility = 'hidden';
document.getElementById('A3').style.visibility = 'hidden';
document.getElementById('B1').style.visibility = 'hidden';
document.getElementById('B2').style.visibility = 'hidden';
document.getElementById('B3').style.visibility = 'hidden';
document.getElementById('C1').style.visibility = 'hidden';
document.getElementById('C2').style.visibility = 'hidden';
document.getElementById('C3').style.visibility = 'hidden';
document.getElementById('D1').style.visibility = 'hidden';
document.getElementById('D2').style.visibility = 'hidden';
document.getElementById('D3').style.visibility = 'hidden';
document.getElementById('E1').style.visibility = 'hidden';
document.getElementById('E2').style.visibility = 'hidden';
document.getElementById('E3').style.visibility =


0 Comments


Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!