「js/sim」の編集履歴（バックアップ）一覧はこちら

js/sim - (2019/07/08 (月) 18:18:34) の最新版との変更点

追加された行は緑色になります。

削除された行は赤色になります。

#javascript(){{
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></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 imgList){
  var str = imgList[i]
  for (var i2 in eval(str+"Srcs")){
  eval(str+"Images["+i2+"] = new Image();");
  eval(str+"Images["+i2+"].src = "+str+"Srcs["+i2+"]");
  }
}

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);
  };

#javascript(){{
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></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="+i2+">"+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>");
  })
});

//アビリティ
$.each(a_ability_array, function(i) { 
  $("#Rune .active").append("<option value="+i+">"+a_ability_array[i].NAME+"</option>");
})
$.each(p_ability_array, function(i) { 
  $("#Rune .passive").append("<option value="+i+">"+p_ability_array[i].NAME+"</option>");
})

//バフ
$.each(buff_array, function(i) { 
  $("#Buff").append("<tr><td>"+buff_array[i][1].NAME+"<br><select class='buff'><option>"+buff_array[i][0].NAME+"</option></select></td></tr>");
});

$("#Buff .buff").each(function(i,v) {
  $.each(buff_array[i], function(i2,v2) { 
  $("#Buff .buff").eq(i).append("<option value="+i2+">"+buff_array[i][i2].NAME+"</option>");
  });
});


$(function(){
  $("#Buff").append("<tr><td>food<br><select class='food'><option>----</option></select></td></tr>");

  $.each(food_array, function(i,v) { 
  $("#Buff .food").append("<option value="+i+">"+food_array[i].NAME+"</option>");
  });
});

//Image
var jobImages = [];
var skinImages = [];
var fhairImages = [];
var mhairImages = [];
var hatImages = [];
var hat2Images = [];

for (var i in jobSrcs){
  jobImages[i] = new Image();
  jobImages[i].crossOrigin = "Anonymous";
  jobImages[i].src = jobSrcs[i];
  }
  for (var i in skinSrcs){
  skinImages[i] = new Image();
  skinImages[i].crossOrigin = "Anonymous";
  skinImages[i].src = skinSrcs[i];
  }
  for (var i in mhairSrcs){
  mhairImages[i] = new Image();
  mhairImages[i].crossOrigin = "Anonymous";  
  mhairImages[i].src = mhairSrcs[i];
  }
  for (var i in fhairSrcs){
  fhairImages[i] = new Image();
  fhairImages[i].crossOrigin = "Anonymous";
  fhairImages[i].src = fhairSrcs[i];
 }
 for (var i in hatSrcs){
  hatImages[i] = new Image();
  hatImages[i].crossOrigin = "Anonymous";
  hatImages[i].src = hatSrcs[i];
 }
 for (var i in hat2Srcs){
  hat2Images[i] = new Image();
  hat2Images[i].crossOrigin = "Anonymous";
  hat2Images[i].src = hat2Srcs[i];
 }

  function StatUpdate(){

    var selcls = $(".jobSelect").val();
    var sellev = $(".levelSelect").val();

    base_stat = {HP:job_stat[selcls]["INIT_HP"],AP:job_stat[selcls]["INIT_AP"],ATK:5,DEF:5,MATK:5,MDEF:5,HIT:5,FLEE:5,CRI:1,CDMG:150,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
    equip_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,CDMG: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,CDMG:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
    option_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,CDMG:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
    buff_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,CDMG:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
    passive_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,CDMG:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
    food_stat = {HP:0,AP:0,ATK:0,DEF:0,MATK:0,MDEF:0,HIT:0,FLEE:0,CRI:0,CDMG:0,MSPD:0,FIRE:0,WATER:0,FOREST:0,LIGHT:0,DARK:0};
    

    for(key in base_stat){
      if(job_stat[selcls][key] != null){
        if(key == "HP"|| key == "AP"){base_stat[key] += Math.floor(job_stat[selcls][key]*(sellev-1));}
        else{base_stat[key] += Math.floor(job_stat[selcls][key]*(sellev));}
      }
    }

    
    var bonus_p = []
    $("#Bonus .bonus").each(function(i) {
      bonus_p[i] = parseInt($(this).val());
    });
    bonusf(bonus_p);

    $("#Equip .eqp").each(function(i,v) {
      var idx = $(this).prop("selectedIndex")
      var equip = equip_array[i][idx];
      for(key in equip){
        if(Object.keys(equip_stat).indexOf(key) != -1 ){
          var grade = gradef($(this).parent().next().children("input").val(),key,equip[key]);
          equip_stat[key] += equip[key] + grade;
        }
      }
      //op
      var opidx = $(this).parent().nextAll().eq(1).find("select option:selected").val();
      for(key in option_array[opidx]){
        if(Object.keys(option_stat).indexOf(key) != -1 ){
          option_stat[key] += option_array[opidx][key];
        }
      }
    });

    $("#Rune .passive").each(function(i,v) {
      var idx = $(this).prop("selectedIndex");
      var weapon = equip_array[0][$("#Equip .eqp").eq(0).prop("selectedIndex")].TYPE;

      for(key in p_ability_array[idx]){
        if(p_ability_array[idx].TYPE == weapon){
          if(Object.keys(passive_stat).indexOf(key) != -1 ){
            passive_stat[key] += p_ability_array[idx][key];
          }
        }
      }
    });

    $("#Buff .buff").each(function(i,v) {
      var idx = $(this).prop("selectedIndex");
      var lv = $(this).parent().find("input").prop("selectedIndex");
      if(i == 0 && idx != 0){
        buff_stat.ATK += Math.floor((idx*0.1)*(base_stat.ATK+bonus_stat.ATK)+(sellev/2));
      }
      if(i == 1 && idx != 0){
        buff_stat.DEF += Math.floor((idx*0.1)*(base_stat.DEF+bonus_stat.DEF)+(sellev/2));
      }
      if(i == 2 && idx != 0){
        buff_stat.MATK += Math.floor((idx*0.1)*(base_stat.MATK+bonus_stat.MATK)+(sellev/2));
      }

      for(key in buff_array[i][idx]){
        if(Object.keys(buff_stat).indexOf(key) != -1){
          buff_stat[key] += buff_array[i][idx][key];
        }
      }
    });
    $("#Buff .food").each(function(i,v) {
      var idx = $(this).prop("selectedIndex");
      for(key in food_array[idx]){
          if(Object.keys(food_stat).indexOf(key) != -1 ){
            food_stat[key] += food_array[idx][key];
          }
        }
    });


        
  for(var i=0; i <stat.length; i++){

      var text = base_stat[stat[i]] + equip_stat[stat[i]] + bonus_stat[stat[i]] + option_stat[stat[i]] + buff_stat[stat[i]] + passive_stat[stat[i]] + food_stat[stat[i]];
      var ret = ( "    "+ text ).slice(-4);
      $("#"+stat[i]).text(ret+" ");
    }
    
  }

  function LimitCheck(){

    var selcls = $(".jobSelect").val();
    var sellev = $(".levelSelect").val();
    //両手・片手
    var hand = equip_array[0][$("#Equip .eqp").eq(0).prop("selectedIndex")].HAND;
    if (hand=="TWO"){
      $("#Equip .eqp").eq(1).val(0);
    }

    $("#Equip .eqp").each(function(i,v) {
      var idx = $(this).prop("selectedIndex");
      var equip = equip_array[i][idx];
      var grade = $(this).parent().next().children("input").val();
      var option = $(this).parent().nextAll().eq(1).find("select option:selected").val();
      
      //装備可能装備のみ表示
      $(this).children().hide();
      for(var i2=0;i2<equip_array[i].length;i2++){
        //console.log(equip_array[i][i2])
      if(equip_array[i][i2].CLASS.indexOf(job_array2[selcls]) != -1 || equip_array[i][i2].CLASS ==""){
        $(this).children().eq([i2]).show();
        }
      }
      if($(this).children().eq(idx).css('display') == 'none'){
        $(this).val(0);
      }

      //無選択時　強化とオプションを削除
      if(idx==0){
        $(this).parent().next().children("input").val(0);
        $(this).parent().nextAll().eq(1).find("select").val(1);
      }
      //ランクA・Bは強化3に
      if(equip.RANK == "A"||equip.RANK == "B"){
        if(3 < grade){
            $(this).parent().next().children("input").val(3);
        }
      }
      //ひのきのぼう
      if(equip.ENHANCE == false){
        $(this).parent().next().children("input").val(0);
        }
      if(equip.OPTION == false){
        $(this).parent().nextAll().eq(1).find("select").val(1);
        }
      
    });

    /*
    $("#Bonus .bonus").each(function(i,v){
    if(max_level<$(this).val()){
      $(this).val(max_level-1);
    }});*/

    $("#Buff .buff").each(function(i,v){
      var idx = $(this).prop("selectedIndex");
      $(this).parent().hide();
        if(buff_array[i][0].CLASS.indexOf(job_array2[selcls]) != -1 || buff_array[i][0].CLASS == "All"){
          $(this).parent().show();
        }
        if($(this).parent().css('display') == 'none'){
          $(this).val(0);
        }
      });

    $("#Rune .active").each(function(i,v){
      var idx = $(this).prop("selectedIndex");
      $(this).children().hide();
      for(var i2=0;i2<a_ability_array.length;i2++){
      if(a_ability_array[i2].CLASS.indexOf(job_array2[selcls]) != -1 || a_ability_array[i2].CLASS ==""){
        $(this).children().eq([i2]).show();
        }
      }
      if($(this).children().eq(idx).css('display') == 'none'){
        $(this).val(0);
      }
      });

      $("#Rune .passive").each(function(i,v){
        
      var idx = $(this).prop("selectedIndex")
        $(this).children().hide();
        for(var i2=0;i2<p_ability_array.length;i2++){
        if(p_ability_array[i2].CLASS.indexOf(job_array2[selcls]) != -1 || p_ability_array[i2].CLASS ==""){
          $(this).children().eq([i2]).show();
          }
        }
        if($(this).children().eq(idx).css('display') == 'none'){
          $(this).val(0);
        }
        });    

  }


var ctx = document.getElementById('canvas').getContext('2d');
function Draw(){
  ctx.clearRect(0, 0, 400, 320);
  ctx.fillStyle = "rgb(255, 255, 255)";
  ctx.fillRect(0, 0, 400, 320);

  ctx.fillStyle = "rgb(0, 0, 0)";
  
  StatUpdate();
  DrawStat();
  DrawEquip();
  DrawChara();
  DrawRune();
  DrawOther();

  var x =0,y=0;
  var chara_ctx = document.getElementById('Chara_canvas');
  var stat_ctx = document.getElementById('Stat_canvas');
  
  var rune_ctx = document.getElementById('Rune_canvas');
  var equip_ctx = document.getElementById('Equip_canvas');
  var other_ctx = document.getElementById('Other_canvas');
    ctx.drawImage(chara_ctx,x,y);
    ctx.drawImage(other_ctx,x,y);
    ctx.drawImage(stat_ctx,x+103,y);
    ctx.drawImage(equip_ctx,x,y+110);
    ctx.drawImage(rune_ctx,x+260,y+210);
}



$('#Chara,#Bonus,#Equip,#Other,#Buff,#Rune,#Buff').on("change",function(){
  LimitCheck();
  Draw();
});

$(window).load(function(){

$("#Sim select").children('option:first-child').remove();

//wikiスマホ用
$("#Sim input[type=number]").css("width","50px");
$("#Sim .hide").hide();
$('head').append('<link rel="stylesheet" href="https://img.atwikiimg.com/www65.atwiki.jp/yurugaru/css/1562610109.css" type="text/css" />');
  LimitCheck();
  Draw();
});



function gradef(g,k,v){  
  if(k == "ATK"||k == "DEF"||k == "MATK"||k == "MDEF"||k == "HIT"||k == "FLEE"||k == "CRI"||k == "MSPD"){
    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){

  let total = bonus_p.reduce(function(total, data){return total + data});
console.log(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] * 3
    //bonus_stat.DEF += Math.round(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 += Math.round(bonus_p[2] * 0.5)
  }
  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
    }
  $("#Bonus .total").val(total);

}

function downloadCanvas() {
  let canvas = document.getElementById('canvas')
  let link = document.getElementById('hiddenLink')
  link.href = canvas.toDataURL()

  document.getElementById('canvas').src = canvas.toDataURL()

  link.click()
}

$('#canvasDownload').on("click",function(){
  downloadCanvas();
});




</script>

}}