Sceneを切り替えよう | Webプログラミング!

Time-stamp: "2013-11-27 Wed 19:04 JST hig"

Sceneの使い方のサンプル

Sceneの使い方のサンプル

scene1.html

<!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>Test of Enchant.js</title>
    <style type="text/css">
      body { margin: 0; }
    </style>

    <script type="text/javascript" src="enchant.js"></script>
    <script type="text/javascript" src="plugins/ui.enchant.js"></script>
    <script type="text/javascript" src="scene1.js"></script>
  </head>
  <body>
  </body>
</html>

scene1.js

// -*- coding-system: utf-8 -*- 
enchant();

window.onload = function() {
    var game = new Game(320,320);
    game.fps = 16;
    game.preload('chara1.png');

    game.onload = function() {

	var expl = new Label("くまさんを重ねてみてね");
	expl.font="24px monospace";
	expl.color="rgb(128,128,128)";
	expl.moveTo(10,10);
	game.rootScene.addChild(expl);

	var polarbear = new Sprite(32,32);
	polarbear.image = game.assets['chara1.png'];
	game.rootScene.addChild(polarbear);
	polarbear.frame = 7;
	polarbear.moveTo(200,200);

	var bear = new Sprite(32,32);
	bear.image = game.assets['chara1.png'];
	game.rootScene.addChild(bear);
	bear.frame = 2;
	var d=2;
	var s=2;

	bear.moveTo(30,50);
	bear.addEventListener(Event.ENTER_FRAME, 
			      function() {
				  var input=game.input;
				  if( input.left ){
				      this.moveBy(-d,0);
				  } else if ( input.right ){
 				      this.moveBy(+d,0);
				  } else if ( input.up ){
				      this.moveBy(0,-d);
				  } else if ( input.down ){
				      this.moveBy(0,+d);
				  } else if ( input.a ){
				      this.scaleX*=2;
				  } else if ( input.b ){
				      this.scaleX*=-1;
				  }
				  if(this.intersect(polarbear)){
				      game.pushScene(hitscene);
//				      game.rootScene.removeChild(polarbear);
				  }
				  if(this.within(polarbear,100)){
				      polarbear.frame=8;
				  }
			      }
			     );


	// スタート画面の追加
	var startscene = new Scene();
	startscene.backgroundColor = "#00FF00"; // こうしないと, 透明なので下のScene が透ける
	var lab1=new Label("Start画面. クリックするとスタート");
	lab1.addEventListener(Event.TOUCH_START, 
			     function(e){
				 game.popScene();
			     }
			    );
	startscene.addChild(lab1)
	game.pushScene(startscene);


	var hitscene = new Scene();
	hitscene.backgroundColor = "#FF0000";
	var lab2=new Label("捕獲成功")
	lab2.addEventListener(Event.TOUCH_START, 
			     function(e){
				 game.popScene();
			     }
			    );
	hitscene.addChild(lab2);
    };

    game.start();
};

このサイトのコンテンツ

QRcode to hig3.net

https://hig3.net