forked from padolsey/ZergRush
-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
86 lines (76 loc) · 5.49 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!doctype html>
<meta charset="utf-8" />
<title>ZergRush Demo</title>
<style>
body { font-size: .8em; font-family: sans-serif; }
h1 {
font-size: 1.2em;
font-weight: normal;
}
#controls {
padding: 20px;
border-bottom: 2px solid black;
}
div.target {
margin: 20px;
width: 100px;
height: 100px;
background: yellow;
border: 1px solid red;
float: left;
}
</style>
<body>
<div id="controls" class="antiZerg">
<h1>ZergRush | by <a href="http://james.padolsey.com">James Padolsey</a> | <a href="http://james.padolsey.com/javascript/zerg-rush-in-javascript/">Blog post</a> | <a href="https://github.com/padolsey/ZergRush">Github</a></h1>
<button id="go">Go</button> |
<button id="reset">Reset</button> |
<a href="javascript:void function(){function j(){function c(a,b,c){this.rush=c;this.speed=3;this.x=a;this.y=b;this.height=this.width=10;this.isFinished=this.isKilling=!1;this.dPulsate=0;this.dom=e("<zergling>").css({width:this.width,height:this.height,position:"absolute",display:"block",background:"red",left:a,top:b,borderRadius:"5px",zIndex:9999}).appendTo(k)}function f(a){var b=this,d=this.zerglings=[];this.targets=[];for(var e=0;e<a;++e)d.push(new c(100*Math.random(),100*Math.random(),this));this.intervalID=setInterval(function(){b.step()},
30)}window.Zergling=c;window.ZergRush=f;var h=document,k=h.body,g=Math.atan2,m=Math.cos,n=Math.sin,o=Math.PI,i=Math.random,p=Math.max;c.DATA_KEY="zergTargetData";c.MIN_TARGET_AREA=5E4;c.VISION=1E3;c.LIFE=50;c.isSuitableTarget=function(a){var b;if(!a)return!1;for(b=a;b=b.parentNode;)if(e.data(b,c.DATA_KEY)||/antiZerg/i.test(b.className))return!1;b=e.data(a,c.DATA_KEY);a=e(a);return!/zergling/i.test(a[0].nodeName)&&!/antiZerg/i.test(a[0].className)&&(!b||0<b.life)&&a.width()*a.height()<c.MIN_TARGET_AREA};
c.prototype={calcMovement:function(){var a=this.target,b=a.position.left+i()*a.width-this.x,a=a.position.top+i()*a.height-this.y,b=g(a,b);this.dx=this.speed*m(b);this.dy=this.speed*n(b)},draw:function(){if(!this.isFinished){var a=this.target;if(this.isKilling)0<a.life?(a.life--,this.pulsate(),a.dom.css("opacity",a.life/c.LIFE)):(a.dom.css("visibility","hidden"),this.pulsate(0),this.isKilling=!1,this.target=null);else{if(!this.target||0>=this.target.life)if(this.findTarget())a=this.target,this.calcMovement();
else{this.isFinished=!0;this.dom.fadeOut(100,function(){e(this).remove()});return}this.hasReachedTarget()?this.isKilling=!0:(this.x+=this.dx,this.y+=this.dy,this.dom.css({left:this.x,top:this.y}))}}},hasReachedTarget:function(){var a=this.target,b=a.position;return this.x>=b.left&&this.y>=b.top&&this.x<=b.left+a.width&&this.y<=b.top+a.height},findTarget:function(){var a,b,d,f,g=this.width/2,i=this.height/2,j=p(k.scrollTop,h.documentElement.scrollTop),l=p(k.scrollLeft,h.documentElement.scrollLeft);
for(a=10;a<c.VISION;a+=50)for(b=0;360>b;b+=45)if(d=this.x+g+a*m(o/180*b)-l,f=this.y+i+a*n(o/180*b)-j,c.isSuitableTarget(d=h.elementFromPoint(d,f)))return d=e(d),a=this.target=d.data(c.DATA_KEY),a||(d.data(c.DATA_KEY,this.target={dom:d,position:d.offset(),width:d.width(),height:d.height(),life:c.LIFE,initialCSS:{visibility:"",opacity:d.css("opacity")||""}}),this.rush.registerTarget(this.target)),!0},pulsate:function(){(this.dPulsate=!this.dPulsate)?this.dom.css({left:this.x-2,top:this.y-2,width:14,
height:14}):this.dom.css({left:this.x,top:this.y,width:10,height:10})}};f.prototype={step:function(){for(var a=!0,b=0;b<this.zerglings.length;++b)this.zerglings[b].draw(),a=a&&this.zerglings[b].isFinished;a&&clearInterval(this.intervalID)},destroy:function(){clearInterval(this.intervalID);for(var a=0;a<this.zerglings.length;++a)this.zerglings[a].dom.remove();for(a=0;a<this.targets.length;++a)this.targets[a].dom.css(this.targets[a].initialCSS),this.targets[a].dom.removeData(c.DATA_KEY)},registerTarget:function(a){this.targets.push(a)}}}
var e,f=window.jQuery,g=document.createElement("script");g.src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";document.body.appendChild(g);var l=setInterval(function(){if(f?window.jQuery!==f:window.jQuery)clearInterval(l),e=window.jQuery.noConflict(!0),j(),new ZergRush(20)},200)}();">Zerg Rush!</a> (Bookmarklet [drag to toolbar])
</div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<div class="target"></div>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script src="ZergRush.js"></script>
<script>
var z;
document.getElementById('go').onclick = function() {
if (!z) {
z = new ZergRush(20);
}
};
document.getElementById('reset').onclick = function() {
z.destroy();
z = null;
};
</script>
</body>