Build a Vue.js Bootstrap 4 Tic-Tac-Toe Game in Browser Using HTML5 & TypeScript Full Project For Beginners

  • Post author:
  • Post category:Vue
  • Post comments:0 Comments

 

 

 

App.vue

 

 

<template>
  <main class="d-flex flex-column justify-content-center align-items-center bg-dark">
    <div class="container">
      <div class="row justify-content-center mt-3">
        <div class="col col-6">
          <div class="text-center">
            <div v-if="!winMessage">
              <h1 class="text-info" v-if="isCross">
                Cross True
              </h1>
              <h1 class="text-info" v-if="!isCross">
                Circle True
              </h1>
            </div>
            <div v-else>
              <h1 class="text-warning">
                {{ winMessage.toUpperCase() }}
              </h1>
            </div>
          </div>
          <div class="grid">
            <div 
          v-for="(item, i) in itemArray"
          :key="i"
          @click="handleClick(i)"
          class="card card-body box justify-content-center align-items-center bg-light">
          <Grid :iconname="item"></Grid>
          </div>
          </div>
        </div>
      </div>
      <div class = "d-grid gap-2 col-6 mx-auto">
      <button 
      @click="reloadGame"
      class="btn btn-info btn-lg mt-5 pl-5 pr-5">
        Reset the game
      </button>
    </div>
    </div>
  </main>
</template>

<script>
import Grid from './components/grid.vue'

export default ({
  name: 'App',
  components: { Grid },
  data () {
    return {
      winMessage: "",
      isCross: true,
      itemArray: new Array(9).fill("empty")
    }
  },
  watch: {
    winMessage: function (message){
      if (message) {
        this.showDialog();
      }
    }
  },

  methods: {
    showDialog() {
      alert(this.winMessage)
    },
    handleClick (itemNumber){
      if(this.winMessage) {
        return this.showDialog()
      }

      if(this.itemArray[itemNumber] === 'empty') {
        this.itemArray[itemNumber] = this.isCross ? "cross" : "circle"
        this.isCross = !this.isCross
      }else{
        alert("Already Filled!")
      }

      this.checkWinner()
    },
    checkWinner(){
      //  checking  winner of the game
      if (
        this.itemArray[0] === this.itemArray[1] &&
        this.itemArray[0] === this.itemArray[2] &&
        this.itemArray[0] !== "empty"
      ) {
        this.winMessage = `${this.itemArray[0]} won`;
      } else if (
        this.itemArray[3] !== "empty" &&
        this.itemArray[3] === this.itemArray[4] &&
        this.itemArray[4] === this.itemArray[5]
      ) {
        this.winMessage = `${this.itemArray[3]} won`;
      } else if (
        this.itemArray[6] !== "empty" &&
        this.itemArray[6] === this.itemArray[7] &&
        this.itemArray[7] === this.itemArray[8]
      ) {
        this.winMessage = `${this.itemArray[6]} won`;
      } else if (
        this.itemArray[0] !== "empty" &&
        this.itemArray[0] === this.itemArray[3] &&
        this.itemArray[3] === this.itemArray[6]
      ) {
        this.winMessage = `${this.itemArray[0]} won`;
      } else if (
        this.itemArray[1] !== "empty" &&
        this.itemArray[1] === this.itemArray[4] &&
        this.itemArray[4] === this.itemArray[7]
      ) {
        this.winMessage = `${this.itemArray[1]} won`;
      } else if (
        this.itemArray[2] !== "empty" &&
        this.itemArray[2] === this.itemArray[5] &&
        this.itemArray[5] === this.itemArray[8]
      ) {
        this.winMessage = `${this.itemArray[2]} won`;
      } else if (
        this.itemArray[0] !== "empty" &&
        this.itemArray[0] === this.itemArray[4] &&
        this.itemArray[4] === this.itemArray[8]
      ) {
        this.winMessage = `${this.itemArray[0]} won`;
      } else if (
        this.itemArray[2] !== "empty" &&
        this.itemArray[2] === this.itemArray[4] &&
        this.itemArray[4] === this.itemArray[6]
      ) {
        this.winMessage = `${this.itemArray[2]} won`;
      }
    },
    reloadGame(){
      this.winMessage = "";
      this.isCross = true;
      this.itemArray = new Array(9).fill("empty")
    }
  }
})
</script>

<style>
main {
  height: 100vh;
}
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 5px;
}

.box {
  height: 150px;
}
</style>

 

See also  Vue.js Youtube Video IFrame Embed Example Using vue-youtube-embed Library in Javascript Full Project For Beginners

 

components/grid.vue

 

 

<template>
    <div>
        <i class="fa fa-circle fa-4x zoomIn text-primary"
        v-if="iconname === 'circle'"
        ></i>
        <i class="fa fa-times fa-4x zoomIn text-info"
        v-else-if="iconname === 'cross'"
        ></i>
        <img src="../assets/logo.png" alt="" 
        class="img-fluid zoomIn"
        v-else-if="iconname === 'empty'"
         />
    </div>
</template>



<script>

export default {
    props: {
        iconname: {
            type: String,
            required: true
        }
    }
}
</script>



<style>
img {
  width: 80px;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomIn {
  animation-name: zoomIn;
  animation-duration: 1s;
}
</style>

 

See also  Vue.js Temperature Converter (Celsius + Fahrenheit) Widget in Browser Using Javascript Full Project For Beginners

 

DOWNLOAD FULL SOURCE CODE

 

Leave a Reply