Battle Naoghts Vs Crosses in Javascript
up vote
0
down vote
favorite
This simple game tries to solve the problem of a game that often end in a lock. It does so by providing the players with Xs and Os with superpowers. With great powers come possible disadvantages. For example the X- can delete an O already on the board, but because the effect contains a random element, it is just as likely to remove one of your own pieces. Therefore, a player must manage risk, in addition to other normal strategies.
The game is a two player game at the moment and the interface is very simple. But it works. A few minor bugs I haven't figured how fix don't affect the gameplay. An example is that the "Player 'x' has won the game" alert fires off before the game piece is drawn on the board. I have also hard coded the coordinates for game winning checks. I am sure there is an easier (algorithmic) way of doing that.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Noughts and Crosses</title>
<link rel="stylesheet" href="tictac.css">
<script src="xoxo.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="home">
<div class="tittle">
<h1>O vs. X</h1>
</div>
<div class="row">
<div id="0_0" onclick="place(this)"></div>
<div id="1_0" onclick="place(this)"></div>
<div id="2_0" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_1" onclick="place(this)"></div>
<div id="1_1" onclick="place(this)"></div>
<div id="2_1" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_2" onclick="place(this)"></div>
<div id="1_2" onclick="place(this)"></div>
<div id="2_2" onclick="place(this)"></div>
</div>
<div id="PlayerChoise">
<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">
</div>
<div class="instructions">
<p>+ battles a random adjacent opponent (loss will give box to oponent)</p>
<p>- deletes a random adjacent nought or cross</p>
<p>÷ trades places with random adjacent opponent</p>
<p>* clones current box into random empty adjacent box</p>
</div>
</div>
</body>
</html>
CSS
.home {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 98vh;
padding: 0;
margin: none;
}
.row {
display: flex;
flex-direction: row;
}
.row div {
padding: 10px;
border: 1px solid;
height: 30px;
width: 30px;
}
Javascript
var currentPlayer = "O";
var currentType = "Noughts";
var currentAction = "picking";
var coordList = ["0_0", "1_0", "2_0", "0_1", "1_1", "2_1", "0_2", "1_2", "2_2"];
function place(box) {
//Verifies the box is empty
if(box.innerText != "") return;
//insert object current object into box
box.innerText = currentPlayer.substring(0,1);
//rules for alternatives
//+ Battle Rule
if(currentPlayer.substring(1,2) == "+") {
var adjacents = checkAdjecent("full", box.id);
var attackOpt = ;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
attackOpt.push(adjacents[i])
}
}
var fightingNumber = Math.floor(Math.random() * 6) + 1;
if(attackOpt.length != 0){
var opponentBox = attackOpt[Math.floor(Math.random() * attackOpt.length)];
if(fightingNumber => 4){
document.getElementById(opponentBox).innerHTML = box.innerText;
}
else {
box.innerText = document.getElementById(opponentBox).innerHTML
}
}
}
//- Remove Rule
if(currentPlayer.substring(1,2) == "-") {
var delOpt = checkAdjecent("full", box.id);
if(delOpt.length != 0){
var delBox = delOpt[Math.floor(Math.random() * delOpt.length)];
document.getElementById(delBox).innerText = "";
}
}
//÷ Trade Places Rule
if(currentPlayer.substring(1,2) == "÷") {
var adjacents = checkAdjecent("full", box.id);
var tradeOpt =;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
tradeOpt.push(adjacents[i])
}
}
if(tradeOpt.length != 0){
var tradeBox = tradeOpt[Math.floor(Math.random() * tradeOpt.length)];
var contents = document.getElementById(tradeBox).innerText;
document.getElementById(tradeBox).innerText = box.innerText;
box.innerText = contents;
}
}
//* Dupicate Rule
if(currentPlayer.substring(1,2) == "*") {
var cloneOpt = checkAdjecent("empty", box.id);
if(cloneOpt.length != 0){
var cloneBox = cloneOpt[Math.floor(Math.random() * cloneOpt.length)];
document.getElementById(cloneBox).innerText = box.innerText;
}
}
// alert(byThisBox)
//Flips and prepares for next player
currentType == "Noughts" ? currentType = "Crosses": currentType = "Noughts";
currentType == "Crosses" ? document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player Two? (X)" id="PlayerOne" onclick="showOptions()">':
document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">';
//alert(parseInt(box.id.substring(2,3))+3);
//Checks for Winning Conditions
//Box 1
if(box.id == "0_0"){
alert(box.id)
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("0_0","0_1","0_2");
}
//Box 2
if(box.id == "1_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("1_0","1_1","1_2");
}
//Box 3
if(box.id == "2_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("2_0","2_1","2_2");
}
//Box 4
if(box.id == "0_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("0_0","0_1","0_2");
}
//Box 5
if(box.id == "1_1"){
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("1_0","1_1","1_2");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("0_1","1_1","2_1");
}
//Box 6
if(box.id == "2_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("2_0","2_1","2_2");
}
//Box 7
if(box.id == "0_2"){
checkGameBoard("0_0","0_1","0_2");
checkGameBoard("0_2","1_1","2_0");
checkGameBoard("0_2","1_2","2_2");
}
//Box 8
if(box.id == "1_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("1_0","1_1","1_2");
}
//Box 9
if(box.id == "2_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("2_2","1_1","0_0");
checkGameBoard("2_0","2_1","2_2");
}
currentAction = "picking";
}
function checkAdjecent(status, currentBox) {
adjecentEmpty = ;
adjecentFull = ;
currentX = parseInt(currentBox.substring(0,1));
currentY = parseInt(currentBox.substring(2,3));
if(currentX == 0) {
currentXOptions = [currentX, currentX + 1];
}
if(currentX == 1) {
currentXOptions = [currentX, currentX + 1, currentX -1];
}
if(currentX == 2) {
currentXOptions = [currentX, currentX - 1];
}
if(currentY == 0) {
currentYOptions = [currentY, currentY + 1];
}
if(currentY == 1) {
currentYOptions = [currentY, currentY + 1, currentY -1];
}
if(currentY == 2) {
currentYOptions = [currentY, currentY - 1];
}
adjacentTiles = ;
for(x=0; x<currentXOptions.length; x++){
for(y=0; y<currentYOptions.length; y++){
adjacentTiles.push(currentXOptions[x] + "_" + currentYOptions[y]);
}
}
for(item=0; item<adjacentTiles.length; item++){
if(adjacentTiles[item] != currentBox) {
if(document.getElementById(adjacentTiles[item]).innerText != ""){
adjecentFull.push(adjacentTiles[item])
}
else {
adjecentEmpty.push(adjacentTiles[item])
}
}
}
if(status == "full"){
return adjecentFull;
}
else {
return adjecentEmpty;
}
}
function checkGameBoard(firstCoord,secondCoord,thirdCoord) {
var first = document.getElementById(firstCoord).innerText;
var second = document.getElementById(secondCoord).innerText;
var thrid = document.getElementById(thirdCoord).innerText;
if(first == "") return;
if(first == second && first == thrid){
alert(currentPlayer.substring(0,1) + " is the winner")
location.reload()
// for(i=0; i<coordList; i++) {
// document.getElementById(coordList[i]).innerText = currentPlayer.substring(0,1);
// }
}
}
//+ attacks a random adjacent oppenent peice ÷ trades places with random adjacent opopnet * places a second copy on empty adjacent square
var noughts = ["O", "O+","O-", "O÷", "O*"]
var crosses = ["X", "X+", "X-", "X÷", "X*"]
function showOptions() {
if(currentType == "Noughts") {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<noughts.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ noughts[i] + '" onclick="chooseThis('' + noughts[i] + '')">';
//alert(document.getElementById("Player1").innerHTML)
}
}
else {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<crosses.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ crosses[i] + '" onclick="chooseThis('' + crosses[i] + '')">';
}
}
}
function chooseThis(item) {
if(currentAction == "picking") {
currentPlayer = item;
if(currentType == "Noughts") {
for(index=0; index<noughts.length; index++){
if(noughts[index]== item){
noughts.splice(index,1)
}
}
}
else {
for(index=0; index<crosses.length; index++){
if(crosses[index]== item){
crosses.splice(index,1)
}
}
}
showOptions();
currentAction = "playing";
//alert(noughts);
}
}
javascript beginner html game
asked 11 mins ago
Gabe Ruiz
11
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
This simple game tries to solve the problem of a game that often end in a lock. It does so by providing the players with Xs and Os with superpowers. With great powers come possible disadvantages. For example the X- can delete an O already on the board, but because the effect contains a random element, it is just as likely to remove one of your own pieces. Therefore, a player must manage risk, in addition to other normal strategies.
The game is a two player game at the moment and the interface is very simple. But it works. A few minor bugs I haven't figured how fix don't affect the gameplay. An example is that the "Player 'x' has won the game" alert fires off before the game piece is drawn on the board. I have also hard coded the coordinates for game winning checks. I am sure there is an easier (algorithmic) way of doing that.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Noughts and Crosses</title>
<link rel="stylesheet" href="tictac.css">
<script src="xoxo.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="home">
<div class="tittle">
<h1>O vs. X</h1>
</div>
<div class="row">
<div id="0_0" onclick="place(this)"></div>
<div id="1_0" onclick="place(this)"></div>
<div id="2_0" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_1" onclick="place(this)"></div>
<div id="1_1" onclick="place(this)"></div>
<div id="2_1" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_2" onclick="place(this)"></div>
<div id="1_2" onclick="place(this)"></div>
<div id="2_2" onclick="place(this)"></div>
</div>
<div id="PlayerChoise">
<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">
</div>
<div class="instructions">
<p>+ battles a random adjacent opponent (loss will give box to oponent)</p>
<p>- deletes a random adjacent nought or cross</p>
<p>÷ trades places with random adjacent opponent</p>
<p>* clones current box into random empty adjacent box</p>
</div>
</div>
</body>
</html>
CSS
.home {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 98vh;
padding: 0;
margin: none;
}
.row {
display: flex;
flex-direction: row;
}
.row div {
padding: 10px;
border: 1px solid;
height: 30px;
width: 30px;
}
Javascript
var currentPlayer = "O";
var currentType = "Noughts";
var currentAction = "picking";
var coordList = ["0_0", "1_0", "2_0", "0_1", "1_1", "2_1", "0_2", "1_2", "2_2"];
function place(box) {
//Verifies the box is empty
if(box.innerText != "") return;
//insert object current object into box
box.innerText = currentPlayer.substring(0,1);
//rules for alternatives
//+ Battle Rule
if(currentPlayer.substring(1,2) == "+") {
var adjacents = checkAdjecent("full", box.id);
var attackOpt = ;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
attackOpt.push(adjacents[i])
}
}
var fightingNumber = Math.floor(Math.random() * 6) + 1;
if(attackOpt.length != 0){
var opponentBox = attackOpt[Math.floor(Math.random() * attackOpt.length)];
if(fightingNumber => 4){
document.getElementById(opponentBox).innerHTML = box.innerText;
}
else {
box.innerText = document.getElementById(opponentBox).innerHTML
}
}
}
//- Remove Rule
if(currentPlayer.substring(1,2) == "-") {
var delOpt = checkAdjecent("full", box.id);
if(delOpt.length != 0){
var delBox = delOpt[Math.floor(Math.random() * delOpt.length)];
document.getElementById(delBox).innerText = "";
}
}
//÷ Trade Places Rule
if(currentPlayer.substring(1,2) == "÷") {
var adjacents = checkAdjecent("full", box.id);
var tradeOpt =;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
tradeOpt.push(adjacents[i])
}
}
if(tradeOpt.length != 0){
var tradeBox = tradeOpt[Math.floor(Math.random() * tradeOpt.length)];
var contents = document.getElementById(tradeBox).innerText;
document.getElementById(tradeBox).innerText = box.innerText;
box.innerText = contents;
}
}
//* Dupicate Rule
if(currentPlayer.substring(1,2) == "*") {
var cloneOpt = checkAdjecent("empty", box.id);
if(cloneOpt.length != 0){
var cloneBox = cloneOpt[Math.floor(Math.random() * cloneOpt.length)];
document.getElementById(cloneBox).innerText = box.innerText;
}
}
// alert(byThisBox)
//Flips and prepares for next player
currentType == "Noughts" ? currentType = "Crosses": currentType = "Noughts";
currentType == "Crosses" ? document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player Two? (X)" id="PlayerOne" onclick="showOptions()">':
document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">';
//alert(parseInt(box.id.substring(2,3))+3);
//Checks for Winning Conditions
//Box 1
if(box.id == "0_0"){
alert(box.id)
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("0_0","0_1","0_2");
}
//Box 2
if(box.id == "1_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("1_0","1_1","1_2");
}
//Box 3
if(box.id == "2_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("2_0","2_1","2_2");
}
//Box 4
if(box.id == "0_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("0_0","0_1","0_2");
}
//Box 5
if(box.id == "1_1"){
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("1_0","1_1","1_2");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("0_1","1_1","2_1");
}
//Box 6
if(box.id == "2_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("2_0","2_1","2_2");
}
//Box 7
if(box.id == "0_2"){
checkGameBoard("0_0","0_1","0_2");
checkGameBoard("0_2","1_1","2_0");
checkGameBoard("0_2","1_2","2_2");
}
//Box 8
if(box.id == "1_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("1_0","1_1","1_2");
}
//Box 9
if(box.id == "2_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("2_2","1_1","0_0");
checkGameBoard("2_0","2_1","2_2");
}
currentAction = "picking";
}
function checkAdjecent(status, currentBox) {
adjecentEmpty = ;
adjecentFull = ;
currentX = parseInt(currentBox.substring(0,1));
currentY = parseInt(currentBox.substring(2,3));
if(currentX == 0) {
currentXOptions = [currentX, currentX + 1];
}
if(currentX == 1) {
currentXOptions = [currentX, currentX + 1, currentX -1];
}
if(currentX == 2) {
currentXOptions = [currentX, currentX - 1];
}
if(currentY == 0) {
currentYOptions = [currentY, currentY + 1];
}
if(currentY == 1) {
currentYOptions = [currentY, currentY + 1, currentY -1];
}
if(currentY == 2) {
currentYOptions = [currentY, currentY - 1];
}
adjacentTiles = ;
for(x=0; x<currentXOptions.length; x++){
for(y=0; y<currentYOptions.length; y++){
adjacentTiles.push(currentXOptions[x] + "_" + currentYOptions[y]);
}
}
for(item=0; item<adjacentTiles.length; item++){
if(adjacentTiles[item] != currentBox) {
if(document.getElementById(adjacentTiles[item]).innerText != ""){
adjecentFull.push(adjacentTiles[item])
}
else {
adjecentEmpty.push(adjacentTiles[item])
}
}
}
if(status == "full"){
return adjecentFull;
}
else {
return adjecentEmpty;
}
}
function checkGameBoard(firstCoord,secondCoord,thirdCoord) {
var first = document.getElementById(firstCoord).innerText;
var second = document.getElementById(secondCoord).innerText;
var thrid = document.getElementById(thirdCoord).innerText;
if(first == "") return;
if(first == second && first == thrid){
alert(currentPlayer.substring(0,1) + " is the winner")
location.reload()
// for(i=0; i<coordList; i++) {
// document.getElementById(coordList[i]).innerText = currentPlayer.substring(0,1);
// }
}
}
//+ attacks a random adjacent oppenent peice ÷ trades places with random adjacent opopnet * places a second copy on empty adjacent square
var noughts = ["O", "O+","O-", "O÷", "O*"]
var crosses = ["X", "X+", "X-", "X÷", "X*"]
function showOptions() {
if(currentType == "Noughts") {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<noughts.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ noughts[i] + '" onclick="chooseThis('' + noughts[i] + '')">';
//alert(document.getElementById("Player1").innerHTML)
}
}
else {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<crosses.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ crosses[i] + '" onclick="chooseThis('' + crosses[i] + '')">';
}
}
}
function chooseThis(item) {
if(currentAction == "picking") {
currentPlayer = item;
if(currentType == "Noughts") {
for(index=0; index<noughts.length; index++){
if(noughts[index]== item){
noughts.splice(index,1)
}
}
}
else {
for(index=0; index<crosses.length; index++){
if(crosses[index]== item){
crosses.splice(index,1)
}
}
}
showOptions();
currentAction = "playing";
//alert(noughts);
}
}
javascript beginner html game
asked 11 mins ago
Gabe Ruiz
11
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
This simple game tries to solve the problem of a game that often end in a lock. It does so by providing the players with Xs and Os with superpowers. With great powers come possible disadvantages. For example the X- can delete an O already on the board, but because the effect contains a random element, it is just as likely to remove one of your own pieces. Therefore, a player must manage risk, in addition to other normal strategies.
The game is a two player game at the moment and the interface is very simple. But it works. A few minor bugs I haven't figured how fix don't affect the gameplay. An example is that the "Player 'x' has won the game" alert fires off before the game piece is drawn on the board. I have also hard coded the coordinates for game winning checks. I am sure there is an easier (algorithmic) way of doing that.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Noughts and Crosses</title>
<link rel="stylesheet" href="tictac.css">
<script src="xoxo.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="home">
<div class="tittle">
<h1>O vs. X</h1>
</div>
<div class="row">
<div id="0_0" onclick="place(this)"></div>
<div id="1_0" onclick="place(this)"></div>
<div id="2_0" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_1" onclick="place(this)"></div>
<div id="1_1" onclick="place(this)"></div>
<div id="2_1" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_2" onclick="place(this)"></div>
<div id="1_2" onclick="place(this)"></div>
<div id="2_2" onclick="place(this)"></div>
</div>
<div id="PlayerChoise">
<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">
</div>
<div class="instructions">
<p>+ battles a random adjacent opponent (loss will give box to oponent)</p>
<p>- deletes a random adjacent nought or cross</p>
<p>÷ trades places with random adjacent opponent</p>
<p>* clones current box into random empty adjacent box</p>
</div>
</div>
</body>
</html>
CSS
.home {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 98vh;
padding: 0;
margin: none;
}
.row {
display: flex;
flex-direction: row;
}
.row div {
padding: 10px;
border: 1px solid;
height: 30px;
width: 30px;
}
Javascript
var currentPlayer = "O";
var currentType = "Noughts";
var currentAction = "picking";
var coordList = ["0_0", "1_0", "2_0", "0_1", "1_1", "2_1", "0_2", "1_2", "2_2"];
function place(box) {
//Verifies the box is empty
if(box.innerText != "") return;
//insert object current object into box
box.innerText = currentPlayer.substring(0,1);
//rules for alternatives
//+ Battle Rule
if(currentPlayer.substring(1,2) == "+") {
var adjacents = checkAdjecent("full", box.id);
var attackOpt = ;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
attackOpt.push(adjacents[i])
}
}
var fightingNumber = Math.floor(Math.random() * 6) + 1;
if(attackOpt.length != 0){
var opponentBox = attackOpt[Math.floor(Math.random() * attackOpt.length)];
if(fightingNumber => 4){
document.getElementById(opponentBox).innerHTML = box.innerText;
}
else {
box.innerText = document.getElementById(opponentBox).innerHTML
}
}
}
//- Remove Rule
if(currentPlayer.substring(1,2) == "-") {
var delOpt = checkAdjecent("full", box.id);
if(delOpt.length != 0){
var delBox = delOpt[Math.floor(Math.random() * delOpt.length)];
document.getElementById(delBox).innerText = "";
}
}
//÷ Trade Places Rule
if(currentPlayer.substring(1,2) == "÷") {
var adjacents = checkAdjecent("full", box.id);
var tradeOpt =;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
tradeOpt.push(adjacents[i])
}
}
if(tradeOpt.length != 0){
var tradeBox = tradeOpt[Math.floor(Math.random() * tradeOpt.length)];
var contents = document.getElementById(tradeBox).innerText;
document.getElementById(tradeBox).innerText = box.innerText;
box.innerText = contents;
}
}
//* Dupicate Rule
if(currentPlayer.substring(1,2) == "*") {
var cloneOpt = checkAdjecent("empty", box.id);
if(cloneOpt.length != 0){
var cloneBox = cloneOpt[Math.floor(Math.random() * cloneOpt.length)];
document.getElementById(cloneBox).innerText = box.innerText;
}
}
// alert(byThisBox)
//Flips and prepares for next player
currentType == "Noughts" ? currentType = "Crosses": currentType = "Noughts";
currentType == "Crosses" ? document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player Two? (X)" id="PlayerOne" onclick="showOptions()">':
document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">';
//alert(parseInt(box.id.substring(2,3))+3);
//Checks for Winning Conditions
//Box 1
if(box.id == "0_0"){
alert(box.id)
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("0_0","0_1","0_2");
}
//Box 2
if(box.id == "1_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("1_0","1_1","1_2");
}
//Box 3
if(box.id == "2_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("2_0","2_1","2_2");
}
//Box 4
if(box.id == "0_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("0_0","0_1","0_2");
}
//Box 5
if(box.id == "1_1"){
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("1_0","1_1","1_2");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("0_1","1_1","2_1");
}
//Box 6
if(box.id == "2_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("2_0","2_1","2_2");
}
//Box 7
if(box.id == "0_2"){
checkGameBoard("0_0","0_1","0_2");
checkGameBoard("0_2","1_1","2_0");
checkGameBoard("0_2","1_2","2_2");
}
//Box 8
if(box.id == "1_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("1_0","1_1","1_2");
}
//Box 9
if(box.id == "2_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("2_2","1_1","0_0");
checkGameBoard("2_0","2_1","2_2");
}
currentAction = "picking";
}
function checkAdjecent(status, currentBox) {
adjecentEmpty = ;
adjecentFull = ;
currentX = parseInt(currentBox.substring(0,1));
currentY = parseInt(currentBox.substring(2,3));
if(currentX == 0) {
currentXOptions = [currentX, currentX + 1];
}
if(currentX == 1) {
currentXOptions = [currentX, currentX + 1, currentX -1];
}
if(currentX == 2) {
currentXOptions = [currentX, currentX - 1];
}
if(currentY == 0) {
currentYOptions = [currentY, currentY + 1];
}
if(currentY == 1) {
currentYOptions = [currentY, currentY + 1, currentY -1];
}
if(currentY == 2) {
currentYOptions = [currentY, currentY - 1];
}
adjacentTiles = ;
for(x=0; x<currentXOptions.length; x++){
for(y=0; y<currentYOptions.length; y++){
adjacentTiles.push(currentXOptions[x] + "_" + currentYOptions[y]);
}
}
for(item=0; item<adjacentTiles.length; item++){
if(adjacentTiles[item] != currentBox) {
if(document.getElementById(adjacentTiles[item]).innerText != ""){
adjecentFull.push(adjacentTiles[item])
}
else {
adjecentEmpty.push(adjacentTiles[item])
}
}
}
if(status == "full"){
return adjecentFull;
}
else {
return adjecentEmpty;
}
}
function checkGameBoard(firstCoord,secondCoord,thirdCoord) {
var first = document.getElementById(firstCoord).innerText;
var second = document.getElementById(secondCoord).innerText;
var thrid = document.getElementById(thirdCoord).innerText;
if(first == "") return;
if(first == second && first == thrid){
alert(currentPlayer.substring(0,1) + " is the winner")
location.reload()
// for(i=0; i<coordList; i++) {
// document.getElementById(coordList[i]).innerText = currentPlayer.substring(0,1);
// }
}
}
//+ attacks a random adjacent oppenent peice ÷ trades places with random adjacent opopnet * places a second copy on empty adjacent square
var noughts = ["O", "O+","O-", "O÷", "O*"]
var crosses = ["X", "X+", "X-", "X÷", "X*"]
function showOptions() {
if(currentType == "Noughts") {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<noughts.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ noughts[i] + '" onclick="chooseThis('' + noughts[i] + '')">';
//alert(document.getElementById("Player1").innerHTML)
}
}
else {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<crosses.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ crosses[i] + '" onclick="chooseThis('' + crosses[i] + '')">';
}
}
}
function chooseThis(item) {
if(currentAction == "picking") {
currentPlayer = item;
if(currentType == "Noughts") {
for(index=0; index<noughts.length; index++){
if(noughts[index]== item){
noughts.splice(index,1)
}
}
}
else {
for(index=0; index<crosses.length; index++){
if(crosses[index]== item){
crosses.splice(index,1)
}
}
}
showOptions();
currentAction = "playing";
//alert(noughts);
}
}
javascript beginner html game
asked 11 mins ago
Gabe Ruiz
11
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
This simple game tries to solve the problem of a game that often end in a lock. It does so by providing the players with Xs and Os with superpowers. With great powers come possible disadvantages. For example the X- can delete an O already on the board, but because the effect contains a random element, it is just as likely to remove one of your own pieces. Therefore, a player must manage risk, in addition to other normal strategies.
The game is a two player game at the moment and the interface is very simple. But it works. A few minor bugs I haven't figured how fix don't affect the gameplay. An example is that the "Player 'x' has won the game" alert fires off before the game piece is drawn on the board. I have also hard coded the coordinates for game winning checks. I am sure there is an easier (algorithmic) way of doing that.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Noughts and Crosses</title>
<link rel="stylesheet" href="tictac.css">
<script src="xoxo.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div class="home">
<div class="tittle">
<h1>O vs. X</h1>
</div>
<div class="row">
<div id="0_0" onclick="place(this)"></div>
<div id="1_0" onclick="place(this)"></div>
<div id="2_0" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_1" onclick="place(this)"></div>
<div id="1_1" onclick="place(this)"></div>
<div id="2_1" onclick="place(this)"></div>
</div>
<div class="row">
<div id="0_2" onclick="place(this)"></div>
<div id="1_2" onclick="place(this)"></div>
<div id="2_2" onclick="place(this)"></div>
</div>
<div id="PlayerChoise">
<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">
</div>
<div class="instructions">
<p>+ battles a random adjacent opponent (loss will give box to oponent)</p>
<p>- deletes a random adjacent nought or cross</p>
<p>÷ trades places with random adjacent opponent</p>
<p>* clones current box into random empty adjacent box</p>
</div>
</div>
</body>
</html>
CSS
.home {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 98vh;
padding: 0;
margin: none;
}
.row {
display: flex;
flex-direction: row;
}
.row div {
padding: 10px;
border: 1px solid;
height: 30px;
width: 30px;
}
Javascript
var currentPlayer = "O";
var currentType = "Noughts";
var currentAction = "picking";
var coordList = ["0_0", "1_0", "2_0", "0_1", "1_1", "2_1", "0_2", "1_2", "2_2"];
function place(box) {
//Verifies the box is empty
if(box.innerText != "") return;
//insert object current object into box
box.innerText = currentPlayer.substring(0,1);
//rules for alternatives
//+ Battle Rule
if(currentPlayer.substring(1,2) == "+") {
var adjacents = checkAdjecent("full", box.id);
var attackOpt = ;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
attackOpt.push(adjacents[i])
}
}
var fightingNumber = Math.floor(Math.random() * 6) + 1;
if(attackOpt.length != 0){
var opponentBox = attackOpt[Math.floor(Math.random() * attackOpt.length)];
if(fightingNumber => 4){
document.getElementById(opponentBox).innerHTML = box.innerText;
}
else {
box.innerText = document.getElementById(opponentBox).innerHTML
}
}
}
//- Remove Rule
if(currentPlayer.substring(1,2) == "-") {
var delOpt = checkAdjecent("full", box.id);
if(delOpt.length != 0){
var delBox = delOpt[Math.floor(Math.random() * delOpt.length)];
document.getElementById(delBox).innerText = "";
}
}
//÷ Trade Places Rule
if(currentPlayer.substring(1,2) == "÷") {
var adjacents = checkAdjecent("full", box.id);
var tradeOpt =;
for(i=0; i<adjacents.length; i++) {
if(document.getElementById(adjacents[i]).innerText != currentPlayer.substring(0,1)
&& document.getElementById(adjacents[i]).innerText != "") {
tradeOpt.push(adjacents[i])
}
}
if(tradeOpt.length != 0){
var tradeBox = tradeOpt[Math.floor(Math.random() * tradeOpt.length)];
var contents = document.getElementById(tradeBox).innerText;
document.getElementById(tradeBox).innerText = box.innerText;
box.innerText = contents;
}
}
//* Dupicate Rule
if(currentPlayer.substring(1,2) == "*") {
var cloneOpt = checkAdjecent("empty", box.id);
if(cloneOpt.length != 0){
var cloneBox = cloneOpt[Math.floor(Math.random() * cloneOpt.length)];
document.getElementById(cloneBox).innerText = box.innerText;
}
}
// alert(byThisBox)
//Flips and prepares for next player
currentType == "Noughts" ? currentType = "Crosses": currentType = "Noughts";
currentType == "Crosses" ? document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player Two? (X)" id="PlayerOne" onclick="showOptions()">':
document.getElementById("PlayerChoise").innerHTML = '<input type="button" value="Ready Player One? (O)" id="PlayerOne" onclick="showOptions()">';
//alert(parseInt(box.id.substring(2,3))+3);
//Checks for Winning Conditions
//Box 1
if(box.id == "0_0"){
alert(box.id)
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("0_0","0_1","0_2");
}
//Box 2
if(box.id == "1_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("1_0","1_1","1_2");
}
//Box 3
if(box.id == "2_0"){
checkGameBoard("0_0","1_0","2_0");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("2_0","2_1","2_2");
}
//Box 4
if(box.id == "0_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("0_0","0_1","0_2");
}
//Box 5
if(box.id == "1_1"){
checkGameBoard("0_0","1_1","2_2");
checkGameBoard("1_0","1_1","1_2");
checkGameBoard("2_0","1_1","0_2");
checkGameBoard("0_1","1_1","2_1");
}
//Box 6
if(box.id == "2_1"){
checkGameBoard("0_1","1_1","2_1");
checkGameBoard("2_0","2_1","2_2");
}
//Box 7
if(box.id == "0_2"){
checkGameBoard("0_0","0_1","0_2");
checkGameBoard("0_2","1_1","2_0");
checkGameBoard("0_2","1_2","2_2");
}
//Box 8
if(box.id == "1_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("1_0","1_1","1_2");
}
//Box 9
if(box.id == "2_2"){
checkGameBoard("0_2","1_2","2_2");
checkGameBoard("2_2","1_1","0_0");
checkGameBoard("2_0","2_1","2_2");
}
currentAction = "picking";
}
function checkAdjecent(status, currentBox) {
adjecentEmpty = ;
adjecentFull = ;
currentX = parseInt(currentBox.substring(0,1));
currentY = parseInt(currentBox.substring(2,3));
if(currentX == 0) {
currentXOptions = [currentX, currentX + 1];
}
if(currentX == 1) {
currentXOptions = [currentX, currentX + 1, currentX -1];
}
if(currentX == 2) {
currentXOptions = [currentX, currentX - 1];
}
if(currentY == 0) {
currentYOptions = [currentY, currentY + 1];
}
if(currentY == 1) {
currentYOptions = [currentY, currentY + 1, currentY -1];
}
if(currentY == 2) {
currentYOptions = [currentY, currentY - 1];
}
adjacentTiles = ;
for(x=0; x<currentXOptions.length; x++){
for(y=0; y<currentYOptions.length; y++){
adjacentTiles.push(currentXOptions[x] + "_" + currentYOptions[y]);
}
}
for(item=0; item<adjacentTiles.length; item++){
if(adjacentTiles[item] != currentBox) {
if(document.getElementById(adjacentTiles[item]).innerText != ""){
adjecentFull.push(adjacentTiles[item])
}
else {
adjecentEmpty.push(adjacentTiles[item])
}
}
}
if(status == "full"){
return adjecentFull;
}
else {
return adjecentEmpty;
}
}
function checkGameBoard(firstCoord,secondCoord,thirdCoord) {
var first = document.getElementById(firstCoord).innerText;
var second = document.getElementById(secondCoord).innerText;
var thrid = document.getElementById(thirdCoord).innerText;
if(first == "") return;
if(first == second && first == thrid){
alert(currentPlayer.substring(0,1) + " is the winner")
location.reload()
// for(i=0; i<coordList; i++) {
// document.getElementById(coordList[i]).innerText = currentPlayer.substring(0,1);
// }
}
}
//+ attacks a random adjacent oppenent peice ÷ trades places with random adjacent opopnet * places a second copy on empty adjacent square
var noughts = ["O", "O+","O-", "O÷", "O*"]
var crosses = ["X", "X+", "X-", "X÷", "X*"]
function showOptions() {
if(currentType == "Noughts") {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<noughts.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ noughts[i] + '" onclick="chooseThis('' + noughts[i] + '')">';
//alert(document.getElementById("Player1").innerHTML)
}
}
else {
document.getElementById("PlayerChoise").innerHTML = "";
for(i=0; i<crosses.length; i++) {
document.getElementById('PlayerChoise').innerHTML += '<input type="button" value="'+ crosses[i] + '" onclick="chooseThis('' + crosses[i] + '')">';
}
}
}
function chooseThis(item) {
if(currentAction == "picking") {
currentPlayer = item;
if(currentType == "Noughts") {
for(index=0; index<noughts.length; index++){
if(noughts[index]== item){
noughts.splice(index,1)
}
}
}
else {
for(index=0; index<crosses.length; index++){
if(crosses[index]== item){
crosses.splice(index,1)
}
}
}
showOptions();
currentAction = "playing";
//alert(noughts);
}
}
javascript beginner html game
javascript beginner html game
asked 11 mins ago
Gabe Ruiz
11
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 11 mins ago
Gabe Ruiz
11
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 11 mins ago
Gabe Ruiz
11
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked 11 mins ago
Gabe Ruiz
11
asked 11 mins ago
Gabe Ruiz
11
11
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Gabe Ruiz is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
return StackExchange.using("mathjaxEditing", function () {
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix) {
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
});
});
}, "mathjax-editing");
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "196"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Gabe Ruiz is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f209959%2fbattle-naoghts-vs-crosses-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Gabe Ruiz is a new contributor. Be nice, and check out our Code of Conduct.
draft saved
draft discarded
Gabe Ruiz is a new contributor. Be nice, and check out our Code of Conduct.
Gabe Ruiz is a new contributor. Be nice, and check out our Code of Conduct.
Gabe Ruiz is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Code Review Stack Exchange!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
Use MathJax to format equations. MathJax reference.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f209959%2fbattle-naoghts-vs-crosses-in-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
