enchant.js ¤È¤³¤Î¥Ú¡¼¥¸¤Ë¤Ä¤¤¤Æ

enchant.js ¤Î¥ª¥Ö¥¸¥§¥¯¥È

a graph image

EnevntTarget

EnevntTarget>Game

EnevntTarget>Game>Node

EnevntTarget>Game>Node>Entity

EnevntTarget>Game>Node>Entity>Sprite

EnevntTarget>Game>Node>Entity>Label

EnevntTarget>Game>Node>Entity>Map

Map(width, height)¥³¥ó¥¹¥È¥é¥¯¥¿¡£widht ¤È height ¤Ï¥¿¥¤¥ë¿ô
image¥¿¥¤¥ë¤Î²èÁü¥Ç¡¼¥¿
loadData(data)¥Þ¥Ã¥×¤Î£²¼¡¸µ¥Ç¡¼¥¿¡£Ê£¿ô»ØÄꤷ¤¿¾ì¹ç¤Ë¤Ï½Å¤Í¹ç¤ï¤»¤Ë¤Ê¤ë
collisionData°ÜÆ°¤Ç¤­¤Ê¤¤¥¿¥¤¥ë¤È¤½¤¦¤Ç¤Ê¤¤¥¿¥¤¥ë¤Î£²¼¡¸µ¥Ç¡¼¥¿
hitText(x,y)(x,y) ¤¬°ÜÆ°¤Ç¤­¤Ê¤¤¥¿¥¤¥ë¤Î»þ true
checkTile(x,y)(x,y) ¤Î²èÁüÈÖ¹æ¤òÊÖ¤¹ (enchant.js 0.5¤«¤éÄɲÃ)

#lesson9

EnevntTarget>Game>Node>Group

EnevntTarget>Game>Node>Group>RGroup

EnevntTarget>Game>Node>Group>Scene

EnevntTarget>Surface

EnevntTarget>Sound

lesson1 ¤Ï¤¸¤á¤Î°ìÊâ

[source] [reload]

lesson2 game ¤òɽ¼¨¤¹¤ëÎΰè¤ò»ØÄꤹ¤ë¤Ë¤Ï?

[source] [reload]

lesson3 ¥é¥Ù¥ë

[source] [reload]

lesson4 ¤¢¤¿¤êȽÄê¡¢¼«ºî¥¯¥é¥¹

[source] [reload]

lesson5 Surface¤Ç¥°¥é¥Õ¥£¥Ã¥¯ÉÁ²è

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    
    <title>Lesson5</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
