html5test0003.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="640" height="480" ></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 = 160;
  37   var sy = 120;
  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 * 2;
  48   backBuffer.height = height * 2;
  49   var ctx = backBuffer.getContext("2d");
  50   var t = 0;
  51   var renderTimerId = undefined;
  52   var mainTimerId = undefined;
  53
  54   // ボールオブジェクト
  55   function Ball(x, y, radius) {
  56     this.x = x;
  57     this.y = y;
  58     this.ySpeed = 5.0;
  59     this.xSpeed = 4.0;
  60     this.radius = radius;
  61     this.enable = false;
  62     return this;
  63   }
  64
  65   Ball.prototype.init = function (x, y, radius,xSpeed,ySpeed) {
  66     this.x = x;
  67     this.y = y;
  68     this.xSpeed = 4.0;
  69     this.ySpeed = 5.0;
  70     this.radius = radius;
  71     this.enable = true;
  72   }
  73
  74   Ball.prototype.move = function () {
  75     this.ySpeed += 1.0;
  76
  77     this.x += this.xSpeed;
  78
  79     if ((this.x + this.radius) > width) {
  80       this.x = width - this.radius; // (this.x - backBuffer.width);
  81       this.xSpeed = -(this.xSpeed - 1.0);
  82     }
  83
  84     if (this.x < this.radius) {
  85       this.x = this.radius; // -this.x;
  86       this.xSpeed = -(this.xSpeed + 1.0);
  87     }
  88
  89     this.y += this.ySpeed;
  90
  91     if ((this.y + this.radius) > height) {
  92       this.y = height - this.radius; // -(this.y + this.radius - backBuffer.height);
  93       this.ySpeed = -this.ySpeed + 1.0;
  94     }
  95   }
  96
  97   Ball.prototype.draw = function (ctx) {
  98     var fillStyle = ctx.fillStyle;
  99     ctx.fillStyle = "blue";
 100     ctx.beginPath();
 101     ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true);
 102     ctx.closePath();
 103     ctx.fill();
 104     ctx.fillStyle = fillStyle;
 105   }
 106
 107   var ball;
 108
 109   // コンストラクタ
 110   function Tasks() {
 111     this.array = new Array(0);
 112     return this;
 113   }
 114
 115
 116   Tasks.prototype = {
 117     // indexの位置のタスクを置き換える
 118     setNextTask: function (index, func) {
 119       this.array[index] = func;
 120     },
 121
 122     pushTask : function (func)
 123     {
 124       for (var i = 0; i < this.length; ++i) {
 125         if (this.array[i] == null) {
 126           this.array[i] = func;
 127           return;
 128         }
 129       }
 130       this.array.push(func);
 131     },
 132     // 配列を取得する
 133     getArray: function () {
 134       return this.array;
 135     },
 136     // タスクをクリアする
 137     clear: function () {
 138       this.array.length = 0;
 139     }
 140   };
 141
 142   var tasks = new Tasks();
 143
 144
 145   $(window).ready(function () {
 146     ctx.fillStyle = "blue";
 147     ctx.fillRect(0, 0, backBuffer.width, backBuffer.height);
 148     ctx.setTransform(1, 0, 0, 1, sx, sy);
 149     ctx.fillStyle = "white";
 150     ctx.font = "12px 'ＭＳ ゴシック'"; ;
 151     ctx.fillText("ボールを表示します。", 0, 20, 240);
 152     ctx_main.drawImage(backBuffer, sx, sy, width, height, 0, 0, screenWidth, screenHeight);
 153
 154     // 開始ボタンをクリックした時の処理
 155     $("#start").click(function () {
 156       //      renderTimerId = setInterval(render, 100);
 157       tasks.pushTask(init);
 158       ball = new Ball(100, 100, 10);
 159       mainTimerId = setTimeout(processMain, 50);
 160       $("#stop")[0].disabled = false;
 161       $("#start")[0].disabled = true;
 162     });
 163
 164     // 停止ボタンをクリックしたときの処理
 165     $("#stop").click(function () {
 166       //      if (renderTimerId != undefined) {
 167       //        clearInterval(renderTimerId);
 168       //        renderTimerId = undefined;
 169       //      }
 170       if (mainTimerId != undefined) {
 171         clearTimeout(mainTimerId);
 172         mainTimerId = undefined;
 173       }
 174
 175       tasks.clear();
 176
 177       $("#stop")[0].disabled = true;
 178       $("#start")[0].disabled = false;
 179     });
 180
 181     // 準備ができたので開始ボタンを押せるようにする
 182     $("#start")[0].disabled = false;
 183
 184   });
 185
 186   var r = 0;
 187
 188   // 描画処理
 189   function render() {
 190     r++;
 191     if (r >= 640) r = 0;
 192     // スクロール・拡大してメイン画面に転送
 193     if (r <= 320) {
 194       ctx_main.drawImage(backBuffer, r, sy, width, height, 0, 0, screenWidth, screenHeight);
 195     } else {
 196       ctx_main.drawImage(backBuffer, r, sy, backBuffer.width - r, height, 0, 0, (backBuffer.width - r) * 2, screenHeight);
 197       ctx_main.drawImage(backBuffer, 0, sy, width - (backBuffer.width - r), height, (backBuffer.width - r) * 2, 0, (width - (backBuffer.width - r)) * 2, screenHeight);
 198     }
 199   }
 200
 201   // 処理メイン
 202   // バックバッファの描画
 203   var period = 0;
 204   var ellapsedTime  = 0;
 205   function processMain() {
 206     var startTime = new Date().getTime();
 207
 208     // メインに描画
 209     $(tasks.getArray()).each(function (taskIndex) {
 210       if (this != null) {
 211         this(taskIndex);
 212       }
 213     }
 214     );
 215     render();
 216     ctx.fillStyle = "black";
 217     ctx.fillRect(0, 0, width, height);
 218     var endTime = new Date().getTime();
 219     ellapsedTime = endTime - startTime;
 220     period = 32 - (ellapsedTime) % 32;
 221     mainTimerId = setTimeout(processMain, period);
 222   }
 223
 224   // 初期化タスク
 225   function init(taskIndex)
 226   {
 227     ctx.fillStyle = "black";
 228     ctx.fillRect(0, 0, width, height);
 229
 230     tasks.setNextTask(taskIndex, addCount);
 231     tasks.pushTask(ballAction);
 232   }
 233
 234   // カウントする。
 235   function addCount() {
 236     var txt = "処理時間:" + ellapsedTime + "ms";
 237     ctx.textBaseline = "top";
 238     var textWidth = ctx.measureText(txt);
 239     ctx.fillStyle = "black";
 240     ctx.fillRect(0, 0, textWidth.width, 12);
 241     ctx.fillStyle = "white";
 242     ctx.fillText(txt, 0, 0, textWidth.width);
 243   }
 244
 245   // ボール初期化タスク
 246   function ballAction() {
 247     ball.move();
 248     ball.draw(ctx);
 249   }
 250
 251
 252 </script>
 253 </body>
 254 </html>