Skip to content

Instantly share code, notes, and snippets.

@AlecYawata

AlecYawata/README

Created November 2, 2012 17:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AlecYawata/4002798 to your computer and use it in GitHub Desktop.
Save AlecYawata/4002798 to your computer and use it in GitHub Desktop.
Download ZIP
Alec & Myako RPG
Raw
README
RPGを作り途中。
Raw
jsdoit.css
body {
margin: 0px;
}
Raw
jsdoit.html
<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">
<script type="text/javascript">
var pad_png_name = 'http://usamimi-lab.jp/enchant/images/pad.png';
var apad_png_name = 'http://usamimi-lab.jp/enchant/images/apad.png';
var icon0_png_name = 'http://usamimi-lab.jp/enchant/images/icon0.png';
var font0_png_name = 'http://usamimi-lab.jp/enchant/images/font0.png';
</script>
<script type="text/javascript" src="http://usamimi-lab.jp/game/map.array"></script>
<script type="text/javascript" src="http://usamimi-lab.jp/enchant/enchant.js"></script>
<script type="text/javascript" src="http://usamimi-lab.jp/enchant/plugins/ui.enchant.js"></script>
<script type="text/javascript" src="http://usamimi-lab.jp/enchant/plugins/util.enchant.js"></script>
Raw
jsdoit.js
// forked from 9leap's "enchant.js RPG Sample Game" http://jsdo.it/9leap/rpg-sample
enchant();
function isset( data ){
return ( typeof( data ) != 'undefined' );
}
Surface.prototype.drawChara = function (asset, id) {
this.clear();
var countX = ~~(asset.width / this.width);
var x = ~~(id % countX);
var y = ~~(id / countX);
this.draw(asset, this.width * x, this.height * y, this.width, this.height, 0, 0, this.width, this.height);
};
MyMap = Class.create(Map, {
initialize : function(x,y) {
Map.call(this,x,y);
},
getMapX : function(x) {
if (x < 0 || this.width <= x) {
return false;
}
var width = this._image.width;
var tileWidth = this._tileWidth || width;
x = x / tileWidth | 0;
return x;
},
getMapY : function(y) {
if (y < 0 || this.height <= y) {
return false;
}
var height = this._image.height;
var tileHeight = this._tileHeight || height;
y = y / tileHeight | 0;
return y;
},
});
window.onload = function() {
var game = new Game(320, 320);
game.fps = 15;
game.keybind(88, 'a');
game.data = [];
game.data.flag = [];
game.preload(pad_png_name, apad_png_name, icon0_png_name, font0_png_name, 'http://usamimi-lab.jp/game/chara01.png');
game.event = null;
game.stageMapId = 'village';
game.stageMapData = {
'village' : {
ground_png_name : 'http://usamimi-lab.jp/img/tail_bg_01.png',
object_png_name : 'http://usamimi-lab.jp/img/tail_fr_01.png',
front_png_name : 'http://usamimi-lab.jp/img/tail_fr_01.png',
face_png_name : 'http://usamimi-lab.jp/game/face02.png',
png_data : [
'http://usamimi-lab.jp/img/tail_bg_01.png',
'http://usamimi-lab.jp/img/tail_fr_01.png',
'http://usamimi-lab.jp/img/tail_fr_01.png',
'http://usamimi-lab.jp/game/face02.png',
'http://usamimi-lab.jp/game/monster01.png',
],
map_id : 'village',
eventData : {
0 : [
{ type : 'message', text : '<font color="red">リンゴ姫</font><br>「テストテストテストテストテストテストテストテストテストテストテストテスト」', face : 5 },
{ type : 'message', text : '<font color="red">リンゴ姫</font><br>「この虫やろう」', face : 5 }
],
1 : [
// { type : 'mapchange', map : 'world', x : 10, y : 20, dir : 'right' },
{ type : 'message', text : '<font color="yellow">子供</font><br>「こんにちは、子供です」', face : 5 }
],
2 : [
{ type : 'charaimage', id : 0 },
{ type : 'message', text : '<font color="yellow">アレク</font><br>「はじめまして、オレはアレク。」', face : 0 }
],
20 : [
{ type : 'exec' , event : 0 },
{ type : 'tile', layer : 'back', base : 'this', x : +3, y : 0, tile : 697 },
{ type : 'tile', layer : 'event', x : 10, y : 12, tile : 3 },
{ type : 'tile', layer : 'back', x : 4, y : 12, tile : 697 },
{ type : 'tile', layer : 'event', x : 4, y : 12, tile : 5 },
],
3 : [
{ type : 'tile', base : 'this' },
{ type : 'flag', name : 'f1' , value : 1 },
{ type : 'tile', layer : 'back', x : 13, y : 12, tile : 697 },
{ type : 'tile', layer : 'event', x : 13, y : 12, tile : 4 },
{ type : 'message', text : 'テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト' }
],
4 : [
{ type : 'tile', base : 'this' },
{ type : 'tile', layer : 'back', x : 16, y : 12, tile : 697 },
{ type : 'tile', layer : 'event', x : 16, y : 12, tile : 5 },
{ type : 'tile', layer : 'event', base : 'player', tile : 6 },
{ type : 'tile', layer : 'back', base : 'player', tile : 697 },
{ type : 'message', text : 'test4' }
],
5 : [
{ type : 'message', text : 'ジャンプテスト' },
{ type : 'tile', layer : 'back', x : 5, y : 10, tile : 697 },
{ type : 'jump', x : 5, y : 10, dir : 'down'},
{ type : 'wait', interval : 1000 },
{ type : 'tile', layer : 'back', base : 'player', x : 1, y : 0, tile : 697 },
{ type : 'jump', base : 'player', x : 1, y : 0, dir : 'right'},
{ type : 'wait', interval : 1000 },
{ type : 'tile', layer : 'back', base : 'player', x : -1, y : 0, tile : 697 },
{ type : 'jump', base : 'player', x : -1, y : 0, dir : 'left'},
{ type : 'wait', interval : 1000 },
{ type : 'tile', layer : 'back', base : 'player', x : 0, y : 1, tile : 697 },
{ type : 'jump', base : 'player', x : 0, y : 1, dir : 'down'},
{ type : 'wait', interval : 1000 },
{ type : 'tile', layer : 'back', base : 'player', x : 0, y : -1, tile : 697 },
{ type : 'jump', base : 'player', x : 0, y : -1, dir : 'up'},
{ type : 'wait', interval : 1000 }
],
},
},
'world' : {
ground_png_name : 'http://usamimi-lab.jp/game/TileA1.png',
object_png_name : 'http://usamimi-lab.jp/img/tail_fr_01.png',
front_png_name : 'http://usamimi-lab.jp/img/tail_fr_01.png',
face_png_name : 'http://usamimi-lab.jp/game/face02.png',
png_data : [
'http://usamimi-lab.jp/game/TileA1.png',
'http://usamimi-lab.jp/img/tail_fr_01.png',
'http://usamimi-lab.jp/img/tail_fr_01.png',
'http://usamimi-lab.jp/game/face02.png',
],
map_id : 'world',
eventData : {
0 : [{type:'mapchange', map:'village', x : 5, y : 10,}],
},
},
};
game.preload(game.stageMapData[game.stageMapId].png_data);
var StageMap = function() {};
StageMap.prototype = {
load : function (stageMapId) {
this.data = game.stageMapData[stageMapId];
this.map_ground = new MyMap(16, 16);
this.map_ground.image = game.assets[this.data.ground_png_name];
this.map_ground.loadData(map_datas[this.data.map_id][0]);
this.map_ground.collisionData = map_datas[this.data.map_id][3];
game.map_ground = this.map_ground;
this.map_object = new MyMap(16, 16);
this.map_object.image = game.assets[this.data.object_png_name];
this.map_object.loadData(map_datas[this.data.map_id][1]);
game.map_object = this.map_object;
this.foregroundMap = new MyMap(16, 16);
this.foregroundMap.image = game.assets[this.data.front_png_name];
this.foregroundMap.loadData(map_datas[this.data.map_id][2]);
game.foregroundMap = this.foregroundMap;
this.map_event = new MyMap(16, 16);
this.map_event.loadData(map_datas[this.data.map_id][4]);
this.map_event.image = game.assets[this.data.front_png_name];
this.map_event.collisionData = map_datas[this.data.map_id][4];
game.map_event = this.map_event;
var face = new Sprite(74, 94);
var faceImage = new Surface(74 * 4, 94 * 2);
faceImage.draw(game.assets[this.data.face_png_name], 0, 0, 74 * 4, 94 * 2, 0, 0, 74 * 4, 94 * 2);
face.image = faceImage;
face.x = 25;
face.y = 195;
game.face = face;
var stage = new Group();
stage.addChild(this.map_ground);
stage.addChild(this.map_object);
stage.addChild(game.player);
stage.addChild(this.foregroundMap);
game.stage = stage;
game.rootScene.insertBefore(stage, game.rootScene.firstChild);
},
remove : function () {
game.rootScene.removeChild(game.stage);
game.stage = null;
},
};
game.onload = function() {
if (!game.player) {
var player = new Sprite(32, 48);
player.scale(0.666,0.666);
player.moveTo = function (mapX, mapY, dir, walk) {
this.x = mapX * 16 - 16 + 8;
this.y = mapY * 16 - 16 - 8;
if (isset(dir) && dir != null) {
var dirmap = {'down':0, 'left':1, 'right':2, 'up':3};
this.direction = dirmap[dir];
}
if (isset(walk) && walk != null) {
this.walk = walk;
}
this.frame = this.direction * 3 + this.walk;
}
player.moveTo(5, 12, 'down', 1);
var image = new Surface(96, 192);
// image.draw(game.assets['http://usamimi-lab.jp/game/chara01.png'], 192, 0, 96, 192, 0, 0, 96, 192);
image.drawChara(game.assets['http://usamimi-lab.jp/game/chara01.png'], 5);
player.image = image;
game.player = player;
}
if (game.stageMap) {
game.stageMap.remove();
}
game.stageMap = new StageMap();
game.stageMap.load(game.stageMapId);
var player = game.player;
player.isMoving = false;
player.frameMove = function() {
if (this.isMoving) {
this.frame = this.direction * 3 + this.walk;
this.moveBy(this.vx, this.vy);
if (!(game.frame % 3)) {
this.walk++;
this.walk %= 3;
}
if ((this.vx && (this.x-8) % 16 == 0) || (this.vy && (this.y+8) % 16 == 0)) {
this.isMoving = false;
// this.walk = 1;
var x = player.x + 16;
var y = player.y + 16 + 8;
var eventId = game.map_event.checkTile(x, y);
if (eventId != -1) {
game.launchEvent(eventId, game.map_event.getMapX(x), game.map_event.getMapY(y));
this.walk = 1;
this.frame = this.direction * 3 + this.walk;
}
}
} else {
this.vx = this.vy = 0;
if (game.input.left) {
this.direction = 1;
this.vx = -8;
} else if (game.input.right) {
this.direction = 2;
this.vx = 8;
} else if (game.input.up) {
this.direction = 3;
this.vy = -8;
} else if (game.input.down) {
this.direction = 0;
this.vy = 8;
}
this.frame = this.direction * 3 + 1;
if (this.vx || this.vy) {
var x = this.x + (this.vx ? this.vx / Math.abs(this.vx) * 16 : 0) + 16;
var y = this.y + (this.vy ? this.vy / Math.abs(this.vy) * 16 : 0) + 16 + 8;
if (0 <= x && x < game.map_ground.width && 0 <= y && y < game.map_ground.height && !game.map_ground.hitTest(x, y)) {
this.isMoving = true;
arguments.callee.call(this);
} else if (0 <= x && x < game.map_event.width && 0 <= y && y < game.map_event.height) {
var eventId = game.map_event.checkTile(x, y);
if (eventId != -1) {
game.launchEvent(eventId, game.map_event.getMapX(x), game.map_event.getMapY(y));
}
}
} else {
this.walk = 0;
}
}
};
if (!game.inited) {
game.init();
}
game.inited = true;
};
game.init = function () {
this.eventLabel = new MutableText(192, 0);
this.eventLabel.text = "event:";
this.eventLabel.x = 0;
this.eventLabel.y = 0;
game.rootScene.addChild(this.eventLabel);
var pad = new Pad();
pad.x = 110;
pad.y = 200;
pad.width = 100;
pad.height = 100;
pad.scale(2,2);
game.rootScene.addChild(pad);
var btn = new Button('a');
btn.x = 260;
btn.y = 260;
game.rootScene.addChild(btn);
game.rootScene.addEventListener('enterframe', function(e) {
var x = Math.min((game.width - 16) / 2 - game.player.x, 0);
var y = Math.min((game.height - 16) / 2 - game.player.y, 0);
x = Math.max(game.width, x + game.map_ground.width) - game.map_ground.width;
y = Math.max(game.height, y + game.map_ground.height) - game.map_ground.height;
game.stage.x = x;
game.stage.y = y;
if (game.event) {
game.event.frameMove();
} else {
game.player.frameMove();
}
});
}
game.eventQueue = [];
game.launchEvent = function(eventId, mapX, mapY) {
game.lastEventId = eventId;
game.eventMapX = mapX;
game.eventMapY = mapY;
game.runEvent = function (event) {
var mapX = game.eventMapX;
var mapY = game.eventMapY;
if (game.event) {
game.eventQueue.push(event);
return;
}
var layer = isset(event.layer) ? event.layer : 'event';
var x = isset(event.x) ? event.x : 0;//mapX;
var y = isset(event.y) ? event.y : 0;//mapY;
var tile = isset(event.tile) ? event.tile : -1;
//window.alert("layer:"+layer+", x:"+x+", y:"+y+", tile:"+tile);
switch (event.base) {
case 'this':
x += mapX;
y += mapY;
break;
case 'player':
x += game.map_ground.getMapX(game.player.x + 16);
y += game.map_ground.getMapY(game.player.y + 16 + 8);
break;
}
switch (event.type) {
case 'message':
game.messageLabel = new Label(40, 240, 240);
game.messageLabel.x = isset(event.face) ? 105 : 25;
game.messageLabel.y = 195;
game.messageLabel.width = isset(event.face) ? 200 : 280;
game.messageLabel.color = "rgba(255, 255, 255, 1)";
game.messageLabel.font = "15px monospace";
game.messageLabel.text = "";
game.messageLabel.buttonMode = 'a';
game.messageLabel.back = new Button("");
game.messageLabel.back.x = 10;
game.messageLabel.back.y = 180;
game.messageLabel.back.width = 280;
game.messageLabel.back.height = 120;
//this.messageLabel.back._element.style[this.messageLabel.back.VENDOR_PREFIX + "border-radius"] = "0em";
game.messageLabel.restore = function() {
this.back.backgroundColor = this.text ? "rgba(0, 0, 0, 1.0)" : "rgba(0, 0, 0, 0)";
}
game.messageLabel.restore();
game.rootScene.addChild(game.messageLabel.back);
game.rootScene.addChild(game.messageLabel);
if (isset(event.face)) {
game.face.frame = event.face;
game.rootScene.addChild(game.face);
}
game.event = new Object();
game.event.stop = function() {
game.event = null;
game.rootScene.removeChild(game.messageLabel);
game.rootScene.removeChild(game.messageLabel.back);
game.rootScene.removeChild(game.face);
game.removeEventListener('abuttondown', arguments.callee);
game.messageLabel = null;
game.execEventQueue();
};
game.event.frameMove = function() {
if (game.messageLabel.back.pressed) {
game.event.stop();
}
};
game.addEventListener('abuttondown', function(e) {
game.event.stop();
});
game.messageLabel.text = event.text;
game.messageLabel.restore();
break;
case 'battle':
game.event = ["Battle"];
game.event.init = function() {
var stage = new Group();
game.event.frameMove = function() {};
var back = new Label("");
back.backgroundColor = "#000";
back.x = 0;
back.y = 0;
back.width = 280;
back.height = 280;
stage.addChild(back);
var image = new Sprite(74, 94);
image.image = game.assets['http://usamimi-lab.jp/game/monster01.png'];
image.x = (280 - 74) / 2;
image.y = 30;
stage.addChild(image);
this.monsterImage = image;
this.monster = {
name : 'スライム',
maxhp : 20,
atk : 5,
};
this.monster.hp = this.monster.maxhp;
var monsterNameLabel = new Label(this.monster.name);
monsterNameLabel.x = (280-74)/2;
monsterNameLabel.y = 10;
monsterNameLabel.width = 74;
monsterNameLabel.textAlign = 'center';
monsterNameLabel.color = "#fff";
stage.addChild(monsterNameLabel);
this.monsterNameLabel = monsterNameLabel;
var monsterButton = new Button("");
monsterButton.x = (280-74)/2;
monsterButton.y = 30;
monsterButton.width = 50;
monsterButton.height = 94;
stage.addChild(monsterButton);
this.monsterButton = monsterButton;
monsterButton.addEventListener('touchmove', function(e){
window.alert(e.touches[0].pageX);
});
Button.prototype["touchstartEvent"] = function(e) {
if (this.state == 'disable') {
this.pressed = false;
return;
}
this.moved = 0;
this.defaultBackgroundColor = this.backgroundColor;
this.backgroundColor = this.activeBackgroundColor;
};
Button.prototype["touchmoveEvent"] = function() {
if (this.state == 'disable') {
return;
}
this.moved++;
if (this.moved >= 3)
this.backgroundColor = this.defaultBackgroundColor;
};
Button.prototype["touchendEvent"] = function() {
if (this.state == 'disable') {
return;
}
if (this.moved < 3) {
this.action();
}
this.backgroundColor = this.defaultBackgroundColor;
};
Button.prototype["setup"] = function() {
this.state = 'enable';
this.addEventListener('touchstart', this.touchstartEvent);
this.addEventListener('touchmove', this.touchmoveEvent);
this.addEventListener('touchend', this.touchendEvent);
};
var attackButton = new Button("<br>Attack");
this.attackButton = attackButton;
attackButton.x = 30;
attackButton.y = 200;
attackButton.height = 58;
attackButton.activeBackgroundColor = "#666";
attackButton.setup();
attackButton.action = function() {
messageLabel.text = "アレクの攻撃!!<br>";
game.event.setButtonState('disable');
setTimeout(function() {
messageLabel.text += "スライムに10のダメージ!!<br>";
game.event.monster.hp -= 10;
setTimeout(function(){
if (game.event.monster.hp <= 0) {
messageLabel.text += "スライムを倒した!!";
game.event.stage.removeChild(game.event.monsterNameLabel);
game.event.stage.removeChild(game.event.monsterImage);
game.event.stage.removeChild(game.event.monsterButton);
setTimeout(function(){
game.rootScene.removeChild(game.event.stage);
game.event = null;
}, 1000);
} else {
messageLabel.text = "";
game.event.setButtonState('enable');
}
}, 1000);
}, 1000);
};
stage.addChild(attackButton);
var escapeButton = new Button("<br>Escape");
this.escapeButton = escapeButton;
escapeButton.x = 183;
escapeButton.y = 200;
escapeButton.height = 58;
escapeButton.activeBackgroundColor = "#666";
escapeButton.setup();
escapeButton.action = function() {
game.rootScene.removeChild(game.event.stage);
game.event = null;
};
stage.addChild(escapeButton);
var messageLabel = new Label("テストテストテストテストテストテストテストテストテストテストテストテストテスト");
messageLabel.color = "#fff";
messageLabel.x = 60;
messageLabel.y = 140;
messageLabel.width = 160;
stage.addChild(messageLabel);
stage.x = 20;
stage.y = 20;
game.event.stage = stage;
game.rootScene.addChild(stage);
};
game.event.setButtonState = function(state) {
// this.attackButton._element.style['display']="invisible";
if (state != 'disable') {
this.attackButton.visible = true;
this.escapeButton.visible = true;
// game.event.stage.addChild(this.attackButton);
// game.event.stage.addChild(this.escapeButton);
} else {
this.attackButton.visible = false;
this.escapeButton.visible = false;
// game.event.stage.removeChild(this.attackButton);
// game.event.stage.removeChild(this.escapeButton);
}
this.attackButton.state = state;
this.escapeButton.state = state;
};
game.event.init();
break;
case 'charaimage':
game.player.image.drawChara(game.assets['http://usamimi-lab.jp/game/chara01.png'], x, y);
break;
case 'tile':
switch (layer) {
case 'back': game.map_ground._data[0][y][x] = tile; game.map_ground.image = game.map_ground.image; break;
case 'object': game.map_object._data[0][y][x] = tile; game.map_object.image = game.map_object.image; break;
case 'front': game.foregroundMap._data[0][y][x] = tile; game.foregroundMap.image = game.foregroundMap.image; break;
case 'collision': game.map_ground.collisionData[y][x] = tile; game.map_ground.image = game.map_ground.image; break;
case 'event':
game.map_event._data[0][y][x] = tile;
game.map_event.collisionData[y][x] = tile;
game.map_event.image = game.map_event.image;
break;
}
break;
case 'jump':
game.player.moveTo(x, y, event.dir, event.walk);
break;
case 'mapchange':
game.player.moveTo(x, y, event.dir, event.walk);
game.stageMapId = event.map;
game.preload(game.stageMapData[game.stageMapId].png_data);
game.stop();
game.start();
break;
case 'exec':
game.launchEvent(event.event, game.eventMapX, game.eventMapY);
break;
case 'flag':
game.data.flag[event.name] = event.value;
break;
case 'if':
if (event.flag) {
if (game.data.flag[event.flag]) {
for (i=0; i<event.then.length; i++) {
game.runEvent(event.then[i]);
}
} else {
for (i=0; i<event["else"].length; i++) {
game.runEvent(event["else"][i]);
}
}
}
break;
case 'wait':
game.event = ['waitEvent'];
game.event.frameMove = function () {};
setTimeout(function() {
game.event = null;
game.execEventQueue();
}, event.interval);
break;
}
}
game.eventLabel.text = "event:"+eventId;
for (var i=0; i<game.stageMap.data.eventData[eventId].length; i++) {
var event = game.stageMap.data.eventData[eventId][i];
game.runEvent(event);
}
}
game.execEventQueue = function () {
while (game.eventQueue.length && !game.event) {
game.runEvent(game.eventQueue.shift());
}
}
game.start();
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment