Skip to content

T
Taiko Web
Commit 24053452 authored by Bui's avatar Bui
Browse files
Options

add tutorial screen

parent a95f2e43
Hide whitespace changes
Inline Side-by-side
Showing with 147 additions and 3 deletions
public/index.html
View file @ 24053452
...@@ -47,6 +47,7 @@ ...@@ -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>
......
public/src/css/main.css
View file @ 24053452
...@@ -130,3 +130,95 @@ html, 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;
}
\ No newline at end of file
public/src/js/assets.js
View file @ 24053452
...@@ -86,7 +86,9 @@ var assets = { ...@@ -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(),
......
public/src/js/songselect.js
View file @ 24053452
...@@ -35,7 +35,9 @@ function SongSelect(){ ...@@ -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(){ ...@@ -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();
......
public/src/js/titlescreen.js
View file @ 24053452
...@@ -41,7 +41,11 @@ function Titlescreen(){ ...@@ -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);
......
public/src/js/tutorial.js 0 → 100644
View file @ 24053452
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);
};
public/src/views/songselect.html
View file @ 24053452
<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>
\ No newline at end of file
public/src/views/tutorial.html 0 → 100644
View file @ 24053452
<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>
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 to comment