mirror of
https://github.com/yuukiwww/taiko-web.git
synced 2024-10-22 17:05:49 +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/bufferedloop.js'></script>
|
||||||
<script type='application/javascript' src='/src/js/mekadon.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/gamepad.js'></script>
|
||||||
|
<script type='application/javascript' src='/src/js/tutorial.js'></script>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
@ -130,3 +130,95 @@ html, body{
|
|||||||
transform: rotate(95deg);
|
transform: rotate(95deg);
|
||||||
font-size: 90%;
|
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.ogg',
|
||||||
'bgm_songsel_loop.ogg',
|
'bgm_songsel_loop.ogg',
|
||||||
'bgm_result.ogg',
|
'bgm_result.ogg',
|
||||||
'bgm_result_loop.ogg'
|
'bgm_result_loop.ogg',
|
||||||
|
'bgm_setsume.ogg',
|
||||||
|
'bgm_setsume_loop.ogg'
|
||||||
),
|
),
|
||||||
|
|
||||||
songs: new Array(),
|
songs: new Array(),
|
||||||
|
|||||||
@ -35,7 +35,9 @@ function SongSelect(){
|
|||||||
|
|
||||||
this.endPreview = function() {
|
this.endPreview = function() {
|
||||||
clearTimeout(_preview_to);
|
clearTimeout(_preview_to);
|
||||||
_preview.pause();
|
if (_preview) {
|
||||||
|
_preview.pause();
|
||||||
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
this.run = function(){
|
this.run = function(){
|
||||||
@ -46,6 +48,14 @@ function SongSelect(){
|
|||||||
|
|
||||||
var menuLoop = setInterval(_this.refresh, 20);
|
var menuLoop = setInterval(_this.refresh, 20);
|
||||||
$("#song-container").show();
|
$("#song-container").show();
|
||||||
|
|
||||||
|
$('#songsel-help').click(function(){
|
||||||
|
bgm.pause();
|
||||||
|
_this.endPreview();
|
||||||
|
assets.sounds['don'].playAsset();
|
||||||
|
|
||||||
|
new Tutorial();
|
||||||
|
});
|
||||||
|
|
||||||
$(".difficulty").click(function(e){
|
$(".difficulty").click(function(e){
|
||||||
_this.endPreview();
|
_this.endPreview();
|
||||||
|
|||||||
@ -41,7 +41,11 @@ function Titlescreen(){
|
|||||||
assets.sounds["title"].currentTime = 0;
|
assets.sounds["title"].currentTime = 0;
|
||||||
|
|
||||||
assets.sounds["don"].playAsset();
|
assets.sounds["don"].playAsset();
|
||||||
new SongSelect();
|
if (localStorage.getItem('tutorial') !== 'true') {
|
||||||
|
new Tutorial();
|
||||||
|
} else {
|
||||||
|
new SongSelect();
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
$("#screen").load("/src/views/titlescreen.html", _this.run);
|
$("#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">
|
<div id="song-select">
|
||||||
<h2 alt="曲をえらぶ" class="stroke-main songsel-title">曲をえらぶ</h2>
|
<h2 alt="曲をえらぶ" class="stroke-main songsel-title">曲をえらぶ</h2>
|
||||||
|
<div id="songsel-help">?</div>
|
||||||
<div id='song-container'></div>
|
<div id='song-container'></div>
|
||||||
</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