Skip to content

Instantly share code, notes, and snippets.

@marksteve

marksteve/index.html

Last active September 19, 2015 07:29
Show Gist options
  • Save marksteve/4c9ba15e773158f57607 to your computer and use it in GitHub Desktop.
Save marksteve/4c9ba15e773158f57607 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<style>
body {
padding: 0;
margin: 0;
}
#circle {
font: 10px sans-serif;
width: 100wh;
height: 100vh;
position: relative;
}
#message {
font-size: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
span {
position: absolute;
display: inline-block;
border: 1px solid;
border-radius: 50%;
width: 2em;
height: 2em;
line-height: 2em;
transition: all 0.1s ease-in-out;
text-align: center;
margin: -1em 0 0 -1em;
}
.killer {
background: red;
}
.killed {
color: #eee;
}
</style>
<div id="circle"><div id="message"></div></div>
<script>
var circle = document.querySelector('#circle');
var people = []; for (var i = 0; i < 100; i++) people.push(i);
var width = window.innerWidth;
var height = window.innerHeight;
var r = Math.min(width, height) / 2 - 100;
function render(people) {
people.forEach(function(p) {
var deg = p * 2 * Math.PI / 100;
var x = Math.sin(deg) * r;
var y = Math.cos(deg) * r;
var span = document.createElement('span');
span.style.left = x + width / 2;
span.style.top = y + height / 2;
span.innerText = p + 1;
span.id = "p" + p;
circle.appendChild(span);
});
}
function cycle(people, i) {
var killerEl = document.querySelector(".killer")
if (killerEl) killerEl.classList.remove("killer");
var killer = i % people.length
var killed = (i + 1) % people.length
document.querySelector("#p" + people[killer]).classList.add("killer");
document.querySelector("#p" + people[killed]).classList.add("killed");
document.querySelector("#message").innerText = (people[killer] + 1) + " killed " + (people[killed] + 1)
people.splice(killed, 1);
if (people.length > 1) setTimeout(cycle.bind(null, people, killed), 2000 / people.length);
else document.querySelector("#message").innerText = (people.pop() + 1) + " survived!"
}
render(people);
cycle(people, 0);
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment