Last active
August 21, 2016 06:37
-
-
Save 1wheel/12bdfef9ef07cf9ee39c to your computer and use it in GitHub Desktop.
bug-zap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var width = 960, | |
height = 500 | |
var svg = d3.select('#bugs').append('svg') | |
.attr({width: width, height: height}) | |
.style({position: 'absolute', top: '0px'}) | |
var bugs = [ | |
{ img: 'bug.svg', | |
pos: [width*.01, height*.05], | |
wrong: 'var salesPlusFour = "4" + sales;', | |
right: 'var salesPlusFour = 4 + sales;'}, | |
{ img: 'bug.svg', | |
pos: [width*.75, height*.05], | |
wrong: 'for (var i = 0; i < 10 i++)', | |
right: 'for (var i = 0; i < 10; i++)'}, | |
{ img: 'bug.svg', | |
pos: [width*.75, height*.75], | |
wrong: 'if (newBug == oldBug)', | |
right: 'if (newBug === oldBug)'}, | |
{ img: 'bug.svg', | |
pos: [width*.02, height*.75], | |
wrong: 'var total += currentValue', | |
right: 'var total = +currentValue'}, | |
{ img: 'bug.svg', | |
pos: [width*.50, height*.50], | |
wrong: 'isBetween = min < next < max', | |
right: 'isBetween = min < next && next < max'}, | |
{ img: 'bug.svg', | |
pos: [width*.0, height*.4], | |
wrong: 'var x = Math.Sin(θ)', | |
right: 'var x = Math.sin(θ)'}, | |
{ img: 'bug.svg', | |
pos: [width*.40, height*.10], | |
wrong: 'obj.function()', | |
right: 'obj && obj.function && obj.function'}, | |
] | |
bugs.forEach(function(d){ | |
d.correct = false | |
d.img = 'bug.svg' | |
d.t = Math.random() | |
d.visable = false | |
d.spawned = false | |
}) | |
function addBug(d, prev){ | |
if (!d || d.visable) return | |
d.visable = true | |
d.div = d3.select('#bugs').append('div.bug') | |
d.imgEl = d.div.append('img.bug-img').attr('src', d.img) | |
d.qcontainer = d.div.append('div.q-container') | |
d.qcontainer | |
.dataAppend(_.shuffle([d.right, d.wrong]), 'div.awnser') | |
.text(ƒ()) | |
.on('click', function(e){ | |
if (d.correct) return | |
if (d.right == e){ | |
d.correct = true | |
d.imgEl.transition().delay(300).style('opacity', .3) | |
d3.select(this).style('color', 'green') | |
d.div.classed('correct', true) | |
svg.append('g').dataAppend([[Math.random()*width, 0], [0, Math.random()*height]], 'path.lazer') | |
.attr('d', function(e){ return ['M', e, 'L', e].join('') }) | |
.style({'stroke-width': 1, stroke: 'yellow'}) | |
.transition().duration(400) | |
.attr('d', function(e){ return ['M', e, 'L', [d.pos[0] + 150, d.pos[1] + 50]].join('') }) | |
.style({'stroke-width': 8, stroke: 'green'}) | |
.transition() | |
.style('opacity', 0) | |
.style('stroke-width', 50) | |
} else{ | |
addBug(bugs.filter(_.negate(ƒ('visable')))[0], d) | |
d3.select(this).style('color', 'red') | |
} | |
}) | |
if (prev && prev.pos){ | |
d.qcontainer.style('opacity', 0) | |
d.imgEl.style('width', '0px') | |
.transition().duration(800) | |
.style('width', '100px') | |
d.div.call(posAt, prev.pos) | |
.transition().duration(1000).ease('cubic') | |
.call(posAt, d.pos) | |
.each('end', function(){ | |
d.qcontainer.transition().style('opacity', 1) | |
}) | |
//todo - hide questions, till pos is done, scale bug size | |
} else{ | |
d.div.call(posAt, d.pos) | |
} | |
} | |
addBug(bugs[0]) | |
addBug(bugs[1]) | |
addBug(bugs[2]) | |
d3.timer(function(t){ | |
bugs.forEach(function(d){ | |
if (d.correct || !d.visable) return | |
d.imgEl | |
.style('-webkit-transform', 'rotate(' + Math.sin(t/500 + d.t*500)*30 + 'deg)') | |
.style('padding-left', Math.sin(t/743 + d.t*500)*60 + 'px') | |
.style('padding-top', Math.sin(t/343 + d.t*700)*20 + 'px') | |
}) | |
}) | |
function posAt(sel, pos){ | |
sel .style('left', pos[0] + 'px') | |
.style('top' , pos[1] + 'px') | |
} | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="utf-8"?> | |
<!-- Generator: Adobe Illustrator 15.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> | |
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | |
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" | |
width="512px" height="553.861px" viewBox="0 0 512 553.861" enable-background="new 0 0 512 553.861" xml:space="preserve"> | |
<path d="M376.889,0c19.639,0,35.556,15.917,35.556,35.556c0,19.639-15.917,35.556-35.556,35.556l-9.041-1.16l-32.82,42.007 | |
c22.64,16.292,42.306,39.375,57.542,67.278c-38.861,12.541-85.902,19.875-136.569,19.875c-50.674,0-97.708-7.334-136.569-19.875 | |
c14.729-26.973,33.59-49.438,55.277-65.625l-33.597-43c-1.951,0.326-3.951,0.5-6,0.5c-19.639,0-35.556-15.917-35.556-35.556 | |
C99.556,15.917,115.473,0,135.111,0s35.556,15.917,35.556,35.556c0,7.139-2.104,13.784-5.723,19.354l34.194,43.764 | |
c17.785-8.639,36.924-13.341,56.861-13.341c18.973,0,37.223,4.257,54.264,12.111l35.264-45.125c-2.68-5-4.194-10.701-4.194-16.764 | |
C341.333,15.917,357.25,0,376.889,0z M490.667,298.667c11.777,0,21.333,9.556,21.333,21.333s-9.556,21.333-21.333,21.333h-64.694 | |
c-1.015,15.431-3.111,30.417-6.195,44.848l75.236,35.069c10.681,4.986,15.292,17.681,10.319,28.361 | |
c-4.972,10.666-17.666,15.291-28.347,10.319l-69.292-32.319c-26.306,70-77.5,119.444-137.472,126.25v-326.5 | |
c50.36-1.375,96.583-10,134.027-23.694l2.777,6.931l72.695-27.91c11-4.223,23.333,1.271,27.555,12.271 | |
c4.223,11-1.277,23.341-12.277,27.562l-75.694,29.062c3.333,15.104,5.611,30.861,6.667,47.084H490.667z M21.333,298.667h64.694 | |
c1.062-16.223,3.327-31.979,6.674-47.084l-75.708-29.062c-11-4.222-16.493-16.562-12.271-27.562s16.562-16.493,27.562-12.271 | |
l72.695,27.91l2.771-6.931c37.438,13.694,83.667,22.319,134.027,23.694v326.5c-59.979-6.806-111.166-56.25-137.479-126.25 | |
l-69.285,32.319c-10.68,4.986-23.375,0.347-28.354-10.319c-4.979-10.681-0.354-23.375,10.319-28.361l75.236-35.069 | |
c-3.076-14.431-5.173-29.417-6.188-44.848H21.333C9.549,341.333,0,331.777,0,320S9.549,298.667,21.333,298.667z"/> | |
</svg> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body{ | |
width: 960px; | |
height: 500px; | |
font-family: monospace; | |
} | |
#bugs{ | |
position: relative; | |
} | |
.bug{ | |
width: 300px; | |
position: absolute; | |
} | |
.bug-img{ | |
width: 100px; | |
display:block; | |
margin:auto; | |
height: 108px; | |
} | |
.q-container div{ | |
border: 1px solid black; | |
padding: 5px; | |
margin-top: 5px; | |
cursor: pointer; | |
} | |
.correct .q-container div{ | |
border: 1px solid lightgrey; | |
color: lightgrey; | |
} | |
.lazer{ | |
} | |
#bug svg{ | |
pointer-events: none; | |
} | |
</style> | |
<body> | |
<div id='bugs'></div> | |
</body> | |
<script src="/1wheel/raw/67b47524ed8ed829d021/d3-3.5.5.js"></script> | |
<script src="/1wheel/raw/67b47524ed8ed829d021/lodash-3.8.0.js"></script> | |
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-jetpack.js'></script> | |
<script src='/1wheel/raw/1b6758978dc2d52d3a37/d3-starterkit.js'></script> | |
<script src='bug.js'></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment