岡山市北区のプログラミング教室では、子どもだけではく、大学生、社会人、シニアさんなどもプログラミングに挑戦されています。
プログラミングって何?
と、言葉は聞いたことがあるけれど、何するの?っと、知らなかった方々も多いです。😻
子ども向けのScratch言語
子ども向けのScratch といったビジュアル言語で作るとすごく簡単なボールを動かすプログラミング
これだけで動きます。🙀
詳細はこちらの記事、Scratch サンプルプログラミング 基礎編~~ボールゲームで~~

簡単な記述(ブロックの組み合わせ)で終わりますが・・・
これをJavaScript言語で記述すると・・・
少し大変です。
Webブラウザで動かすようにすると・・・
サンプルプログラムコードを見ても、どこから記述していけばいいの?
この記述で、何しているの?
みたいに思われるかも知れませんね、、、
慣れるまでは、順番に試しながら作っていきましょう🎵
Step1.ボールを描く
「ボールを描く」ボタンを押すと、中央下にボールが出てきます。
動くゲームはこちら
ボールを描く部分は、こんな感じで描けます。
var ballRadius = 10; Var x = 0; Var y = 0; // ボールを描く function drawBall1() { var canvas = document.getElementById("canvas1"); // Canvas の指定 var ctx = canvas.getContext("2d"); // 線、ボックス、円、などを描画 x = canvas.width / 2; y = canvas.height - ballRadius; ctx.beginPath(); // パスの開始 ctx.arc(x, y, ballRadius, 0, Math.PI*2); // 円 ctx.fillStyle = "#000000"; // 描画の塗りつぶしの色 ctx.fill(); // 塗りつぶし ctx.closePath(); // パスの終了 }
ボールの描画ができたら、動きを加えてみましょう。
html の基本構文の説明は省略します。
こちらの記事を参考にして下さい。⇒JavaScript canvas のサンプルプログラム
Step2.ボールを動かす
「開始」ボタンを押下すると、ボールを描画し動きだします。
var ballRadius = 10; var x = 0; Var y = 0; var dx = 2; // 移動量を追記 var dy = -2; // Step2開始 function init() { var canvas = document.getElementById("canvas"); // Canvas の指定 var ctx = canvas.getContext("2d"); // 線、ボックス、円、などを描画 x = canvas.width / 2; y = canvas.height - ballRadius; draw(); } // ボールを描く function drawBall() { var canvas = document.getElementById("canvas"); // Canvas の指定 var ctx = canvas.getContext("2d"); // 線、ボックス、円、などを描画 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); // パスの開始 ctx.arc(x, y, ballRadius, 0, Math.PI*2); // 円 ctx.fillStyle = "#000000"; // 描画の塗りつぶしの色 ctx.fill(); // 塗りつぶし ctx.closePath(); // パスの終了 } // 描画 function draw() { drawBall(); x += dx; y += dy; requestAnimationFrame(draw); // アニメーションの実行 }
Scratch の 最初にある15度まわすの箇所が、
dx=2, dy=-2 の箇所が、x方向プラス , y方向マイナス の向きになり、
2の値が1回の命令で動く、移動量(スピード)となります。
requestAnimationFrame の箇所で、アニメーション(動き)を継続して行うように指示しています。
Step3.跳ね返る
「開始」ボタンを押下すると、ボールを描画し動きだし、端までいくと跳ね返ったように動く箇所を追加していきます。
var ballRadius = 10; var x = 0; var y = 0; var dx = 2; var dy = -2; // 移動量 // Step3 開始 function init() { var canvas = document.getElementById("canvas"); // Canvas の指定 var ctx = canvas.getContext("2d"); // 線、ボックス、円、などを描画 x = canvas.width / 2; y = canvas.height - ballRadius; draw(); } // ボールを描く function drawBall() { var canvas = document.getElementById("canvas"); // Canvas の指定 var ctx = canvas.getContext("2d"); // 線、ボックス、円、などを描画 ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); // パスの開始 ctx.arc(x, y, ballRadius, 0, Math.PI*2); // 円 ctx.fillStyle = "#000000"; // 描画の塗りつぶしの色 ctx.fill(); // 塗りつぶし ctx.closePath(); // パスの終了 } // 描画 function draw() { var canvas = document.getElementById("canvas"); // Canvas の指定 drawBall(); if(x + dx > canvas.width - ballRadius || x + dx < ballRadius ) { dx = -dx; // dx = -1 * dx; と同じ } if(y + dy < ballRadius) { dy = -dy; // dy = -1 * dy; と同じ }else if(y + dy > canvas.height-ballRadius) { dy = -dy; } x += dx; y += dy; requestAnimationFrame(draw); // アニメーションの実行 }
上下左右の4辺に当たると、反対側に跳ね返るようにしています。
x,y 座標の値(移動)をそれぞれ当たる辺で、プラス・マイナス反転させて方向を決めています。
どこかのホームページにもありますす、テキスト本にもある内容です。
スクラッチとの比較のため、コードまで載せております。
Scratch では、この難解な箇所が、「もし端に着いたら跳ね返る」といったブロックがありますが、中身は、このような感じで、4辺に対して、判定を行って、向きを変えていることになります。
JavaScriptの場合 、 Webブラウザ上の X, Y 座標は、左上が起点(ゼロ,ゼロ)の位置となります。
比較してみると
Scratch と JavaScript を実際のソースコードで比較してみると、
Scratch のブロック1個に対して、少々長いコーディングとなっていることがわかるかと思います。
Scratch は、どのような手順、流れで実行していくのか?
を解りやすく、図解したもので、プログラミング言語では、その一つ一つのブロックをコーディングしていくようなイメージとなります。
概要があり、その中身がある。といった感覚で学んでいけば、よいでしょう。
より、解りやすく、簡単に、、、を考えないと、手順の羅列だけとなり、あまり実用的ではないように思われます。
もっとも、どこまで、深く、学ぶのか?によっても変わってきますが、
どうせ?学ぶなら、より簡単に、解りやすくを追求して欲しいですよね♪
よく、解らないけど、並べると動いた?
この程度のレベルでは、何をしていることか?解りませんよね・・・
マネして作るだけも同じになります。
是非、手順、効率化といったロジックも学んで下さい。
プログラマーの立場、から見れば、Scratch ができるから、プログラミングができるんだ!!
みたいな感覚になって欲しくもないことでしょう。
どちらかというと、
Scratch は、SE的な立場の考え方に近い思考なのかも知れません、、、




