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)マップの2次元データ。複数指定した場合には重ね合わせになる
collisionData移動できないタイルとそうでないタイルの2次元データ
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 670件 [詳細] filemap.png 290件 [詳細] filelesson9.html 670件 [詳細] filelesson8.html 679件 [詳細] filelesson7.html 931件 [詳細] filelesson6.html 920件 [詳細] filelesson5.html 796件 [詳細] filelesson4.html 876件 [詳細] filelesson3.html 978件 [詳細] filelesson2.html 1008件 [詳細] filelesson1.html 996件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2012-08-15 (水) 03:06:37 (1578d)
ISBN10
ISBN13
9784061426061