2021.06.15【JavaScript】画像を利用した『じゃんけん』を作ろう!!今回はJavaScriptで画像を利用したじゃんけんページの作り方を説明します。Webページ上にじゃんけんの画像を表示し、ユーザが好きな画像をクリックすると、コンピュータとじゃんけんをすることができるページを作ります。JavaScriptでのイベント処理の書き方や関数の使い方について説明します。この記事は以下のような人を対象としています。・画像をクリックしてプログラムを実行する方法を知りたい人この記事を読むと、次のようなことが理解できるようになります。この記事を読むとできること・関数を利用したじゃんけんの作り方を知ることができる・画像を利用したじゃんけんの作り方を知ることができる・JavaScriptのイベント処理の書き方を知ることができる・データを関数に引き渡す方法について知ることができる花子さんJavaScriptで『じゃんけん』の作り方を教えてもらえますか?できれば、画像を利用したいのですが。続石講師JavaScriptでは簡単に画像を利用できますよ。花子さん画像をクリックしたら、じゃんけんをするようにできますか?続石講師イベント処理ですね!!今回は、JavaScriptでのイベント処理の書き方について説明しましょう。JavaScriptでWebページ上に文字列や画像を表示するための方法を詳しく知りたい人は以下の記事を参照してください。World」と表示するJavaScriptは手軽なので初心者にもおすすめのプログラム言語です。今回、Webブラウザにメッセージを表示するプログラムの書き方を説明します。DOMの仕組みやgetElementById()の使い方について合わせて説明しています。ict-skillup.com2021.05.29【JavaScript】Webページに画像を表示する今回は、表示されている画像を変更したり、全く新しい画像を追加で表示する方法について説明します。DOMツリーから目的のタグを検索するための各種関数の使い方やタグの属性を変更する方法なども合わせて解説します。ict-skillup.com2021.06.09タイマー機能を使ってデジタル時計を表示するページの作り方は以下の記事を参照してください。【JavaScript初心者用】タイマーでデジタル時計を作るJavaScriptには「一定時間が経過したら自動的に関数を実行する」という「タイマー機能」があります。今回はタイマー機能の使い方をWebページ上にデジタル時計を表示するプログラムを作成しながら解説します。今回作成するじゃんけんの仕様は以下の通りとします。ユーザはじゃんけんの手を表示されている画像をクリックして選択する。コンピュータのじゃんけんの手も画像で表示される。ユーザから見た勝敗結果が文字で表示される。じゃんけんの判定は関数を利用する。JavaScriptのプログラムは別のファイルに記述する。実行結果プログラムの説明を始める前に、まずは実際の実行結果を確認しておきます。利用する画像ファイルは事前に「img」フォルダに用意しておきます。利用する画像は、ユーザ用の3枚と、向きを上下逆にしたコンピュータ用の3枚の計6枚です。HTMLファイルの内容では、実際にプログラムの説明をしていきます。今回は、JavaScriptのプログラムはHTMLファイルとは別ファイルに分けて作成しています。HTMLファイルについて説明していきます。説明のためHTMLファイルを3つに分割して表示します。後で全体の内容は掲載します。7行目JavaScriptのプログラムは、jsフォルダ内に「janken.js」というファイル名で保存してるので、そのファイルを呼び出す設定をしています。別途作成したJavaScriptのプログラムを読み込むには「src属性」にファイルのパス名を指定します。8行目~12行目CSSの設定を行っています。「id=”res”」が設定されているタグ(tdタグ:37行目)に対して、文字サイズ(font-size)と文字揃え(text-align)の書式を設定しています。文字サイズで指定できる主な単位は次の3種類です。絶対値として値を指定。親要素を基準として相対値を指定。<HTML>タグを基準とした相対値を指定。大きさはブラウザに依存20行目~25行目ユーザのじゃんけんの手の画像を表形式で表示しています。各画像には「onClick属性」を利用して、画像がクリックされた時にjanken()関数を実行するように設定しています。どの画像がクリックされたのかを識別するために、janken()関数にそれぞれ異なる値を引数として渡しています。グーが選択された時に実行する関数、チョキが選択された時に実行する関数、パーが選択された時に実行する関数と、3種類の関数を別々に作成しても構いません。同じじゃんけんの勝敗判定を行うのに3種類も関数を作るのは非効率的です。このような場合は、関数に異なる値を引数として渡し、関数側でこの値を元にどの画像がクリックされているのか、調べた方が良いでしょう。27行目~41行目ユーザが選択したじゃんけんの手の画像とコンピュータのじゃんけんの手の画像および判定結果を表形式で表示しています。画像を表示するimgタグのsrc属性(ファイル名)には何も指定していないので、このページを表示した直後は画像は表示されません。表示する画像はJavaScriptのプログラム内で設定しています。このタグをそれぞれ検索する時に利用する「id属性値」を設定しています。複数の列を結合する場合、「colspan属性に結合する列数を指定」します。ここでは、2列を1列に結合しています。この結合した列の中に勝敗結果を文字列で表示します。以下が、HTMLファイルの全内容となります。id="result"></p></td></tr></table></body></html>JavaScriptのプログラムでは、次にじゃんけんの判定を行うJavaScriptのプログラムについて説明します。関数「janken()」を定義しています。呼出し時に渡されたデータ(0か1か2)は変数「user」に代入します。利用する画像ファイル名を文字列として、それぞれ配列に代入しています。画像ファイルは「img」フォルダ内に保存されているので、ファイル名の前には「img/」が必要となります。ファイル毎にこのパスを指定するのは面倒なので、[img/」のパスは最終的に画像を表示する際(14行目、19行目)に指定しています。9行目Math.random()で乱数(小数点を含む値)を作成し、その値をMath.floor()で小数点以下切り捨てています。これで、0か1か2のどれかの値を求め、コンピュータのじゃんけんの手とします。12行目ユーザのじゃんけんの手の画像を表示するimgタグをDOMツリーから検索し、変数userImgで参照できるようにしています。imgタグには検索しやすいように「id=”userImg”」をHTMLファイル内で設定しています。14行目12行目で検索したimgタグのsrc属性に画像のファイル名を「img/」のパスを付けて設定しています。どの画像を表示するかはこの関数を実行するときに引数として値が渡されているので、その値を配列の添え字として使用しています。16行目12行目と同様の処理をコンピュータの手に対して行っています。18行目14行目と同様の処理をコンピュータの手に対して行っています。どの画像を表示するかは9行目の乱数で求めています。22行目~24行目ユーザから見たじゃんけんの勝敗結果を2次元配列に保存しています。行方向はユーザの手、列方向はコンピュータの手を示しています。ユーザの手がグー(0)、コンピュータの手がチョキ(1)の場合、result[0][1]の内容を参照します。[0][1]に代入されている値は「勝ち」なので、判定結果は「ユーザの勝ち」となります。27行目DOMツリーから「id=”result”」が設定されているタグ<p>タグを検索し、そのタグに勝敗結果をtextContentで指定しています。これで、勝敗結果(文字列)がWebページに表示されます。JavaScriptの全プログラム以下がJavaScriptの全プログラムとなります。result[user][pc];}まとめ今回はJavaScriptで画像を利用したじゃんけんの作り方について説明しました。Webページを作成する場合、「HTMLファイルの作成」「CSSファイルの作成」「JavaScriptファイルの作成」と複数人数で分担作業する場合があります。そのため、HTMLファイルとJavaScriptファイルを分割して作成し、HTMLファイル内で読み込む方法を知っておく必要があります。JavaScriptのプログラムはユーザの何らかのイベント(動作)が引き金となって実行されます。したがって、JavaScriptでのイベント処理の書き方を理解しておかなければなりません。今回は一番簡単な「onclick属性」を利用しました。他にも様々な記述方法があるので、それはいずれ説明します。・分割したJavaScriptファイルは<script>タグの「src属性」で指定する・画像がクリックされた時にJavaScriptのプログラムを実行したい場合、画像に「onclick属性」を設定しておく・onclick属性には実行したい関数名を指定する・関数に異なる値を渡したい時は、その値を関数の引数に指定する続石講師JavaScriptによるじゃんけんの作り方はいかがでしたか?花子さん以前、Java言語で作成したじゃんけんの作り方と似ていたので分かりやすかったです。続石講師Javaのプログラムと違うところは、Webページに画像や文字を表示する部分ですね花子さんイベント処理の書き方も教えてもらったので、これから色々なページを作成してみたいと思います!!続石講師イメージビューワーの作り方など、今後解説していますよ!!JavaScriptでWebページ上に文字列や画像を表示するための方法を詳しく知りたい人は以下の記事を参照してください。World」と表示するJavaScriptは手軽なので初心者にもおすすめのプログラム言語です。今回、Webブラウザにメッセージを表示するプログラムの書き方を説明します。DOMの仕組みやgetElementById()の使い方について合わせて説明しています。ict-skillup.com2021.05.29【JavaScript】Webページに画像を表示する今回は、表示されている画像を変更したり、全く新しい画像を追加で表示する方法について説明します。DOMツリーから目的のタグを検索するための各種関数の使い方やタグの属性を変更する方法なども合わせて解説します。ict-skillup.com2021.06.09また、Java言語によるじゃんけんの作り方については、以下の記事を参照してください。【if編】Java言語で『じゃんけんゲーム』を作るJava言語で「じゃんけん」プログラムを作る場合、どのようにして勝ち負けを判定すれば良いのか悩んでいませんか?色々な判定方法があるのですが、今回は「if文」を使って勝敗を判定するプログラムの作成方法について解説します。ict-skillup.com2021.05.22【switch編】Java言語で『じゃんけんゲーム』を作るJava言語で「じゃんけんゲーム」を作成する方法として、今回は「swtich文」を利用するサンプルを紹介します。キーボードからデータを入力する時に例外処理を使ってデータのチェックを行う方法を説明します。ict-skillup.com2021.05.26【配列編】Java言語で『じゃんけんゲーム』を作るJava言語で『じゃんけんゲーム』を作るプログラムの解説をしています。勝敗の判定は「配列」を利用しています。通常、if文やswtich文を利用しますが、配列を利用するとプログラムの行数が短くできます。どのように配列を利用するのか是非確認して下さい。関連記事JavaScript【JavaScript】Webページに画像を表示する今回は、表示されている画像を変更したり、全く新しい画像を追加で表示する方法について説明します。DOMツリーから目的のタグを検索するための各種関数の使い方やタグの属性を変更する方法なども合わせて解説します。JavaScript【JavaScript】画像を表示する『おみくじ』を作ろう!!今回はJavaScriptで『おみくじ』の作り方を説明します。おみくじの結果は文字ではなく、画像を利用します。今回はおみくじの処理は関数を使って記述をします。画像を使った『おみくじ』を作りたい人は是非、この記事を参考にして下さい。JavaScriptはエディタとブラウザがあれば手軽に勉強できるのですが、今回はおすすめなエディタとして「Brackets」のインストールと利用方法を説明します。World」と表示するJavaScriptは手軽なので初心者にもおすすめのプログラム言語です。今回、Webブラウザにメッセージを表示するプログラムの書き方を説明します。DOMの仕組みやgetElementById()の使い方について合わせて説明しています。JavaScriptBracketsサポート終了!!VisualStudioCodeへ乗り換えおすすめしていたエディタ「Brackets」のサポートが2021年9月1日で終了します。Colde(VSCode)』です。Server」(リアルタイム表示)についても説明します。JavaScript【JavaScript】3種類のイベント処理の書き方(利点と欠点)この記事では、JavaScriptのイベント処理の仕組みを説明しています。定義方法は3種類あり、それぞれの利点と欠点について解説します。この記事を読むと、JavaScriptでのイベント処理の書き方が理解できるようになります。【Java初心者用】今年の年齢の求め方(サンプル4種類)2021.09.20【Java初心者用】今日の日付を表示する(4つのクラス)2021.09.15【Java初心者用】メールアドレスをユーザ名とドメイン名に分割2021.09.12【Java初心者用】数当てゲームを作る(メソッドあり)2021.09.11【PacketTracer基本操作】ルータ1つのLAN構築2021.09.05プロフィール続石恭正です。27年間コンピュータ関係のセミナー講師を行ってきました。初心者や新入社員を対象としたセミナーも多数担当してきましたので、初心者の目線で様々なICT関連の情報提供をおこなっていきたいと考えています。ICTに関連する情報提供を行っているサイトを見ると、初心者には難しい内容が多くあります。ここでは、他のサイトと違って、より初心者目線で分かりやすい説明を心掛けています。ある技術に特化せず、幅広く初心者の方のスキルアップをサポートしていきます。今後ともよろしくお願いいたします。ICTエンジニアのための教習所.メニューホームサイトマップお問い合わせサイト管理者ホーム検索トップサイドバータイトルとURLをコピーしました。