Last active
August 17, 2020 20:50
-
-
Save curlup/7279535 to your computer and use it in GitHub Desktop.
No-collision (small browser game) http://bl.ocks.org/curlup/raw/7279535/
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> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
| <script type="text/javascript" src="http://mbostock.github.io/d3/talk/20111018/d3/d3.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.io/d3/talk/20111018/d3/d3.geom.js"></script> | |
| <script type="text/javascript" src="http://mbostock.github.io/d3/talk/20111018/d3/d3.layout.js"></script> | |
| <style type="text/css"> | |
| circle { | |
| stroke: #000; | |
| stroke-opacity: .5; | |
| } | |
| .hint { | |
| color: #222; | |
| font-size: 18px; | |
| } | |
| .header{ | |
| font-size: 2em; | |
| position: absolute; | |
| } | |
| .footer{ | |
| font-size: 3em; | |
| position: absolute; | |
| top: 660px; | |
| left: 760px; | |
| } | |
| .hidden { | |
| display: none; | |
| } | |
| </style> | |
| <title>Collision</title> | |
| </head> | |
| <body> | |
| <div id="body"> | |
| <div class="header"> | |
| <span style="color:red">No</span> collision | |
| <div class="hint">move the cursor to keep the red node away from the others</div> | |
| </div> | |
| <div class="footer"> | |
| your current score is: <span id="score">0</span> | |
| <br> | |
| your current record is: <span id="maxscore">0</span> | |
| <div class="hint">reloading the page resets the record</div> | |
| </div> | |
| </div> | |
| <script type="text/javascript"> | |
| var w = 960, | |
| h = 800; | |
| var nodes = d3.range(202).map(function() { return {radius: Math.random() * 12 + 4}; }), | |
| color = d3.scale.category10(); | |
| var infected = 0; | |
| var infColor = "red", defColor = "black"; | |
| var force = d3.layout.force() | |
| .friction(0.925) | |
| .gravity(0.1) | |
| .charge(function(d, i) { return d == root ? -2000 : (i<=infected ? -250*Math.sqrt(d.radius) : 0 ); }) | |
| .nodes(nodes) | |
| .size([w, h]); | |
| var root = nodes[0]; | |
| root.radius = 1; | |
| root.fixed = true; | |
| var theOne = nodes[nodes.length-1]; | |
| theOne.radius = 10; | |
| force.start(); | |
| var svg = d3.select("#body").append("svg:svg") | |
| .attr("width", w) | |
| .attr("height", h); | |
| var score = 0; | |
| var text = d3.select("#score"); | |
| var maxscore = 0; | |
| var maxtext = d3.select("#maxscore"); | |
| var twitter_widget = d3.select("#twitter-widget-0"); | |
| svg.selectAll("circle") | |
| .data(nodes) | |
| .enter().append("svg:circle") | |
| .attr("r", function(d) { return d.radius ; }) | |
| .style("fill", function(d, i) { return (d==theOne || i<=infected) ? infColor: defColor; }); | |
| var score_inc = true; | |
| var prev_maxscore = 0; | |
| force.on("tick", function(e) { | |
| var q = d3.geom.quadtree(nodes), | |
| i = 0, | |
| n = nodes.length; | |
| score_inc = true; | |
| while (++i < n) { | |
| q.visit(collide(nodes[i])); | |
| } | |
| if (score_inc) | |
| {score+=0.02;} | |
| else | |
| { | |
| score=0 | |
| }; | |
| maxscore = (maxscore>score?maxscore:score) | 0; | |
| infected = (score) | 0; | |
| text.text((score*10|0)/10); | |
| maxtext.text(maxscore); | |
| if (prev_maxscore != maxscore && maxscore>2){ | |
| maxtext.append("iframe") | |
| .attr("class", "twitter-share-button twitter-tweet-button twitter-count-horizontal") | |
| .attr("src", "https://platform.twitter.com/widgets/tweet_button.1390956745.html#_=1391369095545&count=horizontal&id=twitter-widget-0&lang=en&original_referer=file%3A%2F%2F%2Fhome%2Ftru%2FDesktop%2Fcollision.html&related=tru_pablo&size=m&text=I%20scored%20"+maxscore+"%20in%20Collision%20game&url=file%3A%2F%2F%2Fhome%2Ftru%2FDesktop%2Fcollision.html") | |
| .attr("id", "twitter-widget-0") | |
| .attr("scrolling", "no") | |
| .attr("frameborder", "0") | |
| .attr("allowtransparency", "true") | |
| .attr("title", "Twitter Tweet Button") | |
| .attr("data-twttr-rendered", "true") | |
| .attr("style", "width: 107px; height: 20px;"); | |
| } | |
| prev_maxscore = maxscore; | |
| svg.selectAll("circle") | |
| .attr("cx", function(d) { return d.x; }) | |
| .attr("cy", function(d) { return d.y; }) | |
| .style("fill", function(d, i) { return (d==theOne || i<=infected) ? infColor: defColor; }); | |
| }); | |
| svg.on("mousemove", function() { | |
| force.stop() | |
| var p1 = d3.svg.mouse(this); | |
| root.px = p1[0]; | |
| root.py = p1[1]; | |
| force.start(); | |
| force.resume(); | |
| }); | |
| function collide(node) { | |
| var r = node.radius + 16, | |
| nx1 = node.x - r, | |
| nx2 = node.x + r, | |
| ny1 = node.y - r, | |
| ny2 = node.y + r; | |
| return function(quad, x1, y1, x2, y2) { | |
| if (quad.point && (quad.point !== node)) { | |
| var x = node.x - quad.point.x, | |
| y = node.y - quad.point.y, | |
| l = Math.sqrt(x * x + y * y), | |
| r = node.radius + quad.point.radius; | |
| if (l < r) { | |
| l = (l - r) / l * .5; | |
| node.x -= x *= l; | |
| node.y -= y *= l; | |
| quad.point.x += x; | |
| quad.point.y += y; | |
| if (node == theOne || quad.point == theOne) | |
| { | |
| score_inc = false; | |
| } | |
| } | |
| } | |
| return x1 > nx2 | |
| || x2 < nx1 | |
| || y1 > ny2 | |
| || y2 < ny1; | |
| }; | |
| } | |
| d3.select(self.frameElement).style("height", h + "px"); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment