Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Feb 2017
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Tic-tac-toe first project. Please need you opinion.

    Hello, Everyone.
    After 1 year straggle trying to understand Javascript.

    I coded my first project Tic tac toe.
    Would anyone would be so kind just to take a look https://codepen.io/MrSergey/pen/ERKvjB
    and pint out biggest problems with my code?

    I would be vert grateful.
    Thank you for your time!

  2. #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    19,519
    Thanks
    219
    Thanked 2,706 Times in 2,682 Posts
    People are often reluctant to open links offered by newcomers to the forum. Security, you know.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  3. #3
    New to the CF scene
    Join Date
    Feb 2017
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok. Thank for your comment. I am posting javascript part here.

    Code:
    "use strict";
    
    let mainDiv = document.getElementById("game");
    let div = document.querySelectorAll("div.cell");
    let message = document.getElementById("message");
    let reset = document.getElementById("restart");
    let statsFirstP = document.getElementById("statistics").children[0];
    let statsSecondeP = document.getElementById("statistics").children[1];
    let statsDraw = document.getElementById("statistics").children[2];
    
    
    let players = {
    	playerOne: "X",
    	playerTwo: "0",
    	playerOneScore: 0,
    	playerTwoScore: 0,
    	draw: 0,
    	playerOneActive: true,
    	playerTwoActive: false,
    	stepCount: 0
    };
    
    
    //Adds event listeners to all divs
    for(var i = 0; i < div.length; i++){
    div[i].addEventListener('click', playerMove);
    	
     };
    
    //Chnages divs background color on mouseover
    mainDiv.addEventListener('mouseover', addGray);
    
    function addGray(e){
    	
    	e.target.classList.add("gray"); 
    	
    	};
    
    
       
    function playerMove(e){
    	
    	if(!e.target.innerHTML && players.playerOneActive){
    	e.target.innerHTML = players.playerOne;
    	message.innerHTML = `${"Your move"} ${players.playerTwo}`;
    	players.playerOneActive = false;
    	players.playerTwoActive = true;
    	players.stepCount ++;
    		
    		if(checkWinner()){
    		players.playerOneScore ++;
    		message.innerHTML = `${"Winner is  : X"}`;
    		statsFirstP.innerHTML = `${"Player X: "} ${players.playerOneScore}`;
    		pause();
    			
    		}else if(players.stepCount>= 9){
    			
    			players.draw ++;
    			message.innerHTML = `${"It is a draw"}`;
    			statsDraw.innerHTML = `${"It is a draw"} ${players.draw}`;
    			pause();
    		}
    		
    	}else if(!e.target.innerHTML && players.playerTwoActive){
    	e.target.innerHTML = players.playerTwo;
    	message.innerHTML = `${"Your move"} ${players.playerOne}`;
    	players.playerOneActive = true;
    	players.playerTwoActive = false;
    	players.stepCount ++;
    		
    	if(checkWinner()){
    	players.playerTwoScore ++;
    	message.innerHTML = `${"Winner is : O"}`;
    	statsSecondeP.innerHTML = `${"Player O: "} ${players.playerTwoScore}`;
    	pause();
    		
    	 }else if(players.stepCount>= 9){
    		players.draw ++;
    		message.innerHTML = `${"It is a draw"}`;
    		statsDraw.innerHTML = players.draw;
    		pause();
    	}
    		
    	}
    }
    
    
    //Start a new game
    reset.addEventListener('click', newGame);
    
    
    function newGame(e){
    	players.stepCount = 0;
    	players.playerOneActive = true;
    	players.playerTwoActive = false;
    	message.innerHTML = `${"Your move"} ${players.playerOne}`;
    	for(var i = 0; div.length; i++){
        div[i].addEventListener('click', playerMove);
    	div[i].addEventListener('mouseover', addGray);
    	div[i].textContent = "";
    	}
    	
    	
    }
    
    
    //Check for the winner
    function checkWinner(){
    	
    	let winComb = [
    		[0,1,2],
    		[3,4,5],
    		[6,7,8],
    		[0,3,6],
    		[1,4,7],
    		[2,5,8],
    		[0,4,8],
    		[2,4,6],
    	];
    	
    for(var i = 0; i< winComb.length; i++ ){
    		let wc = winComb[i];
    		
    		if( div[wc[0]].innerHTML != "" && div[wc[0]].innerHTML == div[wc[1]].innerHTML &&
    		  div[wc[1]].innerHTML == div[wc[2]].innerHTML   ){
    			return true;
    		} 
    	} return false;
    
    }
    
    
    //Pause the game
    function pause(){
    	for(var i = 0; i<div.length; i++){
    	
    	div[i].removeEventListener('mouseover', function (e){
    	e.target.classList.add("gray"); 
    	
    	 });
    
    
    div[i].removeEventListener('click', playerMove);
    	
    };
    	
    }
    Last edited by vinyl-junkie; 06-05-2018 at 03:10 PM. Reason: added code tags

  4. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,611
    Thanks
    34
    Thanked 1,029 Times in 1,026 Posts
    Loaded the program and ran it. Nothing happened! Is that because you didn't include the HTML/CSS??

    OK. Went to the PEN and got the HTML/CSS and things work great!

    I live by the quote
    If it ain't broke, don't fix it.
    I would add background color to the winning row to show the win and I'd make the announcement of the winner a little more bolder.
    Just my thoughts.
    Last edited by sunfighter; 06-05-2018 at 09:08 PM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  5. #5
    New to the CF scene
    Join Date
    Feb 2017
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for your comment.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •