I have 95% completed my Player vs Player tic tac toe game. In the future I will add a nice AI and will set conditions for when someone wins.
Right now I'm just looking for the best way to refresh my game without having the page reload in pure JavaScript. I have a button at the bottom of my page and basically once it clicks I want whatever is on my board to be totally cleared and the game starts over.
They would click on this at the bottom of my HTML
<center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>
Here's my tic tac toe game so far in case anyone wants to look over it :)
Trying really hard to become really good at HTML/CSS/JavaScript >< So hard!
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tic-Tac-Toe</title>
<link rel="stylesheet" href="css/styles.css" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/font-awesome-animation.min.css">
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon" />
</head>
<header>
<h1>Tic-Tac-Toe </h1>
</header>
<body>
<!--Table for Tic Tac Toe-->
<table id="mytable" class="grid">
<tr>
<td id="field1" class="square"></td>
<td id="field2" class="square v"></td>
<td id="field3" class="square"></td>
</tr>
<tr>
<td id="field3" class="square h"></td>
<td id="field4" class="square v h"></td>
<td id="field5" class="square h"></td>
</tr>
<tr>
<td id="field4" class="square"></td>
<td id="field5" class="square v"></td>
<td id="field6" class="square"></td>
</tr>
</table>
<!--Refresh Icon/Start Game Over-->
<div id="refreshIcon">
<center><div id="refresh" class="fa fa-refresh faa-spin animated-hover fa-5x"></div></center>
</div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
JavaScript
var xTick = "../images/x-tick.png";
var oTick = "../images/o-tick.png";
var bg = null;
var counter = 0;
var memoryMove = [];
var refreshButton = document.getElementById('refresh');
var listRows = document.getElementById("mytable").rows;
/** detecting rows */
for(var i = 0; i < listRows.length;i++){
/** detecting cells */
for(var x = 0; x < listRows[i].cells.length; x++){
listRows[i].cells[x].setAttribute("data-cell",i.toString()+x.toString());
listRows[i].cells[x].addEventListener("click",function(){
var move = this.getAttribute("data-cell");
console.log(move);
if (memoryMove.indexOf(move) === -1){
memoryMove.push(move);
if (counter === 0){
bg = xTick;
} else {
if(counter % 2 === 0){
bg = xTick;
} else {
bg = oTick;
}
}
counter++;
this.style.background="url('./images/"+bg+"') center center no-repeat";
} else {
alert('Stop trying to cheat!');
}
/** Start a new game */
refreshButton.addEventListener('click', function() {
// alert("Refresh Results");
})
});
}
}
on clicking the refresh button just remove the background image of each td. Also reset your counter and memoryMove.
refreshButton.addEventListener('click', function() {
for (var i = 1;i <= 9;i++) {
document.getElementById("field"+i).style.background="none";
counter = 0;
memoryMove = [];
}
});
Updated in pure javascript:
for (var i = 1;i <= 9;i++) {
var fieldId = "field" + i; //ex 'field1'
document.getElementById(fieldId).value = "";
}
Related
I was working on my Etch-a-Sketch project and there is an issue with populateBoard() function, it seems only the rows are generated, why?
HTML:
<!DOCTYPE html>
<head>
<title>Sketchpad</title>
<link rel="stylesheet" a href="reset.css">
<link rel="stylesheet" a href="styles.css">
</head>
<body>
<div class="flex-conainer">
<div class="title"><h1>Sketchpad</h1></div>
<div class="content">
<div class="board"></div>
<div class="buttons">
<button>Black</button>
<button>White</button>
<button>Random</button>
<button>Reset</button>
</div>
<input type="text" placeholder="Size of Board" value="16" onchange="changeSize(this.value)"/>
<button>Set size:</button>
</div>
</div>
</body>
<script src="Main.js"></script>
</html>
Javascript:
function populateBoard(size) {
let board = document.querySelector('.board');
board.style.gridTemplateColumns = `repeat(${size}, 1fr;)`;
board.style.gridTemplateRows = `repeat(${size}, 1fr)`;
for (let i =0 ; i<256; i++) {
let square = document.createElement('div');
square.style.backgroundColor = 'blue';
board.insertAdjacentElement('beforeend', square);
};
}
function changeSize(input) {
populateBoard(input);
};
CSS:
.board {
width: 500px;
height: 500px;
display: grid;
}
Overall I want my grid to be interactive and to be able o change once I input a size.
i made slider that changes images every 1 sec, but i cant figure how to make the if statement loop, the images just stays on the first slide i tried to loop with while and for but i cant make it work. Can you please help me :)
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
document.getElementById("currentImage").src = images[counter-2];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
<script src="script.js"></script>
</body>
When counter>=2 condition, you are not changing the counter variable.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var counter = 0;
setInterval (function() {
if (counter >= 2 ){
counter -= 1; // modify the counter variable
document.getElementById("currentImage").src = images[counter];
}
else if (images[0]){
document.getElementById("currentImage").src = images[++counter];
};
}, 1000);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
I have created this snippet so you can have as many images as you want in the array.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg"];
let count = 0;
const displayImage = () => {
document.getElementById("currentImage").src = images[count];
if( count >= (images.length-1)) count = 0;
else count++;
}
setInterval( displayImage, 1000 );
<img src="" id="currentImage" />
This is a working example, using recursion.
const images = [
"https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg",
"https://lemag.nikonclub.fr/wp-content/uploads/2017/07/08.jpg",
"https://www.yourvalleynews.co.uk/wp-content/uploads/2018/03/pic-outside-1080x675.jpg",
];
var sliderElement = document.getElementById("currentImage");
(function slider(counter, len){
sliderElement.src = images[counter];
counter ++;
if(len === counter){
counter = 0;
}
setTimeout(slider, 1000, counter, len);
})(0, images.length);
<head>
<meta charset="utf-8">
<title>Intitulé de ma page</title>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<style>
</style>
</head>
<body>
<div style="width: 60%; margin: auto;">
<div id="exemple1" name="slide" style="display: flex;">
<!-- image container -->
<img src="https://www.travelercar.com/wp-content/uploads/2016/04/4a36e314016aa914f203ea6b7d579dc6_large.jpeg" id="currentImage" height="300" />
</div>
</div>
</body>
I am trying to build a very simple points counter on a website. The numbers and button press aren't showing up in the main HTML. I am somewhat familiar with javascript, but not how to implement it onto a website. Help?
I've tried putting the javascript in a tag in the header, but it still doesn't show up.
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/public_html/script.js"></script>
</head>
<body>
<div id="main-container">
<div class="health-box" id="opponent-health">
<img src="https://www.trzcacak.rs/myfile/full/208-2086167_runic-letter-othalan-rune-odal.png">
<div class="health-counter" id="opponent-health-counter">
</div>
<div class="health-adjust health-minus" id="opponent-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="opponent-health-plus">
▲
</div>
</div>
<div class="health-box" id="your-health">
<p> LP </p>
<div class="health-counter" id="your-health-counter">
</div>
<div class="health-adjust health-minus" id="your-health-minus">
▼
</div>
<div class="health-adjust health-plus" id="your-health-plus">
▲
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
//Variable set-up
var opponentHealth = 0;
var yourHealth = 10;
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
//Health adjust code
$(".health-adjust").click(function() {
if (this.id == "opponent-health-minus" && opponentHealth > 0) {
opponentHealth -= 1;
}
else{
opponentHealth -= 0;
};
if (this.id == "your-health-minus") {
yourHealth -= 1;
};
if (this.id == "opponent-health-plus" && opponentHealth < yourHealth) {
opponentHealth += 1;
}
else{
opponentHealth += 0;
};
if (this.id == "your-health-plus") {
yourHealth += 1;
};
$("#opponent-health-counter").html(opponentHealth);
$("#your-health-counter").html(yourHealth);
});
});
Here is a link to a Pen where the programming works as expected. https://codepen.io/iph33r/full/LYPpOJm
Since your script uses Jquery, you need to load that first.
<head>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/public_html/script.js"></script>
</head>
I am making a clicker game. When I display the moneyCurrent variable I get incorrect numbers. The numbers don't actually join. This is in the sellTech() function.
If you want the full project go to enter link description here techClicker
This is on repl.it and that is not the problem.
I have tried parseInt() and Number() and the numbers keep adding like
they are strings.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Tech Clicker</title>
<link rel="shortcut icon" type="image/png" href="IMAGE"/>
<link href="techClicker.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tech Clicker</h1>
<h2 id="moneyValueText">$0</h2>
<div id="ccDiv">
<input id="ccMakeButton"type="image" src="IMAGE"
onclick="ccClickFunc()" width="50"
height="50">
<p> </p>
<button id="ccSellButton"onclick="sellTech()">Sell Computer
Chips</button>
<h4 id="ccCounter">Computer Chips = </h4>
</div>
<div id="usbDiv">
<input id="mcMakeButton"type="image"
src="IMAGE"
onclick="mcClickFunc()" width="38"
height="26">
<p> </p>
<button id="mcSellButton"onclick="sellTech()">Sell Memory Chips</button>
<h4 id="mcCounter">Memory Chips = </h4>
</div>
<script src="clickGainFunc.js"></script>
<script src="sellTechV2.js"></script>
</body>
</html>
var ccPrice = 0.25
var ccSellAmount
var mcPrice = 0.35;
var mcSellAmount;
//JAVASCRIPT
function sellTech(){
ccSellAmount = cc * ccPrice;
mcSellAmount = mc * mcPrice;
moneyCurrent = ccSellAmount + mcSellAmount;
document.getElementById("moneyValueText").innerHTML = moneyCurrent;
cc = 0;
mc = 0;
document.getElementById("ccCounter").innerHTML = "Computer Chips = " + cc;
document.getElementById("mcCounter").innerHTML = "Memory Chips = " + mc;
}
I expected that the numbers would add up and not drop in value.
This is a little hard to explain so go to
https://techclicker--beraemirkoklu.repl.co/
and then click on the computer chip once. And then sell it. 0.25. If you sell 2, 0.5. if you sell 1, again .25. I am trying to fix that too.
I am new to programming as to stack overflow so be easy on me. i am making an tic tac toe game and haven't found a to mark a random_cell and append and image to it so if you could help it will be of most help. jquery are also welcome
var x_or_o = ["x","o"];
var user = x_or_o[Math.floor(Math.random()*x_or_o.length)];
function random_cell(){
var cells = ["zero","one","two"];
return ("#"+cell[Math.floor(Math.random()*cells.length)]+"_"+cell[Math.floor(Math.random()*cells.length)]);
}
function clink(id_ele){
$(id_ele).one(("click",water(id_ele)));
}
function water(id_ele){
$(id_ele).click(function(){
if (user == "x"){
$(id_ele).append("<img src =img/x.png>").addClass("done-x");
if (! random_cell.hasClass()){
$(random_cell).append("<img src =img/o.png>");
}
else{
random_cell();
water(id_ele);
}
}
else if (user == "o"){
$(id_ele).append("<img src =img/o.png>").addClass("done-o");
}
}
)
}
clink("#zero_zero");
clink("#zero_one");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header>
<h1>TIC TAC TOE</h1>
</header>
<section>
<table>
<tr>
<td id = "zero_zero"></td>
<td id = "one_zero"></td>
<td id = "two_zero"></td>
</tr>
<tr>
<td id = "zero_one"></td>
<td id = "one_one"></td>
<td id = "one_two"></td>
</tr>
<tr>
<td id = "two_zero"></td>
<td id = "two_one"></td>
<td id = "two_two"></td>
</tr>
</table>
</section>
<footer>
<p>© Kunal Mehta 2016</p>
<img src="img/facebook.png" alt="">
<img src="img/twitter.png" alt="">
</footer>
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You can simply use Math.random() to create numbers and then build a little translation for your ids, as you did. But note that your current ids makes no sense. They're inconsistent. I've changed them a bit to be usefull.
Also note, that your array in random_cell is called cells, but in your random creation you uses cell. This will not work too.
function random_cell() {
var cells = ["zero","one","two"];
var length = cells.length;
return ("#" + cells[Math.floor(Math.random()*length)] +
"_" + cells[Math.floor(Math.random()*length)]);
}
setInterval(function() {
var id = random_cell();
$("td").removeClass("highlight");
$(id).addClass("highlight")
}, 500);
.highlight {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id="zero_zero">1</td>
<td id="one_zero">2</td>
<td id="two_zero">3</td>
</tr>
<tr>
<td id="zero_one">4</td>
<td id="one_one">5</td>
<td id="two_one">6</td>
</tr>
<tr>
<td id="zero_two">7</td>
<td id="one_two">8</td>
<td id="two_two">9</td>
</tr>
</table>
Your random_cell function does the following:
return ("onecell");
Thats wrong syntax. Do:
return "onecell";
The next mistake:
$(random_cell).append(...);
Random_cell is not a Variable !!! Its a function. Do:
$( random_cell() ).append(...);
Mistake No.3:
The clink function adds an eventlistener that adds an eventlistener. So you have to click it twice to make it work...
Mistake No.4
<img src=img.jpg >
Thats wrong HTML. Do:
<img src='img.jpg'>