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

js/sim - (2019/07/08 (月) 18:22:46) の１つ前との変更点

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

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

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


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 ctx = document.getElementById('canvas').getContext('2d');

</script>
}}

#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 = [];


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