###前提・実現したいこと
表示させた画像の上から、指定した文字を表示させる。
さらに、RPGゲームのセリフのように一文字ずつ表示をさせたい。
###該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/reset.css"> 6 <link rel="stylesheet" href="css/pokemon.css"> 7 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 8 <title>Pokemon</title> 9 </head> 10 <body> 11 <div class="flame"> 12 <img src="images/flame.jpg" alt="" width="500px;" height="450px"> 13 <audio src="music/voice.wav" id="voice"></audio> 14 <audio src="music/bgm.mp3" id="bgm" loop="loop"></audio> 15 <video src="video/video.mp4" id="video" autoplay width="312px" height="300px;" onclick="opning()"></video> 16 </div> 17 18 <script type="text/javascript" src="pokemoscript.js"> 19 </script> 20 </body> 21</html> 22
javascript
1"use strict"; 2 3function opning(){ 4 document.getElementById('voice').play(); 5 setTimeout('func()',3000); 6} 7 8function func(){ 9var v = document.getElementById("video"); 10var p = v.parentElement; 11v.remove(); 12 13var e = document.createElement("img"); 14e.classList.add("text"); 15e.src = "images/text.png"; 16e.width = 312; 17p.appendChild(e); 18 19setTimeout('bgm()',100); 20 21} 22 23function bgm(){ 24 document.getElementById('bgm').play(); 25 setTimeout('text()',1000); 26} 27 28 29 30function text(){ 31 for (var i= 0; i < 18;i++){ 32 if(i == 0){ 33 document.getElementsByClassName('text').innerHTML = "ようこそ!ポケットモンスターのせかいへ!"; 34 } else if (i == 1) { 35 document.getElementsByClassName('text').innerHTML = "わしのなまえは オーキド"; 36 } else if (i == 2) { 37 document.getElementsByClassName('text').innerHTML = "みんなからは ポケモン はかせと"; 38 } else if (i == 3) { 39 document.getElementsByClassName('text').innerHTML = "したわれて おるよ"; 40 } else if (i == 4) { 41 document.getElementsByClassName('text').innerHTML = "みんなもしっているとおもうが"; 42 } else if (i == 5) { 43 document.getElementsByClassName('text').innerHTML = "ポケモンのゲームが はつばいされて 21ねん"; 44 } else if (i == 6) { 45 document.getElementsByClassName('text').innerHTML = "アニメがはじまって ことしで 20ねんとなる"; 46 } else if (i == 7) { 47 document.getElementsByClassName('text').innerHTML = "ことしは アニメかいし 20ねんをきねんして"; 48 } else if (i == 8) { 49 document.getElementsByClassName('text').innerHTML = "えいが 「ポケットモンスター きみにきめた」が"; 50 } else if (i == 9) { 51 document.getElementsByClassName('text').innerHTML = "なつにほうえいされる"; 52 } else if (i == 10) { 53 document.getElementsByClassName('text').innerHTML = "きみたちも ポケモンマスターに"; 54 } else if (i == 11) { 55 document.getElementsByClassName('text').innerHTML = "なりたくて、わしのところに きたのじゃろ"; 56 } else if (i == 12) { 57 document.getElementsByClassName('text').innerHTML = "なに、ポケモンマスターではなくて 「チーズマスター」に"; 58 } else if (i == 13) { 59 document.getElementsByClassName('text').innerHTML = "なりたいじゃと!?"; 60 } else if (i == 14) { 61 document.getElementsByClassName('text').innerHTML = "わしは チーズはせんもんがいでな・・・?"; 62 } else if (i == 15) { 63 document.getElementsByClassName('text').innerHTML = "そうじゃ!"; 64 } else if (i == 16) { 65 document.getElementsByClassName('text').innerHTML = "そしたら、このサイトをみるとよいじゃろ。"; 66 } else if (i == 17) { 67 document.getElementsByClassName('text').innerHTML = "ほら、いってこい!"; 68 } window.location.href = 'index.html'; 69 } 70} 71
###補足情報(言語/FW/ツール等のバージョンなど)
現在ポケモンの画面を作成できないかと試みているところです。
流れとしては
①オープニングの映像が流れる
②クリックすると映像が画像に差し代わる
③function textに記述したように、差し替えた画像上にセリフを表示させる
といった流れを考えているのですが、セリフが表示されません。
function textの最後に画面遷移するよう記述しており、画面遷移は実行されます。
可能であれば、一文字ずつ表示をさせたいのですが、どういった記述を行えばできるものでしょうか。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。