LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Put 16 sticks so that they do not touch each other

Adding, editing and removing the tilt rod made by clicking on the cell.

Number of sticks: 0

CSS
#grid {
  margin:  auto 0;
  margin-top: 50px;
  display: block;
  text-align: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.grid-parrent {
  display:inline-block;
}
span {
  border: 2px solid #444;
  cursor: pointer;
  width: 50px;
  height: 50px;
  margin-top: -2px;
  display: inline-block;
  margin: -1px;
  margin-bottom: -6px;
  padding: 0;
  color: #fff;
  font-size: 40px;
}
span[value=B] {
  background: 
       
       linear-gradient(to top right,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 2px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 2px),
           rgba(0,0,0,0) 100%);
}
span[value=A] {
  background: 
       linear-gradient(to top left,
           rgba(0,0,0,0) 0%,
           rgba(0,0,0,0) calc(50% - 2px),
           rgba(0,0,0,1) 50%,
           rgba(0,0,0,0) calc(50% + 2px),
           rgba(0,0,0,0) 100%);
}
span.er[value=B] {
  background:
       linear-gradient(to top right,
           rgba(255,0,0,0) 0%,
           rgba(255,0,0,0) calc(50% - 2px),
           rgba(255,0,0,1) 50%,
           rgba(255,0,0,0) calc(50% + 2px),
           rgba(255,0,0,0) 100%);
}
span.er[value=A] {
  background:
       linear-gradient(to top left,
           rgba(255,0,0,0) 0%,
           rgba(255,0,0,0) calc(50% - 2px),
           rgba(255,0,0,1) 50%,
           rgba(255,0,0,0) calc(50% + 2px),
           rgba(255,0,0,0) 100%);
}
hr {
  margin: 0;
  border: 0;
  padding: 0;
}
p {
  margin: 0 auto;
  margin-top: 100px;
  font-size: 60px;
}
h1, h3 {
  text-align: center;
}
#count {
  margin-top: 25px;
  font-size: 30px;
}
JS
size = 5;
window.state = [1..Math.pow(size,2)]

makeVictory = ->
  document.getElementsByTagName("h1")[0].innerHTML = ''
  document.getElementsByTagName("h3")[0].innerHTML = "

Victory

" document.getElementById('grid').innerHTML = '' j = 0 state.forEach (item, i, ar) -> span = document.createElement 'span' span.setAttribute('value', item) span.setAttribute('id', i) document.getElementById('grid').appendChild span j++ if j is size j = 0 hr = document.createElement 'hr' document.getElementById('grid').appendChild hr document.getElementById("count").innerHTML = '' console.log "Victory" checkVictory = -> ers = document.querySelectorAll "div#grid span.er" a = document.querySelectorAll "div#grid span[value=A]" b = document.querySelectorAll "div#grid span[value=B]" c = parseInt(a.length) + parseInt(b.length) n = parseInt(c - ers.length) document.getElementById("count").innerHTML = "Number of sticks: #{n}" v = on if n is 16 do makeVictory if v is on return v eventClick = (id) -> switch state[id] when "A" state[id] = "B" when "B" state[id] = "C" else state[id] = "A" noEnd = (id) -> arr = [] r = size for i in [0..size] arr.push(r - 1) r = r + size not (id in arr) noStart = (id) -> arr = [] r = 0 for i in [0..size] arr.push(r) r = r + size not (id in arr) checkEr = (id) -> switch state[id] when "A" yes if (state[id + (size - 1)] is "A" and noStart id) or (state[id - (size - 1)] is "A" and noEnd id) or (state[id + 1] is "B" and noEnd id) or (state[id - 1] is "B" and noStart id) or state[id - size] is "B" or state[id + size] is "B" when "B" yes if (state[id + (size + 1)] is "B" and noEnd id) or (state[id - (size + 1)] is "B" and noStart id) or (state[id + 1] is "A" and noEnd id) or (state[id - 1] is "A" and noStart id) or state[id - size] is "A" or state[id + size] is "A" rebuild = -> document.getElementById("grid").innerHTML = '' j = 0; state.forEach (item, i, ar) -> span = document.createElement 'span' span.setAttribute('value', item) span.setAttribute('id', i) span.className = 'er' if checkEr i span.onclick = -> eventClick i do rebuild return no if do checkVictory document.getElementById('grid').appendChild span j++ if j is size j = 0 hr = document.createElement 'hr' document.getElementById('grid').appendChild hr do rebuild
Host Instantly Drag and Drop Website Builder

 

Description

Put 16 sticks in field 5x5 so that they do not touch each other
Term
Mon, 11/27/2017 - 21:43

Related Codes

Pen ID
Pen ID
Pen ID