shooters/index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4     <title>Shoot</title>
   5     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
   6
   7     <link rel="stylesheet" href="../style/pixelless.css" type="text/css"/>
   8
   9         <script type="text/javascript" src="../script/util.js"></script>
  10     <script type="text/javascript" src="../script/canvas.js"></script>
  11     <script type="text/javascript" src="script/shooter-view.js"></script>
  12     <script type="text/javascript" src="script/gun.js"></script>
  13     <script type="text/javascript" src="script/vehicle.js"></script>
  14     <script type="text/javascript" src="script/shooter.js"></script>
  15     <script type="text/javascript" src="script/shooter-controller.js"></script>
  16 </head>
  17 <body>
  18 <div id="container">
  19     <div class="content header">
  20         <h1 id="out">Shoot</h1>
  21     </div>
  22
  23     <div class="content">
  24         <canvas id="canvas" width="900px" height="600px"></canvas>
  25
  26         <div class="empty_footer">
  27         </div>
  28     </div>
  29 </div>
  30 <div id="footer">
  31     <div class="content">
  32         &copy;
  33         <script type="text/javascript">
  34             var a = ['and', 'mail'].join('y@g');
  35             var b = ['<a ', 'href="mai', 'lto:zz',a, '.com?','subject=','JavaScript Filler', '"', '>Vynogradov<', '/a>'];
  36             document.write(b.join(''));
  37         </script>
  38         2009&ndash;2010
  39     </div>
  40 </div>
  41 <script type="text/javascript">
  42     // Provide testing ground for different kind of shooting agents
  43
  44     var canvas = document.getElementById('canvas');
  45     var ctx = canvas.getContext('2d');
  46     ctx.strokeStyle = '#eee';
  47     ctx.fillStyle = '#eee';
  48
  49     var fps = 24;
  50     var frameDelay = 1000 / fps;
  51
  52     var view = new ShooterView(ctx, 900, 600);
  53
  54     var pos = new Point(0, 0);
  55     var dir = 0;    // radians - moving north.
  56     var mass = 3;   // 'size'
  57     var speed = 60; // units per second
  58     var hp = 100;
  59
  60     var damage = 10;    // projecile damage
  61     var distance = 600; // projectile flight distance
  62     var pjSpeed = 300;  // projectile speed
  63
  64     var rate = 20000;   // shot rate shots per second
  65     var clip = 25;     // clip size
  66     var reload = 500;  // reload time
  67         var spread = 5;    // 5% (100% = 45°)
  68
  69     var vehicle = new Vehicle(pos, Math.PI / 4, mass, speed);
  70     var projectile = new Projectile(damage, pjSpeed);
  71
  72         var shotgun = new Gun(projectile, distance, rate, clip, reload, spread);
  73
  74         damage = 25;
  75         rate = 20;
  76         clip = 26;
  77         reload = clip * damage / shotgun.dps - clip / rate;
  78         spread = .5;
  79
  80         projectile = new Projectile(damage, pjSpeed);
  81         var rifle = new Gun(projectile, distance, rate, clip, reload, spread);
  82     var sample = new Shooter(vehicle, hp, []);
  83
  84     var numShooters =5;
  85     var shooters = [];
  86     while (shooters.length < numShooters){
  87         var clone = sample.clone();
  88                 var dir = clone.vehicle.dir = rnd(4 * Math.PI);
  89                 clone.vehicle.pos = new Point(speed*sin(dir), speed*cos(dir));
  90                 var type = rnd(100)<50;
  91                 clone.guns = [type?shotgun:rifle];
  92                 clone.color = type ? '#bbf' : '#fbb';
  93         shooters.push(clone);
  94     }
  95
  96     var ctrl = new ShooterController(view, shooters, 900, 600);
  97         var last = 0;
  98         var proceed = true;
  99
 100     function frame(t) {
 101                 if(proceed){
 102                         showFps(t);
 103
 104                         var charge = last == 0 ? 0 : t-last;
 105                         last = t;
 106
 107                         ctrl.frame(charge);
 108
 109                         window.mozRequestAnimationFrame(frame);
 110                 }
 111     }
 112
 113         ctx.bind('click', function(){
 114                 proceed = !proceed;
 115                 if(proceed)     {
 116                         last = 0;
 117                         window.mozRequestAnimationFrame(frame);
 118                 }
 119         });
 120     window.mozRequestAnimationFrame(frame);
 121
 122
 123         function out(text){
 124                 var o = document.getElementById('out');
 125                 out = function(text){o.innerHTML = text};
 126                 return out(text);
 127         }
 128
 129         function showFps(t)
 130         {
 131                 var frames = 0;
 132                 var lastframe = (new Date()).getTime();
 133                 var animframe = ['.&nbsp;&nbsp;&nbsp;', '&nbsp;.&nbsp;&nbsp;', '&nbsp;&nbsp;.&nbsp;', '&nbsp;&nbsp;&nbsp;.']
 134                 showFps = function(t)
 135                 {
 136                         ++frames;
 137                         var fps = 1000 / (t-lastframe);
 138                         lastframe = t;
 139                         out(fps.toFixed(0)+'&nbsp;fps');
 140                         var smoothfps = [fps]
 141
 142                         showFps = function(t)
 143                         {
 144                                 ++frames;
 145                                 var fps = 1000 / (t-lastframe);
 146                                 lastframe = t;
 147                                 var l = smoothfps.length;
 148                                 var i =l-1;
 149                                 if(l<100){
 150                                         smoothfps.push(fps);
 151                                 }
 152                                 else
 153                                 {
 154                                         while(i-->0)
 155                                                 smoothfps[i+1] = smoothfps[i];
 156                                         smoothfps[0] = fps;
 157                                 }
 158                                 out((smoothfps.sum()/l).toFixed(0)+'&nbsp;fps'+animframe[Math.floor(frames/10)%4]);
 159                         }
 160                 }
 161         }
 162 </script>
 163 </body>
 164 </html>