simple requestAnimationFrame not working JavaScript

Question

JavaScriptとHTML5を使用してアニメーションを理解しようとしています。 私はインターネットで調査した後、requestAnimationFrameが繰り返しメソッドを呼び出します。

私はプレーンを作成し、そのプレーンを対角線上に移動するメソッドを作成しました。しかし、それはアニメーションがないようです。

私はこれをかなり新しくしているので、私はそれほど概念を得ていないかもしれません。クロムとインターネットエクスプローラの両方で試してみたので、私のブラウザとは関係ないと思います。数ヶ月前に新しいノートパソコンとしてインストールしたので、最新のものにしてください。ここで

が私のメインクラスである、それはすべてのreleventコード含まれている必要があります

/*global window, document, alert, Vector, Moth, Matrix, Plane, SceneGraphNode*/ 
function onLoad() { 
var mainCanvas, mainContext, planePosition, plane; 
// this function will initialise our variables 


function initialiseCanvasContext() { 
    // Find the canvas element using its id attribute. 
    mainCanvas = document.getElementById('mainCanvas'); 
    // if it couldn't be found 
    if (!mainCanvas) { 
     // make a message box pop up with the error. 
     alert('Error: I cannot find the canvas element!'); 
     return; 
    } 
    // Get the 2D canvas context. 
    mainContext = mainCanvas.getContext('2d'); 
    if (!mainContext) { 
     alert('Error: failed to get context!'); 
     return; 
    } 
    planePosition = new Vector(0, 0, 0); 
    plane = new Plane(planePosition); 
} 


function translate(pPosition) { 
    var matrix = Matrix.createTranslation(pPosition); 
    matrix.transform(mainContext); 
} 

function scale(pPosition) { 
    var matrix = Matrix.createScale(pPosition); 
    matrix.transform(mainContext); 
} 

function rotate(pPosition) { 
    var matrix = Matrix.createRotation(pPosition); 
    matrix.transform(mainContext); 
} 

function drawPlane() { 
    scaleVector = new Vector(0.25, 0.25, 0); 
    scale(scaleVector); 
    translate(new Vector(0, 0)); 
    rotate(0); 
    plane.draw(mainContext); 
} 

function drawMoth() { 
    var moth, mothPosition; 
    mothPosition = new Vector(mainCanvas.width/2, mainCanvas.height/2, 0); 
    moth = new Moth(mothPosition); 
    moth.draw(mainContext); 
} 

function drawPlane() { 
    plane = new Plane(planePosition); 
    scale(new Vector(0.25, 0.25, 0)); 
    plane.draw(mainContext); 
} 

function animatePlane() { 
    translate(planePosition.add(new Vector(100, 100, 0))); 
    drawPlane(); 
    window.requestAnimationFrame(animatePlane); 
} 

initialiseCanvasContext(); 
drawMoth(); 
animatePlane(); 
} 
window.addEventListener('load', onLoad, false); 

をあなたはそれがすべての関連メソッドを参照するのに役立つだろうと思うなら、私に知らせてください。私は結果を添付しました。

Answer 1

物事の多くは、ここで（行列やベクトルオブジェクトとそのメソッド）定義されていません。もしあなたがそれを持っていれば、コードを含めてください。

あなたのオブジェクト指向のJSの知識に少しのギャップがあるようです。私はあなたがこののかなりの部分を知っている推測しているが、次のあなたの知識を固めるためにあなたの時間の価値があるでしょう：

• は、新しいオブジェクトを作成する方法を知っています。オブジェクトが何であるかを理解する。
• コンストラクタ関数を作成する方法を理解する。
• 新しいキーワードを使用すると、単にオブジェクトのコンストラクタ関数が呼び出されることを理解してください。
• 継承を理解してください。 こののキーワードとプロトタイプの継承。
• カプセル化を理解してください。
• キャンバスAPIを理解する
• コードにコメントを追加する他の人がコードを読んでいる場合は、コメントを追加してください。助けになる。あなたが本当に必要とするのは、関数ごとに1つのコメントだけです。入力パラメータが何であるかを説明すると便利です。
  • がこれを読んで（と、それは2つの前提条件です）：ここで

は（そしておそらく完成）あなたが始めるためにいくつかのリソースですhttp://javascriptissexy.com/oop-in-javascript-what-you-need-to-know/
• チェックアウト内蔵のキャンバス方法：ここでhttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

を欠落していたコードの構造があります

function Vector(x, y, z) { 
 
    this.x = x; 
 
    this.y = y; 
 
    this.z = z; 
 
} 
 

 
var Matrix = { 
 
    createTranslation: function() { 
 
    
 
    }, 
 
    createRotation: function() { 
 
    
 
    }, 
 
    createScale: function() { 
 
    
 
    }, 
 
    transform: function() { 
 
    
 
    } 
 
}; 
 

 
function Plane(position) { 
 
    this.add = function() { 
 
    this.draw = function() { 
 
    
 
    }; 
 
    }; 
 
} 
 

 
function Moth(position) { 
 
    this.draw = function() { 
 
    
 
    }; 
 
}

私はこれがあなたの質問に答えていない知っていると私は地獄にdownvotedれようとしているそうだけど、あなたがやっているかを理解するまで、私は本当にあなたを助けることができません少し良く。がんばろう！