Skip to content

Instantly share code, notes, and snippets.

Last active April 2, 2019 15:26
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Towers of Hanoi in VueJs
<!doctype html>
<html lang="en">
<script src=""></script>
<meta charset="UTF-8"/>
<title>Vue demo</title>
justify-content: space-between;
.towerContainer, .tower{
flex-direction: column;
.towerContainer{width: 30%;}
padding: 0;
border-bottom: 10px solid #673a00;
width: 80%;
height: 120px;
min-width: 240px;
content: " ";
background-color: #673a00;
height: 120px;
position: absolute;
width: 10px;
z-index: -1;
height: 20px;
<div id="app">
<h1>Towers of Hanoi</h1>
<a href="">More Info</a>
<li>Only one disk can be moved at a time.</li>
<li>Each move consists of taking the upper disk from one of the stacks and placing it on top of another stack or on an empty rod.</li>
<li>No larger disk may be placed on top of a smaller disk.</li>
<div class="towers">
<div class="towerContainer" v-for="(tower, index) in towers">
<h4 v-if="index == 0">Starting tower</h4>
<h4 v-else-if="index == 2">Ending tower</h4>
<h4 v-else>Worthless tower</h4>
<ul class="tower">
<li v-for="ring in tower" class="ring" :style="ring"></li>
<div v-if="tower[0]">
<button @click="move(index, (index == 0 ? 2 : index - 1 ))">
<template v-if="index != 0 ">Move Left</template>
<template v-else>Round the world</template>
<button @click="move(index, (index == 2 ? 0 : index + 1))">
<template v-if="index != 2">Move Right</template>
<template v-else>Round the world</template>
<h2 v-if="towers[2][4]">You won in {{moverCounter}} moves, take this highfive ✋!!!</h2>
new Vue({
el: '#app',
{width: "50px", backgroundColor: "#336699", id: 1},
{width: "90px", backgroundColor: "#CC3300", id: 2},
{width: "135px", backgroundColor: "#339933", id: 3},
{width: "175px", backgroundColor: "#336699", id: 4},
{width: "210px", backgroundColor: "#FFCC33", id: 5}
moverCounter: 0
move: function(fromTower, toTower){
sourceTower = this.towers[fromTower];
destinationTower = this.towers[toTower];
if(destinationTower[0] && destinationTower[0].id < sourceTower[0].id){
alert("Place smaller blocks on larger ones!");
ringToMove = sourceTower.shift();
this.moverCounter ++;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment