Viscuit子どもプログラミング入門

Visucuit(ビスケット)講座 応用編- Visucuitで掛け算の計算機を作ろう(4)

前回、めちゃめちゃ長くなってしまったので続きから。
前回の記事はこちらです。
http://i-learn.jp/?p=4074
 

前回ここまでつくりました。

×1、×2、×4まで計算し、不要な段があれば消すというところまでです。
この青い丸を「足す」という部分を今回作っていきたいと思います。
 

1. 「足す」をどう実現するか?

今回、青い丸を足すためには、青い丸を下の方に移動させるという方法をとりたいと思います。ですが、ここまでの計算で灰色の枠が消えてしまったりしているため、あらたな部品を投入します。
 

1-1. レイアウト変更

新たな部品は、灰色の「点」これを投入して少し、ステージのレイアウトを変えました。

 

1-2. メガネの修正

そして、前回作ったメガネも修正を入れていきます。
灰色の「点」を追加しました。


 
×2のメガネにも灰色の点を追加。

 
×4のメガネにも灰色の点を追加。

 
さらに、緑の丸を消すメガネにも灰色の点を追加します。

 
空の灰色の枠のところは、灰色の点に置き換えておきましょう。

 
ここまで作ってタッチ画面で操作するとこのようになると思います。

 

1-3. 青い丸を下に送るメガネ

ここまでで、計算のエリアには「青い丸」と「灰色の点」だけが残りました。
シンプルな状態が作れればあとは簡単です。
 
こちらのメガネで下に青い丸を送ります。重なったら桁が上がるようにしましょう。

 

2. 動作確認しよう

完成したので、動作確認してみましょう。
 
まずは3×5です。答えは無事15になりました!

 
次にシンプルに2×2です。こちらも4になりました。

 
続いて4×7は・・・28であってますね!

 
最後に、この計算機で計算できる一番大きな数「7」をつかって7×7は・・・ちょっと答えがはみ出ちゃいましたが49になりました!

計算機として無事動作しているようです。
 

2. Visucuitで掛け算の計算機を作ろう(4) まとめ

掛け算の計算機、最後は記事が2回に分かれてしまいましたが、無事作ることができました。
もしかしたらもっとシンプルにできたかもしれませんね。(上の段をコピーする時点で、掛け算してしまうなど。)
 
今回の作品のリンクはこちらです。
https://develop.viscuit.com/env/view.html?control=play%3A00300014%3A6208%2F1-1%2F028.json%3A
※PCのみ
 
引き算や割り算の計算機もこのような仕組みでできるかもしれませんが・・・ちょっと大変そうなので計算機シリーズはこの辺にしておきたいと思います。
次は何を作ろうかなぁ。
 
 
これまでのViscuitシリーズはこちらです。
 
基礎編
Visucuit(ビスケット)講座 入門編(1)
Visucuit(ビスケット)講座 入門編(2)-アイコン解説 ランド
Visucuit(ビスケット)講座 入門編(3)-アイコン解説 タッチ
Visucuit(ビスケット)講座 入門編(4)-アイコン解説 絵が増える
Visucuit(ビスケット)講座 入門編(5)-回転
Visucuit(ビスケット)講座 入門編(6)-タッチすると
Visucuit(ビスケット)講座 入門編(7)-ぶつかると
 
計算機シリーズ
Visucuitで2進数を勉強しよう
Visucuitで足し算の計算機を作ろう
Visucuitで掛け算の計算機を作ろう(1)
Visucuitで掛け算の計算機を作ろう(2)
Visucuitで掛け算の計算機を作ろう(3)
 

伴野悠佳 / YUKA TOMONO
この記事の著者伴野悠佳 / YUKA TOMONO
教育ヲタクの1児の母。自称ニコニコキッズクリエーター。東京理科大学大学院卒。元SE。小学生の頃から教育書を読んでいた教育ヲタク。大学では、電池の素材の性質について実験とコンピューターシミュレーションを比較する研究を行っていたことがきっかけでSEになる。出産&育休後、子ども向けプログラミング教室講師、子どもたちの考える力を育てるオンライン塾の講師。