Slide Puzzle 01-01
Slide Puzzle
以下は教科書「ゲームで学ぶJavaScript入門」にある「スライドパズル 15puzzle」を段階的に理解するための教材です。
題#1~#6までを取り組みましょう。
Slide Puzzle 完成版で完成したプログラムを確認しましょう。
#1
テーマ
- 配列(array)の中のものを選択する方法を学ぶ
array[i]の理解
タスク
以下のような出力になるようにコードを完成させなさい。
"2番目の文字はcです。"
スターターコード
???を埋めましょう。
const array = ["a", "b", "c", "d", "e"]
const num = 2
console.log(`${???}番目の文字は${???}です。`)
答え
#2
テーマ
- 配列にものを追加する方法を学ぶ
.push()の理解
タスク
以下のような出力になるようにコードを完成させなさい。
"現在の配列はa,b,c,d,e,f,gです。"
スターターコード
???を埋めましょう。
const array = ["a", "b", "c", "d", "e"]
array.???
array.???
console.log(`現在の配列は${array}です。`)
答え
#3
テーマ
forループの理解
タスク
以下のような出力になるようにコードを完成させなさい。
現在の数字: 0
現在の数字: 1
現在の数字: 2
現在の数字: 3
現在の数字: 4
スターターコード
???を埋めましょう。
for (???; ???; ???) {
console.log(`現在の数字: ${i}`)
}
答え
#4
テーマ
- 2重
forループの理解
タスク
以下のような出力になるようにコードを完成させなさい。
???を埋めましょう。
"0 x 0 = 0"
"0 x 1 = 0"
"0 x 2 = 0"
"0 x 3 = 0"
"0 x 4 = 0"
"1 x 0 = 0"
"1 x 1 = 1"
"1 x 2 = 2"
"1 x 3 = 3"
"1 x 4 = 4"
"2 x 0 = 0"
"2 x 1 = 2"
"2 x 2 = 4"
"2 x 3 = 6"
"2 x 4 = 8"
"3 x 0 = 0"
"3 x 1 = 3"
"3 x 2 = 6"
"3 x 3 = 9"
"3 x 4 = 12"
"4 x 0 = 0"
"4 x 1 = 4"
"4 x 2 = 8"
"4 x 3 = 12"
"4 x 4 = 16"
スターターコード
???を埋めましょう。
for (???; ???; i++) {
for (???; ???; j++) {
console.log(`${???} x ${???} = ${???}`)
}
}
答え
#5
テーマ
- DOM要素をクリックした時にFunctionを実行する方法を学ぶ
- DOM要素につける、
onclick属性の理解 - DOM要素をクリックした時に作成される
eventオブジェクトの理解 eventオブジェクトの中にある、event.targetの理解
タスク
数字タイルをクリックすると以下のような出力がコンソールに表示されるようにコードを完成させなさい。
"1クリックされました"
"2クリックされました"
"3クリックされました"
"4クリックされました"
スターターコード
???を埋めましょう。
<!DOCTYPE html>
<html>
<head>
<title>15puzzle</title>
<meta charset="UTF-8"/>
<style>
/* 1つのタイルの見た目を調整 */
.tile {
width: 70px;
height: 70px;
border: 3px solid cornflowerblue;
border-radius: 10px;
text-align: center;
font-size: 36px;
font-family: sans-serif;
background-color: white;
box-shadow: rgb(128, 128, 128) 5px 5px;
}
</style>
<script>
"use script";
// ここにJavaScriptコードを書く
function myClick(event) {
console.log(`${event.target.textContent}クリックされました`)
}
</script>
</head>
<body>
<table id="table">
<tr>
<!-- 一つ一つの`td`要素にどんな属性をつける？ -->
<td class="tile" ???="myClick(event)">1</td>
<td class="tile" ???="myClick(event)">2</td>
<td class="tile" ???="myClick(event)">3</td>
<td class="tile" ???="myClick(event)">4</td>
</tr>
</table>
</body>
</html>
ヒント
1
myClick(event)のeventがfunctionに引数として渡されていることを確認.eventは組み込みのオブジェクトでその名の通り、画面上にクリックされたイベントの情報がたくさん記録されている。
2
event.targetとはそのクリックされたDOM要素を指す。例えばtdタグをクリックしたらそのtdタグそのものを指す。
3
tdタグの中身である数字を手に入れるためにはイベント.target.textContentを使用する。
答え
#6
テーマ
- DOM要素を参照する
getElementById()の使い方 - JavascriptでDOM要素を追加する
- JavascriptでDOM要素の情報を追加する
タスク
<table id="table"></table>を.getElementById()で要素を参照し、<td class="tile" onclick="myClick(event)">1</td>を手打ちするのではなく、JavaScriptで要素やその中の属性、Functionを追加しなさい。
スターターコード
???を埋めましょう。
<!DOCTYPE html>
<html>
<head>
<title>15puzzle</title>
<meta charset="UTF-8"/>
<style>
/* 1つのタイルの見た目を調整 */
.tile {
width: 70px;
height: 70px;
border: 3px solid cornflowerblue;
border-radius: 10px;
text-align: center;
font-size: 36px;
font-family: sans-serif;
background-color: white;
box-shadow: rgb(128, 128, 128) 5px 5px;
}
</style>
<script>
"use script";
function init() {
// ここにJavaScriptコードを書く
let tableEl = document.getElementById("table")
let trEl = document.createElement("tr")
let tdEl = document.createElement("td")
tdEl.className = ??? // <td class="tile">と同じ！
???.onclick = myClick // <td onclick="myClick(event)">と同じ！(event)は自動的に渡されている
tdEl.??? = "1" // <td>1</td>と同じ！
trEl.appendChild(???) // <tr><td></td></tr>と同じ！
tableEl.appendChild(???) // <table><tr><td></td></tr></table>と同じ！
}
function myClick(event) {
console.log(`${event.target.textContent}クリックされました`)
}
</script>
</head>
<body onload="init()">
<table id="table"></table>
</body>
</html>
備考
なぜ<body onload="init()">が必要なの？
DOMが画面に表示される順番はDOMが先でその後にJavaScriptが実行されます。
そうすると、document.getElementById("table")とかdocument.createElement("tr")とかはDOMを表示する段階ではまだ実行されておらず、DOMツリーに追加されていないことになります。
そこで<body>にonload属性をつけることにより<body>要素が作成される時(loadする時)にinit()は優先的に実行するようにしてくれます。
そうすることにより、DOMツリーを作成し、表示する前にinit()の中にあるJavaScriptを実行してくれます。
答え
#7
テーマ
- DOM要素に
.indexと.valueの値を与える。.indexは盤面にある順番を示す値.valueはそのタイルの数字
タスク
.textContentに.valueで与えた値を渡しましょう。
.indexの値を設定しましょう。
スターターコード
???を埋めましょう。
<!DOCTYPE html>
<html>
<head>
<title>15puzzle</title>
<meta charset="UTF-8"/>
<style>
/* 1つのタイルの見た目を調整 */
.tile {
width: 70px;
height: 70px;
border: 3px solid cornflowerblue;
border-radius: 10px;
text-align: center;
font-size: 36px;
font-family: sans-serif;
background-color: white;
box-shadow: rgb(128, 128, 128) 5px 5px;
}
</style>
<script>
"use script";
function init() {
// ここにJavaScriptコードを書く
let tableEl = document.getElementById("table")
let trEl = document.createElement("tr")
for (let j = 0; j < 5; j++) {
let tdEl = document.createElement("td")
tdEl.className = "tile" // <td class="tile">と同じ！
tdEl.index = ???
tdEl.value = ???
trEl.onclick = myClick // <td onclick="myClick(event)">と同じ！(event)は自動的に渡されている
tdEl.textContent = ??? // <td>1</td>と同じ！
trEl.appendChild(tdEl) // <tr><td></td></tr>と同じ！
}
tableEl.appendChild(trEl) // <table><tr><td></td></tr></table>と同じ！
}
function myClick(event) {
console.log(`${event.target.textContent}クリックされました`)
}
</script>
</head>
<body onload="init()">
<table id="table"></table>
</body>
</html>
備考
tdEl.valueとかtdEl.indexはどこから来たの？
これらtd要素につけているvalueとindexはこちらが指定した名前です。別にfooでもbarでもnandemoでもいいんです。大事なのは、Javascriptはかなり自由があって、こちらが勝手に、DOM要素に属性をつけることができると言うことです。
もしtdEl.foo = 42という値を与えたら、クリックイベントevent.target.fooで取得することができます。