Skip to content

sora / sanitary-net

Go to a project
Commit 3b9d058d by o.kimura
Options

最終結果の関数を切り離す

parent d79c9fe9
Expand all
Inline Side-by-side
Showing with 157 additions and 98 deletions
takumi-style/app/index_inc.html
...@@ -203,8 +203,9 @@ ...@@ -203,8 +203,9 @@
<body> <body>
<script> <script>
navigator.serviceWorker.register('sw.js'); navigator.serviceWorker.register('sw.js');
</script> </script>
<!-- sound --> <!-- sound -->
<audio preload="auto" id="clickmp3"> <audio preload="auto" id="clickmp3">
<source src="sound/click.mp3" type="audio/mp3"> <source src="sound/click.mp3" type="audio/mp3">
...@@ -415,6 +416,16 @@ ...@@ -415,6 +416,16 @@
<div id="result_plate" class="vanish"> <div id="result_plate" class="vanish">
<!------------------------------------------------------------------------------------ begin : ans_plate --> <!------------------------------------------------------------------------------------ begin : ans_plate -->
<img src="images/result/q1.png" class="vanish" id="q1">
<img src="images/result/q2.png" class="vanish" id="q2">
<img src="images/result/q3.png" class="vanish" id="q3">
<img src="images/result/yes1.png" class="vanish" id="yes1">
<img src="images/result/yes2.png" class="vanish" id="yes2">
<img src="images/result/yes3.png" class="vanish" id="yes3">
<img src="images/result/no1.png" class="vanish" id="no1">
<img src="images/result/no2.png" class="vanish" id="no2">
<img src="images/result/no3.png" class="vanish" id="no3">
<img src="images/result/arr_yes.png" class="vanish" id="arr_yes" width="40" height="40"> <img src="images/result/arr_yes.png" class="vanish" id="arr_yes" width="40" height="40">
<img src="images/result/arr_no.png" class="vanish" id="arr_no" width="40" height="40"> <img src="images/result/arr_no.png" class="vanish" id="arr_no" width="40" height="40">
<img src="" class="vanish" id="yes_btn" width="200" height="auto"> <img src="" class="vanish" id="yes_btn" width="200" height="auto">
......
takumi-style/app/js/quizMaster.js
var rand = 0;
// quiz master // quiz master
function quizMaster(et) { function quizMaster(et) {
...@@ -275,6 +276,8 @@ function quizMaster(et) { ...@@ -275,6 +276,8 @@ function quizMaster(et) {
}); //----- sound : click }); //----- sound : click
function returnTop() { function returnTop() {
console.log("playSE#seStop"); //----------sound : seStop console.log("playSE#seStop"); //----------sound : seStop
rand = 0;
$("#result_plate").removeClass("goldPrize randomize1 randomize2 randomize3 answer1 answer2"); $("#result_plate").removeClass("goldPrize randomize1 randomize2 randomize3 answer1 answer2");
$("#yes_btn").removeClass("yes_btn3 yes_btn2 yes_btn1"); $("#yes_btn").removeClass("yes_btn3 yes_btn2 yes_btn1");
$("#no_btn").removeClass("no_btn3 no_btn2 no_btn1"); $("#no_btn").removeClass("no_btn3 no_btn2 no_btn1");
...@@ -282,6 +285,17 @@ function quizMaster(et) { ...@@ -282,6 +285,17 @@ function quizMaster(et) {
$("#no_btn").addClass("vanish"); $("#no_btn").addClass("vanish");
$("#arr_yes").addClass("vanish"); $("#arr_yes").addClass("vanish");
$("#arr_no").addClass("vanish"); $("#arr_no").addClass("vanish");
$("#q1").addClass("vanish");
$("#q2").addClass("vanish");
$("#q3").addClass("vanish");
$("#yes1").addClass("vanish");
$("#yes2").addClass("vanish");
$("#yes3").addClass("vanish");
$("#no1").addClass("vanish");
$("#no2").addClass("vanish");
$("#no3").addClass("vanish");
$("#button_next_result").addClass("vanish"); $("#button_next_result").addClass("vanish");
$("#gamemp3").get(0).pause(); $("#gamemp3").get(0).pause();
...@@ -291,7 +305,7 @@ function quizMaster(et) { ...@@ -291,7 +305,7 @@ function quizMaster(et) {
document.getElementById("result_title").classList.remove("vanish"); document.getElementById("result_title").classList.remove("vanish");
document.getElementById("result_main").classList.remove("vanish"); document.getElementById("result_main").classList.remove("vanish");
resultPlate.classList.remove("randomize" + (Math.floor(Math.random() * 3) + 1)); // resultPlate.classList.remove("randomize" + (Math.floor(Math.random() * 3) + 1));
myObj.hideResult(); myObj.hideResult();
topAnime.dispFunc(); topAnime.dispFunc();
} }
...@@ -305,15 +319,29 @@ function quizMaster(et) { ...@@ -305,15 +319,29 @@ function quizMaster(et) {
}, { }, {
passive: true passive: true
}); //----- sound : click }); //----- sound : click
function returnSelect() { function returnSelect() {
console.log("playSE#seStop"); //----------sound : seStop 要注意。 console.log("playSE#seStop"); //----------sound : seStop 要注意。
$("#result_plate").removeClass("goldPrize randomize1 randomize2 randomize3 answer1 answer2"); // $("#result_plate").removeClass("goldPrize randomize1 randomize2 randomize3 answer1 answer2");
rand = 0;
$("#yes_btn").removeClass("yes_btn3 yes_btn2 yes_btn1"); $("#yes_btn").removeClass("yes_btn3 yes_btn2 yes_btn1");
$("#no_btn").removeClass("no_btn3 no_btn2 no_btn1"); $("#no_btn").removeClass("no_btn3 no_btn2 no_btn1");
$("#yes_btn").addClass("vanish"); $("#yes_btn").addClass("vanish");
$("#no_btn").addClass("vanish"); $("#no_btn").addClass("vanish");
$("#arr_yes").addClass("vanish"); $("#arr_yes").addClass("vanish");
$("#arr_no").addClass("vanish"); $("#arr_no").addClass("vanish");
$("#q1").addClass("vanish");
$("#q2").addClass("vanish");
$("#q3").addClass("vanish");
$("#yes1").addClass("vanish");
$("#yes2").addClass("vanish");
$("#yes3").addClass("vanish");
$("#no1").addClass("vanish");
$("#no2").addClass("vanish");
$("#no3").addClass("vanish");
$("#button_next_result").addClass("vanish"); $("#button_next_result").addClass("vanish");
$("#gamemp3").get(0).pause(); $("#gamemp3").get(0).pause();
...@@ -322,7 +350,6 @@ function quizMaster(et) { ...@@ -322,7 +350,6 @@ function quizMaster(et) {
$("#topmp3").get(0).pause(); $("#topmp3").get(0).pause();
document.getElementById("result_title").classList.remove("vanish"); document.getElementById("result_title").classList.remove("vanish");
document.getElementById("result_main").classList.remove("vanish"); document.getElementById("result_main").classList.remove("vanish");
resultPlate.classList.remove("randomize" + (Math.floor(Math.random() * 3) + 1));
myObj.hideResult(); myObj.hideResult();
levelSelectMenu.dispFunc(); levelSelectMenu.dispFunc();
...@@ -389,6 +416,7 @@ function quizMaster(et) { ...@@ -389,6 +416,7 @@ function quizMaster(et) {
document.getElementById("result_select_button").classList.add("vanish"); document.getElementById("result_select_button").classList.add("vanish");
resultPlate.classList.add("vanish"); resultPlate.classList.add("vanish");
} }
myObj.dispResult = function () { myObj.dispResult = function () {
resultPlate.classList.remove("vanish"); resultPlate.classList.remove("vanish");
...@@ -401,68 +429,72 @@ function quizMaster(et) { ...@@ -401,68 +429,72 @@ function quizMaster(et) {
} }
}); //------ anime }); //------ anime
setTimeout(function () { document.getElementById("result_top_button").classList.remove("vanish");
document.getElementById("result_top_button").classList.remove("vanish"); document.getElementById("result_select_button").classList.remove("vanish");
document.getElementById("result_select_button").classList.remove("vanish"); document.getElementById("button_next_result").classList.remove("vanish");
document.getElementById("button_next_result").classList.remove("vanish"); anime({
anime({ targets: "#button_next_result",
targets: "#button_next_result", opacity: [0, 1],
opacity: [0, 1], easing: "easeOutSine",
easing: "easeOutSine", duration: 500
duration: 500 }); //------ anime
}); //------ anime anime({
anime({ targets: "#result_top_button",
targets: "#result_top_button", opacity: [0, 1],
opacity: [0, 1], easing: "easeOutSine",
easing: "easeOutSine", duration: 500
duration: 500 }); //------ anime
}); //------ anime anime({
anime({ targets: "#result_select_button",
targets: "#result_select_button", opacity: [0, 1],
opacity: [0, 1], easing: "easeOutSine",
easing: "easeOutSine", duration: 500
duration: 500 }); //------ anime
}); //------ anime
}, 1000);
$("#button_next_result").on("click", function () {
judgePat(myObj, resultPlate);
$(this).addClass("vanish");
});
} }
return myObj; return myObj;
} }
$(function () { $(function () {
$("#button_next_result").on("click", function () {
judgePat();
$(this).addClass("vanish");
});
$("#yes_btn").on("click", function () { $("#yes_btn").on("click", function () {
$("#result_plate").addClass("answer1"); // $("#result_plate").addClass("answer1");
document.getElementById("arr_yes").classList.add("vanish"); document.getElementById("arr_yes").classList.add("vanish");
document.getElementById("arr_no").classList.add("vanish"); document.getElementById("arr_no").classList.add("vanish");
document.getElementById("yes_btn").classList.add("vanish"); document.getElementById("yes_btn").classList.add("vanish");
document.getElementById("no_btn").classList.add("vanish"); document.getElementById("no_btn").classList.add("vanish");
document.getElementById("q" + rand).classList.add("vanish");
document.getElementById("yes" + rand).classList.remove("vanish");
document.getElementById("result_top_button").classList.remove("vanish"); document.getElementById("result_top_button").classList.remove("vanish");
document.getElementById("result_select_button").classList.remove("vanish"); document.getElementById("result_select_button").classList.remove("vanish");
}); });
$("#no_btn").on("click", function () { $("#no_btn").on("click", function () {
$("#result_plate").addClass("answer2");
//$("#result_plate").addClass("answer2");
document.getElementById("arr_yes").classList.add("vanish"); document.getElementById("arr_yes").classList.add("vanish");
document.getElementById("arr_no").classList.add("vanish"); document.getElementById("arr_no").classList.add("vanish");
document.getElementById("yes_btn").classList.add("vanish"); document.getElementById("yes_btn").classList.add("vanish");
document.getElementById("no_btn").classList.add("vanish"); document.getElementById("no_btn").classList.add("vanish");
document.getElementById("q" + rand).classList.add("vanish");
document.getElementById("no" + rand).classList.remove("vanish");
document.getElementById("result_top_button").classList.remove("vanish"); document.getElementById("result_top_button").classList.remove("vanish");
document.getElementById("result_select_button").classList.remove("vanish"); document.getElementById("result_select_button").classList.remove("vanish");
}); });
}); });
function judgePat(myObj, resultPlate) { function judgePat() {
console.log("hit")
document.getElementById("result_title").classList.add("vanish"); document.getElementById("result_title").classList.add("vanish");
document.getElementById("result_main").classList.add("vanish"); document.getElementById("result_main").classList.add("vanish");
var rand = (Math.floor(Math.random() * 3) + 1); rand = (Math.floor(Math.random() * 3) + 1);
resultPlate.classList.remove("randomize1");
resultPlate.classList.remove("randomize2");
resultPlate.classList.remove("randomize3");
resultPlate.classList.add("randomize" + rand);
document.getElementById("arr_yes").classList.remove("vanish"); document.getElementById("arr_yes").classList.remove("vanish");
document.getElementById("arr_no").classList.remove("vanish"); document.getElementById("arr_no").classList.remove("vanish");
document.getElementById("yes_btn").classList.remove("vanish"); document.getElementById("yes_btn").classList.remove("vanish");
...@@ -471,13 +503,17 @@ function judgePat(myObj, resultPlate) { ...@@ -471,13 +503,17 @@ function judgePat(myObj, resultPlate) {
document.getElementById("no_btn").classList.add("no_btn" + rand); document.getElementById("no_btn").classList.add("no_btn" + rand);
if (rand == 1) { if (rand == 1) {
$("#yes_btn").attr("src", "images/result/yesbtn1.png"); $("#yes_btn").attr("src", "images/result/yesbtn1.png");
$("#yes_btn").attr("src", "images/result/yesbtn1.png");
$("#no_btn").attr("src", "images/result/nobtn1.png"); $("#no_btn").attr("src", "images/result/nobtn1.png");
$("#q1").removeClass("vanish");
} else if (rand == 2) { } else if (rand == 2) {
$("#yes_btn").attr("src", "images/result/yesbtn2.png"); $("#yes_btn").attr("src", "images/result/yesbtn2.png");
$("#no_btn").attr("src", "images/result/nobtn2.png"); $("#no_btn").attr("src", "images/result/nobtn2.png");
$("#q2").removeClass("vanish");
} else if (rand == 3) { } else if (rand == 3) {
$("#yes_btn").attr("src", "images/result/yesbtn3.png"); $("#yes_btn").attr("src", "images/result/yesbtn3.png");
$("#no_btn").attr("src", "images/result/nobtn3.png"); $("#no_btn").attr("src", "images/result/nobtn3.png");
$("#q3").removeClass("vanish");
} }
anime({ anime({
targets: "#result_plate", targets: "#result_plate",
...@@ -485,5 +521,5 @@ function judgePat(myObj, resultPlate) { ...@@ -485,5 +521,5 @@ function judgePat(myObj, resultPlate) {
easing: "easeOutSine", easing: "easeOutSine",
duration: 500 duration: 500
}); //------ anime }); //------ anime
return myObj; console.log("rand: " + rand)
} }
takumi-style/app/js/takumi.js
// takumi // takumi
function takumiMaster(){ function takumiMaster() {
//---init //---init
var myObj = new Object(); var myObj = new Object();
var takumi = document.getElementById("takumi"); var takumi = document.getElementById("takumi");
var fuki = document.getElementById("takumi_fuki"); var fuki = document.getElementById("takumi_fuki");
var fuki_text = fuki.getElementsByClassName("fuki_text")[0]; var fuki_text = fuki.getElementsByClassName("fuki_text")[0];
//---------------------------------------------------------------------たくみ君を消します。 //---------------------------------------------------------------------たくみ君を消します。
myObj.hideFunc = function(){ myObj.hideFunc = function () {
fuki.classList.add("vanish"); fuki.classList.add("vanish");
anime({targets: "#takumi",right:"-13vw",easing:"easeOutQuad" , duration: 300, complete:function(){ anime({
takumi.classList.add("vanish"); targets: "#takumi",
}});//------ anime right: "-13vw",
} easing: "easeOutQuad",
myObj.directHide = function(){//-------------演出無しで消します duration: 300,
fuki.classList.add("vanish"); complete: function () {
takumi.classList.add("vanish"); takumi.classList.add("vanish");
} }
}); //------ anime
//---------------------------------------------------------------------たくみ君を表示します。 }
myObj.dispFunc = function(){ myObj.directHide = function () { //-------------演出無しで消します
takumi.classList.remove("vanish"); fuki.classList.add("vanish");
anime({targets: "#takumi",right:["-13vw","0"], duration: 1000});//------ anime takumi.classList.add("vanish");
} }
//---------------------------------------------------------------------たくみ君を表示します。
//---------------------------------------------------------------------吹き出しを消します。 myObj.dispFunc = function () {
myObj.hideFuki = function (){ takumi.classList.remove("vanish");
fuki.classList.add("vanish"); anime({
} targets: "#takumi",
right: ["-13vw", "0"],
//---------------------------------------------------------------------吹き出しを表示します。 duration: 1000
myObj.dispFuki = function (str){ }); //------ anime
if (str != undefined){ }
this.setFukiText(str);
}
fuki.classList.remove("vanish"); //---------------------------------------------------------------------吹き出しを消します。
anime({targets: "#takumi_fuki",scale:[0,1], duration: 1000});//------ anime myObj.hideFuki = function () {
} fuki.classList.add("vanish");
}
//---------------------------------------------------------------------吹き出しの内容を変更します。
myObj.setFukiText = function(str){ //---------------------------------------------------------------------吹き出しを表示します。
//パスは"images/...."から記述してください。 myObj.dispFuki = function (str) {
fuki_text.src = str; if (str != undefined) {
} this.setFukiText(str);
}
return myObj; fuki.classList.remove("vanish");
anime({
} targets: "#takumi_fuki",
\ No newline at end of file scale: [0, 1],
duration: 1000
}); //------ anime
}
//---------------------------------------------------------------------吹き出しの内容を変更します。
myObj.setFukiText = function (str) {
//パスは"images/...."から記述してください。
fuki_text.src = str;
}
return myObj;
}
takumi-style/app/js/topAnime.js
...@@ -517,9 +517,8 @@ function topAnime(et) { ...@@ -517,9 +517,8 @@ function topAnime(et) {
$(function () { $(function () {
$("#button_return").on("click", function () { $("#button_return").on("click", function () {
console.log("hit") $("#topmp3").get(0).pause();
$("#topmp3").get(0).pause(); $("#selectmp3").get(0).pause();
$("#selectmp3").get(0).pause(); $("#quizmp3").get(0).pause();
$("#quizmp3").get(0).pause();
}); });
}); });
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment