前回、めちゃめちゃ長くなってしまったので続きから。
前回の記事はこちらです。
http://i-learn.jp/?p=4074
前回ここまでつくりました。
×1、×2、×4まで計算し、不要な段があれば消すというところまでです。
この青い丸を「足す」という部分を今回作っていきたいと思います。
1. 「足す」をどう実現するか？
今回、青い丸を足すためには、青い丸を下の方に移動させるという方法をとりたいと思います。ですが、ここまでの計算で灰色の枠が消えてしまったりしているため、あらたな部品を投入します。
1-1. レイアウト変更
新たな部品は、灰色の「点」これを投入して少し、ステージのレイアウトを変えました。
1-2. メガネの修正
そして、前回作ったメガネも修正を入れていきます。
灰色の「点」を追加しました。
×2のメガネにも灰色の点を追加。
×4のメガネにも灰色の点を追加。
さらに、緑の丸を消すメガネにも灰色の点を追加します。
空の灰色の枠のところは、灰色の点に置き換えておきましょう。
ここまで作ってタッチ画面で操作するとこのようになると思います。
1-3. 青い丸を下に送るメガネ
ここまでで、計算のエリアには「青い丸」と「灰色の点」だけが残りました。
シンプルな状態が作れればあとは簡単です。
こちらのメガネで下に青い丸を送ります。重なったら桁が上がるようにしましょう。
2. 動作確認しよう
完成したので、動作確認してみましょう。
まずは3×5です。答えは無事15になりました！
次にシンプルに2×2です。こちらも４になりました。
続いて４×７は・・・２８であってますね！
最後に、この計算機で計算できる一番大きな数「７」をつかって７×7は・・・ちょっと答えがはみ出ちゃいましたが49になりました！
計算機として無事動作しているようです。
2. Visucuitで掛け算の計算機を作ろう（４） まとめ
掛け算の計算機、最後は記事が２回に分かれてしまいましたが、無事作ることができました。
もしかしたらもっとシンプルにできたかもしれませんね。（上の段をコピーする時点で、掛け算してしまうなど。）
今回の作品のリンクはこちらです。
https://develop.viscuit.com/env/view.html?control=play%3A00300014%3A6208%2F1-1%2F028.json%3A
※PCのみ
引き算や割り算の計算機もこのような仕組みでできるかもしれませんが・・・ちょっと大変そうなので計算機シリーズはこの辺にしておきたいと思います。
次は何を作ろうかなぁ。
これまでのViscuitシリーズはこちらです。
基礎編
・Visucuit（ビスケット）講座 入門編（１）
・Visucuit（ビスケット）講座 入門編（２）-アイコン解説 ランド
・Visucuit（ビスケット）講座 入門編（3）-アイコン解説 タッチ
・Visucuit（ビスケット）講座 入門編（4）-アイコン解説 絵が増える
・Visucuit（ビスケット）講座 入門編（5）-回転
・Visucuit（ビスケット）講座 入門編（6）-タッチすると
・Visucuit（ビスケット）講座 入門編（7）-ぶつかると
計算機シリーズ
・Visucuitで2進数を勉強しよう
・Visucuitで足し算の計算機を作ろう
・Visucuitで掛け算の計算機を作ろう（１）
・Visucuitで掛け算の計算機を作ろう（２）
・Visucuitで掛け算の計算機を作ろう（３）
