• entries
3
0
• views
258

This blog will be all my adventures through JavaScript with slight descriptions of key concepts of the code i do.

## Calculator

This is a simple Calculator You set up the first variable the operator you want to use and the 2nd variable. After that you hit Try it and it will run though a switch case to check which operator to use and plug in both variables to calculate.   switch(y){ case "+": A= parseInt(x) + parseInt(z); break; case "-": A=x-z; break; case "*": A=x*z; break; case "%": A=x%z; break; case "/": A=x/z; break; default: A="Please insert a proper operator"; } It will then change the element demo to the answer. document.getElementById("demo").innerHTML = A; See the whole code below <!DOCTYPE html> <html> <body> <h3>A Simple Cow</h3> <input type="number" id="myText1" value="0"> <input type="text" id="myText2" value="Operator"> <input type="number" id="myText3" value="0"> <p>simple Cow.</p> <button onclick="myFunction()">Try it</button> <p id="demo"></p> <script> function myFunction() { var x = document.getElementById("myText1").value; var y = document.getElementById("myText2").value; var z = document.getElementById("myText3").value; var A; switch(y){ case "+": A= parseInt(x) + parseInt(z); break; case "-": A=x-z; break; case "*": A=x*z; break; case "%": A=x%z; break; case "/": A=x/z; break; default: A="Please insert a proper operator"; } document.getElementById("demo").innerHTML = A; } </script> </body> </html>

## Battleship Sim

Small Battleship Simulator in JavaScript 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 =

## Slot machine

This program emulates a slot machine.    using math it will pick a random number 3 times and put it into a variable X Y and Z. var x = Math.floor((Math.random() * 5) + 1); var y = Math.floor((Math.random() * 5) + 1); var z = Math.floor((Math.random() * 5) + 1); If you hit the win button you are guaranteed a win, Lose button you're guaranteed a loss. this was for debugging purposes. Winning causes you to win your bid amount x 2. function win(){ var bid = document.getElementById("BidID").value; document.getElementById("res").innerHTML = "yay you win"; Coins= Coins+bid*2; document.getElementById("coinID").innerHTML = "Total Coins = " +Coins; document.getElementById("payout").innerHTML = "Won "+bid*2+" coins!!!"; } It will also display "yay you win" in the element named res. Whole Code can be found below. <!DOCTYPE html> <html> <body> <input type="number" id="BidID" value="0"> <p>Click the button to start slots match 2 and you win yay~.</p> <button onclick="myFunction()">Click me</button> <button onclick="win()">Win</button> <button onclick="lose()">Lose</button> <p id="coinID"> <p id="res"> <p id="demo"> <p id="demo2"> <p id="demo3"> <p id="payout"></p> <script> var Coins=100; document.getElementById("coinID").innerHTML = "Total Coins = " +Coins; function myFunction() { var x = Math.floor((Math.random() * 5) + 1); var y = Math.floor((Math.random() * 5) + 1); var z = Math.floor((Math.random() * 5) + 1); var bid = document.getElementById("BidID").value; if(bid > 0 && bid< Coins){ document.getElementById("demo").innerHTML = x; document.getElementById("demo2").innerHTML = y; document.getElementById("demo3").innerHTML = z; if(x==y || x==z || y==z){ var bid = document.getElementById("BidID").value; document.getElementById("res").innerHTML = "yay you win"; Coins= Coins+bid*2; document.getElementById("coinID").innerHTML = "Total Coins = " +Coins; document.getElementById("payout").innerHTML = "Won "+bid*2+" coins!!!"; } else { var bid = document.getElementById("BidID").value; document.getElementById("res").innerHTML = "Boo you lose"; Coins= Coins-bid; document.getElementById("coinID").innerHTML = "Total Coins = " +Coins; document.getElementById("payout").innerHTML = "lost "+bid+" coins"; } } else{ document.getElementById("res").innerHTML = "you have to bid more then 0 - . -; or less then max coins"; } } function win(){ var bid = document.getElementById("BidID").value; document.getElementById("res").innerHTML = "yay you win"; Coins= Coins+bid*2; document.getElementById("coinID").innerHTML = "Total Coins = " +Coins; document.getElementById("payout").innerHTML = "Won "+bid*2+" coins!!!"; } function lose(){ var bid = document.getElementById("BidID").value; document.getElementById("res").innerHTML = "Boo you lose"; Coins= Coins-bid; document.getElementById("coinID").innerHTML = "Total Coins = " +Coins; document.getElementById("payout").innerHTML = "lost "+bid+" coins"; } </script> </body> </html>