html5test0004.htm

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <title>HTML5 Test</title>
   5   <link rel="stylesheet" href="http://sfpg.seesaa.net/styles-index.css" type="text/css" />
   6 <script type="text/javascript" src="http://sfpg.up.seesaa.net/scripts/jquery-1.4.4.min.js"></script>
   7   <style type="text/css">
   8     #disp01 {margin:10px;}
   9   </style>
  10
  11 <script type="text/javascript">
  12
  13   var _gaq = _gaq || [];
  14   _gaq.push(['_setAccount', 'UA-15457703-1']);
  15   _gaq.push(['_setDomainName', '.seesaa.net']);
  16   _gaq.push(['_trackPageview']);
  17
  18   (function () {
  19     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  20     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  21     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  22   })();
  23
  24 </script>
  25 </head>
  26 <body>
  27 <div>
  28 <canvas id="disp01" width="320" height="240" ></canvas>
  29 </div>
  30 <div>
  31 <button type="button" id="start" disabled="true">開始</button>
  32 <button type="button" id="stop" disabled="true" >停止</button>
  33 </div>
  34 <script type="text/javascript">
  35
  36   var sx = 80;
  37   var sy = 60;
  38   var width = 320;
  39   var height = 240;
  40
  41
  42   var ctx_main = $("#disp01")[0].getContext("2d");
  43   var screenWidth = $("#disp01")[0].width;
  44   var screenHeight = $("#disp01")[0].height;
  45
  46   var backBuffer = $("<canvas>")[0];
  47   backBuffer.width = width + 160;
  48   backBuffer.height = height + 120;
  49   var ctx = backBuffer.getContext("2d");
  50   var t = 0;
  51   var renderTimerId = undefined;
  52   var mainTimerId = undefined;
  53
  54
  55   // ボールオブジェクト
  56   function Ball(x, y, radius, xSpeed, ySpeed,index,color) {
  57     this.x = x;
  58     this.y = y;
  59     this.xSpeed = xSpeed;
  60     this.ySpeed = ySpeed;
  61     this.radius = radius;
  62     this.index = index;
  63     this.color = color;
  64     this.enable = false;
  65     return this;
  66   }
  67
  68 //  Ball.prototype.init = function (x, y, radius,xSpeed,ySpeed,index) {
  69 //    this.x = x;
  70 //    this.y = y;
  71 //    this.xSpeed = xSpeed;
  72 //    this.ySpeed = ySpeed;
  73 //    this.radius = radius;
  74 //    this.index = index;
  75 //    this.enable = true;
  76 //  }
  77
  78   Ball.prototype.move = function () {
  79
  80     this.ySpeed += 0.5;
  81     this.x += this.xSpeed;
  82
  83     if ((this.x + this.radius) > width) {
  84       this.x = width - this.radius;
  85       this.xSpeed = -(this.xSpeed - 1.0);
  86     }
  87
  88     if (this.x < this.radius) {
  89       this.x = this.radius; // -this.x;
  90       this.xSpeed = -(this.xSpeed + 1.0);
  91     }
  92
  93     this.y += this.ySpeed;
  94
  95     if ((this.y + this.radius) > height) {
  96       this.y = height - this.radius;
  97       this.ySpeed = -this.ySpeed + 1.0;
  98     }
  99
 100     if (this.y < this.radius) {
 101       this.y = this.radius;
 102       this.ySpeed = -this.ySpeed;
 103     }
 104   }
 105
 106   Ball.prototype.draw = function (ctx) {
 107     var fillStyle = ctx.fillStyle;
 108     ctx.globalAlpha = 0.5;
 109     ctx.fillStyle = this.color;
 110     ctx.beginPath();
 111     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
 112     ctx.closePath();
 113     ctx.fill();
 114     ctx.fillStyle = fillStyle;
 115     ctx.globalAlpha = 1.0;
 116   }
 117
 118   // ボール配列
 119   var balls = new Array(0);
 120
 121   // コンストラクタ
 122   function Tasks() {
 123     this.array = new Array(0);
 124     return this;
 125   }
 126
 127
 128   Tasks.prototype = {
 129     // indexの位置のタスクを置き換える
 130     setNextTask: function (index, func) {
 131       this.array[index] = func;
 132     },
 133
 134     pushTask : function (func)
 135     {
 136       for (var i = 0; i < this.length; ++i) {
 137         if (this.array[i] == null) {
 138           this.array[i] = func;
 139           return;
 140         }
 141       }
 142       this.array.push(func);
 143     },
 144     // 配列を取得する
 145     getArray: function () {
 146       return this.array;
 147     },
 148     // タスクをクリアする
 149     clear: function () {
 150       this.array.length = 0;
 151     }
 152   };
 153
 154   var tasks = new Tasks();
 155
 156
 157   $(window).ready(function () {
 158     ctx.fillStyle = "blue";
 159     ctx.fillRect(0, 0, backBuffer.width, backBuffer.height);
 160     ctx.setTransform(1, 0, 0, 1, sx, sy);
 161     ctx.fillStyle = "white";
 162     ctx.font = "12px 'ＭＳ ゴシック'"; ;
 163     ctx.fillText("ボールを表示します。", 0, 20, 240);
 164     Math.random()
 165     ctx_main.drawImage(backBuffer, sx, sy, width, height, 0, 0, screenWidth, screenHeight);
 166     var color = ["#ff0000","#ff3800","#ff6000","#ff8800"];
 167
 168     // 開始ボタンをクリックした時の処理
 169     $("#start").click(function () {
 170       //      renderTimerId = setInterval(render, 100);
 171       tasks.pushTask(init);
 172       balls.length = 0;
 173       for (var i = 0; i < 200; ++i) {
 174         var rad = 10 + Math.random() * 10;
 175         balls.push(
 176         new Ball(
 177           Math.random() * (width - rad * 2) + rad,
 178           Math.random() * (height - rad * 2) + rad,
 179           rad,
 180           (Math.random() * 5 + 5) * (Math.random() >= 0.5 ? -1:1),
 181           Math.random() * 4 + 9,
 182           i,
 183           color[(Math.random() * 4)|0]
 184           )
 185         );
 186       }
 187       mainTimerId = setTimeout(processMain, 50);
 188       $("#stop")[0].disabled = false;
 189       $("#start")[0].disabled = true;
 190     });
 191
 192     // 停止ボタンをクリックしたときの処理
 193     $("#stop").click(function () {
 194       //      if (renderTimerId != undefined) {
 195       //        clearInterval(renderTimerId);
 196       //        renderTimerId = undefined;
 197       //      }
 198       if (mainTimerId != undefined) {
 199         clearTimeout(mainTimerId);
 200         mainTimerId = undefined;
 201       }
 202
 203       tasks.clear();
 204
 205       $("#stop")[0].disabled = true;
 206       $("#start")[0].disabled = false;
 207     });
 208
 209     // 準備ができたので開始ボタンを押せるようにする
 210     $("#start")[0].disabled = false;
 211
 212   });
 213
 214   var r = 0;
 215
 216   // 描画処理
 217   function render() {
 218     ctx_main.drawImage(backBuffer, sx, sy, width, height, 0, 0, screenWidth, screenHeight);
 219   }
 220
 221   // 処理メイン
 222   // バックバッファの描画
 223   var period = 0;
 224   var ellapsedTime  = 0;
 225   function processMain() {
 226     var startTime = new Date().getTime();
 227
 228     // メインに描画
 229     $(tasks.getArray()).each(function (taskIndex) {
 230       if (this != null) {
 231         this(taskIndex);
 232       }
 233     }
 234     );
 235     render();
 236     ctx.fillStyle = "black";
 237     ctx.fillRect(0, 0, width, height);
 238     var endTime = new Date().getTime();
 239     ellapsedTime = endTime - startTime;
 240     period = 32 - (ellapsedTime) % 32;
 241     mainTimerId = setTimeout(processMain, period);
 242   }
 243
 244   // 初期化タスク
 245   function init(taskIndex)
 246   {
 247     ctx.fillStyle = "black";
 248     ctx.fillRect(0, 0, width, height);
 249
 250     tasks.setNextTask(taskIndex, addCount);
 251     tasks.pushTask(ballAction);
 252   }
 253
 254   // 処理時間を表示する。
 255   function addCount() {
 256     var txt = "処理時間:" + ellapsedTime + "ms";
 257     ctx.textBaseline = "top";
 258     var textWidth = ctx.measureText(txt);
 259     ctx.fillStyle = "black";
 260     ctx.fillRect(0, 0, textWidth.width, 12);
 261     ctx.fillStyle = "white";
 262     ctx.fillText(txt, 0, 0, textWidth.width);
 263   }
 264
 265   // ボール初期化タスク
 266   function ballAction() {
 267     $(balls).each(function () {
 268       this.move();
 269       this.draw(ctx);
 270     });
 271   }
 272
 273
 274 </script>
 275 </body>
 276 </html>