Tic Tac Toe – Code for your Website and Marketing

Are you looking to build a simple game? Simple games help in marketing. Today, I will show you how a simple game like Tic Tac Toe can help to boost your

The Game is really simple to play. Admin can use this game for booth and events. You may want to get players to battle with each other to pull crowd to your booth or kiosk.

How to use the game for marketing?

  1. Promote the game to the visitors around your expo
  2. Interested players can sign up leaving you the name, contact number, email and etc. 
  3. The winner will be given a 50% discount for products they purchase or get a prize from your shop.
  4. This will help you gather personal data for email and WhatsApp marketing.

If you intend to use this game for marketing, you give us a call. We are able to integrate 

    1. Registration form to gather data
    2. Link the registration form to email marketing such as Sendinblue (Email marketing software)

Check out games by clicking here 

Keen to do something extra and drive more traffic to your booth. Wait no further. We are able to assist you. The code below does not come with a ‘registration form’ or ’email marketing’ integration. If you need our help, you can give us a call to assist you. There will be charges for customisation.

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
    <link rel=”stylesheet” href=”tictactoe.css”>
    <title>Tic Tac Toe</title>
</head>
<body>
<div class=”intro”>
    <h1 style=”color:white”><mark> Tic Tac Toe </mark></h1>
</div>
<div class=”end”>
    <p id=”updateplayer”>Player 1 starts the game</p>
</div>
    <div class=”container”>
        <div id=”one” class=”item”>
            <p class=”symbol”></p>
        </div>
        <div id=”two” class=”item”>
            <p class=”symbol”></p>
        </div>
        <div id=”three” class=”item”>
            <p class=”symbol”></p>
        </div>
    </div>
    <div class=”container”>
        <div id=”four” class=”item”>
            <p class=”symbol”></p>
        </div>
        <div id=”five” class=”item”>
            <p class=”symbol”></p>
        </div>
        <div id= ‘six’ class=”item”>
            <p class=”symbol”></p>
        </div>
    </div>
    <div class=”container”>
        <div id=”seven” class=”item”>
            <p class=”symbol”></p>
        </div>
        <div id=’eight’ class=”item”>
            <p class=”symbol”></p>
        </div>
        <div id=’nine’ class=”item”>
            <p class=”symbol”></p>
        </div>
    </div>
    <div id=”popup”>
        <h1>Game Over</h1>
        <button class=”button-52″ id=”restart” role=”button”>Restart</button>
    </div>
</body>
<script>
    let player = 1;
    let player1=[]; // king
    let player2=[]; // bishop
    let board =[];
    let result = 0;
    let shootsound = new Audio(‘/laser.wav’)
    let japanmusic = new Audio(‘/japanmusic.wav’);
    const items = document.getElementsByClassName(‘item’);
    const symbol = document.getElementsByClassName(‘symbol’);
    const updateplayer = document.getElementById(‘updateplayer’);
    const popup = document.getElementById(‘popup’);
    const restart = document.getElementById(‘restart’);
    restart.addEventListener(‘click’,()=>{
        window.location.reload();
    })
    for(let x = 0; x < items.length; x++){
        items[x].addEventListener(‘click’,()=>{
            //Logic
            //***********
            if(result==0){
                japanmusic.play();
            }
            if(result==1){
                console.log(‘We have found our winner’);
                items.removeEventlistener();
            }
            if(board[x]==null){
                console.log(`Box : ${x} just filled`);
            if(player==1){
            player1[x]=2;
            symbol[x].innerHTML = ‘<img class =”image” src=”salmon sushi.png” alt=””>’;
            board[x]=1;
            player =2;
            shootsound.play();
            console.log(player1[x]);
            checkwinner(player);
            }
        else{
            player2[x]=10;
            symbol[x].innerHTML =  ‘<img class =”image” src=”fish sushi.png” alt=””>’;
            player = 1;
            board[x]=1;
            shootsound.play();
            console.log(player2[x]=10);
            checkwinner(player);
        }
          }
          else{
            console.log(`Box : ${x} Cannot Pick This `);
          }
        });
    }
    function checkwinner(whichplayer){
        if(whichplayer==1){
            updateplayer.innerHTML= ‘Player 1 turns’;
        }
        if(whichplayer==2){
            updateplayer.innerHTML= ‘Player 2 turns’;
        }
    // player 1 logic
      if(player1[0] + player1[1] + player1[2]==6){
          console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 1 Wins’;
          popup.style.display=’block’;
          result = 1;
      }
      if(player1[3] + player1[4] + player1[5]==6){
        console.log( `${whichplayer} WINS`);
        updateplayer.innerHTML= ‘Player 1 Wins’;
        popup.style.display=’block’;
        result = 1;
      }
      if( player1[6] + player1[7] + player1[8]==6){
        console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 1 Wins’;
          popup.style.display=’block’;
          result = 1;
      }
      if( player1[0] + player1[4] + player1[8]==6){
        console.log( `${whichplayer} WINS`);
         updateplayer.innerHTML= ‘Player 1 Wins’;
         popup.style.display=’block’;
         result = 1;
      }
     if(player1[2] + player1[4] + player1[6]==6){
        console.log( `${whichplayer} WINS`);
         updateplayer.innerHTML= ‘Player 1 Wins’;
         popup.style.display=’block’;
         result = 1;
     }
     if(player1[0] + player1[3] + player1[6]==6){
        console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 1 Wins’;
          popup.style.display=’block’;
          result = 1;
     }
     if(player1[1] + player1[4] + player1[7]==6){
        console.log( `${whichplayer} WINS`);
         updateplayer.innerHTML= ‘Player 1 Wins’;
         popup.style.display=’block’;
         result = 1;
     }
     if(player1[2] + player1[5] + player1[8]==6){
        console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 1 Wins’;
          popup.style.display=’block’;
          result = 1;
     }
     // player 2 logic
     if(player2[0] + player2[1] + player2[2]==30){
        console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 2 Wins’;
          popup.style.display=’block’;
          result = 1;
      }
      if(player2[3] + player2[4] + player2[5]==30){
        console.log( `${whichplayer} WINS`);
        updateplayer.innerHTML= ‘Player 2 Wins’;
        popup.style.display=’block’;
        result = 1;
      }
      if( player2[6] + player2[7] + player2[8]==30){
        console.log( `${whichplayer} WINS`);
        updateplayer.innerHTML= ‘Player 2 Wins’;
        result = 1;
      }
      if( player2[0] + player2[4] + player2[8]==30){
        console.log( `${whichplayer} WINS`);
        updateplayer.innerHTML= ‘Player 2 Wins’;
        popup.style.display=’block’;
      }
     if(player2[2] + player2[4] + player2[6]==30){
        console.log( `${whichplayer} WINS`);
         updateplayer.innerHTML= ‘Player 2 Wins’;
         popup.style.display=’block’;
         result = 1;
     }
     if(player2[0] + player2[3] + player2[6]==30){
        console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 2 Wins’;
          popup.style.display=’block’;
          result = 1;
     }
     if(player2[1] + player2[4] + player2[7]==30){
        console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 2 Wins’;
          popup.style.display=’block’;
          result = 1;
     }
     if(player2[2] + player2[5] + player2[8]==30){
        console.log( `${whichplayer} WINS`);
          updateplayer.innerHTML= ‘Player 2 Wins’;
          popup.style.display=’block’;
          result = 1;
     }
     return result;
  }
</script>
</html>