Z,X,C,V, Ctrl = -1, Space = All, Esc = Clear
ドラゴンクエストX 4アカ キラキラマラソン用カウンター

金策キラキラマラソンコース:攻略の虎
https://dragon-quest.jp/ten/other/marason.php

JavaScript

$(function(){

  var inputs = $('input');
  var countClear = function(){
    var isClear = true;
    inputs.each(function(){
      if($(this).val() !== '0'){
        isClear = false;
      }
    });
    if(!isClear){
      save();
      inputs.val(0);
    } else {
      load();
    }
  }

  var countPush = function(targets, addNum){
    console.log(targets);
    console.log(addNum);
    targets.each(function(){
      var val = Number($(this).val()) + addNum;
      $(this).val(val);
    });
  }

  $('.increment').on('click', function(){
    var addNum = Number($(this).attr('number'));
    var targets = $(this).parent().find('input');
    countPush(targets, addNum);
    return false;
  });
  $('.incrementAll').on('click', function(){
    var addNum = Number($(this).attr('number'));
    var targets = inputs;
    countPush(targets, addNum);
  });
  $('.clear').on('click', function(){
    countClear();
  });

  var keys = [90,88,67,86];//zxcv
  var defKeys = [90,88,67,86,32,27];//zxcv
  $(document).on('keydown', function(e){
    
    defKeys.forEach(function(k, i){
      if(e.keyCode === k){
        e.preventDefault();
      }
    });
    var targets = [];
    var addNum = 1;
    if(event.ctrlKey){
      addNum = -1;
    }

    if(e.keyCode === 27){
      countClear();
    } else if(e.keyCode === 32){
      targets = inputs;
      countPush(targets, addNum);
    } else{
      keys.forEach(function(k, i){
        if(e.keyCode === k){
          targets = inputs.eq(i);
          countPush(targets, addNum);
        }
      });
    }
  });



  $(window).on('beforeunload', function(){
    save();
  });

  var save = function(){
    var counters = [];
    inputs.each(function(){
      counters.push($(this).val());
    });
    var json = {counters:counters};
    localStorage.setItem('counter4', JSON.stringify(json));
    console.log(json);
  }


  var load = function(){
    var counters =[];
    var countersString = localStorage.getItem('counter4');
    if(countersString){
      var counters = JSON.parse(countersString).counters;
    }
    counters.forEach(function(v, i){
      inputs.eq(i).val(v);
    });
  }
  load();


});

CSS

body{
  overflow:hidden;
}
#code{
  display:none;
}

#demo{
  min-height:100vh;
}
#demo *{
  box-sizing:border-box;
  font-weight:bold;
}

.counters{
  display:flex;
}
.counters > div{
  width:25%;
  padding:1vmin;
}

.counter{
  width:100%;
  height:16vh;
  font-size:12vmin;
  text-align:center;
  border:0;
  background-color:#f7f7f7;
}
button{
  width:100%;
  height:16vh;
  font-size:12vmin;
  -webkit-appearance: none;
  border:0;
  margin:1vmin 0;
  cursor:pointer;
}
button:hover{
  background-color:#fcc;
}

.all > div{
  padding:0 1vmin;
  text-align:center;
}

.all button{
  width:100%;
  height:12vh;
  font-size:10vmin;
}


input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  width:0;
}

.help{
  position:fixed;
  right:0;
  bottom:0;
  color:#aaa;
  margin:1vmin;
}

pre{
  display:none;
}

@media (max-width:640px){
  .help{
    display:none;
  }
}