mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-09-30 21:29:31 +02:00
add tutorial screen
This commit is contained in:
Bui
parent
a95f2e4319
commit
2405345291
@ -47,6 +47,7 @@
|
||||
<script type='application/javascript' src='/src/js/bufferedloop.js'></script>
|
||||
<script type='application/javascript' src='/src/js/mekadon.js'></script>
|
||||
<script type='application/javascript' src='/src/js/gamepad.js'></script>
|
||||
<script type='application/javascript' src='/src/js/tutorial.js'></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@ -130,3 +130,95 @@ html, body{
|
||||
transform: rotate(95deg);
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
||||
#tutorial-outer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#tutorial {
|
||||
background: rgb(246, 234, 212);
|
||||
color: black;
|
||||
border: 5px black solid;
|
||||
border-radius: 10px;
|
||||
height: 65%;
|
||||
width: 50%;
|
||||
padding: 20px;
|
||||
font-size: 16pt;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#tutorial-title {
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
color: white;
|
||||
top: -25px;
|
||||
font-size: 26pt;
|
||||
}
|
||||
|
||||
#tutorial-content {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-family: inherit;
|
||||
padding: 0.1em 0.6em;
|
||||
border: 1px solid #ccc;
|
||||
font-size: 13px;
|
||||
background-color: #f7f7f7;
|
||||
color: #333;
|
||||
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
|
||||
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
|
||||
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2), 0 0 0 2px #ffffff inset;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
display: inline-block;
|
||||
text-shadow: 0 1px 0 #fff;
|
||||
line-height: 1.4;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.taibtn {
|
||||
bottom: 15px;
|
||||
margin: 0 auto;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
padding: 10px 40px;
|
||||
border-radius: 15px;
|
||||
border: 3px rgba(218, 205, 178, 1) solid;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.taibtn:hover {
|
||||
z-index: 1;
|
||||
color: white;
|
||||
background: rgb(255, 181, 71);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.taibtn:before {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
#tutorial-end-button {
|
||||
font-size: 22pt;
|
||||
}
|
||||
|
||||
#songsel-help {
|
||||
float: right;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
color: black;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
font-size: 18px;
|
||||
border: 3px black solid;
|
||||
border-radius: 50px;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -86,7 +86,9 @@ var assets = {
|
||||
'bgm_songsel.ogg',
|
||||
'bgm_songsel_loop.ogg',
|
||||
'bgm_result.ogg',
|
||||
'bgm_result_loop.ogg'
|
||||
'bgm_result_loop.ogg',
|
||||
'bgm_setsume.ogg',
|
||||
'bgm_setsume_loop.ogg'
|
||||
),
|
||||
|
||||
songs: new Array(),
|
||||
|
||||
@ -35,7 +35,9 @@ function SongSelect(){
|
||||
|
||||
this.endPreview = function() {
|
||||
clearTimeout(_preview_to);
|
||||
_preview.pause();
|
||||
if (_preview) {
|
||||
_preview.pause();
|
||||
};
|
||||
};
|
||||
|
||||
this.run = function(){
|
||||
@ -46,6 +48,14 @@ function SongSelect(){
|
||||
|
||||
var menuLoop = setInterval(_this.refresh, 20);
|
||||
$("#song-container").show();
|
||||
|
||||
$('#songsel-help').click(function(){
|
||||
bgm.pause();
|
||||
_this.endPreview();
|
||||
assets.sounds['don'].playAsset();
|
||||
|
||||
new Tutorial();
|
||||
});
|
||||
|
||||
$(".difficulty").click(function(e){
|
||||
_this.endPreview();
|
||||
|
||||
@ -41,7 +41,11 @@ function Titlescreen(){
|
||||
assets.sounds["title"].currentTime = 0;
|
||||
|
||||
assets.sounds["don"].playAsset();
|
||||
new SongSelect();
|
||||
if (localStorage.getItem('tutorial') !== 'true') {
|
||||
new Tutorial();
|
||||
} else {
|
||||
new SongSelect();
|
||||
};
|
||||
}
|
||||
|
||||
$("#screen").load("/src/views/titlescreen.html", _this.run);
|
||||
|
||||
21
public/src/js/tutorial.js
Normal file
21
public/src/js/tutorial.js
Normal file
@ -0,0 +1,21 @@
|
||||
function Tutorial() {
|
||||
var _this = this;
|
||||
|
||||
this.run = function() {
|
||||
bgm = new BufferedLoop(
|
||||
{url: '/assets/audio/bgm_setsume.ogg', duration: 1.054},
|
||||
{url: '/assets/audio/bgm_setsume_loop.ogg', duration: 15}
|
||||
);
|
||||
bgm.play();
|
||||
|
||||
$('#tutorial-end-button').click(function(){
|
||||
bgm.pause();
|
||||
assets.sounds['don'].playAsset();
|
||||
|
||||
localStorage.setItem('tutorial', 'true');
|
||||
new SongSelect();
|
||||
});
|
||||
};
|
||||
|
||||
$('#screen').load('/src/views/tutorial.html', _this.run);
|
||||
};
|
||||
@ -1,4 +1,5 @@
|
||||
<div id="song-select">
|
||||
<h2 alt="曲をえらぶ" class="stroke-main songsel-title">曲をえらぶ</h2>
|
||||
<div id="songsel-help">?</div>
|
||||
<div id='song-container'></div>
|
||||
</div>
|
||||
13
public/src/views/tutorial.html
Normal file
13
public/src/views/tutorial.html
Normal file
@ -0,0 +1,13 @@
|
||||
<div id="tutorial-outer">
|
||||
<div id="tutorial">
|
||||
<div id="tutorial-title" class="stroke-sub" alt="How to Play">How to Play</div>
|
||||
<div id="tutorial-content">
|
||||
<p>Hit the drum when the notes reach the taiko!</p>
|
||||
<p>For red notes, hit the face of the drum (<kbd>V</kbd> or <kbd>B</kbd>)...</p>
|
||||
<p>...and for blue notes, hit the rim! (<kbd>C</kbd> or <kbd>N</kbd>)</p>
|
||||
<p>You can also press <kbd>Q</kbd> to pause, and hold <kbd>SHIFT</kbd> while selecting a difficulty to enter autoplay mode!</p>
|
||||
</div>
|
||||
|
||||
<div id="tutorial-end-button" class="taibtn stroke-sub" alt="OK">OK</div>
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user