A問題「モンスターテイマー」のビジュアライザ用のページです。問題ページではないので回答不要です。

.render-area{ display: flex; justify-content: start; } #render-window { margin:0; background:#000; color: #FFFFFF; width:720px; height:480px; } #view-area{ text-align: center; justify-content: center; display: inline-block !important; width:460px; height:480px; } #monster { box-sizing: border-box; text-shadow: 0 0 1px #000000; text-align: center; overflow: hidden; background-position: 0px 0; zoom: 2; } /*素材提供元「モンスター集会所！」URL：http://monstermeetingplace.web.fc2.com/\*/ .m1 { height: 32px; width: 32px; animation: move32 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/1.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move32 { 0% { background-position: 0px 0px; } 100% { background-position: -256px 0px; } } .m2-a { height: 48px; width: 48px; animation: move48 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/2-a.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move48 { 0% { background-position: 0px 0px; } 100% { background-position: -384px 0px; } } .m2-b { height: 56px; width: 56px; background-image: url("https://img.atcoder.jp/future-contest-2019-final/2-b.png"); animation: move56 1s steps(8) 0s infinite; /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move56 { 0% { background-position: 0px 0px; } 100% { background-position: -448px 0px; } } .m3-a { height: 40px; width: 40px; background-image: url("https://img.atcoder.jp/future-contest-2019-final/3-a.png"); animation: move40 1s steps(8) 0s infinite; /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move40 { 0% { background-position: 0px 0px; } 100% { background-position: -320px 0px; } } .m3-b { height: 64px; width: 64px; background-image: url("https://img.atcoder.jp/future-contest-2019-final/3-b.png"); animation: move64 1s steps(8) 0s infinite; /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move64 { 0% { background-position: 0px 0px; } 100% { background-position: -512px 0px; } } .m4-a { height: 80px; width: 80px; animation: move80 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/4-a.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } .m4-b { height: 64px; width: 64px; animation: move64 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/4-b.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } .m5-a { height: 72px; width: 72px; animation: move72 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/5-a.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move104 { 0% { background-position: 0px 0px; } 100% { background-position: -832px 0px; } } .m5-b { height: 72px; width: 72px; animation: move72 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/5-b.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move72 { 0% { background-position: 0px 0px; } 100% { background-position: -576px 0px; } } .m6-a { height: 96px; width: 96px; animation: move96 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/6-a.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move96 { 0% { background-position: 0px 0px; } 100% { background-position: -768px 0px; } } .m6-b { height: 72px; width: 72px; animation: move72 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/6-b.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } @keyframes move80 { 0% { background-position: 0px 0px; } 100% { background-position: -640px 0px; } } .m7-a { height: 96px; width: 96px; animation: move96 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/7-a.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } .m7-b { height: 96px; width: 96px; animation: move96 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/7-b.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } .m8 { height: 96px; width: 96px; animation: move96 1s steps(8) 0s infinite; background-image: url("https://img.atcoder.jp/future-contest-2019-final/8.png"); /* background-image: url("https://img.atcoder.jp/future-contest-2018-final/map\_image.png"); */ } #battle{ margin: 0px 40px !important; text-align: center; justify-content: center; align-items: flex-end; display: flex; Width:80%; Height:50%; z-index:0; } #message-box{ margin: 30px 40px; !important; box-shadow: 0 0 2px 2px #666666, 0 0 0 5px #ffffff, 0 0 2px 8px #666666; border-radius: 3px; Width:80%; Height:30%; display: flex; z-index:0; } #message-area{ text-align: left; margin: 10px 10px; !important; } #info { text-align: right; background:#000; margin: 10px 0px 0px!important; width: 230px !important; display: inline-block !important; } #info > div { box-shadow: 0 0 2px 2px #666666, 0 0 0 5px #ffffff, 0 0 2px 8px #666666; border-radius: 3px; margin: 10px 0 20px 0 !important; } #info .info-label { display: flex; justify-content: flex-start; align-items: center; border-bottom: 2px solid #666666; padding: 4px; margin: 0; } #money { font-weight: bold; text-align: right; font-size: 1.3em; margin-top: 0; padding: 8px 4px; } #score { font-weight: bold; text-align: right; font-size: 1.3em; margin-top: 0; padding: 8px 4px; } #skills{ margin-bottom: 0; height:230px; } #skill-chart{ text-align: center; height: 170px !important; margin: 10px -50px; } #seedSelectText{ display: inline-block !important; margin-left: 20px; } #testCaseSeed { text-align: right; width: 150px; display: inline-block !important; margin: 20px 10px 20px 0px; } #createTestCase { display: inline-block !important; margin: 10px 10px 10px 10px; } .anime-btn { display: flex; !important; } .anime-btn > button { height: 2em; !important; } .anime-btn > label{ display: flex; !important; width: 400px; !important; margin: 0 16px; !important; font-size:14px; !important; } .js-slider{ position:relative; !important; width: 501px; !important; height:20px; !important; } .js-slider div{ background:#ddd; height:3px; !important; border:1px inset #aaa; position:relative; !important; top:12px; !important; font-size:0px; !important; } .js-slider input{ position:absolute; !important; width:15px; !important; height:20px; !important; display:block; !important; } #start { width:32px; !important; height:32px; !important; position:relative; bottom:5px; } #anime-speed { width:200px; !important; margin: 0px 10px; !important; } #object{ margin: 20px 5px; } #tile{ margin: 20px 5px; } .icon-money { background-image: url("https://img.atcoder.jp/future-contest-2019-final/sign.png"); background-size: cover; background-position: 0 0; display: inline-block; width: 32px; height: 26px; margin: 0 4px; } .icon-work{ background-image: url("https://img.atcoder.jp/future-contest-2019-final/sign.png"); background-size: cover; background-position: -64px 0; display: inline-block; width: 32px; height: 26px; margin: 0 4px; } .js-slider{ position:relative; width: 999px; height:20px; } .js-slider div{ background:#ddd; height:3px; border:1px inset #aaa; position:relative; top:12px; font-size:0px; } .js-slider input{ position:absolute; width:15px; height:20px; display:block; }

テストケース生成

乱数シードを指定し、ローカル実行用にテストケースを生成する機能を用意しました。

• 本機能はchrome上での動作を想定しています。他の環境で正常に動作する保証はなく、特にIEでは動作しないことを確認しています。
• 本機能は当コンテスト上でのテストケースとの同一性を保証するものではありません。特に乱数生成の仕様に差異があることが考えられますので、予めご了承ください。

Seed=

ビジュアライザー

入力ファイルと出力ファイルから、点数の計算および結果を可視化するビジュアライザを用意しました。

• 本ビジュアライザはchrome上での動作を想定しています。他の環境で正常に動作する保証はなく、特にIEでは動作しないことを確認しています。
• 本ビジュアライザから解答の提出はできません。 AtCoder A問題「モンスターテイマー」上より解答を提出して下さい。
• 本ビジュアライザ上で計算された点数は、当コンテスト上での点数を保証するものではありません。本ビジュアライザを使用することによるあらゆる損害は保障しかねますので、予めご了承ください。

入力ファイル：

出力ファイル：

▶ 再生速度: 遅速

turn

たかはしくん は なかまに なりたそうに こちらをみている！

Score

0

おかね

0

スキル

※表示するモンスターのビジュアライズは、あくまでイメージです。スコアには影響しません。

