enchant.js ¤È¤³¤Î¥Ú¡¼¥¸¤Ë¤Ä¤¤¤Æ †
- enchant.js ¤Ï¡¢Javascript¤Ç¥²¡¼¥à¤òºî¤ë¤¿¤á¤Î¥Õ¥ì¡¼¥à¥ï¡¼¥¯
- ¤³¤Î¥Ú¡¼¥¸¤Ï¡¢¡Ö¥¼¥í¤«¤é»Ï¤á¤ë enchant.js ÆþÌç¡Ú¸ø¼°¥¬¥¤¥É¡Û¡×¤ÇÊÙ¶¯¤·¤¿¤â¤Î¤òÀ°Íý¤·¤¿¤â¤Î
![4048862588](https://img.hanmoto.com/bd/img/4048862588.jpg)
enchant.js ¤Î¥ª¥Ö¥¸¥§¥¯¥È †
![a graph image](http://at-sushi.com/pukiwiki/index.php?plugin=graphviz&image=68600945a9302f10158441e583a93299)
- ¥¤¥Ù¥ó¥È¤ò½èÍý¤Ç¤¤ë¥¯¥é¥¹
addEventListener?(type, listener) | ¥¤¥Ù¥ó¥È¥ê¥¹¥Ê¤ÎÄɲá£type: ¥¤¥Ù¥ó¥È¥¿¥¤¥×¡£listner: ¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥é(function) |
removeEventListener?(type, listener) | ¥¤¥Ù¥ó¥È¥ê¥¹¥Ê¤Îºï½ü¡£type: ¥¤¥Ù¥ó¥È¥¿¥¤¥×¡£listner: ¥¤¥Ù¥ó¥È¥Ï¥ó¥É¥é(function) |
clearEventListener?(type) | ¥¤¥Ù¥ó¥È¥ê¥¹¥Ê¤Î¥¯¥ê¥¢¡£type: ¥¤¥Ù¥ó¥È¥¿¥¤¥×¡£¾Êά»þ¤ÏÁ´¥¤¥Ù¥ó¥È¥¯¥ê¥¢ |
- ¥¤¥Ù¥ó¥È¥¿¥¤¥×
¥¤¥Ù¥ó¥È̾ | ¥¤¥Ù¥ó¥È | ¥ê¥¹¥Ê¤òÀßÄê¤Ç¤¤ëClass | È÷¹Í¡¦»²¹Í²Õ½ê |
Event.LOAD | Game loaded. (The game class call game.onload() when LOAD Event occur by the default) | Game | #lesson1 |
Event.PROGRESS | Game loading. | Game | |
Event.ENTER_FRAME | Frame start. | Game, Node | #lesson1 |
Event.EXIT_FRAME | Frame end. | Game | |
Event.ENTER | Scene beginning. | Scene | |
Event.EXIT | Scene end. | Scene | |
Event.ADDED | Node is added to Group. | Node | |
Event.ADDED_TO_SCENE | Node is added to Scene. | Node | |
Event.REMOVED | Node is deleted from Group. | Node | |
Event.REMOVED_FROM_SCENE | Node is deleted from Scene. | Node | |
Event.TOUCH_START | touch corresponding to Node has begun. Click is also treated as touch. | Node | #lesson6 |
Event.TOUCH_MOVE | touch corresponding to Node has been moved. Click is also treated as touch. | Node | #lesson6 |
Event.TOUCH_END | touch corresponding to touch has ended. Click is also treated as touch. | Node | #lesson6 |
Event.RENDER | Entity is rendered. | Entity | |
Event.INPUT_START | button is pushed. | Game, Scene | |
Event.INPUT_CHANGE | button input changes. | Game, Scene | |
Event.INPUT_END | button input ends. | Game, Scene | |
Event.LEFT_BUTTON_DOWN | left button is pushed. | Game, Scene | |
Event.LEFT_BUTTON_UP | left button is released. | Game, Scene | |
Event.RIGHT_BUTTON_DOWN | right button is pushed. | Game, Scene | |
Event.RIGHT_BUTTON_UP | right button is released. | Game, Scene | |
Event.UP_BUTTON_DOWN | up button is pushed. | Game, Scene | |
Event.UP_BUTTON_UP | up button is released. | Game, Scene | |
Event.DOWN_BUTTON_DOWN | down button is pushed. | Game, Scene | |
Event.DOWN_BUTTON_UP | down button is released. | Game, Scene | |
Event.A_BUTTON_DOWN | a button is pushed. | Game, Scene | |
Event.A_BUTTON_UP | a button is released. | Game, Scene | |
Event.B_BUTTON_DOWN | b button is pushed. | Game, Scene | |
Event.B_BUTTON_UP | b button is released. | Game, Scene | |
- GameÁ´ÂΤΥ³¥ó¥Æ¥Ê
Game(width, height) | ¥³¥ó¥¹¥È¥é¥¯¥¿ |
width | ²£Éý(int)¡¢Ì¤»ØÄê»þ¤Ï 320 |
height | ½ÄĹ(int)¡¢Ì¤»ØÄê»þ¤Ï 320 |
fps | FPS |
preload(asset) | asset¤ÎÆɤ߹þ¤ß¡£³ÈÄ¥»Ò¤Ë¤è¤Ã¤Æ²èÁü*1¤Þ¤¿¤Ï²»À¼*2¤È¤·¤ÆÆɤ߹þ¤Þ¤ì¤ë |
assets | preload¤ÇÆɤ߹þ¤Þ¤ì¤¿»ñ»º(Ï¢ÁÛÇÛÎó key:asset ,value:object) |
rootScene | ºÇ½é¤Ëºî¤é¤ì¤ëscene |
currentScene | ¸½ºß¤Îscene |
pushScene(scene) | ¥·¡¼¥ó¤Î¥¹¥¿¥Ã¥¯¤Ëscene¤òÀѤà (ºÇ¸å¤ËÄɲÃ) |
popScene() | ¥·¡¼¥ó¤Î¥¹¥¿¥Ã¥¯¤«¤é¼è¤ê½Ð¤¹ (ºÇ¸å¤ò¤È¤ê¤À¤¹) |
replaceScene(scene) | currentScene¤òscene¤Ë¤¹¤ë |
removeScene(scene) | ¥·¡¼¥ó¤Î¥¹¥¿¥Ã¥¯¤«¤éscent¤òºï½ü |
start() | |
stop() | |
pause() | |
resume() | |
keybind(keyCode,button) | keyCode¤Ëbutton¤ò³ä¤ê¤Ä¤±¤ë¡£button¤Ï"left", "right", "up", "down", "a", "b" |
- <div id="enchant-stage"></div> ¤¬ Game ¥³¥ó¥Æ¥Ê¤Ë¤Ê¤ë
- <body></body> ¤Ë¤Ê¤¤¾ì¹ç¤Ë¤Ï¼«Æ°Åª¤Ëºî¤é¤ì¤ë > #lesson1
- <body></body> ¤Ë¤¢¤ë¾ì¹ç¤Ë¤Ï¤½¤ì¤¬»È¤ï¤ì¤ë > #lesson2
- ÉÁ²è¥ª¥Ö¥¸¥§¥¯¥È¤Î¾å°Ì¥¯¥é¥¹
x | XºÂɸ |
y | YºÂɸ |
moveTo(x,y) | ºÂɸ (x,y) ¤Ë°ÜÆ° |
moveBy(x,y) | ¸½ºßºÂɸ¤«¤é (x,y) ¤À¤±°ÜÆ° |
remove() | ¥ª¥Ö¥¸¥§¥¯¥È¥Ä¥ê¡¼¤«¤éºï½ü |
- ʪÂΤξå°Ì¥¯¥é¥¹
width | ²£Éý |
height | ½ÄĹ |
backgroundColor | CSS ¤Î color ¤ÈƱ¤¸·Á¼°¤Ç»ØÄê |
opacity | Æ©ÌÀÅÙ 0(Æ©ÌÀ)¡Á1(ÉÔÆ©ÌÀ) |
visible | true / false |
touchEnabled | true / false |
intersect(other) | ¾×ÆÍȽÄê(»Í¶ù) |
within(other,distance) | ¾×ÆÍȽÄê(Ã濴Ʊ»Î¤Îµ÷Î¥¤¬distance°ÊÆ⤫)¡£distance¾Êά»þ¤Ï¡¢distance=(¾å+²¼+º¸+±¦)¡à4 |
- #lesson4
- ¥é¥Ù¥ë
Label(text) | ¥³¥ó¥¹¥È¥é¥¯¥¿¡£width¤Î½é´üÃÍ¤Ï 300¡£textAlign¤Î½é´üÃÍ¤Ï left |
text | ɽ¼¨¥é¥Ù¥ë |
textAlign | CSS ¤Î text-align¡£"left", "right", "center" |
font | CSS ¤Î font¡£"99px font-name" ¤Îʸ»úÎó¤Ç»ØÄꤹ¤ë¡£ font-name¤Ë¤Ï¡¢"sans-serif"(¥´¥·¥Ã¥¯), "serif"(ÌÀÄ«), "monospace"(ÅùÉý) ¤ò»ØÄꤹ¤ë¡£ "MS P¥´¥·¥Ã¥¯"¤â»ØÄê²Äǽ¤À¤¬¡¢¤É¤Î¥×¥é¥Ã¥È¥Û¡¼¥à¤Ç¤âÆ°¤¯¤è¤¦¤Ë¥Õ¥©¥ó¥È¥Õ¥¡¥ß¥ê¡¼Ì¾¤ò»ØÄꤹ¤ë |
color | CSS ¤Î color¡£"#ffffff", "rgb(255,255,255)", "rgba(255,255,255,1.0)", "red" ¤Îʸ»úÎó¤Ç»ØÄꤹ¤ë |
- #lesson3
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
- Node ¤Î¥³¥ó¥Æ¥Ê
Group() | ¥³¥ó¥¹¥È¥é¥¯¥¿ |
addChild(node) | Group¤Ënode¤òÄɲà |
insertBefore(node, refernece) | reference ¤Î¼¡¤Ë node ¤òÄɲà |
removeChild() | Group¤«¤énode¤òºï½ü |
firstChild | ºÇ½é¤Înode |
lastChild | ºÇ¸å¤Înode |
- ²óž¤Ç¤¤ë Group
RGroup(width,height) | ¥³¥ó¥¹¥È¥é¥¯¥¿ |
rotation | ²óž³Ñ (get¤Ç²óž³Ñ¤ò¼èÆÀ¡¢set¤Ç²óž) |
- Game ¤Ï¡¢Ê£¿ô¤Î Scene ¤«¤é¤Ê¤ë
- Game = ¥¿¥¤¥È¥ëScene + ¥×¥ì¥¤Scene + ¥²¡¼¥à¥ª¡¼¥Ð¡¼Scene ¡¦¡¦¡¦ ¤Ê¤É
- Scene ¤Ï Group ¤Ê¤Î¤Ç¡¢Node ¤ä Group ¤ò»ý¤Ä¤³¤È¤¬½ÐÍè¤ë
Scene() | ¥³¥ó¥¹¥È¥é¥¯¥¿ |
backgroundColor | CSS ¤Î color¡£"#ffffff", "rgb(255,255,255)", "rgba(255,255,255,1.0)", "red" ¤Îʸ»úÎó¤Ç»ØÄꤹ¤ë |
- ¥µ¥¦¥ó¥É
Sound.load(url) | ¥µ¥¦¥ó¥É¤ÎÆɤ߹þ¤ß(ÊÖÃͤϥµ¥¦¥ó¥É¥ª¥Ö¥¸¥§¥¯¥È)¡£game.preload(url)¡¢game.assets[url] ¤Ç¤âÆɤ߽Ф»¤ë |
play() | ºÆÀ¸³«»Ï |
stop() | ºÆÀ¸½ªÎ» |
pause() | ̾̂ |
currentTIme | ¸½ºß¤ÎºÆÀ¸°ÌÃÖ(ÉÃ) |
duration | ºÆÀ¸»þ´Ö(ÉÃ) |
volume | ¥Ü¥ê¥å¡¼¥à¡£0(̵²»)¡Á1(ºÇÂç) |
#lesson10
- lesson1.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>Lesson1</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();
$(document).ready(function(){
// ¥²¡¼¥à¥ª¥Ö¥¸¥§¥¯¥È¤ÎºîÀ®
var game = new Game(240, 320);
// ²èÁü¤ÎÆɤ߹þ¤ß
game.preload('http://enchantjs.com/assets/images/chara1.gif');
// FPS (Frame Per Second) »ØÄê
game.fps = 15;
// ²èÁüÆɤ߹þ¤ß´°Î»¸å¤Ë¼Â¹Ô¤¹¤ë½èÍý
game.onload = function() {
var bear = new Sprite(32, 32);
bear.image = game.assets['http://enchantjs.com/assets/images/chara1.gif'];
// ¥¤¥á¡¼¥¸¤Î 0¥Õ¥ì¡¼¥à (0,0)-(31,31) ¤ò»È¤¦
bear.frame = 0;
// Frame ¤´¤È¤ÎÄê´ü½èÍý (°ìÉÃ´Ö¤Ë game.fps ²ó¸Æ¤Ð¤ì¤ë)
bear.addEventListener(Event.ENTER_FRAME, function() {
// this ¤Ï bear ¤Ë¤Ê¤ë
this.x = (this.x + 5) % game.width;
this.y = (this.y + 1) % game.height;
// frame = 0 : ( 0,0)-(31,31)
// frame = 1 : (32,0)-(63,31)
// frame = 2 : (64,0)-(95,31)
this.frame = (bear.frame + 1) % 3;
});
// ɽ¼¨¥ª¥Ö¥¸¥§¥¯¥È¥Ä¥ê¡¼¤ËÄɲÃ
game.rootScene.addChild(bear);
};
game.start();
});
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
<!-- Á´²èÌÌɽ¼¨¤¹¤ë¾ì¹ç¤Ë¤Ï¡¢body ¤Ë²¿¤â½ñ¤«¤Ê¤¯¤Æ¤è¤¤¡£¼«Æ°Åª¤Ë³ÈÂ礵¤ì¤ë -->
</body>
</html>
- ¤¹¤²¡¼¡¢¥¯¥Þ¤¬Ê⤤¤Æ¤ë¡ª
- ¤É¤¦¤»¾Íè ajax ¤â»È¤¦¤³¤È¤Ë¤Ê¤ë¤Î¤Ç¡¢º£¤Î¤È¤³¤í»È¤Ã¤Æ¤Ê¤¤¤±¤É jQuery ¤âÆþ¤ì¤Æ¤Þ¤¹
- EventTarget
- Game
- Sprite
- lesson3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lesson3</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();
var TXT_COLOR = new Array('green','red','blue','#660066');
$(document).ready(function(){
var game = new Game(240, 320);
game.fps = 2;
game.onload = function() {
var lbl = new Label(new Date().toLocaleString());
lbl.x = 10;
lbl.y = 10;
lbl.font = "14px monospace";
lbl.addEventListener(Event.ENTER_FRAME, function() {
var now = new Date();
this.text = now.toLocaleString();
this.color = TXT_COLOR[now.getSeconds() % TXT_COLOR.length];
});
game.rootScene.addChild(lbl);
};
game.start();
});
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
</body>
</html>
- Label
- lesson4.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>Lesson4</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();
/**
* Bear ¥¯¥é¥¹
*/
function Bear() {
this.initialize.apply(this,arguments);
}
Bear.prototype = {
/** ¥¹¥×¥é¥¤¥È. */
sprite : null,
/** ¿Ê¹ÔÊý¸þ( 1:±¦¡¢-1:º¸ ). */
dirX : 1,
/** ¿Ê¹ÔÊý¸þ( 1:²¼¡¢-1:¾å ). */
dirY : 1,
_characters : null,
_chNo : null,
_game : null,
initialize : function(game, characters, x, y, dir) {
this._game = game;
this.sprite = new Sprite(32,32);
this.sprite.image = game.assets['http://enchantjs.com/assets/images/chara1.gif'];
this.sprite.x = x;
this.sprite.y = y;
this.dirX = dir > 0 ? 1 : -1;
this.dirY = dir > 0 ? 1 : -1;
this._characters = characters;
this._chNo = 0;
this.sprite.frame = this._characters[this._chNo];
},
move : function() {
this.sprite.x = round( this.sprite.x + this.dirX * rand(5), 0, this._game.width );
this.sprite.y = round( this.sprite.y + this.dirY * rand(5), 0, this._game.height );
this._chNo = (this._chNo + 1) % (this._characters.length);
this.sprite.frame = this._characters[this._chNo];
this.sprite.scaleX = this.dirX;
}
}
/**
* val ¤¬ min ̤Ëþ¤Ê¤é max ¤òÊÖ¤·¤Þ¤¹¡¢max ¤è¤êÂ礤±¤ì¤Ð min ¤òÊÖ¤·¤Þ¤¹¡£
*/
function round(val,min,max) {
return (val < min) ? (max) : (val > max ? min : val)
}
/**
* 0¡Ánum ¤ÎÍð¿ô¤òÊÖ¤¹
*/
function rand(num){
return Math.floor(Math.random() * num);
}
/**
* bear1 ¤È bear2 ¤¬½Å¤Ê¤Ã¤Æ¤¤¤¿¤é¿Ê¹ÔÊý¸þ¤òȿž¤µ¤»¤ë.
*/
function trunIfCrashed(bear1, bear2) {
if (bear1.sprite.within(bear2.sprite)) {
var dirX = bear1.dirX;
bear1.dirX = dirX * -1;
bear2.dirX = dirX;
var dirY = bear1.dirY;
bear1.dirY = dirY * -1;
bear2.dirY = dirY;
// bear1 ¤È bear2 ¤¬Î¥¤ì¤ë¤Þ¤ÇÆ°¤«¤¹¡£¤¿¤À¤·Ìµ¸Â¥ë¡¼¥×¤òÈò¤±¤ë¤¿¤á 100 ²ó¤Þ¤Ç
for (cnt = 1; cnt < 100 && bear1.sprite.within(bear2.sprite); cnt++) {
bear1.move();
bear2.move();
}
}
}
$(document).ready(function(){
var game = new Game(240, 320);
game.preload('http://enchantjs.com/assets/images/chara1.gif');
game.fps = 15;
game.onload = function() {
var bear1 = new Bear(game, [0,1,2], 0, 0, 1);
var bear2 = new Bear(game, [5,6,7], 100, 100, -1);
var bear3 = new Bear(game, [10,11,12], 200, 200 , 1);
var bear4 = new Bear(game, [4], 300, 100, -1);
game.addEventListener(Event.ENTER_FRAME, function() {
bear1.move();
bear2.move();
bear3.move();
bear4.move();
trunIfCrashed(bear1, bear2);
trunIfCrashed(bear1, bear3);
trunIfCrashed(bear1, bear4);
trunIfCrashed(bear2, bear3);
trunIfCrashed(bear2, bear4);
trunIfCrashed(bear3, bear4);
});
game.rootScene.addChild(bear1.sprite);
game.rootScene.addChild(bear2.sprite);
game.rootScene.addChild(bear3.sprite);
game.rootScene.addChild(bear4.sprite);
};
game.start();
});
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
</body>
</html>
- Entity#within(other) ¤ò»È¤Ã¤ÆÅö¤¿¤êȽÄê¤ò¤¹¤ë
- Sprite.scaleX = -1 ¤Ç¡¢²èÁü¤òº¸±¦È¿Å¾¤µ¤»¤ë (X Êý¸þ¤Ë -1 Çܤ¹¤ë)
- Javascript ¤Î ¥¯¥é¥¹ÄêµÁ ¤Î ÄêÀÐ
function Bear() {
// function Bear() ¤Ï¡¢¥³¥ó¥¹¥È¥é¥¯¥¿¤ò¸Æ¤Ó½Ð¤¹¤À¤±
this.initialize.apply(this,arguments);
}
Bear.prototype = {
// ¥³¥ó¥¹¥È¥é¥¯¥¿
initialize : function(game, characters, x, y, dir) {
...
}
}
lesson5 Surface¤Ç¥°¥é¥Õ¥£¥Ã¥¯ÉÁ²è †
<!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>
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>
- ¥¡¼¥Ü¡¼¥É¤Ë¤Ä¤¤¤Æ
- game.keybind(code,key) ¤Ç¡¢¥¡¼¥³¡¼¥É¤Ë up,down,left,right,a,b ¥Ü¥¿¥ó¤ò³ä¤êÉÕ¤±¤ë
- up,down,left,right ¤Ï¡¢Ìð°õ¥¡¼¤Ë³ä¤êÅö¤Æ¤é¤ì¤Æ¤¤¤ë
// Z ¥¡¼¤ò A¥Ü¥¿¥ó¡¢X ¥¡¼¤ò B¥Ü¥¿¥ó¤Ë³ä¤êÉÕ¤±¤ë
game.keybind(90,'a');
game.keybind(88,'b');
- ¥Ü¥¿¥ó¤¬²¡¤µ¤ì¤Æ¤¤¤ë¤«¤É¤¦¤«¤Ï¡¢¥¤¥Ù¥ó¥È¤Ç¤Ï¤Ê¤¯¥Õ¥é¥°¤ÇȽÃǤ¹¤ë
game.input.up : boolean
game.input.down : boolean
game.input.right : boolean
game.input.left : boolean
game.input.a : boolean
game.input.b : boolean
- ²¾Áõ Pad ¤Ë¤Ä¤¤¤Æ
- ²¾Áõ Button ¤Ë¤Ä¤¤¤Æ
- ²¾ÁÛ¥¢¥Ê¥í¥°Pad (APad) ¤Ë¤Ä¤¤¤Æ
- plugin ¤Î ui.enchant.js ¤È pad.png, apad.png ¤¬É¬Í×
- ÀßÃÖÊýË¡¤Ï Pad ¤ÈƱ¤¸
var pad = new APad();
pad.moveTo(0, 220);
game.rootScene.addChild(pad);
- Ãͤϼ¡¤ÎÊýË¡¤Ç¼èÆÀ¤Ç¤¤ë
APad.isTouched (²¡¤µ¤ì¤Æ¤¤¤ë¤«)
APad.vx
APad.vy
APad.rad (³ÑÅÙ)
APad.dist (Ãæ¿´¤«¤é¤Îµ÷Î¥)
- lesson7.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>Lesson7</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="ui.enchant.js"></script>
<script type="text/javascript">
/* ==================== SCRIPTS ==================== */
enchant();
var btnTheme = {
normal: {
"background" : "rgba(255,255,255,0.1)",
"color" : "lightgray",
"border" : "lightgray 1px solid",
"text-shadow" : "0 1px 0 #fff"
},
active: {
"background-image" : "-VENDOR-linear-gradient(#ccc, #999)",
"color" : "#333",
"border" : "#666 1px solid",
"text-shadow" : "0 1px 0 #ccc",
"-VENDOR-box-shadow" : "0 1px 0 rgba(255,255,255,.3)"
}
}
/**
* Bear ¥¯¥é¥¹
*/
function Bear() {
this.initialize.apply(this,arguments);
}
Bear.prototype = {
sprite : null,
_walkimgs : [0,1,2],
_dashimg : 4,
_chNo : null,
_game : null,
initialize : function(game, characters) {
this._game = game;
this.sprite = new Sprite(32,32);
this.sprite.image = game.assets['http://enchantjs.com/assets/images/chara1.gif'];
this.sprite.x = 0;
this.sprite.y = 0;
this._characters = characters;
this._chNo = 0;
this.sprite.frame = this._walkimgs[this._chNo];
},
move : function(dx, dy, dash) {
if (dx == 0 && dy == 0) {
this.sprite.frame = dash ? this._dashimg : this._walkimgs[this._chNo];
return;
}
if (dash) {
this.sprite.x = round(this.sprite.x + dx * 1.5, 0, 240);
this.sprite.y = round(this.sprite.y + dy * 1.5, 0, 320);
} else {
this.sprite.x = round(this.sprite.x + dx, 0, 240);
this.sprite.y = round(this.sprite.y + dy, 0, 320);
}
this._chNo = (this._chNo + 1) % (this._walkimgs.length);
this.sprite.frame = dash ? this._dashimg : this._walkimgs[this._chNo];
this.sprite.scaleX = (dx ==0 ? this.sprite.scaleX : ( dx > 0 ? 1 : -1));
}
}
/**
* val ¤¬ min ̤Ëþ¤Ê¤é max ¤òÊÖ¤·¤Þ¤¹¡¢max ¤è¤êÂ礤±¤ì¤Ð min ¤òÊÖ¤·¤Þ¤¹¡£
*/
function round(val,min,max) {
return (val < min) ? (max) : (val > max ? min : val)
}
$(document).ready(function(){
var game = new Game(240, 320);
game.preload('http://enchantjs.com/assets/images/chara1.gif');
game.fps = 15;
// Z ¥¡¼¤ò A¥Ü¥¿¥ó¡¢X ¥¡¼¤ò B¥Ü¥¿¥ó¤Ë³ä¤êÉÕ¤±¤ë
game.keybind(90,'a');
game.keybind(88,'b');
game.onload = function() {
var bear = new Bear(game);
var pad = new Pad();
pad.moveTo(0, 220);
var btnA = new Button('A',btnTheme);
btnA.moveTo(130, 260);
var btnB = new Button('B',btnTheme);
btnB.moveTo(180, 260);
var jumpMode = false;
var jumpFrame = 0;
var jumpDx = 0;
var jumpDy = 0;
var jumpDash = 0;
game.addEventListener(Event.ENTER_FRAME, function() {
if (jumpMode) {
jumpDiff = Math.sin(jumpFrame * Math.PI /4) - Math.sin(++jumpFrame * Math.PI /4);
bear.move(jumpDx, jumpDy + jumpDiff * 32, jumpDash);
if (jumpFrame == 4) {
jumpMode = false;
}
return;
}
var dx = 0;
var dy = 0;
var dash = btnA.pressed || game.input.a;
var jump = btnB.pressed || game.input.b;
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(jump) {
jumpMode = true;
jumpFrame = 0;
jumpDx = dx;
jumpDy = dy;
jumpDash = dash;
} else {
bear.move(dx, dy, dash);
}
});
game.rootScene.addChild(bear.sprite);
game.rootScene.addChild(pad);
game.rootScene.addChild(btnA);
game.rootScene.addChild(btnB);
};
game.start();
});
/* ==================== SCRIPTS ==================== */
</script>
</head>
<body>
</body>
</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>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>
- ¥²¡¼¥à¤Î¾ìÌ̤òÀÚ¤êÂؤ¨¤ë
- ¥²¡¼¥à¤Î¾ìÌ̤ϡ¢¥¹¥¿¥Ã¥¯¤Ê¤Î¤Ç Game#pushScene(s) ¤Ç¥·¡¼¥óÀÚ¤êÂؤ¨ Game#popScene() ¤ÇÌá¤ë
- ¤½¤Î¤Û¤«¤Ë¡¢¥¹¥¿¥Ã¥¯¤ÎÃæ¤Î¥·¡¼¥ó¤òÀÚ¤êÂؤ¨¤ë Game#replaceScene(s)¡¢Game#removeScene(s) ¤Ê¤É¤¬¤¢¤ë
- ¥·¡¼¥ó¤Ï¡¢½é´ü¾õÂ֤ǤÏÆ©²á¿§¤Ê¤Î¤Ç¡¢Scene.backgroundColor = 'white' ¤Ê¤É¤È¤·¤Æ¤ª¤«¤Ê¤¤¤È¡¢Á°²èÌ̤ÎÆâÍƤ¬¸«¤¨¤Æ¤·¤Þ¤¦¡£¤½¤ì¤Ï¤½¤ì¤Ç»È¤¤Æ»¤¬¤¢¤ë¤«¤â¤·¤ì¤Ê¤¤¤±¤É
<!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>
- Map ¤Ï¡¢Map Editor ¤ÇºîÀ®¤¹¤ë¤³¤È¤¬¤Ç¤¤ë
- Map ¤È ¥¥ã¥é¥¯¥¿(Sprite) ¤ò¤¤¤Ã¤¿¤óÂç¤¤Ê Group ¤Ë½ê°¤µ¤»¤ë
- ¥¥ã¥é¥¯¥¿¤Ï Group Æâ¤ÎºÂɸ¤ÇÁàºî¤¹¤ë
- Group ¤Î Scene (game.rootScene) Æâ¤Ç¤ÎºÂɸ¤òÁàºî¤¹¤ë
- ¤³¤¦¤¹¤ë¤È¡¢¥¹¥¯¥í¡¼¥ë¤ò¤¦¤Þ¤¯°·¤¨¤ë
- ¥¥ã¥é¥¯¥¿¤¬¡¢¸½ºß¤É¤Î¥¿¥¤¥ë¤Î¾å¤Ë¤¤¤ë¤Î¤«¤ò¼èÆÀ¤¹¤ë¤Î¤ò Map ¤«¤é¼èÆÀ¤¹¤ë¤Î¤ÏÂçÊѤ½¤¦¡£ÊõÈ¢¤äÔ䡢Į¤Ê¤É¤Ï¡¢Sprite ¤È¤·¤Æºî¤Ã¤Æ Map ¤ò´Þ¤à Group ¤ËÇÛÃÖ¤·¤¿Êý¤¬¤¤¤¤¤«¤â
(¥Þ¥¦¥¹¥Ü¥¿¥ó²¡²¼¤ÇºÆÀ¸³«»Ï)
<!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