Skip to content

Instantly share code, notes, and snippets.

@mmansion

mmansion/index.html

Created August 11, 2017 22:45
Show Gist options
  • Save mmansion/d9749113656f817d4da15ce786726373 to your computer and use it in GitHub Desktop.
Save mmansion/d9749113656f817d4da15ce786726373 to your computer and use it in GitHub Desktop.
Download ZIP
State Machine Example // source https://jsbin.com/bavuta
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>State Machine Example</title>
<style id="jsbin-css">
#status {
font-size: 32px;
height: 100px;
border: thin solid black;
}
#target {
height: 200px;
border-style: dashed;
background-color: rgb(0,255,255);
}
.person {
position: absolute;
width : 100px;
height : 100px;
background-color: gray;
border: solid white;
z-index:999;
visibility: visible;
}
#p1 { background-color : orange; left: 0px; top: 400px; }
#p2 { background-color : purple; left: 100px; top: 400px; }
#p3 { background-color : green; left: 200px; top: 400px; }
</style>
</head>
<body>
<div id="status">hi</div>
<div id="target" class="dropzone"></div>
<div class="person" id="p1" draggable="true"></div>
<div class="person" id="p2" draggable="true"></div>
<div class="person" id="p3" draggable="true"></div>
<script id="jsbin-javascript">
var people = [], target;
var state = { // state machine
users: 0
};
/* Setup
------------------------------------- */
function setup() {
var elems = document.getElementsByClassName("person");
for(var i = 0; i < elems.length; i++) {
people.push(new Person(elems[i]));
}
target = document.getElementById("target")
setInterval(function(){
update();
draw();
}, 200);
}
/* Draw
------------------------------------- */
function draw() { // main loop
var status = "Active users = " + state.users;
document.getElementById("status").innerHTML = status;
// Make decisions on what to play from here
}
/* Update
------------------------------------- */
function update() { // check state
var numActive = 0;
people.forEach(function(person){
if(person.hasOverlap(target)){
numActive++;
}
});
state.users = numActive;
}
/* Person Class
------------------------------------- */
var Person = function(e) {
var _ = this;
_.id = e.id;
_.elem = e;
_.width = e.clientWidth;
_.height = e.clientHeight;
_.pos = { x : 100, y : 0 };
_.elem.addEventListener("dragend", function(e) {
e.dataTransfer.setData('Text/html', e.target.id);
_.elem.style.left = _.pos.x + "px";
_.elem.style.top = _.pos.y + "px";
e.preventDefault();
return false;
});
_.elem.addEventListener("drag", function(e) {
e.dataTransfer.setData('Text/html', e.target.id);
if(e.clientX > 0 && e.clientY > 0) {
_.pos.x = e.clientX - _.width/2;
_.pos.y = e.clientY - _.height/2;
}
e.preventDefault();
return false;
});
_.hasOverlap = function(e) {
var rect1 = _.elem.getBoundingClientRect()
, rect2 = e.getBoundingClientRect()
;
return overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
}
}
/* On Page Load
------------------------------------- */
window.onload = function() {
setup();
};
</script>
<script id="jsbin-source-css" type="text/css">#status {
font-size: 32px;
height: 100px;
border: thin solid black;
}
#target {
height: 200px;
border-style: dashed;
background-color: rgb(0,255,255);
}
.person {
position: absolute;
width : 100px;
height : 100px;
background-color: gray;
border: solid white;
z-index:999;
visibility: visible;
}
#p1 { background-color : orange; left: 0px; top: 400px; }
#p2 { background-color : purple; left: 100px; top: 400px; }
#p3 { background-color : green; left: 200px; top: 400px; }
</script>
<script id="jsbin-source-javascript" type="text/javascript">var people = [], target;
var state = { // state machine
users: 0
};
/* Setup
------------------------------------- */
function setup() {
var elems = document.getElementsByClassName("person");
for(var i = 0; i < elems.length; i++) {
people.push(new Person(elems[i]));
}
target = document.getElementById("target")
setInterval(function(){
update();
draw();
}, 200);
}
/* Draw
------------------------------------- */
function draw() { // main loop
var status = "Active users = " + state.users;
document.getElementById("status").innerHTML = status;
// Make decisions on what to play from here
}
/* Update
------------------------------------- */
function update() { // check state
var numActive = 0;
people.forEach(function(person){
if(person.hasOverlap(target)){
numActive++;
}
});
state.users = numActive;
}
/* Person Class
------------------------------------- */
var Person = function(e) {
var _ = this;
_.id = e.id;
_.elem = e;
_.width = e.clientWidth;
_.height = e.clientHeight;
_.pos = { x : 100, y : 0 };
_.elem.addEventListener("dragend", function(e) {
e.dataTransfer.setData('Text/html', e.target.id);
_.elem.style.left = _.pos.x + "px";
_.elem.style.top = _.pos.y + "px";
e.preventDefault();
return false;
});
_.elem.addEventListener("drag", function(e) {
e.dataTransfer.setData('Text/html', e.target.id);
if(e.clientX > 0 && e.clientY > 0) {
_.pos.x = e.clientX - _.width/2;
_.pos.y = e.clientY - _.height/2;
}
e.preventDefault();
return false;
});
_.hasOverlap = function(e) {
var rect1 = _.elem.getBoundingClientRect()
, rect2 = e.getBoundingClientRect()
;
return overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
}
}
/* On Page Load
------------------------------------- */
window.onload = function() {
setup();
};
</script></body>
</html>
Raw
jsbin.bavuta.css
#status {
font-size: 32px;
height: 100px;
border: thin solid black;
}
#target {
height: 200px;
border-style: dashed;
background-color: rgb(0,255,255);
}
.person {
position: absolute;
width : 100px;
height : 100px;
background-color: gray;
border: solid white;
z-index:999;
visibility: visible;
}
#p1 { background-color : orange; left: 0px; top: 400px; }
#p2 { background-color : purple; left: 100px; top: 400px; }
#p3 { background-color : green; left: 200px; top: 400px; }
Raw
jsbin.bavuta.js
var people = [], target;
var state = { // state machine
users: 0
};
/* Setup
------------------------------------- */
function setup() {
var elems = document.getElementsByClassName("person");
for(var i = 0; i < elems.length; i++) {
people.push(new Person(elems[i]));
}
target = document.getElementById("target")
setInterval(function(){
update();
draw();
}, 200);
}
/* Draw
------------------------------------- */
function draw() { // main loop
var status = "Active users = " + state.users;
document.getElementById("status").innerHTML = status;
// Make decisions on what to play from here
}
/* Update
------------------------------------- */
function update() { // check state
var numActive = 0;
people.forEach(function(person){
if(person.hasOverlap(target)){
numActive++;
}
});
state.users = numActive;
}
/* Person Class
------------------------------------- */
var Person = function(e) {
var _ = this;
_.id = e.id;
_.elem = e;
_.width = e.clientWidth;
_.height = e.clientHeight;
_.pos = { x : 100, y : 0 };
_.elem.addEventListener("dragend", function(e) {
e.dataTransfer.setData('Text/html', e.target.id);
_.elem.style.left = _.pos.x + "px";
_.elem.style.top = _.pos.y + "px";
e.preventDefault();
return false;
});
_.elem.addEventListener("drag", function(e) {
e.dataTransfer.setData('Text/html', e.target.id);
if(e.clientX > 0 && e.clientY > 0) {
_.pos.x = e.clientX - _.width/2;
_.pos.y = e.clientY - _.height/2;
}
e.preventDefault();
return false;
});
_.hasOverlap = function(e) {
var rect1 = _.elem.getBoundingClientRect()
, rect2 = e.getBoundingClientRect()
;
return overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
}
}
/* On Page Load
------------------------------------- */
window.onload = function() {
setup();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment