やっぱりJavaScript! - やっぱりゲーム！２

整理していきます。関数にして、その役割に分けて、構造として整理します。

動画を参考にコードの組み立ての基本構造を整理します。

１　canvasを使うための設定　・・・　canvasをHTMLで使うために
２　初期の設定　・・・　変数に既定値などを入れておく
３　ゲームループの設定 　・・・　画面の更新をして画面を動かす

canvasを使うための設定は決まり文句なので置いといて

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

初期化

init();

ループの設定

function gameloop(){
　　drow()
　　update()
}

それぞれの関数定義

drow()　・・・　描画

update()　・・・更新設定

MDNのコードを基本構造に沿って少し整理してみました。初期化の部分は関数としていませんが、スッキリした感じがします。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;

setInterval(load, 10);

function load(){
drawBall() 
update()  
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y += dy;
}

関数をまとめたもの"load()"とループの部分を最後に持ってくる方がわかりやすいかも。

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y += dy;
}

function load(){
drawBall() 
update()  
}

setInterval(load, 10);