Skip to content

Instantly share code, notes, and snippets.

@eesur
Last active August 29, 2015 14:08
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save eesur/cb5eb9ad4e125b3e2b21 to your computer and use it in GitHub Desktop.
Save eesur/cb5eb9ad4e125b3e2b21 to your computer and use it in GitHub Desktop.
d3 | puzzle adaptation

Simple game built for my blog post on an adaptation of the classic 'Fox, goose and bag of beans puzzle'.

View the actual blog post →

img of lego figures


The constraints:

The police man can only take only one across at a time.

  • you can only take only one across at a time
  • T wants to eat H, so T can’t be left alone with H. img of lego figures
  • H wants to eat G, so H can’t be left alone with G. img of lego figures

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | Fox, goose and bag of beans puzzle</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro:400,600);
body {font-family: "Source Code Pro", Consolas, monaco, monospace; line-height: 160%; font-size: 18px; margin: 0; }
header { padding: 20px; max-width : 680px;}
.svg-wrap {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 75%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}
#status {
color: #EE3124;
}
</style>
</head>
<body>
<header>
<h2>Tip: <span id="status">Cross to the other side</span></h2>
<p id="action">T-Rex, Homer &amp; the Ginger Bread Man</p>
</header>
<div id="gameContainer"></div>
<script type="text/javascript">
var characterData = [
{ "name": "Homer", "ref": "H", "colour" : "#FDBB30" },
{ "name": "T-Rex", "ref": "T", "colour" : "#7AC143" },
{ "name": "Ginger Bread Man", "ref": "G", "colour" : "#EC008C" }
];
// vars tc colours
var tc_blue_light = "#00B0DD",
tc_black = "#130C0E";
// width and height of svg
var w = 600, h = 450;
// dimensions, distances and radius
var r = 18, leftDis = 50, rightDis = 800;
var svg = d3.select("#gameContainer")
.append("div")
.classed("svg-wrap", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 450")
//class to make it responsive
.classed("svg-responsive", true);
// make a river
var river = svg.append("rect")
.attr("x", 260)
.attr("y", 0)
.attr("width", 10)
.attr("height", 200)
.style("fill", tc_blue_light);
// three characters
var character = svg.selectAll("circle")
.data(characterData)
.enter()
.append("circle")
.attr("cx", leftDis)
.attr("cy", function (d, i) {
return i * 50 +30;
})
.attr("r", r)
.attr("id", function(d, i) { return ("id-" + i)})
.attr("fill", function (d) {
return d.colour;
});
var labels = svg.selectAll("text")
.data(characterData)
.enter()
.append("text")
.attr("dx", 10)
.attr("dy", function (d, i) {
return i * 50 +36;
})
.style("fill", tc_black)
.style("font-size", "14px")
.text(function (d) {
return d.ref + ":";
});
// access the characters !
// var homer = d3.select(character[0][0]);
// var trex = d3.select(character[0][1]);
// var ginger = d3.select(character[0][2]);
var characterHomer = document.getElementById("id-0"),
characterTrex = document.getElementById("id-1"),
characterGinger = document.getElementById("id-2");
// event handler
var clicked = false;
var events = character
.on('click', function (d) {
d3.select('#action').html("you selected: " + d.name);
if (clicked == false) {
clicked = true;
var destination = 1;
}
else {
clicked = false;
var destination = -1;
}
d3.select( this ) // select element in current context
.classed('crossedRiver', clicked)
.transition().duration(300)
.attr("cx", (200 * destination) + 250);
// move labels
// labels.attr("dx", (200 * destination) + 245);
// call if else function
ifElse();
});
// if else function
function ifElse() {
// was initially going to use cx values to test is been moved but was giving me the value pre click
// var homerStatus = characterHomer.cx.baseVal.valueInSpecifiedUnits,
// trexStatus = characterTrex.cx.baseVal.valueInSpecifiedUnits;
// gingerStatus = characterGinger.cx.baseVal.valueInSpecifiedUnits;
// console.log("homer cx value: " + homerStatus);
// console.log("trex cx value: " + trexStatus);
// console.log("ginger cx value: " + gingerStatus);
var testHomerClass = characterHomer.classList.contains("crossedRiver"),
testTrexClass = characterTrex.classList.contains("crossedRiver");
testgingerClass = characterGinger.classList.contains("crossedRiver");
if ( (testHomerClass == true) && (testTrexClass == false) && (testgingerClass == false) ) {
d3.select('#status').html("Homer is across!");
}
else if ( (testHomerClass == true) && (testTrexClass == false) && (testgingerClass == true) ) {
d3.select('#status').html("Homer is licking his lips");
}
else if ( (testHomerClass == true) && (testTrexClass == true) && (testgingerClass == false) ) {
d3.select('#status').html("T-Rex will eat Homer");
}
else if ( (testHomerClass == true) && (testTrexClass == true) && (testgingerClass == true) ) {
d3.select('#status').html("All across hey!");
}
else if ( (testHomerClass == false) && (testTrexClass == true) && (testgingerClass == false) ) {
d3.select('#status').html("Homer with the Ginger Bread Man?");
}
else if ( (testHomerClass == false) && (testTrexClass == true) && (testgingerClass == true) ) {
d3.select('#status').html("How did you do that?");
}
else if ( (testHomerClass == false) && (testTrexClass == false) && (testgingerClass == false) ) {
d3.select('#status').html("Ready to try again?");
}
else if ( (testHomerClass == false) && (testTrexClass == false) && (testgingerClass == true) ) {
d3.select('#status').html("T-Rex is eyeing up Homer");
}
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment