class.js

   1 TTweet = enchant.Class.create(enchant.Sprite, {
   2         initialize : function(yukkuri, w, h) {
   3                 this.x = 0;
   4                 this.y = 0;
   5                 this.yukkuri = yukkuri;
   6                 this.lifetime = 0;
   7                 enchant.Sprite.call(this, w, h + TTweet.TAIL);
   8                 this.image = new Surface(w, h + TTweet.TAIL);
   9                 var t = TTweet.TAIL;
  10                 var s = TTweet.SIZE;
  11                 var c = TTweet.CURVE;
  12                 this.outCurve = {
  13                         lt : {x:  0, y:  t},
  14                         rt : {x:  w, y:  t},
  15                         rd : {x:  w, y:h+t},
  16                         ld : {x:  0, y:h+t}
  17                 };
  18                 this.inCurve = {
  19                         lt : {x:  0+s, y:  t+s},
  20                         rt : {x:  w-s, y:  t+s},
  21                         rd : {x:  w-s, y:h+t-s},
  22                         ld : {x:  0+s, y:h+t-s}
  23                 };
  24                 this.image.context.font = "12px 'Times New Roman'";
  25                 var self = this;
  26                 this.addEventListener('enterframe', function(){
  27                         if((this.age % 15) == 0){
  28                                 this.lifetime--;
  29                         }
  30                         if(this.lifetime <= 0){
  31                                 this.lifetime = 0;
  32                                 this.opacity = 0;
  33                         }
  34                         this.x = self.yukkuri.getX() - self.width/4 - self.yukkuri.getWidth() / 2;
  35                         this.y = self.yukkuri.getY() - self.height - self.yukkuri.getHeight() / 2;
  36                         // this._tweet.text(text, this.getX() - this._tweet.width/4, this.getY() - this._tweet.height);
  37                 });
  38         },
  39         reDraw : function() {
  40                 var c = TTweet.CURVE;
  41                 var o = this.outCurve;
  42                 with(this.image.context) {
  43                         fillStyle = 'black';
  44                         strokeStyle = 'black';
  45                         beginPath();
  46                         moveTo(o.lt.x, o.lt.y+c);
  47                         quadraticCurveTo(o.lt.x, o.lt.y, o.lt.x+c, o.lt.y);
  48                         lineTo(o.rt.x-c, o.rt.y);
  49                         quadraticCurveTo(o.rt.x, o.rt.y, o.rt.x, o.rt.y+c);
  50                         lineTo(o.rd.x, o.rd.y-c);
  51                         quadraticCurveTo(o.rd.x, o.rd.y, o.rd.x-c, o.rd.y);
  52                         lineTo(o.ld.x+c, o.ld.y);
  53                         quadraticCurveTo(o.ld.x, o.ld.y, o.ld.x, o.ld.y-c);
  54                         // しっぽ
  55                         // var _height = 100;
  56                         // lineTo(this.width/2-4,_height + TTweet.TAIL);
  57                         // lineTo(this.width/2,_height + 0);
  58                         // lineTo(this.width/2+4,_height + TTweet.TAIL);
  59                         closePath();
  60                         fill();
  61                         stroke();
  62                 };
  63                 this.clear();
  64         },
  65         clear : function() {
  66                 var c = TTweet.CURVE;
  67                 var o = this.outCurve;
  68                 var i = this.inCurve;
  69                 with(this.image.context) {
  70                         // 抜く
  71                         fillStyle = 'white';
  72                         beginPath();
  73                         moveTo(i.lt.x, o.lt.y+c);
  74                         quadraticCurveTo(i.lt.x, i.lt.y, o.lt.x+c, i.lt.y);
  75                         lineTo(o.rt.x-c, i.rt.y);
  76                         quadraticCurveTo(i.rt.x, i.rt.y, i.rt.x, o.rt.y+c);
  77                         lineTo(i.rd.x, o.rd.y-c);
  78                         quadraticCurveTo(i.rd.x, i.rd.y, o.rd.x-c, i.rd.y);
  79                         lineTo(o.ld.x+c, i.ld.y);
  80                         quadraticCurveTo(i.ld.x, i.ld.y, i.ld.x, o.ld.y-c);
  81                         closePath();
  82                         fill();
  83                 };
  84         },
  85         text : function(text, x, y) {
  86                 this.clear();
  87                 this.opacity = 0.8;
  88
  89                 this.reDraw();
  90                 with(this.image.context) {
  91                         // var size = measureText(text);
  92                         fillStyle = 'black';
  93                         textAlign = 'center';
  94                         textBaseline = 'middle';
  95                         this.x = x;
  96                         this.y = y;
  97                         // fillText(text,this.width/2,this.height/2);
  98                         // console.log(size);
  99                         // this.width = size;
 100                         // console.log(this.width);
 101                         // this.reDraw();
 102                         var textList = text.split("\n");
 103                         var len = textList.length / 2;
 104                         var height = (this.height/(1 + len));
 105                         this.fillTextLine(text,this.width/2, height);
 106                 }
 107                 this.lifetime = 7;
 108
 109         },
 110         fillTextLine : function(text, x, y) {
 111                 var textList = text.split("\n");
 112                 var lineHeight = this.image.context.measureText("あ").width + 2;
 113                 var self = this;
 114                 textList.forEach(function(text, i) {
 115                         self.image.context.fillText(text, x, y + lineHeight * i);
 116                 });
 117         },
 118
 119
 120 });
 121 TTweet.TAIL  =  8;
 122 TTweet.SIZE  =  2;
 123 TTweet.CURVE = 16;
 124
 125
 126 var Box = enchant.Class.create(enchant.Sprite, {
 127         initialize : function(ctl, node, x, y,  w, h) {
 128                 enchant.Sprite.call(this, w, h + TTweet.TAIL);
 129                 this.node = node;
 130                 this.x = x;
 131                 this.y = y;
 132                 //even ObjSprite
 133                 this.id = guid();
 134
 135
 136                 this.ctl = ctl;
 137                 ctl.addObj(this);
 138                 ctl.game.rootScene.addEventListener('touchstart', this.touchstart(this));
 139                 ctl.backgroundMap.addChild(this);
 140
 141
 142                 this.lifetime = 999;
 143                 this.image = new Surface(w, h + TTweet.TAIL);
 144                 var t = TTweet.TAIL;
 145                 var s = TTweet.SIZE;
 146                 var c = TTweet.CURVE;
 147                 this.outCurve = {
 148                         lt : {x:  0, y:  t},
 149                         rt : {x:  w, y:  t},
 150                         rd : {x:  w, y:h+t},
 151                         ld : {x:  0, y:h+t}
 152                 };
 153                 this.inCurve = {
 154                         lt : {x:  0+s, y:  t+s},
 155                         rt : {x:  w-s, y:  t+s},
 156                         rd : {x:  w-s, y:h+t-s},
 157                         ld : {x:  0+s, y:h+t-s}
 158                 };
 159                 this.image.context.font = "12px 'Times New Roman'";
 160                 var self = this;
 161                 this.addEventListener('enterframe', function(){
 162                         if((this.age % BASE_FPS) == 0){
 163                                 this.lifetime--;
 164                                 this.drawBox();
 165                         }
 166                         if(this.lifetime <= 0){
 167                                 this.lifetime = 0;
 168                                 this.opacity = 0;
 169                                 this.removeEventListener('enterframe', arguments.callee);
 170                                 self.release();
 171                         }
 172                 });
 173         },
 174         reDraw : function() {
 175                 var c = TTweet.CURVE;
 176                 var o = this.outCurve;
 177                 with(this.image.context) {
 178                         fillStyle = 'black';
 179
 180                         strokeStyle = 'black';
 181                         beginPath();
 182                         moveTo(o.lt.x, o.lt.y+c);
 183                         quadraticCurveTo(o.lt.x, o.lt.y, o.lt.x+c, o.lt.y);
 184                         lineTo(o.rt.x-c, o.rt.y);
 185                         quadraticCurveTo(o.rt.x, o.rt.y, o.rt.x, o.rt.y+c);
 186                         lineTo(o.rd.x, o.rd.y-c);
 187                         quadraticCurveTo(o.rd.x, o.rd.y, o.rd.x-c, o.rd.y);
 188                         lineTo(o.ld.x+c, o.ld.y);
 189                         quadraticCurveTo(o.ld.x, o.ld.y, o.ld.x, o.ld.y-c);
 190                         closePath();
 191                         fill();
 192                         stroke();
 193                 };
 194                 this.clear();
 195         },
 196         clear : function() {
 197                 var c = TTweet.CURVE;
 198                 var o = this.outCurve;
 199                 var i = this.inCurve;
 200                 with(this.image.context) {
 201                         // 抜く
 202                         fillStyle = 'white';
 203                         beginPath();
 204                         moveTo(i.lt.x, o.lt.y+c);
 205                         quadraticCurveTo(i.lt.x, i.lt.y, o.lt.x+c, i.lt.y);
 206                         lineTo(o.rt.x-c, i.rt.y);
 207                         quadraticCurveTo(i.rt.x, i.rt.y, i.rt.x, o.rt.y+c);
 208                         lineTo(i.rd.x, o.rd.y-c);
 209                         quadraticCurveTo(i.rd.x, i.rd.y, o.rd.x-c, i.rd.y);
 210                         lineTo(o.ld.x+c, i.ld.y);
 211                         quadraticCurveTo(i.ld.x, i.ld.y, i.ld.x, o.ld.y-c);
 212                         closePath();
 213                         fill();
 214                 };
 215         },
 216         drawBox : function() {
 217                 this.clear();
 218                 this.opacity = 0.7;
 219                 text = this.node.getStatusForDisplay();
 220                 this.reDraw();
 221                 with(this.image.context) {
 222                         fillStyle = 'black';
 223                         textAlign = 'center';
 224                         textBaseline = 'middle';
 225                         var textList = text.split("\n");
 226                         var len = textList.length / 2;
 227                         var height = (this.height/(1 + len));
 228                         this.fillTextLine(text,this.width/2, height);
 229                 }
 230         },
 231         fillTextLine : function(text, x, y) {
 232                 var textList = text.split("\n");
 233                 var lineHeight = this.image.context.measureText("あ").width + 2;
 234                 var self = this;
 235                 textList.forEach(function(text, i) {
 236                         self.image.context.fillText(text, x, y + lineHeight * i);
 237                 });
 238         },
 239         getX : function(){
 240                 return this.x;
 241         },
 242         getY : function(){
 243                 return this.y;
 244         },
 245         getWidth: function(){
 246                 return this.width;
 247         },
 248         getHeight: function(){
 249                 return this.height;
 250         },
 251         touchstart:function(self){
 252                 return function(e){
 253                         if(typeof e === "undefined")return;
 254                         // this.removeEventListener('touchstart', arguments.callee);
 255                         // self.release();
 256                         // if(self.x <= e.x && self.x + self.width >= e.x
 257                         //      && self.y <= e.y && self.y + self.height >= e.y
 258                         //      ){
 259                         if(ctl.isCollision(e, self)){
 260                                 this.removeEventListener('touchstart', arguments.callee);
 261                                 self.release();
 262                         }
 263
 264                 };
 265         },
 266         release: function(){
 267                 this.parentNode.removeChild(this);
 268                 ctl.backgroundMap.removeChild(this);
 269                 ctl.removeObj(this);
 270                 this.lifetime = null;
 271                 this.ctl = null;
 272         }
 273
 274 });
 275
 276
 277 GPopup = enchant.Class.create(enchant.Sprite, {
 278         initialize : function(scene, x, y, w, h) {
 279                 enchant.Sprite.call(this, w, h);
 280                 this.image = new Surface(w, h);
 281                 this.x = x;
 282                 this.y = y;
 283                 scene.addChild(this);
 284                 this.scene = scene;
 285                 this.text = "";
 286         },
 287         clear : function() {
 288                 this.image.context.fillStyle = '#000099';
 289                 this.image.context.fillRect(0, 0, this.getWidth(), this.getHeight());
 290         },
 291         setText : function(text) {
 292                 this.image.context.fillStyle = 'black';
 293                 this.image.context.textAlign = 'left';
 294                 this.image.context.textBaseline = 'top';
 295                 this.image.context.font = "13px 'Times New Roman'";
 296
 297                 var textWidth = Math.floor(this.image.context.measureText(text).width);
 298                 var lineHeight = this.image.context.measureText("あ").width;
 299                 var _textList = text.split("\n");
 300                 this.renew(this.scene, this.x, this.y, textWidth, (lineHeight) * _textList.length + 6);
 301                 this.text = text;
 302         },
 303         drawText : function (){
 304                 this.clear();
 305                 var x = 0;
 306                 var y = 0;
 307                 // var lineHeight = this.image.context.measureText("あ").width;
 308                 this.image.context.fillStyle = '#ffffff';
 309                 this.image.context.textAlign = 'left';
 310                 this.image.context.textBaseline = 'alphabetic';
 311                 this.image.context.font = "12px 'Times New Roman'";
 312                 this.fillTextLine(this.text ,x, y);
 313         },
 314         getWidth : function(){
 315                 return this.image.width;
 316         },
 317         getHeight : function(){
 318                 return this.image.height;
 319         },
 320         fillTextLine : function(text, x, y) {
 321                 var textList = text.split("\n");
 322                 var lineHeight = this.image.context.measureText("あ").width + 2;
 323                 var self = this;
 324                 textList.forEach(function(text, i) {
 325                         self.image.context.fillText(text, x, y + lineHeight * (i+1));
 326                 });
 327         },
 328         renew : function(scene, x, y, w, h){
 329                 scene.removeChild(this);
 330                 enchant.Sprite.call(this, w, h);
 331                 this.image = new Surface(w, h);
 332                 this.x = x;
 333                 this.y = y;
 334                 scene.addChild(this);
 335         }
 336 });
 337
 338
 339 GWindow = enchant.Class.create(enchant.Sprite, {
 340         initialize : function(scene, x, y, w, h) {
 341                 enchant.Sprite.call(this, w, h);
 342                 this.image = new Surface(w, h);
 343                 this.x = x;
 344                 this.y = y;
 345                 scene.addChild(this);
 346         },
 347         clear : function() {
 348                 this.image.context.fillStyle = '#ffff00';
 349                 this.image.context.fillRect(0, 0, this.getWidth(), this.getHeight());
 350         },
 351         text : function(text, x, y) {
 352                 this.clear();
 353                 this.image.context.fillStyle = 'black';
 354                 this.image.context.textAlign = 'left';
 355                 this.image.context.textBaseline = 'middle';
 356                 this.image.context.font = "12px 'Times New Roman'";
 357                 var textWidth = Math.floor(this.image.context.measureText(text).width);
 358
 359                 var lineHeight = this.image.context.measureText("あ").width;
 360                 this.image.context.fillText(text + ":" + textWidth,x, y + lineHeight);
 361         },
 362         getWidth : function(){
 363                 return this.image.width;
 364         },
 365         getHeight : function(){
 366                 return this.image.height;
 367         },
 368
 369         renew : function(scene, x, y, w, h){
 370                 scene.removeChild(this);
 371                 enchant.Sprite.call(this, w, h);
 372                 this.image = new Surface(w, h);
 373                 this.x = x;
 374                 this.y = y;
 375                 scene.addChild(this);
 376         }
 377 });
 378 App.YUtil = enchant.Class.create(enchant.Sprite,{
 379         randomLooks : function(){
 380                 return rand(_.size(ELooks));
 381         }
 382 });
 383
 384
 385 //how to use
 386 //var tweet = new TTweet(128, 64);
 387 //tweet.text("ABCDEFG");