お問い合わせ

TEL:086-206-5592

WEB:WEBから

JavaScriptでボールを動かすサンプルプログラミング~

岡山市のプログラミング教室 キュリオステーション岡山店は子どもプログラミングスクール Javascript Sample

岡山市北区のプログラミング教室では、子どもだけではく、大学生、社会人、シニアさんなどもプログラミングに挑戦されています。

 

プログラミングって何?

と、言葉は聞いたことがあるけれど、何するの?っと、知らなかった方々も多いです。😻

 

子ども向けのScratch言語

子ども向けのScratch といったビジュアル言語で作るとすごく簡単なボールを動かすプログラミング

岡山市のプログラミング教室 スクラッチサンプルプログラム ボールを動かす その3

これだけで動きます。🙀

詳細はこちらの記事、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的な立場の考え方に近い思考なのかも知れません、、、

 

 

岡山市北区のパソコン&プログラミング教室|こどもロボット&英語教室
岡山でパソコン・プログラミング教室、ロボット教室をお探しなら、岡山地域で「めっちゃ解りやすい説明ですネ」っとよく言われる岡山市北区のパソコン・プログラミング教室|こどもロボット教室&英語教室のキュリオステーション岡山店へ
岡山市北区のマンツーマン個別指導型パソコン教室
岡山でパソコン・プログラミング教室をお探しなら、「解りやすい説明でした」との感想が多い岡山市北区のパソコン・プログラミング教室【キュリオステーション岡山店】へ、気軽にスマホのことも相談できる教室です。無料体験・無料相談も随時しています。
プログラミングなら岡山市北区のキュリオステーション岡山店にお任せ
岡山でパソコン・プログラミング教室をお探しなら、キュリオステーション岡山店へ、岡山地域で一番の問題解決力「私には解りやすかった」との感想を頂くと喜ぶ岡山市北区のプログラミング教室です。驚きの回答と効率よい学び方の相談などお気軽にお問い合わせ下さい。
岡山市北区のロボット教室&ロボットプログラミング教室【岡山表町教室】
岡山でロボット教室|ロボットプログラミング教室をお探しなら、岡山市で発想力と応用力を養う習い事と話題のヒューマンアカデミーロボット教室「岡山表町教室」へ。準備も片付けも自分で!普段見られない姿が見られるロボット教室
岡山市北区の恥ずかしがり屋な子ども向け英語|英会話教室
岡山でこども英語教室をお探しなら、岡山市北区のシャイで恥ずかしがり屋な子ども向け英語|英会話教室「ヒューマンアカデミーランゲージスクール岡山表町教室」へ、英会話スクールと英語塾のいいとこ取りの仕組みとなっています。気になりましたら無料体験をご予約下さい。
岡山市北区のパソコン教室で安い料金ですねとよく言われる理由
岡山でパソコン教室をお探しなら、岡山市北...

 

 

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