2. 何を作りたいか考えて、それはどうやって動くのか概要を理解しよう
コペル君、昨日はいろいろな発見があったね。
具体的に画面が動かせそうという感覚がつかめると発想を拡がるという体験が出来たのではないかと思う。
特に大事なのは
- コペル君が大好きなゲームと同じように、背景と登場人物にわけることが出来る
- 登場人物が動くに従って、背景も動いていく
- 登場人物が実際に歩いているように見えるためには複数の絵を組み合わせればいい
ということの理解だ。
登場人物を動かすには?
3については、実はなかなか理解しづらい人も多いのだけど、コペル君が昔遊んでいた Scratchでの経験が活きたよね。
複数のためにこちらの記事を読んで見よう
フレームアニメーションのおさらい
- 背景 = ステージ
- 背景の初期化 = リセット → 最初は誰が動かしても同じ状態から始まるよね？
- 登場人物 = スプライト
- 登場人物の動き = コスチューム
背景をどのようにうごかすの？
君が寝る前に考えていた
君が作りたいと思っているアプリ（ゲーム）について何が必要かまとめて見よう
- 背景
- 登場人物
背景の上に簡単な登場人物を乗っけて動かしてみよう
（ちょっとメモ）昨日のgithubから新しいコードをダウンロードする
- VScode 上で、昨日作ったprogram_challengeを右クリックする
- "Open in terminal" でターミナルを開く
3.ここで、 git pull (じっとぷる）と入力してenterキーを押す
1) webで見かけた画像を昨日のページに貼り付けてみよう
htmlのタグに、"div"という物があって、背景と動かしたい物をこの中においてみるといい。
詳しくはこちらを見てみよう
- https://html-coding.co.jp/annex/dictionary/html/img/
- 下のurlで見ることの出来る画像をまずは表示してみる
昨日の page1.htmlの好きなところにしたのコードを追記しよう
<div class="background">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
</div>
2) 背景にキャラクター（ここでは文字を使う）をのせてみよう
こいつに、動かしたい物を同じ "div"タグのなかにおいてみると。。
ここでは動かしたい物をさらに div タグでくくるのがポイント。
<div class="background">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
<div>○</div>
</div>
これを "Open in browse"で見てみよう。
このままだと画像とまるは重なっていない。
ここで、styleを指定して position: absolute; を設定してみるとどうなるか？(親のdivに position: relative; とするのを忘れないように！
要素に position: absolute(絶対の) と指定すると、その親要素の中で relativeとなっている物に対して、絶対座標で位置を指定できるようになる。
詳しくはこちらで、
実際に書いてみると
styleは要素のタグの中に直接書くことが出来るし、分離して記載する事もできる。
<style>
.background{
position: relative;
}
</style>
<div class="background">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
<div id="maru" style="posistion:absolute; top:10px; left:10px">○</div>
</div>
3) 背景の上のキャラクターを動かしてみよう
ここにボタンをおいて、このボタンを押す毎に○を右に動かしてみるにはどうしたらいいだろう？昨日のメッセージとおなじで、left: 10px;の値を onClick()で変えてあげればいいというのは分かるかな？
leftの値を変更するには、getElementById で要素を取得して、その style.left の値を変更すればよい
こちらも読んで見よう
<script>
function ugoku_maru(){
var msg=document.getElementById("maru");
msg.style.left = "30px";
}
</script>
<div class="background" style="width: 600px; height: 300;">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
<div id="maru" style="position:absolute; top: 10px; left: 20px">○</div>
</div>
<button type="button" onClick="ugoku_maru();">動くよ</button>
これだと、left=30pxになったっきり動かない。コペル君も気付いたように、「現在のleftの値を取ってきて、それに10を足してあげる」必要があるよね。
まずは、「現在のleftの値」はどの様にとれるのだろうか？
これも、getElementByIdで要素を取得して、style.leftの値を読み出すことで取得が出来る
(ただし、これは要素タグの中に直接 styleを指定している時ではないと使えないのです：詳しくはこちらから https://cpoint-lab.co.jp/article/201802/1535/ ）
<script>
function ugoku_maru(){
var msg=document.getElementById("maru");
msg.innerHTML = msg.style.left;
}
</script>
<div class="background" style="width: 600px; height: 300;">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
<div id="maru" style="position:absolute; top: 10px; left: 20px">○</div>
<button type="button" onClick="ugoku_maru();">動くよ</button>
上のコードを実行してみると、昨日やったように、文字「○」が20px と置き換わるのが分かると思う
じゃあ、これに 10をたしてみたらどうなるだろうか？
<style>
.background{
position: relative;
margin-top: 30px;
}
</style>
<script>
function ugoku_maru(){
var msg=document.getElementById("maru");
msg.innerHTML = 10 + msg.style.left;
}
</script>
<div class="background" style=" width: 600px; height: 300;">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
<div id="maru" style="position:absolute; top: 10px; left: 20px">○</div>
</div>
<button type="button" onClick="ugoku_maru();">動くよ</button>
どうなったかな？意外な結果だったかな？
試しに
msg.innerHTML = msg.style.left+10;
としてみよう。
この場合だと何もおきないし、VSCode上だと、赤の波線が出ている。これは「文法が間違っています」ということを意味する。
msg.style.left は 20px という文字なので、これを数字として扱えるようにしなければいけない。
「数字に変換して！」という関数が `parseInt()' なのだ。
<style>
.background{
position: relative;
margin-top: 30px;
}
</style>
<script>
function ugoku_maru(){
var msg=document.getElementById("maru");
msg.innerHTML = parseInt(msg.style.left) + 10;
}
</script>
<div class="background" style=" width: 600px; height: 300;">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
<div id="maru" style="position:absolute; top: 10px; left: 20px">○</div>
</div>
<button type="button" onClick="ugoku_maru();">動くよ</button>
こうすると、初めてleftの値に10足した結果が取得出来る。
ここまで来たら、ボタンをクリックするだけで右に動く様にするにはどうしたらいいかわかるかな？
3-2) <style> タグで指定されたclassの値を取得する
3-3)
-
https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetLeft
https://sterfield.co.jp/designer/javascript%E3%81%A7css%E3%82%92%E6%93%8D%E4%BD%9C%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/
このあたりは解説がもうちょっと必要そう・・
<style>
.character2{
position: absolute;
top: 10px;
left: 10px;
}
</style>
<script>
function ugoku_maru(){
var maru=document.getElementById("maru");
var ichi=maru.offsetLeft;
maru.style.left = (ichi+10) + "px";
}
</script>
<div class="background" style="width: 600px; height: 300;">
<img src="https://expo.nikkeibp.co.jp/tgs/2016/public/map/images/public_map_02.jpg">
<div id="maru" class="character2">○</div>
<button type="button" onclick="ugoku_maru()">動くよ</button>
</div>
4) 矢印キーで動かせるようにする