質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3617閲覧

画像に文字を表示させたい

goombeer

総合スコア16

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/05/06 08:48

###前提・実現したいこと
表示させた画像の上から、指定した文字を表示させる。
さらに、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の最後に画面遷移するよう記述しており、画面遷移は実行されます。

可能であれば、一文字ずつ表示をさせたいのですが、どういった記述を行えばできるものでしょうか。
よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

  1. text というクラスが付いた要素がない
  2. getElementsByClassName は複数要素が入るため innerHTML はそのままでは使えない
  3. 関数text内で for でループしても一気に処理が走りそのままページが移動する
  4. setTimeout の引き数が違う
  5. そもそも繰り返すなら setInterval

HTML

1<div class="text"></div>

JavaScript

1setInterval( text, 1000 ); 2 3var i = 0; 4function text(){ 5console.log( 'true' ); 6 var t = ''; 7 if(i == 0){ 8 t = "ようこそ!ポケットモンスターのせかいへ!"; 9 } else if (i == 1) { 10 t = "わしのなまえは オーキド"; 11 } else if (i == 2) { 12 t = "みんなからは ポケモン はかせと"; 13 } else if (i == 3) { 14 t = "したわれて おるよ"; 15 } else if (i == 4) { 16 t = "みんなもしっているとおもうが"; 17 } else if (i == 5) { 18 t = "ポケモンのゲームが はつばいされて 21ねん"; 19 } else if (i == 6) { 20 t = "アニメがはじまって ことしで 20ねんとなる"; 21 } else if (i == 7) { 22 t = "ことしは アニメかいし 20ねんをきねんして"; 23 } else if (i == 8) { 24 t = "えいが 「ポケットモンスター きみにきめた」が"; 25 } else if (i == 9) { 26 t = "なつにほうえいされる"; 27 } else if (i == 10) { 28 t = "きみたちも ポケモンマスターに"; 29 } else if (i == 11) { 30 t = "なりたくて、わしのところに きたのじゃろ"; 31 } else if (i == 12) { 32 t = "なに、ポケモンマスターではなくて 「チーズマスター」に"; 33 } else if (i == 13) { 34 t = "なりたいじゃと!?"; 35 } else if (i == 14) { 36 t = "わしは チーズはせんもんがいでな・・・?"; 37 } else if (i == 15) { 38 t = "そうじゃ!"; 39 } else if (i == 16) { 40 t = "そしたら、このサイトをみるとよいじゃろ。"; 41 } else if (i == 17) { 42 t = "ほら、いってこい!"; 43 } 44 i++; 45 if ( t ) { 46 document.getElementsByClassName( 'text' )[ 0 ].innerHTML = t; 47 } else { 48 window.location.href = 'index.html'; 49 } 50}

【document.getElementsByClassName() - classで要素を取得する】
https://syncer.jp/javascript-reference/document-getelementsbyclassname

【window.setTimeout - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/WindowTimers/setTimeout

【window.setInterval - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/setInterval

投稿2017/05/06 09:30

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

setIntervalを使って一定時間ごとに関数を呼び出し、
window.setInterval - Web API インターフェイス | MDN
その中で、文字列から先頭1文字を取り出してinnerHTMLに追加し、
String#文字へのアクセス - JavaScript | MDN
sliceで先頭一文字を削除する。
String.prototype.slice() - JavaScript | MDN
というのはどうでしょうか。

投稿2017/05/06 09:35

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問