const MAX_LEVEL = 10; const APPANAGE = 1000; const COST_TRAINING = 10000; var inputFlg = false; var loadedFlg = false; var T = 1000; var N = 10; var M = 30000; var rendTurn = 0; var tasks = []; var outputData = []; var order = []; var golds = []; var skills = []; var trainings = []; var done = [] var mosterType = [] var invalidQuests = [] var doneQuests = [] class Task{ constructor(inputStr){ this.start = Number(inputStr[0]); this.end = Number(inputStr[1]); this.gold = Number(inputStr[2]); this.takes = [...Array(N)].map(() => 0); for(var i=0; i < N; i++){ this.takes[i] = Number(inputStr[3 + i]); } this.done = false; } output(){ ret = start + "-" + end + " \\" + gold + " \[" + takes[0]; for(var i; i < N; i++){ ret += +","+takes[i]; } ret += "\]" return ret; } } class Order{ constructor(inputStr){ this.type = Number(inputStr[0]); if(this.type == 1 || this.type == 2){ this.param = Number(inputStr[1]); } } output(){ ret = this.type; if(type == 1 || type == 2){ ret += "-" + this.param; } return ret; } } // テストケース生成 $("#createTestCase").click(function () { let seed = $('#testCaseSeed').val(); if (!isFinite(seed) || Number(seed) < 0 || !seed){ seed = 0; $('#testCaseSeed').val(seed); } console.log("seed="+seed); const random = new Random(seed); records = "1000 10 30000\\r\\n"; var quests = \[\]; var questType = \[0,1,2\]; var L = 0; for (var i = 0; i < 30000; i++) { switch(questType\[random.nextInt(0, 2)\]){ case 0: L = random.nextInt(2, 10); break; case 1: L = random.nextInt(11, 100); break; case 2: L = random.nextInt(101, 1000); break; default: console.log("Error!"); return; } var A = random.nextInt(1, Math.max(1,1000 - L)); var B = A + L - 1; var takes = \[...Array(10)\].map(() => 0); takes\[0\] = random.nextInt(1, 10); for(var j = 1; j < 10; j++){ takes\[j\] = random.nextInt(0, takes\[j-1\]); } // シャッフル for(var j = 10 - 1; j > 0; j--){ var r = Math.floor(random.nextDouble() \* (j + 1)); var tmp = takes\[j\]; takes\[j\] = takes\[r\]; takes\[r\] = tmp; } var sum = takes.reduce((a,x) => a+=x,0); var C = Math.floor(sum \* 1.3 \* random.nextInt(1,2000 )); records += A + " " + B + " " + C; for(var j = 0; j < 10; j++){ records += " " + takes\[j\]; } records += "\\r\\n"; } var blob = new Blob(\[records\], { "type": "text/plain" }); window.URL = window.webkitURL || window.URL; $("#download").attr("href", window.URL.createObjectURL(blob)); document.getElementById('download').innerText = "Input_" + seed; let fileName = "testCase_" + seed + ".txt"; $('#download').attr('download', fileName); }); class Random { constructor(seed = 88675123) { this.x = 123456789; this.y = 362436069; this.z = 521288629; this.w = seed; } // XorShift next() { let t; t = this.x ^ (this.x << 11); this.x = this.y; this.y = this.z; this.z = this.w; return this.w = (this.w ^ (this.w >>> 19)) ^ (t ^ (t >>> 8)); } nextInt(min, max) { const r = Math.abs(this.next()); return min + (r % (max + 1 - min)); } nextDouble() { const r = Math.abs(this.next()); return (r % (1000000007 + 1)) / 1000000007; } }; // 入力ファイルの読込 var handleInputFiles = function (file, callback) { document.getElementById('inputFile').innerText = ''; document.getElementById('outputFile').innerText = ''; $('#output').val(''); inputFlg = false; loadedFlg = false; document.getElementById('score').innerText = 0; var reader = new FileReader(); reader.readAsText(file[0]); reader.onload = function (ev) { const inputDatalist = reader.result.split(/\r\n|\r|\n/); if(inputDatalist.length < 1){ console.log("No Text Error!! " + inputDatalist.length); document.getElementById('inputFile').innerText = 'error!'; $('#input').val(''); return; } var firstLine = inputDatalist\[0\].split(" "); if(firstLine.length != 3){ console.log("First Line Error!! " + inputDatalist.length); document.getElementById('inputFile').innerText = 'error!'; $('#input').val(''); return; } for(var i = 0; i < 3; i++){ if(Number.isNaN(Number(firstLine[i]))){ console.log("First Line Error!! " + inputDatalist.length); document.getElementById('inputFile').innerText = 'error!'; $('#input').val(''); return; } } T = Number(firstLine\[0\]); N = Number(firstLine\[1\]); M = Number(firstLine\[2\]); tasks = \[...Array(M)\].map(() => null); if(inputDatalist.length < M){ console.log("T Error!! " + inputDatalist.length); document.getElementById('inputFile').innerText = 'error! short line!'; $('#input').val(''); return; } for (var i = 0; i < M; i++) { line = inputDatalist[i+1].split(" "); if(line.length < 3 + N){ console.log("M error!! " + (i+1) + " " +inputDatalist[i].length); console.log(inputDatalist[i]); document.getElementById('inputFile').innerText = 'error! invalid task!'; $('#input').val(''); return; } for (var j = 0; j < 3 + N; j++) { if(Number.isNaN(Number(line\[j\]))){ document.getElementById('inputFile').innerText = 'error! not number!'; console.log("type error!! Line=" + i); $('#input').val(''); return; } if(Number(line[j]) < 0){ document.getElementById('inputFile').innerText = 'error! negative value!'; console.log("negative value error!! Line=" + i); $('#input').val(''); return; } if(j < 3){ continue; } if(Number(line\[j\]) > MAX\_LEVEL){ document.getElementById('inputFile').innerText = 'error! over level 10!'; console.log("over level error!! Line=" + i); $('#input').val(''); return; } } tasks[i] = new Task(line); } document.getElementById('inputFile').innerText = 'OK!'; console.log("input OK!"); inputFlg = true; setTimeout(function() { callback(-1); }, 50); }; } function clearInFilePath() { $('#input').val(''); } function clearOutFilePath() { $('#output').val(''); } // 出力ファイルの読込 function handleOutputFiles(file, callback) { document.getElementById('outputFile').innerText = ''; if (!inputFlg) { document.getElementById('outputFile').innerText = 'input first!'; $('#output').val(''); return; } loadedFlg = false; outputData = \[\]; document.getElementById('score').innerText = 0; var reader = new FileReader(); reader.readAsText(file\[0\]); reader.onload = function (ev) { const outputDatalist = reader.result.split(/\\r\\n|\\r|\\n/); if(outputDatalist.length < T){ console.log("output filr error!"); document.getElementById('outputFile').innerText = 'error! short line!'; $('#output').val(''); return; } order = [...Array(T)].map(() => null); for (var i = 0; i < T; i++) { line = outputDatalist[i].split(" "); if(Number.isNaN(Number(line[0]))){ console.log("output filr error! Line=" + i); console.log(row); document.getElementById('outputFile').innerText = 'error! not number!'; $('#output').val(''); return; } switch(Number(line\[0\])){ case 1: if(line.lengh < 2){ console.log("output filr error! Line=" + i); document.getElementById('outputFile').innerText = 'error! needs second param!'; $('#output').val(''); return; } if(Number.isNaN(Number(line[1]))){ console.log("output filr error! Line=" + i); console.log(row); document.getElementById('outputFile').innerText = 'error! not number!'; $('#output').val(''); return; } if(Number(line\[1\]) > MAX\_LEVEL || Number(line\[1\]) < 1){ console.log("output filr error! Line=" + i); document.getElementById('outputFile').innerText = 'error! invalid skill no!'; $('#output').val(''); return; } order[i] = new Order(line); break; case 2: if(line.lengh < 2){ console.log("output filr error! Line=" + i); document.getElementById('outputFile').innerText = 'error! needs second param!'; $('#output').val(''); return; } if(Number.isNaN(Number(line\[1\]))){ console.log("output filr error! Line=" + i); console.log(row); document.getElementById('outputFile').innerText = 'error! not number!'; $('#output').val(''); return; } if(Number(line[1]) > M || Number(line[1]) < 1){ console.log("output filr error! Line=" + i); document.getElementById('outputFile').innerText = 'error! invalid task no!'; $('#output').val(''); return; } order\[i\] = new Order(line); break; case 3: order\[i\] = new Order(line); break; default: document.getElementById('outputFile').innerText = 'error! not 1 or 2 or 3!'; console.log("output filr error! Line=" + i); console.log("error!!"); $('#output').val(''); return; } } document.getElementById('outputFile').innerText = 'OK!'; console.log("output OK!"); loadedFlg = true; setTimeout(function() { simulate(); callback(T+1); }, 50); }; } function simulate() { if(!inputFlg || ! loadedFlg){ return; } // init done = [...Array(M)].map(() => false); skills = [...Array(T+1)].map(() => [...Array(N)].map(() => 0)); trainings = [...Array(T+1)].map(() => [...Array(N)].map(() => 0)); golds = [...Array(T+1)].map(() => 0); golds[0] = 1000; mosterType = [...Array(T+1)].map(() => "m1"); invalidQuests = [...Array(T+1)].map(() => false); doneQuests = [...Array(T+1)].map(() => false); for (var i = 0; i < T; i++) { // copy for(var j = 0; j < N; j++) { skills[i+1][j] = skills[i][j]; trainings[i+1][j] = trainings[i][j]; } mosterType[i+1] = mosterType[i]; var nowGold = golds[i]; var nowOrder = order[i]; switch(nowOrder.type){ case 1: var skillNo = nowOrder.param-1; if(skills[i][skillNo] >= MAX_LEVEL){ break; } var nextLevel = skills[i][skillNo] + 1; if(nowGold < Math.pow(2,nextLevel) * COST_TRAINING){ break; } nowGold -= Math.pow(2,nextLevel) * COST_TRAINING; trainings[i+1][skillNo]++; if(trainings[i+1][skillNo] >= nextLevel){ trainings[i+1][skillNo]=0; skills[i+1][skillNo]++; var sum = 0; for(var j = 0; j < N; j++) { sum += skills[i+1][j]; } switch(sum){ case 10: mosterType[i+1] = "m2-a" for(var j = 0; j < N; j++) { if(skills[i+1][j]>1){ mosterType[i+1] = "m2-b" break; } } break; case 20: mosterType[i+1] = "m3-a" for(var j = 0; j < N; j++) { if(skills[i+1][j]>2){ mosterType[i+1] = "m3-b" break; } } break; case 30: mosterType[i+1] = "m4-a" for(var j = 0; j < N; j++) { if(skills[i+1][j]>3){ mosterType[i+1] = "m4-b" break; } } break; case 50: mosterType[i+1] = "m5-a" for(var j = 0; j < N; j++) { if(skills[i+1][j]>5){ mosterType[i+1] = "m5-b" break; } } break; case 70: mosterType[i+1] = "m6-a" for(var j = 0; j < N; j++) { if(skills[i+1][j]>7){ mosterType[i+1] = "m6-b" break; } } break; case 90: mosterType[i+1] = "m7-a" for(var j = 0; j < N; j++) { if(skills[i+1][j]>9){ mosterType[i+1] = "m7-b" break; } } break; case 100: mosterType[i+1] = "m8" break; default: break; } } break; case 2: var task = tasks[nowOrder.param-1]; if(task.start > i+1 || task.end < i+1){ invalidQuests[i] = true; break; } if(done[nowOrder.param-1]){ doneQuests[i] = true; break; } money = task.gold; money *= (1 + 9 * (i+1 - task.start) / (task.end - task.start)); skillLack = 0; for (var j = 0; j < N; j++){ skillLack += Math.max(0, task.takes[j] - skills[i][j]); } if (skillLack == 0){ money *= 10; } else { money *= Math.pow(0.5, skillLack); money += 1e-9; } nowGold += Math.floor(money); done[nowOrder.param-1] = true; break; case 3: nowGold += APPANAGE; break; default: document.getElementById('outputFile').innerText = 'error! not 1 or 2 or 3!'; console.log("output filr error! Line=" + i); console.log("error!!"); $('#output').val(''); return; } golds\[i + 1\] = nowGold; var str = i + " " + nowGold + " \\\["; for(var j = 0; j < N; j++){ str += skills\[i+1\]\[j\] + ","; } str += "\\\]"; //console.log(str); } document.getElementById('score').innerText = golds\[T\]; } function wrongAnswer(str, t) { console.log("simulate error!! turn="+ t + " " + str); outputData = \[\]; \_isRunning = false; start.innerText = '▶'; render(t); document.getElementById('slider1o').value = t; document.getElementById('outputFile').innerText = 'error!'; document.getElementById('score').innerText = 'WA'; } var render = function(rendTurn) { this.rendTurn = rendTurn; if(!inputFlg){ return; } if(rendTurn < 0){ document.getElementById('money').innerText = 0; return; } if(!loadedFlg){ return; } if(rendTurn >= T){ document.getElementById('money').innerText = golds\[T\]; document.getElementById('message-area').innerHTML = "あなた は
"+golds\[T\] + " 円を
"+"てにいれた！"; for(var i = 0;i < N;i++){ myChart.chart.data.datasets\[0\].data\[i\] = skills\[T\]\[i\]; } myChart.chart.update(); document.getElementById("monster").className = mosterType\[T\]; return; } document.getElementById('money').innerText = golds\[rendTurn\]; for(var i=0;i<N;i++){ myChart.chart.data.datasets\[0\].data\[i\] = skills\[rendTurn\]\[i\]; } myChart.chart.update(); var message = ""; var nowOrder = order\[rendTurn\]; switch(nowOrder.type){ case 1: if(golds\[rendTurn\] == golds\[rendTurn+1\]){ message = "たかはしくん の トレーニング "+nowOrder.param+"！
しかし おかねがたりなかった…。" break; } var skillNo = nowOrder.param-1; if(skills\[rendTurn\]\[skillNo\] < skills\[rendTurn+1\]\[skillNo\]){ message = "たかはしくん の トレーニング "+nowOrder.param+"！
スキル"+nowOrder.param+"のレベルが"+skills\[rendTurn+1\]\[skillNo\]+"にあがった！" }else{ message = "たかはしくん の トレーニング "+nowOrder.param+"！
つぎのレベルまで あと "+(skills\[rendTurn+1\]\[skillNo\] - trainings\[rendTurn+1\]\[skillNo\] + 1)+" かい。" } break; case 2: if(doneQuests\[rendTurn\]){ message = "たかはしくん の クエスト "+nowOrder.param+" ！
すでに そのクエストを うけていた！" }else if(invalidQuests\[rendTurn\]){ message = "たかはしくん の クエスト "+nowOrder.param+" ！
しかし そのクエストを うけられなかった！" }else{ message = "たかはしくん の クエスト "+nowOrder.param+" ！
あなた は "+(golds\[rendTurn+1\] - golds\[rendTurn\])+" 円をてにいれた！" } break; case 3: message = "たかはしくん の アルバイト！
あなた は "+APPANAGE+" 円をてにいれた！" break; default: message = "不正な値です。" break; } document.getElementById('message-area').innerHTML =message; document.getElementById("monster").className = mosterType\[rendTurn\]; return }; (function(){ var slider = document.getElementById('slider1'); var output = document.getElementById('slider1o'); var start = document.getElementById('start'); var animeSpeed = document.getElementById('anime-speed'); var \_isRunning = false; var \_animationID; var input = slider.getElementsByTagName('input')\[0\]; var root = document.documentElement; var dragging = false; var value = output.value;// 初期位置 var width = input.clientWidth / 2; let frame = 0; var set\_value = function (){ // つまみのサイズ(input.clientWidth)だけ位置を調整 input.style.left = (value - input.clientWidth/2) + 'px'; output.value = value; }; set\_value(); var autoUpdate = function () { var tmp = Number(output.value) + 1; if(tmp > T + 2){ \_isRunning = false; start.innerText = '▶'; cancelAnimationFrame(\_animationID); output.value = 0; return; } \_animationID = requestAnimationFrame(autoUpdate); frame++; if(frame % (50 - Number(animeSpeed.value)) !== 0) { return; } render(Number(output.value)); output.value = tmp; value = tmp; set\_value(); } // スタートボタンクリック start.onclick = function(evt){ if (\_isRunning) { \_isRunning = false; start.innerText = '▶'; cancelAnimationFrame(\_animationID); } else if(loadedFlg){ \_isRunning = true; start.innerText = '■'; autoUpdate(); } else { if(inputFlg && order.length == T+1){ $('#input').val(''); $('#output').val(''); if(loadedFlg){ \_isRunning = true; start.innerText = '■'; autoUpdate(); } } } }; // 目盛り部分をクリックしたとき slider.onclick = function(evt){ dragging = true; document.onmousemove(evt); document.onmouseup(); }; // 数値の変更 output.onchange = function(evt){ value = evt.target.value; render(Number(evt.target.value)); }; // ドラッグ開始 input.onmousedown = function(evt){ dragging = true; return false; }; // ドラッグ終了 document.onmouseup = function(evt){ if (dragging) { dragging = false; output.value = value; render(value); } }; document.onmousemove = function(evt){ if(dragging){ // ドラッグ途中 if(!evt){ evt = window.event; } var left = evt.clientX; var rect = slider.getBoundingClientRect(); // マウス座標とスライダーの位置関係で値を決める value = Math.round(left - rect.left - width); // スライダーからはみ出したとき if (value < 0) { value = 0; } else if (value > slider.clientWidth) { value = slider.clientWidth; } set\_value(); return false; } }; })(); //色の設定 var colorSet = { red: 'rgb(255, 99, 132)', orange: 'rgb(255, 159, 64)', yellow: 'rgb(255, 205, 86)', green: 'rgb(75, 192, 192)', blue: 'rgb(54, 162, 235)', purple: 'rgb(153, 102, 255)', grey: 'rgb(201, 203, 207)' }; // 色のRGB変換 var color = Chart.helpers.color; /\* \* チャートの初期設定 \*/ var config = { type: 'radar', data: { labels: \["No.1", "No.2", "No.3", "No.4", "No.5", "No.6", "No.7", "No.8", "No.9", "No.10"\], datasets: \[{ label: "レベル", backgroundColor: color(colorSet.blue).alpha(0.5).rgbString(), borderColor: colorSet.blue, pointBackgroundColor: colorSet.blue, data: \[0, 0, 0, 0, 0, 0, 0, 0, 0, 0\] },\] }, options: { chartArea: { backgroundColor: "#000" }, animation: { duration: 1500, }, maintainAspectRatio: false, showTooltips: false, responsive: false, legend: { display: false }, title: { display: false }, scale: { display: true, pointLabels: { fontSize: 10, fontColor: colorSet.yellow }, gridLines: { display: true, color: colorSet.yellow }, ticks: { display: false, fontColor: "#FFF", fontSize: 8, min: 0, max: 10 } } } }; var myChart = new Chart($("#skill-chart"), config);</p>