body {
  margin: 0px;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript" src="enchant.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
// enchant ¤Î½é´ü²½
enchant();

var gWidth = 640;
var gHeight = 480;

$(document).ready(function(){
  // ¥²¡¼¥à¥ª¥Ö¥¸¥§¥¯¥È¤ÎºîÀ®
  var game = new Game(gWidth, gHeight);
  
  // FPS (Frame Per Second) »ØÄê
  game.fps = 30;
  
  // ²èÁüÆɤ߹þ¤ß´°Î»¸å¤Ë¼Â¹Ô¤¹¤ë½èÍý
  game.onload = function() {
    var background = new BackgroundLayer();
    background.color = 'black';
    var graduations = new GraduationsLayer();
    var angle = 0;
    graduations.draw(angle, 15);
    
    game.addEventListener(Event.ENTER_FRAME, function() {
      angle = (angle + 5) % 360;
      graduations.draw(angle, 15);
      
      r = Math.floor(128 * (Math.sin(angle * Math.PI / 180)));
      g = Math.floor(128 * (Math.sin(angle * Math.PI / 180)));
      b = Math.floor(200 * (Math.sin(angle * Math.PI / 180)));
      background.color = 'rgb(' + r + ',' + g + ',' + b + ')';
    });

    // ɽ¼¨¥ª¥Ö¥¸¥§¥¯¥È¥Ä¥ê¡¼¤ËÄɲÃ
    game.rootScene.addChild(background.sprite);
    game.rootScene.addChild(graduations.sprite);
  };
  
  game.start();
});

/**
 * Çطʥ쥤¥ä
 */
function BackgroundLayer() {
  this.initialize.apply(this,arguments);
}

BackgroundLayer.prototype = {
  sprite : null,
  surface : null,
  initialize : function() {
	this.sprite = new Sprite(gWidth, gHeight);
	this.surface = new Surface(gWidth, gHeight);
	this.sprite.image = this.surface;
	this.color = 'black';
  },
  set color(val) {
    var ctx = this.surface.context;
    ctx.save();
    ctx.fillStyle = val;
    ctx.fillRect(0, 0, gWidth, gHeight);
    ctx.restore();
  }
}

/**
 * ¥¹¥Æ¥ì¥ª¿ÞË¡¤ÎÊä½õÀþ¥ì¥¤¥ä
 */
function GraduationsLayer() {
  this.initialize.apply(this,arguments);
}

GraduationsLayer.prototype = {
  sprite : null,
  surface : null,
  /**
   * ¥³¥ó¥¹¥È¥é¥¯¥¿.
   */  
  initialize : function() {
	this.sprite = new Sprite(gWidth, gHeight);
	this.surface = new Surface(gWidth, gHeight);
	this.sprite.image = this.surface;
  },
  /**
   * Êä½õÀþ¤òÉÁ²è¤·¤Þ¤¹.
   * @param angle ÀµÌ̤ÎÊý³Ñ (0:ËÌ)
   * @param step Êä½õÀþ¤Î´Ö³Ö
   */
  draw : function (angle, step) {
    var ctx = this.surface.context;
    
    // Æ©ÌÀ¿§¤Ç¥¯¥ê¥¢
    this.surface.clear();
    
    ctx.save();
    ctx.strokeStyle = 'yellow';
    
    // ½ÄÀþ¤ò½ñ¤¯
    var start = -120 - (angle % step);
    var end = 120 - (angle % step);
    for(theta = start; theta < end; theta += step) {
      ctx.beginPath();
      
    ¡¡p = new Coordinates(theta, 0);
      ctx.moveTo(p.x, p.y);
      
	  for(phy = 5; phy <= 90; phy += 5) {
      ¡¡p = new Coordinates(theta, phy);
        ctx.lineTo(p.x, p.y);
	  }
	  
	  ctx.stroke();
    }
    
    // ²£Àþ¤ò½ñ¤¯
    for(phy = 0; phy <= 90; phy += step) {
      ctx.beginPath();
      
    ¡¡p = new Coordinates(-120, phy);
      ctx.moveTo(p.x, p.y);
      
	  for(theta = -115; theta <= 120; theta += 5) {
      ¡¡p = new Coordinates(theta, phy);
        ctx.lineTo(p.x, p.y);
	  }
	  
	  ctx.stroke();
    }
    
    // Êý°Ì¤ò½ñ¤¯
    ctx.fillStyle = 'yellow';
    ctx.textAlign = 'center';
    ctx.font = '30px monospace';
    drawText(ctx, 'ËÌ', 0 - angle, 0);
    drawText(ctx, 'ËÌÅì', 45 - angle, 0);
    drawText(ctx, 'Åì', 90 - angle, 0);
    drawText(ctx, 'ÆîÅì', 135 - angle, 0);
    drawText(ctx, 'Æî', 180 - angle, 0);
    drawText(ctx, 'ÆîÀ¾', 225 - angle, 0);
    drawText(ctx, 'À¾', 270 - angle, 0);
    drawText(ctx, 'ËÌÀ¾', 315 - angle, 0);
    
    ctx.restore();
  }
}

function drawText(ctx, text, theta, phy) {
  p = new Coordinates(theta, phy);
  if (p.x && p.y && 0 <= p.x && p.x <= gWidth && 0 <= p.y && p.y <= gHeight) {
    ctx.fillText(text, p.x, p.y);
  }
}

/**
 * ºÂɸÊÑ´¹¥¯¥é¥¹.
 * Êý°Ì¦È¡¢¶Ä³Ñ¦Õ ¤ÎÀ±¤ò¥¹¥Æ¥ì¥ª¿ÞË¡¤Ç¥×¥í¥Ã¥È¤·¤¿¤È¤­¤Î (x,y) ¤òµá¤á¤Þ¤¹
 */
function Coordinates() {
  this.initialize.apply(this,arguments);
}

Coordinates.prototype = {
  x : null,
  y : null,
  /**
   * ¥³¥ó¥¹¥È¥é¥¯¥¿.
   * @param theta Êý°Ì³Ñ(¿åÊ¿)
   * @param phy ¶Ä³Ñ(¿âľ)
   */
  initialize : function(theta, phy) {
    x3d = Math.cos(Math.PI * phy / 180) * Math.sin(Math.PI * theta / 180);
    y3d = Math.sin(Math.PI * phy / 180);
    z3d = Math.cos(Math.PI * phy / 180) * Math.cos(Math.PI * theta / 180);
    
    this.x = (0.5 + 0.5 * x3d / (1 + z3d)) * gWidth;
    this.y = (1.0 - y3d / (1 + z3d)) * gHeight;
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<!-- Á´²èÌÌɽ¼¨¤¹¤ë¾ì¹ç¤Ë¤Ï¡¢body ¤Ë²¿¤â½ñ¤«¤Ê¤¯¤Æ¤è¤¤ -->
</body>
</html>

lesson6 Touch / Click

[source] [reload]

swipe / drag ¤Ç²óž¤·¤Þ¤¹

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    
    <title>Lesson6</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
body {
  margin: 0px;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript" src="enchant.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
// enchant ¤Î½é´ü²½
enchant();

var gWidth = 640;
var gHeight = 480;

var gTouchX = null;
var gTouchY = null;

$(document).ready(function(){
  // ¥²¡¼¥à¥ª¥Ö¥¸¥§¥¯¥È¤ÎºîÀ®
  var game = new Game(gWidth, gHeight);
  
  // FPS (Frame Per Second) »ØÄê
  game.fps = 5;
  
  // ²èÁüÆɤ߹þ¤ß´°Î»¸å¤Ë¼Â¹Ô¤¹¤ë½èÍý
  game.onload = function() {
    var background = new BackgroundLayer();
    background.color = 'black';
    var graduations = new GraduationsLayer();
    var angle = 0;
    graduations.draw(angle, 15);
    
    graduations.sprite.addEventListener(Event.TOUCH_START, function(e){
      gTouchX = e.x;
      gTouchY = e.y;
    });
    
    graduations.sprite.addEventListener(Event.TOUCH_MOVE, function(e){
      if (gTouchX) {
        angle =  (angle + (e.x - gTouchX) * 180 / gWidth) % 360;
        graduations.draw(angle, 15);
      }
      
      gTouchX = e.x;
      gTouchY = e.y;
    });

    graduations.sprite.addEventListener(Event.TOUCH_END, function(e){
      if (gTouchX) {
        angle =  (angle + (e.x - gTouchX) * 180 / gWidth) % 360;
        graduations.draw(angle, 15);
      }
      
      gTouchX = null;
      gTouchY = null;
    });
    
    // ɽ¼¨¥ª¥Ö¥¸¥§¥¯¥È¥Ä¥ê¡¼¤ËÄɲÃ
    game.rootScene.addChild(background.sprite);
    game.rootScene.addChild(graduations.sprite);
  };
  
  game.start();
});

/**
 * Çطʥ쥤¥ä
 */
function BackgroundLayer() {
  this.initialize.apply(this,arguments);
}

BackgroundLayer.prototype = {
  sprite : null,
  surface : null,
  initialize : function() {
	this.sprite = new Sprite(gWidth, gHeight);
	this.surface = new Surface(gWidth, gHeight);
	this.sprite.image = this.surface;
	this.color = 'black';
  },
  set color(val) {
    var ctx = this.surface.context;
    ctx.save();
    ctx.fillStyle = val;
    ctx.fillRect(0, 0, gWidth, gHeight);
    ctx.restore();
  }
}

/**
 * ¥¹¥Æ¥ì¥ª¿ÞË¡¤ÎÊä½õÀþ¥ì¥¤¥ä
 */
function GraduationsLayer() {
  this.initialize.apply(this,arguments);
}

GraduationsLayer.prototype = {
  sprite : null,
  surface : null,
  /**
   * ¥³¥ó¥¹¥È¥é¥¯¥¿.
   */  
  initialize : function() {
	this.sprite = new Sprite(gWidth, gHeight);
	this.surface = new Surface(gWidth, gHeight);
	this.sprite.image = this.surface;
  },
  /**
   * Êä½õÀþ¤òÉÁ²è¤·¤Þ¤¹.
   * @param angle ÀµÌ̤ÎÊý³Ñ (0:ËÌ)
   * @param step Êä½õÀþ¤Î´Ö³Ö
   */
  draw : function (angle, step) {
    var ctx = this.surface.context;
    
    // Æ©ÌÀ¿§¤Ç¥¯¥ê¥¢
    this.surface.clear();
    
    ctx.save();
    ctx.strokeStyle = 'yellow';
    
    // ½ÄÀþ¤ò½ñ¤¯
    var start = -120 - (angle % step);
    var end = 120 - (angle % step);
    for(theta = start; theta < end; theta += step) {
      ctx.beginPath();
      
    ¡¡p = new Coordinates(theta, 0);
      ctx.moveTo(p.x, p.y);
      
	  for(phy = 5; phy <= 90; phy += 5) {
      ¡¡p = new Coordinates(theta, phy);
        ctx.lineTo(p.x, p.y);
	  }
	  
	  ctx.stroke();
    }
    
    // ²£Àþ¤ò½ñ¤¯
    for(phy = 0; phy <= 90; phy += step) {
      ctx.beginPath();
      
    ¡¡p = new Coordinates(-120, phy);
      ctx.moveTo(p.x, p.y);
      
	  for(theta = -115; theta <= 120; theta += 5) {
      ¡¡p = new Coordinates(theta, phy);
        ctx.lineTo(p.x, p.y);
	  }
	  
	  ctx.stroke();
    }
    
    // Êý°Ì¤ò½ñ¤¯
    ctx.fillStyle = 'yellow';
    ctx.textAlign = 'center';
    ctx.font = '30px monospace';
    drawText(ctx, 'ËÌ', 0 - angle, 0);
    drawText(ctx, 'ËÌÅì', 45 - angle, 0);
    drawText(ctx, 'Åì', 90 - angle, 0);
    drawText(ctx, 'ÆîÅì', 135 - angle, 0);
    drawText(ctx, 'Æî', 180 - angle, 0);
    drawText(ctx, 'ÆîÀ¾', 225 - angle, 0);
    drawText(ctx, 'À¾', 270 - angle, 0);
    drawText(ctx, 'ËÌÀ¾', 315 - angle, 0);
    
    ctx.restore();
  }
}

function drawText(ctx, text, theta, phy) {
  p = new Coordinates(theta, phy);
  if (p.x && p.y && 0 <= p.x && p.x <= gWidth && 0 <= p.y && p.y <= gHeight) {
    ctx.fillText(text, p.x, p.y);
  }
}

/**
 * ºÂɸÊÑ´¹¥¯¥é¥¹.
 * Êý°Ì¦È¡¢¶Ä³Ñ¦Õ ¤ÎÀ±¤ò¥¹¥Æ¥ì¥ª¿ÞË¡¤Ç¥×¥í¥Ã¥È¤·¤¿¤È¤­¤Î (x,y) ¤òµá¤á¤Þ¤¹
 */
function Coordinates() {
  this.initialize.apply(this,arguments);
}

Coordinates.prototype = {
  x : null,
  y : null,
  /**
   * ¥³¥ó¥¹¥È¥é¥¯¥¿.
   * @param theta Êý°Ì³Ñ(¿åÊ¿)
   * @param phy ¶Ä³Ñ(¿âľ)
   */
  initialize : function(theta, phy) {
    x3d = Math.cos(Math.PI * phy / 180) * Math.sin(Math.PI * theta / 180);
    y3d = Math.sin(Math.PI * phy / 180);
    z3d = Math.cos(Math.PI * phy / 180) * Math.cos(Math.PI * theta / 180);
    
    this.x = (0.5 + 0.5 * x3d / (1 + z3d)) * gWidth;
    this.y = (1.0 - y3d / (1 + z3d)) * gHeight;
  }
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<!-- Á´²èÌÌɽ¼¨¤¹¤ë¾ì¹ç¤Ë¤Ï¡¢body ¤Ë²¿¤â½ñ¤«¤Ê¤¯¤Æ¤è¤¤ -->
</body>
</html>

lesson7 ¥­¡¼ÆþÎÏ¡¢Pad¡¢Button

[source] [reload]

lesson8 Scene

[source] [reload]

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    
    <title>Lesson8</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
body {
  margin: 0px;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript" src="enchant.min.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
// ¥°¥í¡¼¥Ð¥ëÊÑ¿ô
var game = null;
 
// enchant ¤Î½é´ü²½
enchant();

$(document).ready(function(){
  // ¥²¡¼¥à¥ª¥Ö¥¸¥§¥¯¥È¤ÎºîÀ®
  game = new Game(320, 320);
  
  for (cnt = 1; cnt < 60; cnt++) {
    game.preload('http://enchantjs.com/assets/images/bg/bg' + padding(cnt) + '.jpg');
  }
  
  // ²èÁüÆɤ߹þ¤ß´°Î»¸å¤Ë¼Â¹Ô¤¹¤ë½èÍý
  game.onload = function() {
    var sceneAry = new Array();
    for (cnt = 0; cnt < 60; cnt++) {
      sceneAry.push(createScene(cnt));
    }
    for (cnt = 0; cnt < 59; cnt++) {
      sceneAry[cnt].setChildScene([sceneAry[cnt+1]]);
    }
    
    game.pushScene(sceneAry[0]);
  };
  
  game.start();
});

function createScene(num) {
  var scene = new Scene();
  scene.backgroundColor = 'white';
  var bg = new Sprite(320,240);
  bg.image = game.assets['http://enchantjs.com/assets/images/bg/bg' + padding(num+1) + '.jpg'];
  scene.addChild(bg);
  
  if (num > 0) {
    var back = new Label('Ìá¤ë');
    back.x = 0;
    back.y = 240;
    scene.addChild(back);
    back.addEventListener(Event.TOUCH_START, function(e) {
      game.popScene();
    });
  }
  
  // ³ÈÄ¥
  scene.name = num;
  
  // ³ÈÄ¥
  scene.setChildScene = function(childScenes) {
    for(num = 0; num < childScenes.length; num++) {
	  var link = new Label(childScenes[num].name + '¤Ø');
	  link.x = (num+1) * 50;
	  link.y = 240;
	  link.forward = childScenes[num];
	  scene.addChild(link);
	  
	  link.addEventListener(Event.TOUCH_START, function(e) {
	    game.pushScene(this.forward);
	  });
    }
  };
  
  return scene;
}

function padding(num){
  var str = '00' + num;
  return str.substring(str.length - 2, str.length);
}
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<!-- Á´²èÌÌɽ¼¨¤¹¤ë¾ì¹ç¤Ë¤Ï¡¢body ¤Ë²¿¤â½ñ¤«¤Ê¤¯¤Æ¤è¤¤ -->
</body>
</html>

lesson9 Map

[source] [reload]

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8"><!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->

    <title>Lesson9</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
    body {
    margin: 0px;
    }
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="ui.enchant.js"></script>
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
enchant();

$(document).ready(function(){
    var game = new Game(240, 320);
    
    game.preload('http://enchantjs.com/assets/images/chara1.gif','map0.gif');
    game.fps = 15;
    
    game.onload = function() {
        
        var map = new Map(16, 16);
        map.image = game.assets['map0.gif'];
        map.loadData([
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 83, 84, 84, 84, 84, 84, 84, 84, 85, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36,115,116,116,116,116,116,116,116,117, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 16, 17, 17, 17, 17, 17, 17, 17, 18, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 32, 33, 33, 33, 33, 33, 33, 33, 34, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 32, 33, 33, 33, 33, 33, 33, 33, 34, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 32, 33, 33, 33, 33, 33, 33, 33, 34, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 32, 33, 33, 33, 33, 33, 33, 33, 34, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 48, 49, 49, 49, 49, 33, 33, 49, 50, 36, 36, 36, 36, 36],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 37, 32, 34, 36,147,148,148,148,148,149],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 48, 33, 18,163,164,164,164,164,165],
            [ 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 32, 34,179,180,180,180,180,181],
            [ 36,  7,  7,  7,  7,  7,  7,  7,  7,  7,  7,  7, 32, 34, 36, 36, 36, 36, 36, 36],
            [ 36,  7, 36,  7, 36, 36, 36, 36, 36, 36, 36, 36, 32, 34, 36, 36, 36, 36, 36, 36],
            [ 36,  7, 36,  7,  7,  7,  7,  7,  7,  7,  7, 36, 32, 34, 36, 36, 36, 36, 36, 36],
            [ 36,  7, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 32, 34, 36, 36, 36, 36, 36, 36],
            [ 36,  7, 36,  7,  7,  7,  7, 36, 36, 36, 36, 36, 32, 34, 36, 36, 36, 36, 36, 36],
            [ 36,  7, 36,  7, 36, 36, 36, 36, 36, 36,  7, 36, 32, 33, 17, 18, 36, 36, 36, 36],
            [ 36,  7, 36,  7, 36,  7,  7, 36, 36, 36, 36, 36, 48, 49, 33, 34, 36, 36, 36, 36],
            [ 36,  7, 36,  7, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 32, 34, 36, 36, 36, 36],
            [ 36,  7, 36,  7,  7,  7,  7,  7,  7, 22, 36, 36, 36, 36, 32, 34, 36, 36, 36, 36],
            [ 36,  7, 36, 36, 36, 36, 36, 36, 36, 97, 97, 97, 97, 36, 97, 34, 36, 36, 36, 36],
            [ 36,  7,  7,  7,  7,  7,  7,  7,  7,  7,  7,  7,  7,  7, 32, 33, 18, 36, 36, 36],
            [ 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 48, 33, 33, 17, 17, 17]
            ],[
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, 20, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, 75, 76, 77, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,131,131, 92,131,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1,131,131,131,131,163],
            [ -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
            [  7, 23, 23, 23, 23, 23, 23, 23, 23, 23, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
            [  7, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1],
            [  7, 36,  7,  7,  7,  7,  7,  7,  7,  7,  7,  7, -1, -1,  7,  7,  7,  7,  7,  7],
            [  7, 36,  7, 23, 23, 23, 23, 23, 23, 23, 23, 23, -1, -1, 23, 23, 23, 23, 23, 23],
            [  7, 36,  7, 36, 36, 36, 36, 36, 36, 36, 36, 36, -1, -1, 28, 28, 28, -1, -1, 43],
            [  7, 36,  7, 35, 23, 23, 23, 23, 23, 23,  7, -1, -1, -1, 28, 27, 28, -1, -1, 43],
            [  7, 36,  7, 36, 36, 36,  7, 20, 20, 20,  7, -1, -1, -1, 28, 28, 28, -1, -1, 43],
            [  7, 36,  7, 23, 23, 36,  7, 20,  7, 20,  7, -1, -1, -1, -1, -1, -1, -1, -1, 43],
            [  7, 36,  7, 36, -1, 36,  7, 11,  7, 20,  7, 20, -1, -1, -1, -1, -1, -1, -1, 43],
            [  7, 36,  7, 36, 23, 23, 23, 23,  7, 20,  7, -1, -1, -1, -1, -1, -1, -1, -1, 43],
            [  7, 52,  7, 36, 36, 36, 36, 20,  7, 20,  7,  7,  7, -1, -1, -1, -1, -1, -1, 43],
            [  7, 52, 23, 23, 36, 23, 23, 23, 23, 36, 23, 23,  7, -1, 38, 38, -1, -1, -1, 43],
            [  7, 36, 36, 36, 36, 36, 36, 36, 36, 36, 36, 20,  7, 36, -1, -1, -1, 43, 43, 43],
            [ 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, 23, -1, -1, -1, -1, -1, -1]
        ]);
        map.collisionData = [
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,1,1,1,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
            [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1],
            [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1],
            [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1],
            [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1],
            [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,0,1,1],
            [0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,0,1,1,1,1,1,1,1,1,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1],
            [1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
            [1,0,1,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
            [1,0,1,0,1,1,1,1,1,1,1,0,1,1,0,0,0,0,0,1],
            [1,0,1,0,0,0,1,0,0,0,1,0,1,1,0,0,0,0,0,1],
            [1,0,1,1,1,0,1,0,1,0,1,0,1,1,1,1,0,0,0,1],
            [1,0,1,0,0,0,1,0,1,0,1,0,1,1,1,1,0,0,0,1],
            [1,0,1,0,1,1,1,1,1,0,1,0,0,0,1,1,0,0,0,1],
            [1,0,1,0,0,0,0,0,1,0,1,1,1,0,1,1,0,0,0,1],
            [1,0,1,1,0,1,1,1,1,0,1,1,1,0,0,0,0,0,0,1],
            [1,0,0,0,0,0,0,0,0,0,0,0,1,0,1,1,1,1,1,1],
            [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
        ];
        var pad = new Pad();
        pad.moveTo(0, 220);
        
        var stage = new Group()
        stage.addChild(map);
        
        var bear = new Sprite(32, 32);
        bear.image = game.assets['http://enchantjs.com/assets/images/chara1.gif'];
        bear.frame = 0;
        bear.x = 0;
        bear.y = 0;
        stage.addChild(bear);
        
        game.addEventListener(Event.ENTER_FRAME, function() {
            var dx = 0;
            var dy = 0;
            
            if(game.input.up) {
                dy = -5;
            } else if(game.input.down) {
                dy = +5;
            }
            
            if(game.input.left) {
                dx = -5;
            } else if(game.input.right) {
                dx = +5;
            }
            
            if (dx == 0 && dy == 0) {
            return;
            }
            
            var bx = round(bear.x + dx, 0, map.width - bear.width);
            var by = round(bear.y + dy, 0, map.height - bear.height);
            
            if (map.hitTest(bx + bear.width * 0.5, by + bear.height)) {
                return;
            }
            
            bear.x = bx;
            bear.y = by;
            bear.frame = (bear.frame + 1) % 3;
            bear.scaleX = (dx == 0) ? bear.scaleX : (dx > 0 ? 1 :  -1);
            
            stage.x = round(game.width * 0.5 - bear.x, game.width - map.width, 0);
            stage.y = round(game.height * 0.5 - bear.y, game.height - map.height, 0);
        });
        
        game.rootScene.addChild(stage);
        game.rootScene.addChild(pad);
    };
    
    game.start();
});

/**
 * val ¤¬ min ̤Ëþ¤Ê¤é min ¤òÊÖ¤·¤Þ¤¹¡¢max ¤è¤êÂ礭¤±¤ì¤Ð max ¤òÊÖ¤·¤Þ¤¹¡£
 */
function round(val,min,max) {
  return (val < min) ? (min) : (val > max ? max : val)
}
/* ==================== SCRIPTS ==================== */
    </script>
</head>

<body>
</body>
</html>

lesson10 Sound (+draw.text.js)

[source] [reload]

(¥Þ¥¦¥¹¥Ü¥¿¥ó²¡²¼¤ÇºÆÀ¸³«»Ï)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- ¥¹¥Þ¡¼¥È¥Õ¥©¥óÍѤλØÄê(Á´²èÌÌɽ¼¨) -->
    
    <title>Lesson10</title>
    <style type="text/css">
/* ==================== STYLES ==================== */
body {
  margin: 0px;
}
/* ==================== STYLES ==================== */
    </style>
    <script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>    
    <script type="text/javascript" src="enchant.min.js"></script>    
    <script type="text/javascript" src="draw.text.js"></script>    
    <script type="text/javascript">
/* ==================== SCRIPTS ==================== */
enchant();

var baseurl = 'http://enchantjs.com/assets/sounds/';
var sounds = [
  'bgm06.wav', 'bgm07.wav', 'bgm08.wav',
  'bomb1.wav', 'bomb2.wav', 'bomb3.wav', 'bomb4.wav',
  'jingle01.wav', 'jingle02.wav', 'jingle03.wav', 'jingle04.wav', 'jingle05.wav',
  'lock1.wav', 'lock2.wav', 'lock3.wav', 'lock4.wav',
  'reload.wav',
  'se1.wav', 'se2.wav', 'se3.wav', 'se4.wav', 'se5.wav', 'se6.wav', 'se7.wav', 'se8.wav', 'se9.wav',
  'shot2.wav', 'shot3.wav', 'shot4.wav', 'shot5.wav',
  'walk1.wav', 'walk2.wav'
];
var snd;

$(document).ready(function(){
  var game = new Game(480, 320);
    
  game.fps = 15;
  
  game.onload = function() {
    for (cnt = 0; cnt < sounds.length; cnt++) {
      var x = cnt < 20 ? 0 : game.width / 2;
      var y = (cnt % 20) * 16;
      var text = new MutableText(x, y, game.width / 2, sounds[cnt]);
      text.addEventListener(Event.TOUCH_START, function(){
        snd = Sound.load(baseurl + this.text);
        snd.play();
      });
      text.addEventListener(Event.TOUCH_END, function(){
        if (snd) {
          snd.stop();
        }
      });
      game.rootScene.addChild(text);
    }
  };
  
  game.start();
});
/* ==================== SCRIPTS ==================== */
    </script>
  </head>
<body>
<!-- Á´²èÌÌɽ¼¨¤¹¤ë¾ì¹ç¤Ë¤Ï¡¢body ¤Ë²¿¤â½ñ¤«¤Ê¤¯¤Æ¤è¤¤ -->
</body>
</html>

HTML


*1 jpg,jpeg,gif,png,bmp
*2 mp3,aac,m4a,wav,ogg

źÉÕ¥Õ¥¡¥¤¥ë: filelesson10.html 3111·ï [¾ÜºÙ] filemap.png 1808·ï [¾ÜºÙ] filelesson9.html 2964·ï [¾ÜºÙ] filelesson8.html 2943·ï [¾ÜºÙ] filelesson7.html 3937·ï [¾ÜºÙ] filelesson6.html 3871·ï [¾ÜºÙ] filelesson5.html 3080·ï [¾ÜºÙ] filelesson4.html 3167·ï [¾ÜºÙ] filelesson3.html 3139·ï [¾ÜºÙ] filelesson2.html 3243·ï [¾ÜºÙ] filelesson1.html 3530·ï [¾ÜºÙ]

¥È¥Ã¥×   ÊÔ½¸ Åà·ë º¹Ê¬ ¥Ð¥Ã¥¯¥¢¥Ã¥× źÉÕ Ê£À½ ̾Á°Êѹ¹ ¥ê¥í¡¼¥É   ¿·µ¬ °ìÍ÷ ñ¸ì¸¡º÷ ºÇ½ª¹¹¿·   ¥Ø¥ë¥×   ºÇ½ª¹¹¿·¤ÎRSS   sitemap
Last-modified: 2012-08-15 (¿å) 03:06:37 (4497d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=aaf46be741
ISBN10
ISBN13
9784061426061