class.js

   1 TTweet = enchant.Class.create(enchant.Sprite, {
   2         initialize : function(w, h) {
   3                 this.lifetime = 0;
   4                 enchant.Sprite.call(this, w, h + TTweet.TAIL);
   5                 this.image = new Surface(w, h + TTweet.TAIL);
   6                 var t = TTweet.TAIL;
   7                 var s = TTweet.SIZE;
   8                 var c = TTweet.CURVE;
   9                 this.outCurve = {
  10                         lt : {x:  0, y:  t},
  11                         rt : {x:  w, y:  t},
  12                         rd : {x:  w, y:h+t},
  13                         ld : {x:  0, y:h+t}
  14                 };
  15                 this.inCurve = {
  16                         lt : {x:  0+s, y:  t+s},
  17                         rt : {x:  w-s, y:  t+s},
  18                         rd : {x:  w-s, y:h+t-s},
  19                         ld : {x:  0+s, y:h+t-s}
  20                 };
  21                 this.image.context.font = "12px 'Times New Roman'";
  22                 this.addEventListener('enterframe', function(){
  23                         if((this.age % 15) == 0){
  24                                 this.lifetime--;
  25                         }
  26                         if(this.lifetime <= 0){
  27                                 this.lifetime = 0;
  28                                 this.opacity = 0;
  29                         }
  30                 });
  31         },
  32         reDraw : function() {
  33                 var c = TTweet.CURVE;
  34                 var o = this.outCurve;
  35                 with(this.image.context) {
  36                         fillStyle = 'black';
  37                         strokeStyle = 'black';
  38                         beginPath();
  39                         moveTo(o.lt.x, o.lt.y+c);
  40                         quadraticCurveTo(o.lt.x, o.lt.y, o.lt.x+c, o.lt.y);
  41                         lineTo(o.rt.x-c, o.rt.y);
  42                         quadraticCurveTo(o.rt.x, o.rt.y, o.rt.x, o.rt.y+c);
  43                         lineTo(o.rd.x, o.rd.y-c);
  44                         quadraticCurveTo(o.rd.x, o.rd.y, o.rd.x-c, o.rd.y);
  45                         lineTo(o.ld.x+c, o.ld.y);
  46                         quadraticCurveTo(o.ld.x, o.ld.y, o.ld.x, o.ld.y-c);
  47                         // しっぽ
  48                         // var _height = 100;
  49                         // lineTo(this.width/2-4,_height + TTweet.TAIL);
  50                         // lineTo(this.width/2,_height + 0);
  51                         // lineTo(this.width/2+4,_height + TTweet.TAIL);
  52                         closePath();
  53                         fill();
  54                         stroke();
  55                 };
  56                 this.clear();
  57         },
  58         clear : function() {
  59                 var c = TTweet.CURVE;
  60                 var o = this.outCurve;
  61                 var i = this.inCurve;
  62                 with(this.image.context) {
  63                         // 抜く
  64                         fillStyle = 'white';
  65                         beginPath();
  66                         moveTo(i.lt.x, o.lt.y+c);
  67                         quadraticCurveTo(i.lt.x, i.lt.y, o.lt.x+c, i.lt.y);
  68                         lineTo(o.rt.x-c, i.rt.y);
  69                         quadraticCurveTo(i.rt.x, i.rt.y, i.rt.x, o.rt.y+c);
  70                         lineTo(i.rd.x, o.rd.y-c);
  71                         quadraticCurveTo(i.rd.x, i.rd.y, o.rd.x-c, i.rd.y);
  72                         lineTo(o.ld.x+c, i.ld.y);
  73                         quadraticCurveTo(i.ld.x, i.ld.y, i.ld.x, o.ld.y-c);
  74                         closePath();
  75                         fill();
  76                 };
  77         },
  78         text : function(text, x, y) {
  79                 this.clear();
  80                 this.opacity = 0.8;
  81
  82                 this.reDraw();
  83                 with(this.image.context) {
  84                         // var size = measureText(text);
  85                         fillStyle = 'black';
  86                         textAlign = 'center';
  87                         textBaseline = 'middle';
  88                         this.x = x;
  89                         this.y = y;
  90                         // fillText(text,this.width/2,this.height/2);
  91                         // console.log(size);
  92                         // this.width = size;
  93                         // console.log(this.width);
  94                         // this.reDraw();
  95                         var textList = text.split("\n");
  96                         var len = textList.length / 2;
  97                         var height = (this.height/(1 + len));
  98                         this.fillTextLine(text,this.width/2, height);
  99                 }
 100                 this.lifetime = 7;
 101
 102         },
 103         fillTextLine : function(text, x, y) {
 104                 var textList = text.split("\n");
 105                 var lineHeight = this.image.context.measureText("あ").width + 2;
 106                 var self = this;
 107                 textList.forEach(function(text, i) {
 108                         self.image.context.fillText(text, x, y + lineHeight * i);
 109                 });
 110         },
 111
 112
 113 });
 114 TTweet.TAIL  =  8;
 115 TTweet.SIZE  =  2;
 116 TTweet.CURVE = 16;
 117
 118
 119 var Box = enchant.Class.create(enchant.Sprite, {
 120         initialize : function(ctl, node, x, y,  w, h) {
 121                 enchant.Sprite.call(this, w, h + TTweet.TAIL);
 122                 this.node = node;
 123                 this.x = x;
 124                 this.y = y;
 125                 //even ObjSprite
 126                 this.id = guid();
 127
 128
 129                 this.ctl = ctl;
 130                 ctl.addObj(this);
 131                 ctl.game.rootScene.addEventListener('touchstart', this.touchstart(this));
 132                 ctl.backgroundMap.addChild(this);
 133
 134
 135                 this.lifetime = 999;
 136                 this.image = new Surface(w, h + TTweet.TAIL);
 137                 var t = TTweet.TAIL;
 138                 var s = TTweet.SIZE;
 139                 var c = TTweet.CURVE;
 140                 this.outCurve = {
 141                         lt : {x:  0, y:  t},
 142                         rt : {x:  w, y:  t},
 143                         rd : {x:  w, y:h+t},
 144                         ld : {x:  0, y:h+t}
 145                 };
 146                 this.inCurve = {
 147                         lt : {x:  0+s, y:  t+s},
 148                         rt : {x:  w-s, y:  t+s},
 149                         rd : {x:  w-s, y:h+t-s},
 150                         ld : {x:  0+s, y:h+t-s}
 151                 };
 152                 this.image.context.font = "12px 'Times New Roman'";
 153                 var self = this;
 154                 this.addEventListener('enterframe', function(){
 155                         if((this.age % BASE_FPS) == 0){
 156                                 this.lifetime--;
 157                                 this.drawBox();
 158                         }
 159                         if(this.lifetime <= 0){
 160                                 this.lifetime = 0;
 161                                 this.opacity = 0;
 162                                 this.removeEventListener('enterframe', arguments.callee);
 163                                 self.release();
 164                         }
 165                 });
 166         },
 167         reDraw : function() {
 168                 var c = TTweet.CURVE;
 169                 var o = this.outCurve;
 170                 with(this.image.context) {
 171                         fillStyle = 'black';
 172                         strokeStyle = 'black';
 173                         beginPath();
 174                         moveTo(o.lt.x, o.lt.y+c);
 175                         quadraticCurveTo(o.lt.x, o.lt.y, o.lt.x+c, o.lt.y);
 176                         lineTo(o.rt.x-c, o.rt.y);
 177                         quadraticCurveTo(o.rt.x, o.rt.y, o.rt.x, o.rt.y+c);
 178                         lineTo(o.rd.x, o.rd.y-c);
 179                         quadraticCurveTo(o.rd.x, o.rd.y, o.rd.x-c, o.rd.y);
 180                         lineTo(o.ld.x+c, o.ld.y);
 181                         quadraticCurveTo(o.ld.x, o.ld.y, o.ld.x, o.ld.y-c);
 182                         closePath();
 183                         fill();
 184                         stroke();
 185                 };
 186                 this.clear();
 187         },
 188         clear : function() {
 189                 var c = TTweet.CURVE;
 190                 var o = this.outCurve;
 191                 var i = this.inCurve;
 192                 with(this.image.context) {
 193                         // 抜く
 194                         fillStyle = 'white';
 195                         beginPath();
 196                         moveTo(i.lt.x, o.lt.y+c);
 197                         quadraticCurveTo(i.lt.x, i.lt.y, o.lt.x+c, i.lt.y);
 198                         lineTo(o.rt.x-c, i.rt.y);
 199                         quadraticCurveTo(i.rt.x, i.rt.y, i.rt.x, o.rt.y+c);
 200                         lineTo(i.rd.x, o.rd.y-c);
 201                         quadraticCurveTo(i.rd.x, i.rd.y, o.rd.x-c, i.rd.y);
 202                         lineTo(o.ld.x+c, i.ld.y);
 203                         quadraticCurveTo(i.ld.x, i.ld.y, i.ld.x, o.ld.y-c);
 204                         closePath();
 205                         fill();
 206                 };
 207         },
 208         drawBox : function() {
 209                 this.clear();
 210                 this.opacity = 0.7;
 211                 text = this.node.getStatusForDisplay();
 212                 this.reDraw();
 213                 with(this.image.context) {
 214                         fillStyle = 'black';
 215                         textAlign = 'center';
 216                         textBaseline = 'middle';
 217                         var textList = text.split("\n");
 218                         var len = textList.length / 2;
 219                         var height = (this.height/(1 + len));
 220                         this.fillTextLine(text,this.width/2, height);
 221
 222                 }
 223
 224         },
 225         fillTextLine : function(text, x, y) {
 226                 var textList = text.split("\n");
 227                 var lineHeight = this.image.context.measureText("あ").width + 2;
 228                 var self = this;
 229                 textList.forEach(function(text, i) {
 230                         self.image.context.fillText(text, x, y + lineHeight * i);
 231                 });
 232         },
 233         getX : function(){
 234                 return this.x;
 235         },
 236         getY : function(){
 237                 return this.y;
 238         },
 239         touchstart:function(self){
 240                 return function(e){
 241                         if(typeof e === "undefined")return;
 242                         // this.removeEventListener('touchstart', arguments.callee);
 243                         // self.release();
 244                         // if(self.x <= e.x && self.x + self.width >= e.x
 245                         //      && self.y <= e.y && self.y + self.height >= e.y
 246                         //      ){
 247                         if(ctl.isCollision(e, self)){
 248                                 this.removeEventListener('touchstart', arguments.callee);
 249                                 self.release();
 250                         }
 251
 252                 };
 253         },
 254         release: function(){
 255                 this.parentNode.removeChild(this);
 256                 ctl.backgroundMap.removeChild(this);
 257                 ctl.removeObj(this);
 258                 this.lifetime = null;
 259                 this.ctl = null;
 260         }
 261
 262 });
 263
 264
 265 //how to use
 266 //var tweet = new TTweet(128, 64);
 267 //tweet.text("ABCDEFG");