HTML5キャンバス - ボールの衝突

タグは、グラフやその他の画像などのグラフィックを定義します。このタグはJavaScriptの描画APIに基づいています。

実行結果の表示：

お使いのブラウザはHTML5をサポートしていません

コード部分：

// キャンバスオブジェクトを取得 var my_canvas = document.getElementById(“my-canvas”); // 描画コンテキスト（ブラシ）を取得 var my_huabi = my_canvas.getContext(“2d”); var x = 50; var y = 50; var r = 20; function deawBall(x,y){ // ブラシの色を設定 my_huabi.fillStyle = “green”; // 新しいパスを開始 my_huabi.beginPath(); // ボールを描画 my_huabi.arc(x, y, r, 0, 2 * Math.PI); // パスを閉じる my_huabi.fill(); } var fx_x = true;//fx_xがtrueの場合、x軸方向に移動 var fx_y = true;//fx_yがtrueの場合、y軸方向に移動 var speen = 1; // タイマー window.setInterval(“moveBall()”, 10); function moveBall(){ // 現在のボールの移動方向を判断 if(fx_x == true){ x += speen; if(x >= 500-r){ // 下端に達したら、上向きに跳ね返る fx_x = false; } }else{ x -= speen; if(x <= 0+r){ // 上端に達したら、下向きに跳ね返る fx_x = true; } } if(fx_y == true){ y += speen; if(y >= 400-r){ // 左端に達したら、右向きに跳ね返る fx_y = false; } }else{ y -= speen; if(y <= 0+r){ // 右端に達したら、左向きに跳ね返る fx_y = true; } } // キャンバスをクリアして再描画 my_huabi.clearRect(0, 0, 500, 400); deawBall(x, y); }