「js/sim」の編集履歴（バックアップ）一覧はこちら
js/sim - (2019/07/08 (月) 18:58:39) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
#javascript(){{
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var job_array = ["ウォーリア","レンジャー","メイジ","クレリック","マーチャント","モンク"];
var imgList = ["job","skin","mhair","fhair"];
var dir = "https://img.atwikiimg.com/www65.atwiki.jp/yurugaru/pub/";
var jobSrcs = [
dir+"Body/Warrior.png",
dir+"Body/Ranger.png",
dir+"Body/Mage.png",
dir+"Body/Cleric.png",
dir+"Body/Merchant.png",
dir+"Body/Monk.png"
];
var skinSrcs = [
dir+"Skin/skin0_full.png",
dir+"Skin/skin1_full.png",
dir+"Skin/skin2_full.png",
dir+"Skin/skin3_full.png",
dir+"Skin/skin4_full.png"
];
var base_color = [[255,255,255],[220,220,220],[180,180,180]];
var hair_color = [
[[90,89,238],[74,76,205],[65,64,172]],
[[238,80,98],[205,68,82],[172,56,74]],
[[246,210,148],[213,182,131],[172,149,106]],
[[255,255,255],[222,218,222],[180,178,180]],
[[82,80,82],[65,68,65],[57,56,57]],
[[57,141,41],[49,121,32],[41,97,24]],
[[123,89,90],[106,76,74],[82,64,65]],
[[246,101,172],[213,85,148],[172,72,123]],
[[222,149,57],[189,129,49],[156,105,41]],
[[139,121,172],[123,105,148],[98,85,123]],
[[180,109,222],[156,93,189],[123,76,156]],
[[148,149,148],[131,129,131],[106,105,106]],
[[57,190,98],[49,165,82],[41,133,74]],
[[49,141,197],[41,121,172],[32,97,139]],
[[246,40,57],[213,36,49],[172,28,41]],
[[246,133,180],[213,117,156],[172,93,123]],
[[238,174,0],[205,153,0],[172,125,0]],
[[222,226,172],[197,194,148],[156,157,123]],
[[41,48,57],[41,44,49],[32,36,41]],
[[106,194,222],[90,170,189],[74,137,156]]
];
var fhairSrcs = [
dir+"Hair/Female_0.png",
dir+"Hair/Female_1.png",
dir+"Hair/Female_2.png",
dir+"Hair/Female_3.png",
dir+"Hair/Female_4.png",
dir+"Hair/Female_5.png",
dir+"Hair/Female_6.png",
dir+"Hair/Female_7.png",
dir+"Hair/Female_8.png",
dir+"Hair/Female_9.png",
dir+"Hair/Female_10.png",
dir+"Hair/Female_11.png",
dir+"Hair/Female_12.png"
];
var mhairSrcs = [
dir+"Hair/Male_1.png",
dir+"Hair/Male_2.png",
dir+"Hair/Male_3.png",
dir+"Hair/Male_4.png",
dir+"Hair/Male_5.png",
dir+"Hair/Male_6.png",
dir+"Hair/Male_7.png",
dir+"Hair/Male_8.png",
dir+"Hair/Male_9.png",
dir+"Hair/Male_10.png",
dir+"Hair/Male_11.png",
dir+"Hair/Male_12.png"
];
var stat = ["HP","AP","ATK","DEF","MATK","MDEF","HIT","FLEE","CRI","MSPD","FIRE","WATER","FOREST","LIGHT","DARK"];
var job_stat = [
{NAME:"ウォーリア", INIT_HP:20, INIT_AP:20, HP:6, AP:1.75, ATK:1.25, DEF:1.25, MATK:0, MDEF:0},
{NAME:"レンジャー", INIT_HP:20, INIT_AP:20, HP:4.12, AP:2, ATK:1.25, DEF:1, MATK:0, MDEF:0},
{NAME:"メイジ", INIT_HP:15, INIT_AP:25, HP:3, AP:3, ATK:0.75, DEF:0.75, MATK:1.37, MDEF:1.25},
{NAME:"クレリック", INIT_HP:20, INIT_AP:20, HP:4.12, AP:2.75, ATK:0.75, DEF:1, MATK:0.75, MDEF:0.75},
{NAME:"マーチャント", INIT_HP:10, INIT_AP:10, HP:3, AP:2, ATK:0.75, DEF:0.75, MATK:0, MDEF:0},
{NAME:"モンク", INIT_HP:25, INIT_AP:15, HP:5.25, AP:1, ATK:1, DEF:0.75, MATK:0.75, MDEF:0}
];
var equip_array = [[
{NAME:"----",TYPE:0,CLASS:"",HAND:0},
{NAME:"ひのきのぼう",TYPE:0,CLASS:"",HAND:0,ATK:1,ASPD:4,MARGIN:15},
{NAME:"こんぼう",TYPE:0,CLASS:"",HAND:0,ATK:1,ASPD:4,MARGIN:15},
{NAME:"アイアンメイス",TYPE:0,CLASS:"Wa Cl Me",HAND:0,ATK:4,ASPD:4,MARGIN:15},
{NAME:"岩石ハンマー",TYPE:0,CLASS:"Wa Me",HAND:1,ATK:9,ASPD:4,MARGIN:15},
{NAME:"まほうのつえ",TYPE:1,CLASS:"Ma Cl",HAND:0,MATK:2,ASPD:4,MARGIN:20},
{NAME:"いやしのつえ",TYPE:1,CLASS:"Cl",HAND:0,MATK:1,ASPD:4,MARGIN:20},
{NAME:"羽付きのつえ",TYPE:1,CLASS:"Ma Cl",HAND:0,MATK:5,ASPD:4,MARGIN:20},
{NAME:"てつのつるぎ",TYPE:2,CLASS:"Wa Me",HAND:0,ATK:7,DEF:2,ASPD:4,MARGIN:20},
{NAME:"ウッドナイフ",TYPE:3,CLASS:"Wa Ra Me",HAND:0,ATK:2,ASPD:3.5,MARGIN:10},
{NAME:"鉄のナイフ",TYPE:3,CLASS:"Wa Ra Me",HAND:0,ATK:4,ASPD:3.5,MARGIN:10},
{NAME:"ハードウッドナイフ",TYPE:3,CLASS:"Wa Ra Me",HAND:0,ATK:6,ASPD:3.5,MARGIN:10},
{NAME:"木の槍",TYPE:4,CLASS:"Wa Me",HAND:0,ATK:4,ASPD:4.5,MARGIN:25},
{NAME:"鉄の槍",TYPE:4,CLASS:"Wa Me",HAND:0,ATK:6,ASPD:4.5,MARGIN:25},
{NAME:"鉄の斧",TYPE:5,CLASS:"Wa Me",HAND:1,ATK:14,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"バトルアックス",TYPE:5,CLASS:"Wa Me",HAND:1,ATK:20,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"布のグローブ",TYPE:6,CLASS:"Mo",HAND:1,ATK:2,ASPD:3.5,MARGIN:15},
{NAME:"皮のグローブ",TYPE:6,CLASS:"Mo",HAND:1,ATK:4,ASPD:3.5,MARGIN:15},
{NAME:"棘のグローブ",TYPE:6,CLASS:"Mo",HAND:1,ATK:10,ASPD:3.5,MARGIN:15},
{NAME:"木の弓",TYPE:7,CLASS:"Ra",HAND:1,ATK:6,HIT:10,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"鉄の弓",TYPE:7,CLASS:"Ra",HAND:1,ATK:9,HIT:10,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"羽の弓",TYPE:7,CLASS:"Ra",HAND:1,ATK:16,HIT:10,CRI:10,ASPD:4.5,MARGIN:30}
],[
{NAME:"----",TYPE:0},
{NAME:"きのたて",TYPE:0,DEF:4},
{NAME:"てつのたて",TYPE:0,DEF:8},
{NAME:"透明なたて",TYPE:0,DEF:6,MDEF:6}
],[
{NAME:"----",TYPE:0},
{NAME:"布の服",TYPE:1,DEF:3},
{NAME:"皮の服",TYPE:1,DEF:4},
{NAME:"冒険者の服",TYPE:1,DEF:6},
{NAME:"布のローブ",TYPE:1,MATK:2,MDEF:8},
{NAME:"悪魔のローブ",TYPE:1,RANK:"A",MDEF:8,DARK:5}
],[
{NAME:"----",TYPE:0},
{NAME:"布の靴",TYPE:2,MSPD:10},
{NAME:"羽根の靴",TYPE:2,MSPD:20}
],[
{NAME:"----",TYPE:0},
{NAME:"鉄の指輪",TYPE:3,DEF:5},
{NAME:"草の指輪",TYPE:3,MDEF:5},
{NAME:"花の指輪",TYPE:3,MDEF:5,FOREST:5},
{NAME:"トナカイの首飾り",TYPE:3,RANK:"B",ATK:5},
{NAME:"悪魔の指輪",TYPE:3,RANK:"B",MDEF:5,DARK:5},
{NAME:"大蛇のミサンガ",TYPE:3,RANK:"A",POISONR:80}
],[
{NAME:"----",TYPE:0},
{NAME:"大蛇の髪飾り",TYPE:4},
{NAME:"魔法の帽子",TYPE:4},
{NAME:"皮の帽子",TYPE:4},
{NAME:"大蛇の2枚飾り",TYPE:4},
{NAME:"赤い花の髪飾り",TYPE:4},
{NAME:"トナカイの大角",TYPE:4},
{NAME:"トナカイの小角",TYPE:4},
{NAME:"サンタの帽子",TYPE:4},
],[
{NAME:"----",TYPE:0},
{NAME:"普通の釣竿",TYPE:5}
]
];
var option = "";
var option_string = ["","物理攻撃","物理防御","魔法攻撃","魔法防御","火属性","水属性","森属性","光属性","闇属性"];
var option_prefix = ["","","","","","火の","水の","森の","光る","闇の"];
var option_array = [
{NAME:"なし",STAT:0},
{NAME:"ちからの原石",ATK:2},
{NAME:"まもりの原石",DEF:2},
{NAME:"まほうの原石",MATK:2},
{NAME:"いのりの原石",MDEF:2},
{NAME:"太陽の原石",FIRE:5},
{NAME:"海の原石",WATER:5},
{NAME:"大地の原石",FOREST:5},
{NAME:"光の原石",LIGHT:5},
{NAME:"闇の原石",DARK:5},
];
</script>
<script>
//option
//オプションのオプション作る
$.each(option_array, function(i,v){
option += "<option value="+i+">"+v.NAME+"</option>";
});
$("#Equip select").each(function(i,v) {
//grade option追加
$(this).parent().after("<td><select class='option' value="+i+">"+option+"</select></td>");
if (this.classList.contains("no_option") == true){
$(".option").eq(i).prop("disabled", true);
}
$(this).parent().after("<td><input type='number' class='grade' value='0' min='0' max='5'></td>");
if (this.classList.contains("no_grade") == true){
$(".grade").eq(i).prop("disabled", true);
}
//装備option追加
$.each(equip_array[i], function(i2,v2) {
$(v).append("<option value="+v2+">"+equip_array[i][i2].NAME+"</option>");
});
});
//option
//クラスoption追加
$(function(){
$.each(job_array, function(i) {
$(".jobSelect").append("<option value="+i+">"+job_array[i]+"</option>");
})
});
$(function(){
$.each(skinImages, function(i) {
$(".skinSelect").append("<option value="+i+">"+i+"</option>");
})
});
$(function(){
$.each(fhairImages, function(i) {
$(".hairSelect").append("<option value="+i+">"+i+"</option>");
})
});
$(function(){
$.each(hair_color, function(i) {
$(".colorSelect").append("<option value="+i+">"+i+"</option>");
})
});
//Image
var jobImages = [];
var skinImages = [];
var fhairImages = [];
var mhairImages = [];
for (var i in jobSrcs){
jobImages["+i+"] = new Image();
jobImages["+i+"].src = jobSrcs[i];
}
for (var i in skinSrcs){
skinImages["+i+"] = new Image();
skinImages["+i+"].src = skinSrcs[i];
}
for (var i in mhairSrcs){
mhairImages["+i+"] = new Image();
mhairImages["+i+"].src = mhairSrcs[i];
}
for (var i in fhairSrcs){
fhairImages["+i+"] = new Image();
fhairImages["+i+"].src = fhairSrcs[i];
}
var w = 24;
var h = 32;
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "10px 'JF-Dot-Naga10'";
function DrawChara() {
var selname = $(".nameSelect").val();
var selcls = $(".jobSelect").val();
var selskin = $(".skinSelect").val();
var selsex = $(".sexSelect").val();
var sellev = $(".levelSelect").val();
var selcolor = $(".colorSelect").val();
var selhair = $(".hairSelect").val();
//ctx.fillStyle = 'rgb(192, 80, 77)';
var memo = $(".memo").val();
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.lineWidth = 1;
ctx.strokeRect(1.5, 1.5, 29, 37)
ctx.drawImage(jobImages[selcls],0,0, 24, 32, 5, 5, 24,32);
ctx.drawImage(skinImages[selskin],0,0, 24, 32, 5, 5, 24,32);
if(selsex == 1){
ctx.drawImage(fhairImages[selhair],0,0, 24, 32, 5, 5, 24,32);
}
else{
ctx.drawImage(mhairImages[selhair],0,0, 24, 32, 5, 5, 24,32);
}
var ImageData = ctx.getImageData(0, 0, 50,50);
var width = ImageData.width, height = ImageData.height;
var pixels = ImageData.data; // ピクセル配列：RGBA4要素で1ピクセル
var data = ImageData.data;
for (var x = 0; x < width; ++x) {
for (var y = 0; y < height; ++y) {
// 対象pixelのindex（色情報があるので*4する）
var index = (x + y * width) * 4;
for(var i=0;i<base_color.length; i++){
if(data[index+0]==base_color[i][0]&&data[index+1]==base_color[i][1]&&data[index+2]==base_color[i][2]){
data[index + 0] = hair_color[selcolor][i][0];
data[index + 1] = hair_color[selcolor][i][1];
data[index + 2] = hair_color[selcolor][i][2];
data[index + 3] = 255;
};
};
};
};
ImageData.data = data;
ctx.putImageData(ImageData, 0, 0);
ctx.fillText("名前:"+selname, 30, 10);
ctx.fillText("クラス:"+job_array[selcls], 30, 10+(12*1));
ctx.fillText("レベル:"+sellev, 30, 10+(12*2));
ctx.fillText("ヒトコト:"+memo, 160, 10);
};
function DrawEquip(){
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.lineWidth = 1;
ctx.strokeRect(1.5, 40.5, 247, 158);
$("#Equip .eqp").each(function(i,v) {
var equip = $(this).parent().prev().text();
var grade = " +" + $(this).parent().next().children("input").val();
if(grade == 0){grade = "";}
var index = $(this).parent().nextAll().eq(1).find("select option:selected").val();
var prefix = option_prefix[index];
var op = Object.values(option_array[index]);
var option = "";
if(op[1] !== 0){option = " ★" + option_string[index] + " +" + op[1];}
ctx.fillText(equip, 2, 52+(15*i));
ctx.fillText(prefix + $("option:selected", this).text()+grade + option, 52, 52+(15*i))
});
}
function DrawStat(){
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.lineWidth = 1;
ctx.strokeRect(250.5, 40.5, 148, 158);
$("#Stat tr").each(function(i,v) {
ctx.fillText($(this).children("td").text(), 252, 52+(13*i));
});
$("#Bonus tr").each(function(i,v) {
var ret = (" "+$(this).children("td").eq(1).find("input").val() ).slice(-4);
ctx.fillText($(this).children("td").text()+ret, 252, 127+(13*i));
});
}
function StatUpdate(){
var selcls = $(".jobSelect").val();
var sellev = $(".levelSelect").val();
var base_stat = {HP:job_stat[selcls]["INIT_HP"],AP:job_stat[selcls]["INIT_AP"],ATK:6,DEF:6,MATK:5,MDEF:5,HIT:5,FLEE:5,CRI:1,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
var equip_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
bonus_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
var option_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
var bonus_p = []
$("#Bonus input").each(function(i) {
bonus_p[i] = $(this).val();
});
bonusf(bonus_p);
for(var i=0; i <stat.length; i++){
if(job_stat[selcls][stat[i]] != null){
base_stat[stat[i]] += Math.floor(job_stat[selcls][stat[i]]*(sellev-1));}
$("#Equip .eqp").each(function(i2,v2) {
var idx = $(this).prop("selectedIndex")
var st = equip_array[i2][idx][stat[i]];
var grade = gradef($(this).parent().next().children("input").val(),stat[i],st);
//op
var index = $(this).parent().nextAll().eq(1).find("select option:selected").val();
if(option_array[index][stat[i]] != null){
option_stat[stat[i]] += option_array[index][stat[i]]}
//op
if(st != null){equip_stat[stat[i]] += st+grade;}
});
var text = base_stat[stat[i]] + equip_stat[stat[i]] + bonus_stat[stat[i]] + option_stat[stat[i]];
var ret = ( " "+ text ).slice(-4);
$("#"+stat[i]).text(ret+" ");
}
}
function Draw(){
//ctx.clearRect(0, 0, 250, 200);
ctx.fillStyle = "rgb(254, 255, 255)";
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = "rgb(0, 0, 0)";
StatUpdate();
DrawStat();
DrawChara();
DrawEquip();
}
$('#Chara,#Bonus,#Equip').on("change",function(){
Draw()
});
$(window).load(function(){
Draw();
});
function gradef(g,k,v){
if(k == "ATK"||k == "DEF"||k == "MATK"||k == "MDEF"||k == "HIT"||k == "FLEE"||k == "CRI"){
var v2 = v*0.1;
if(v2<1){v2=1;}
var grade2 = Math.floor(grade1 = v2 * g);
}
else{
var grade2 = 0;
}
return grade2;
}
function bonusf(bonus_p){
if(bonus_p[0] >= 0){bonus_stat.ATK += bonus_p[0] * 1}
if(bonus_p[1] >= 0){bonus_stat.HP += bonus_p[1] * 2
bonus_stat.DEF += Math.floor(bonus_p[1] * 0.5)}
if(bonus_p[2] >= 0){bonus_stat.AP += bonus_p[2] * 2
bonus_stat.MATK += bonus_p[2] * 1
bonus_stat.MDEF += bonus_p[2] * 1}
if(bonus_p[3] >= 0){bonus_stat.FLEE += bonus_p[3] * 1
bonus_stat.MSPD += bonus_p[3] * 1}
if(bonus_p[4] >= 0){ bonus_stat.HIT += bonus_p[4] * 1}
//bonus_stat.CT += bonus_p[4] * 2
if(bonus_p[5] >= 0){bonus_stat.CRI += bonus_p[5] * 1}
return bonus_stat;
}
$('#CanvasDownload').click(function(){
let canvas = document.getElementById('canvas')
let link = document.getElementById('hiddenLink')
link.href = canvas.toDataURL()
document.getElementById('canvas').src = canvas.toDataURL()
link.click()
</script>
});
}}
#javascript(){{
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var job_array = ["ウォーリア","レンジャー","メイジ","クレリック","マーチャント","モンク"];
var imgList = ["job","skin","mhair","fhair"];
var dir = "https://img.atwikiimg.com/www65.atwiki.jp/yurugaru/pub/";
var jobSrcs = [
dir+"Body/Warrior.png",
dir+"Body/Ranger.png",
dir+"Body/Mage.png",
dir+"Body/Cleric.png",
dir+"Body/Merchant.png",
dir+"Body/Monk.png"
];
var skinSrcs = [
dir+"Skin/skin0_full.png",
dir+"Skin/skin1_full.png",
dir+"Skin/skin2_full.png",
dir+"Skin/skin3_full.png",
dir+"Skin/skin4_full.png"
];
var base_color = [[255,255,255],[220,220,220],[180,180,180]];
var hair_color = [
[[90,89,238],[74,76,205],[65,64,172]],
[[238,80,98],[205,68,82],[172,56,74]],
[[246,210,148],[213,182,131],[172,149,106]],
[[255,255,255],[222,218,222],[180,178,180]],
[[82,80,82],[65,68,65],[57,56,57]],
[[57,141,41],[49,121,32],[41,97,24]],
[[123,89,90],[106,76,74],[82,64,65]],
[[246,101,172],[213,85,148],[172,72,123]],
[[222,149,57],[189,129,49],[156,105,41]],
[[139,121,172],[123,105,148],[98,85,123]],
[[180,109,222],[156,93,189],[123,76,156]],
[[148,149,148],[131,129,131],[106,105,106]],
[[57,190,98],[49,165,82],[41,133,74]],
[[49,141,197],[41,121,172],[32,97,139]],
[[246,40,57],[213,36,49],[172,28,41]],
[[246,133,180],[213,117,156],[172,93,123]],
[[238,174,0],[205,153,0],[172,125,0]],
[[222,226,172],[197,194,148],[156,157,123]],
[[41,48,57],[41,44,49],[32,36,41]],
[[106,194,222],[90,170,189],[74,137,156]]
];
var fhairSrcs = [
dir+"Hair/Female_0.png",
dir+"Hair/Female_1.png",
dir+"Hair/Female_2.png",
dir+"Hair/Female_3.png",
dir+"Hair/Female_4.png",
dir+"Hair/Female_5.png",
dir+"Hair/Female_6.png",
dir+"Hair/Female_7.png",
dir+"Hair/Female_8.png",
dir+"Hair/Female_9.png",
dir+"Hair/Female_10.png",
dir+"Hair/Female_11.png",
dir+"Hair/Female_12.png"
];
var mhairSrcs = [
dir+"Hair/Male_1.png",
dir+"Hair/Male_2.png",
dir+"Hair/Male_3.png",
dir+"Hair/Male_4.png",
dir+"Hair/Male_5.png",
dir+"Hair/Male_6.png",
dir+"Hair/Male_7.png",
dir+"Hair/Male_8.png",
dir+"Hair/Male_9.png",
dir+"Hair/Male_10.png",
dir+"Hair/Male_11.png",
dir+"Hair/Male_12.png"
];
var stat = ["HP","AP","ATK","DEF","MATK","MDEF","HIT","FLEE","CRI","MSPD","FIRE","WATER","FOREST","LIGHT","DARK"];
var job_stat = [
{NAME:"ウォーリア", INIT_HP:20, INIT_AP:20, HP:6, AP:1.75, ATK:1.25, DEF:1.25, MATK:0, MDEF:0},
{NAME:"レンジャー", INIT_HP:20, INIT_AP:20, HP:4.12, AP:2, ATK:1.25, DEF:1, MATK:0, MDEF:0},
{NAME:"メイジ", INIT_HP:15, INIT_AP:25, HP:3, AP:3, ATK:0.75, DEF:0.75, MATK:1.37, MDEF:1.25},
{NAME:"クレリック", INIT_HP:20, INIT_AP:20, HP:4.12, AP:2.75, ATK:0.75, DEF:1, MATK:0.75, MDEF:0.75},
{NAME:"マーチャント", INIT_HP:10, INIT_AP:10, HP:3, AP:2, ATK:0.75, DEF:0.75, MATK:0, MDEF:0},
{NAME:"モンク", INIT_HP:25, INIT_AP:15, HP:5.25, AP:1, ATK:1, DEF:0.75, MATK:0.75, MDEF:0}
];
var equip_array = [[
{NAME:"----",TYPE:0,CLASS:"",HAND:0},
{NAME:"ひのきのぼう",TYPE:0,CLASS:"",HAND:0,ATK:1,ASPD:4,MARGIN:15},
{NAME:"こんぼう",TYPE:0,CLASS:"",HAND:0,ATK:1,ASPD:4,MARGIN:15},
{NAME:"アイアンメイス",TYPE:0,CLASS:"Wa Cl Me",HAND:0,ATK:4,ASPD:4,MARGIN:15},
{NAME:"岩石ハンマー",TYPE:0,CLASS:"Wa Me",HAND:1,ATK:9,ASPD:4,MARGIN:15},
{NAME:"まほうのつえ",TYPE:1,CLASS:"Ma Cl",HAND:0,MATK:2,ASPD:4,MARGIN:20},
{NAME:"いやしのつえ",TYPE:1,CLASS:"Cl",HAND:0,MATK:1,ASPD:4,MARGIN:20},
{NAME:"羽付きのつえ",TYPE:1,CLASS:"Ma Cl",HAND:0,MATK:5,ASPD:4,MARGIN:20},
{NAME:"てつのつるぎ",TYPE:2,CLASS:"Wa Me",HAND:0,ATK:7,DEF:2,ASPD:4,MARGIN:20},
{NAME:"ウッドナイフ",TYPE:3,CLASS:"Wa Ra Me",HAND:0,ATK:2,ASPD:3.5,MARGIN:10},
{NAME:"鉄のナイフ",TYPE:3,CLASS:"Wa Ra Me",HAND:0,ATK:4,ASPD:3.5,MARGIN:10},
{NAME:"ハードウッドナイフ",TYPE:3,CLASS:"Wa Ra Me",HAND:0,ATK:6,ASPD:3.5,MARGIN:10},
{NAME:"木の槍",TYPE:4,CLASS:"Wa Me",HAND:0,ATK:4,ASPD:4.5,MARGIN:25},
{NAME:"鉄の槍",TYPE:4,CLASS:"Wa Me",HAND:0,ATK:6,ASPD:4.5,MARGIN:25},
{NAME:"鉄の斧",TYPE:5,CLASS:"Wa Me",HAND:1,ATK:14,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"バトルアックス",TYPE:5,CLASS:"Wa Me",HAND:1,ATK:20,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"布のグローブ",TYPE:6,CLASS:"Mo",HAND:1,ATK:2,ASPD:3.5,MARGIN:15},
{NAME:"皮のグローブ",TYPE:6,CLASS:"Mo",HAND:1,ATK:4,ASPD:3.5,MARGIN:15},
{NAME:"棘のグローブ",TYPE:6,CLASS:"Mo",HAND:1,ATK:10,ASPD:3.5,MARGIN:15},
{NAME:"木の弓",TYPE:7,CLASS:"Ra",HAND:1,ATK:6,HIT:10,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"鉄の弓",TYPE:7,CLASS:"Ra",HAND:1,ATK:9,HIT:10,CRI:10,ASPD:4.5,MARGIN:30},
{NAME:"羽の弓",TYPE:7,CLASS:"Ra",HAND:1,ATK:16,HIT:10,CRI:10,ASPD:4.5,MARGIN:30}
],[
{NAME:"----",TYPE:0},
{NAME:"きのたて",TYPE:0,DEF:4},
{NAME:"てつのたて",TYPE:0,DEF:8},
{NAME:"透明なたて",TYPE:0,DEF:6,MDEF:6}
],[
{NAME:"----",TYPE:0},
{NAME:"布の服",TYPE:1,DEF:3},
{NAME:"皮の服",TYPE:1,DEF:4},
{NAME:"冒険者の服",TYPE:1,DEF:6},
{NAME:"布のローブ",TYPE:1,MATK:2,MDEF:8},
{NAME:"悪魔のローブ",TYPE:1,RANK:"A",MDEF:8,DARK:5}
],[
{NAME:"----",TYPE:0},
{NAME:"布の靴",TYPE:2,MSPD:10},
{NAME:"羽根の靴",TYPE:2,MSPD:20}
],[
{NAME:"----",TYPE:0},
{NAME:"鉄の指輪",TYPE:3,DEF:5},
{NAME:"草の指輪",TYPE:3,MDEF:5},
{NAME:"花の指輪",TYPE:3,MDEF:5,FOREST:5},
{NAME:"トナカイの首飾り",TYPE:3,RANK:"B",ATK:5},
{NAME:"悪魔の指輪",TYPE:3,RANK:"B",MDEF:5,DARK:5},
{NAME:"大蛇のミサンガ",TYPE:3,RANK:"A",POISONR:80}
],[
{NAME:"----",TYPE:0},
{NAME:"大蛇の髪飾り",TYPE:4},
{NAME:"魔法の帽子",TYPE:4},
{NAME:"皮の帽子",TYPE:4},
{NAME:"大蛇の2枚飾り",TYPE:4},
{NAME:"赤い花の髪飾り",TYPE:4},
{NAME:"トナカイの大角",TYPE:4},
{NAME:"トナカイの小角",TYPE:4},
{NAME:"サンタの帽子",TYPE:4},
],[
{NAME:"----",TYPE:0},
{NAME:"普通の釣竿",TYPE:5}
]
];
var option = "";
var option_string = ["","物理攻撃","物理防御","魔法攻撃","魔法防御","火属性","水属性","森属性","光属性","闇属性"];
var option_prefix = ["","","","","","火の","水の","森の","光る","闇の"];
var option_array = [
{NAME:"なし",STAT:0},
{NAME:"ちからの原石",ATK:2},
{NAME:"まもりの原石",DEF:2},
{NAME:"まほうの原石",MATK:2},
{NAME:"いのりの原石",MDEF:2},
{NAME:"太陽の原石",FIRE:5},
{NAME:"海の原石",WATER:5},
{NAME:"大地の原石",FOREST:5},
{NAME:"光の原石",LIGHT:5},
{NAME:"闇の原石",DARK:5},
];
</script>
<script>
//option
//オプションのオプション作る
$.each(option_array, function(i,v){
option += "<option value="+i+">"+v.NAME+"</option>";
});
$("#Equip select").each(function(i,v) {
//grade option追加
$(this).parent().after("<td><select class='option' value="+i+">"+option+"</select></td>");
if (this.classList.contains("no_option") == true){
$(".option").eq(i).prop("disabled", true);
}
$(this).parent().after("<td><input type='number' class='grade' value='0' min='0' max='5'></td>");
if (this.classList.contains("no_grade") == true){
$(".grade").eq(i).prop("disabled", true);
}
//装備option追加
$.each(equip_array[i], function(i2,v2) {
$(v).append("<option value="+v2+">"+equip_array[i][i2].NAME+"</option>");
});
});
//option
//クラスoption追加
$(function(){
$.each(job_array, function(i) {
$(".jobSelect").append("<option value="+i+">"+job_array[i]+"</option>");
})
});
$(function(){
$.each(skinImages, function(i) {
$(".skinSelect").append("<option value="+i+">"+i+"</option>");
})
});
$(function(){
$.each(fhairImages, function(i) {
$(".hairSelect").append("<option value="+i+">"+i+"</option>");
})
});
$(function(){
$.each(hair_color, function(i) {
$(".colorSelect").append("<option value="+i+">"+i+"</option>");
})
});
//Image
var jobImages = [];
var skinImages = [];
var fhairImages = [];
var mhairImages = [];
for (var i in jobSrcs){
jobImages["+i+"] = new Image();
jobImages["+i+"].src = jobSrcs[i];
}
for (var i in skinSrcs){
skinImages["+i+"] = new Image();
skinImages["+i+"].src = skinSrcs[i];
}
for (var i in mhairSrcs){
mhairImages["+i+"] = new Image();
mhairImages["+i+"].src = mhairSrcs[i];
}
for (var i in fhairSrcs){
fhairImages["+i+"] = new Image();
fhairImages["+i+"].src = fhairSrcs[i];
}
var w = 24;
var h = 32;
var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "10px 'JF-Dot-Naga10'";
function DrawChara() {
var selname = $(".nameSelect").val();
var selcls = $(".jobSelect").val();
var selskin = $(".skinSelect").val();
var selsex = $(".sexSelect").val();
var sellev = $(".levelSelect").val();
var selcolor = $(".colorSelect").val();
var selhair = $(".hairSelect").val();
//ctx.fillStyle = 'rgb(192, 80, 77)';
var memo = $(".memo").val();
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.lineWidth = 1;
ctx.strokeRect(1.5, 1.5, 29, 37)
ctx.drawImage(jobImages[selcls],0,0, 24, 32, 5, 5, 24,32);
ctx.drawImage(skinImages[selskin],0,0, 24, 32, 5, 5, 24,32);
if(selsex == 1){
ctx.drawImage(fhairImages[selhair],0,0, 24, 32, 5, 5, 24,32);
}
else{
ctx.drawImage(mhairImages[selhair],0,0, 24, 32, 5, 5, 24,32);
}
var ImageData = ctx.getImageData(0, 0, 50,50);
var width = ImageData.width, height = ImageData.height;
var pixels = ImageData.data; // ピクセル配列：RGBA4要素で1ピクセル
var data = ImageData.data;
for (var x = 0; x < width; ++x) {
for (var y = 0; y < height; ++y) {
// 対象pixelのindex（色情報があるので*4する）
var index = (x + y * width) * 4;
for(var i=0;i<base_color.length; i++){
if(data[index+0]==base_color[i][0]&&data[index+1]==base_color[i][1]&&data[index+2]==base_color[i][2]){
data[index + 0] = hair_color[selcolor][i][0];
data[index + 1] = hair_color[selcolor][i][1];
data[index + 2] = hair_color[selcolor][i][2];
data[index + 3] = 255;
};
};
};
};
ImageData.data = data;
ctx.putImageData(ImageData, 0, 0);
ctx.fillText("名前:"+selname, 30, 10);
ctx.fillText("クラス:"+job_array[selcls], 30, 10+(12*1));
ctx.fillText("レベル:"+sellev, 30, 10+(12*2));
ctx.fillText("ヒトコト:"+memo, 160, 10);
};
function DrawEquip(){
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.lineWidth = 1;
ctx.strokeRect(1.5, 40.5, 247, 158);
$("#Equip .eqp").each(function(i,v) {
var equip = $(this).parent().prev().text();
var grade = " +" + $(this).parent().next().children("input").val();
if(grade == 0){grade = "";}
var index = $(this).parent().nextAll().eq(1).find("select option:selected").val();
var prefix = option_prefix[index];
var op = Object.values(option_array[index]);
var option = "";
if(op[1] !== 0){option = " ★" + option_string[index] + " +" + op[1];}
ctx.fillText(equip, 2, 52+(15*i));
ctx.fillText(prefix + $("option:selected", this).text()+grade + option, 52, 52+(15*i))
});
}
function DrawStat(){
ctx.strokeStyle = "rgb(0, 0, 0)";
ctx.lineWidth = 1;
ctx.strokeRect(250.5, 40.5, 148, 158);
$("#Stat tr").each(function(i,v) {
ctx.fillText($(this).children("td").text(), 252, 52+(13*i));
});
$("#Bonus tr").each(function(i,v) {
var ret = (" "+$(this).children("td").eq(1).find("input").val() ).slice(-4);
ctx.fillText($(this).children("td").text()+ret, 252, 127+(13*i));
});
}
function StatUpdate(){
var selcls = $(".jobSelect").val();
var sellev = $(".levelSelect").val();
var base_stat = {HP:job_stat[selcls]["INIT_HP"],AP:job_stat[selcls]["INIT_AP"],ATK:6,DEF:6,MATK:5,MDEF:5,HIT:5,FLEE:5,CRI:1,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
var equip_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
bonus_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
var option_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
var bonus_p = []
$("#Bonus input").each(function(i) {
bonus_p[i] = $(this).val();
});
bonusf(bonus_p);
for(var i=0; i <stat.length; i++){
if(job_stat[selcls][stat[i]] != null){
base_stat[stat[i]] += Math.floor(job_stat[selcls][stat[i]]*(sellev-1));}
$("#Equip .eqp").each(function(i2,v2) {
var idx = $(this).prop("selectedIndex")
var st = equip_array[i2][idx][stat[i]];
var grade = gradef($(this).parent().next().children("input").val(),stat[i],st);
//op
var index = $(this).parent().nextAll().eq(1).find("select option:selected").val();
if(option_array[index][stat[i]] != null){
option_stat[stat[i]] += option_array[index][stat[i]]}
//op
if(st != null){equip_stat[stat[i]] += st+grade;}
});
var text = base_stat[stat[i]] + equip_stat[stat[i]] + bonus_stat[stat[i]] + option_stat[stat[i]];
var ret = ( " "+ text ).slice(-4);
$("#"+stat[i]).text(ret+" ");
}
}
function Draw(){
//ctx.clearRect(0, 0, 250, 200);
ctx.fillStyle = "rgb(254, 255, 255)";
ctx.fillRect(0, 0, 400, 200);
ctx.fillStyle = "rgb(0, 0, 0)";
StatUpdate();
DrawStat();
DrawChara();
DrawEquip();
}
$('#Chara,#Bonus,#Equip').on("change",function(){
Draw()
});
$(window).load(function(){
Draw();
});
function gradef(g,k,v){
if(k == "ATK"||k == "DEF"||k == "MATK"||k == "MDEF"||k == "HIT"||k == "FLEE"||k == "CRI"){
var v2 = v*0.1;
if(v2<1){v2=1;}
var grade2 = Math.floor(grade1 = v2 * g);
}
else{
var grade2 = 0;
}
return grade2;
}
function bonusf(bonus_p){
if(bonus_p[0] >= 0){bonus_stat.ATK += bonus_p[0] * 1}
if(bonus_p[1] >= 0){bonus_stat.HP += bonus_p[1] * 2
bonus_stat.DEF += Math.floor(bonus_p[1] * 0.5)}
if(bonus_p[2] >= 0){bonus_stat.AP += bonus_p[2] * 2
bonus_stat.MATK += bonus_p[2] * 1
bonus_stat.MDEF += bonus_p[2] * 1}
if(bonus_p[3] >= 0){bonus_stat.FLEE += bonus_p[3] * 1
bonus_stat.MSPD += bonus_p[3] * 1}
if(bonus_p[4] >= 0){ bonus_stat.HIT += bonus_p[4] * 1}
//bonus_stat.CT += bonus_p[4] * 2
if(bonus_p[5] >= 0){bonus_stat.CRI += bonus_p[5] * 1}
return bonus_stat;
}
$('#CanvasDownload').click(function(){
let canvas = document.getElementById('canvas')
let link = document.getElementById('hiddenLink')
link.href = canvas.toDataURL()
document.getElementById('canvas').src = canvas.toDataURL()
link.click()
});
</script>
}}
基本情報
アイテム
マップ
クエスト
