WoofJS(初級)

【WoofJS】演算2(第9回)

演算カテゴリーに関することを学びます。
※限定公開記事です

準備をしよう

下のURLをクリックして、WoofJSを開いてください。
https://woofjs.com/create.html

初めての方は、以下をご確認ください。

学習内容

テキスト生成

前提として、テキストを生成しておく必要があります。

テキストは、テキストを入れる「テキストボックス」とテキスト自体「テキスト」が必要です。これをセットで作成することとします。

まず「テキストボックス」ですが、Rectangleで作ります。生成、大きさ設定、色設定、位置設定のために、以下のコードを入れてください。白い四角が生成できたらOKです。

var lineBox = new Rectangle()
lineBox.width = 150
lineBox.height = 55
lineBox.color = "white"
lineBox.x = 0
lineBox.y = 0

次に「テキスト」ですが、Textで作ります。生成、テキスト内容、大きさ設定、色設定、位置設定のために、以下のコードを入れてください。先ほどの白い四角の中に、テキストが生成できたらOKです。

var line = new Text()
line.text = "Hello World!"
line.size = 20
line.color = "black"
line.x = 0
line.y = 0

演算カテゴリ

ここでは、テキスト表示させるために、計算結果をテキスト内容に代入していきます。

乱数

コード
random(最小値, 最小値)
ブロック

こちらのブロックに相当します。

練習

コードエディタに、以下のコードを入れて、実行してみましょう。

line.text = random(1, 10)
実行結果

計算結果が、正しく表示されていればOKです。「1〜10」の範囲でランダムな数が取れます。


乱数(x座標)※y座標も同様

コード
randomX()
ブロック

相当するものはありません。

練習

コードエディタに、以下のコードを入れて、実行してみましょう。

line.text = randomX()
実行結果

計算結果が、正しく表示されていればOKです。xの最小値から最大値の範囲でランダムな数が取れます。

特に、スプライトのx座標をランダムに設定するときに使います。


聞いて待つ

コード
var answer = prompt("あなたの名前は何ですか")
ブロック

こちらのブロックに相当します。

練習

コードエディタに、以下のコードを入れて、実行してみましょう。

var answer = prompt("あなたの名前は何ですか")
line.text = answer
実行結果

入力待ちとなり、入力した文字列がテキストで表示されていればOKです。

入力した文字を一旦変数「answer」に代入した後、その値をline.textに入れています。

まとめ

以上になります。今回は、演算カテゴリのコードについて扱いました。

演算の続きとして、乱数の使い方を中心に行いました。また入力処理の方法を紹介し、演算と絡めたプログラムを作ってみました。

タイトルとURLをコピーしました