-1
私は学校でJSのコードをHTMLのキャンバスの端にぶつけるように頼んだのですが、そのキャンバスに4つのボールを入れて追加したい彼らが遭遇したときにボールが跳ね返るようにするために、JSのいくつかの「物理学」。Javascript:コードが正常に動作しない
必要に応じて詳細をお知らせします。 PS:
window.onload = function()
{
{
var canvas = document.getElementById('mon_canvas');
var context = canvas.getContext('2d');
}
var rafraichissement = setInterval(animation, 1000/60);
var rBalle = parseFloat(prompt('Entrez le rayon des balles'));
var vitesseX = 1.1;
var vitesseY = 1.2;
var vitesseX2 = -1.5;
var vitesseY2 = -0.9;
var vitesseX3 = -1.2;
var vitesseY3 = 1.33;
var vitesseX4 = 2;
var vitesseY4 = -0.7;
var xBalle = rBalle+1;
var yBalle = rBalle+1;
var xBalle2 = canvas.width - rBalle -1;
var yBalle2 = canvas.height - rBalle -1;
var xBalle3 = canvas.width - rBalle -1;
var yBalle3 = rBalle +1;
var xBalle4 = rBalle +1;
var yBalle4 = canvas.height - rBalle -1;
//canvas.width pour la largeur du canvas
//canvas.height pour sa hauteur
function animation() {
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.arc(xBalle, yBalle, rBalle, 0, Math.PI*2);
context.fill();
context.closePath();
context.beginPath();
context.arc(xBalle2, yBalle2, rBalle, 0, Math.PI*2);
context.fill();
context.closePath();
context.beginPath();
context.arc(xBalle3, yBalle3, rBalle, 0, Math.PI*2);
context.fill();
context.closePath()
context.beginPath();
context.arc(xBalle4, yBalle4, rBalle, 0, Math.PI*2);
context.fill();
context.closePath()
//collision balles/bord du canvas
if(xBalle >= canvas.width - rBalle || xBalle <= rBalle){vitesseX *= -1;} //Balle 1 (haut gauche)
if(yBalle >= canvas.height - rBalle || yBalle <= rBalle){vitesseY *= -1;}
if(xBalle2 >= canvas.width - rBalle || xBalle2 <= rBalle){vitesseX2 *= -1;} //Balle 2 (bas droite)
if(yBalle2 >= canvas.height - rBalle || yBalle2 <= rBalle){vitesseY2 *= -1;}
if(xBalle3 >= canvas.width - rBalle || xBalle3 <= rBalle){vitesseX3 *= -1;} //Balle 3 (haut droite)
if(yBalle3 >= canvas.height - rBalle || yBalle3 <= rBalle){vitesseY3 *= -1;}
if(xBalle4 >= canvas.width - rBalle || xBalle4 <= rBalle){vitesseX4 *= -1;} //Balle 4 (bas gauche)
if(yBalle4 >= canvas.height - rBalle || yBalle4 <= rBalle){vitesseY4 *= -1;}
//collision balles/balles
//var distance entre les balles
var dist12 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle2)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle2)), 2)));
var dist13 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle3)), 2)));
var dist14 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle4)), 2)));
var dist23 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle3)), 2)));
var dist24 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle4)), 2)));
var dist34 = Math.sqrt(Math.pow((parseFloat(xBalle3) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle3) + parseFloat(yBalle4)), 2)));
//boucles if vérifiant la valeur de la distance, ainsi que les directions des balles
if(dist12 <= parseFloat(rBalle)*2){ //balles 1 et 2
if(vitesseX*vitesseX2 < 0)
{
vitesseX *= -1; vitesseX2 *= -1;
}
else{
vitesseX *= 1; vitesseX2 *= 1;
}
if(vitesseY*vitesseY2 < 0){
vitesseY *= -1; vitesseY2 *= -1;
}
else{
vitesseY *= 1; vitesseY2 *= 1;
}
}
if(dist13 <= parseFloat(rBalle)*2){ //balles 1 et 3
if(vitesseX*vitesseX3 < 0)
{
vitesseX *= -1; vitesseX3 *= -1;
}
else{
vitesseX *= 1; vitesseX3 *= 1;
}
if(vitesseY*vitesseY3 < 0){
vitesseY *= -1; vitesseY3 *= -1;
}
else{
vitesseY *= 1; vitesseY3 *= 1;
}
}
if(dist14 <= parseFloat(rBalle)*2){ //balles 1 et 4
if(vitesseX*vitesseX4 < 0)
{
vitesseX *= -1; vitesseX4 *= -1;
}
else{
vitesseX *= 1; vitesseX4 *= 1;
}
if(vitesseY*vitesseY4 < 0){
vitesseY *= -1; vitesseY4 *= -1;
}
else{
vitesseY *= 1; vitesseY4 *= 1;
}
}
if(dist23 <= parseFloat(rBalle)*2){ //balles 2 et 3
if(vitesseX2*vitesseX3 < 0)
{
vitesseX2 *= -1; vitesseX3 *= -1;
}
else{
vitesseX2 *= 1; vitesseX2 *= 1;
}
if(vitesseY2*vitesseY3 < 0){
vitesseY2 *= -1; vitesseY3 *= -1;
}
else{
vitesseY2 *= 1; vitesseY3 *= 1;
}
}
if(dist24 <= parseFloat(rBalle)*2){ //balles 2 et 4
if(vitesseX2*vitesseX4 < 0)
{
vitesseX2 *= -1; vitesseX4 *= -1;
}
else{
vitesseX2 *= 1; vitesseX4 *= 1;
}
if(vitesseY2*vitesseY4 < 0){
vitesseY2 *= -1; vitesseY4 *= -1;
}
else{
vitesseY2 *= 1; vitesseY4 *= 1;
}
}
if(dist34 <= parseFloat(rBalle)*2){ //balles 3 et 4
if(vitesseX3*vitesseX4 < 0)
{
vitesseX3 *= -1; vitesseX4 *= -1;
}
else{
vitesseX3 *= 1; vitesseX4 *= 1;
}
if(vitesseY3*vitesseY4 < 0){
vitesseY3 *= -1; vitesseY4 *= -1;
}
else{
vitesseY3 *= 1; vitesseY4 *= 1;
}
}
//Pour déplacer les balles dans le plan
xBalle += vitesseX;
yBalle += vitesseY;
xBalle2 += vitesseX2;
yBalle2 += vitesseY2;
xBalle3 += vitesseX3;
yBalle3 += vitesseY3;
xBalle4 += vitesseX4;
yBalle4 += vitesseY4;
}
}
一部ません:(VAR名は教師のためのフランスにあるので)、それは、コードの理解に影響を与える可能性があるので、私は、フランス人だ。ここ
は、全体のコードですそれはこの1つである必要があるとして仕事:あなたは何もより多くを必要とする場合
//collision balles/balles
//var distance entre les balles
var dist12 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle2)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle2)), 2)));
var dist13 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle3)), 2)));
var dist14 = Math.sqrt(Math.pow((parseFloat(xBalle) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle) + parseFloat(yBalle4)), 2)));
var dist23 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle3)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle3)), 2)));
var dist24 = Math.sqrt(Math.pow((parseFloat(xBalle2) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle2) + parseFloat(yBalle4)), 2)));
var dist34 = Math.sqrt(Math.pow((parseFloat(xBalle3) + parseFloat(xBalle4)), 2) + Math.pow(Math.pow((parseFloat(yBalle3) + parseFloat(yBalle4)), 2)));
//boucles if vérifiant la valeur de la distance, ainsi que les directions des balles
if(dist12 <= parseFloat(rBalle)*2){ //balles 1 et 2
if(vitesseX*vitesseX2 < 0)
{
vitesseX *= -1; vitesseX2 *= -1;
}
else{
vitesseX *= 1; vitesseX2 *= 1;
}
if(vitesseY*vitesseY2 < 0){
vitesseY *= -1; vitesseY2 *= -1;
}
else{
vitesseY *= 1; vitesseY2 *= 1;
}
}
if(dist13 <= parseFloat(rBalle)*2){ //balles 1 et 3
if(vitesseX*vitesseX3 < 0)
{
vitesseX *= -1; vitesseX3 *= -1;
}
else{
vitesseX *= 1; vitesseX3 *= 1;
}
if(vitesseY*vitesseY3 < 0){
vitesseY *= -1; vitesseY3 *= -1;
}
else{
vitesseY *= 1; vitesseY3 *= 1;
}
}
if(dist14 <= parseFloat(rBalle)*2){ //balles 1 et 4
if(vitesseX*vitesseX4 < 0)
{
vitesseX *= -1; vitesseX4 *= -1;
}
else{
vitesseX *= 1; vitesseX4 *= 1;
}
if(vitesseY*vitesseY4 < 0){
vitesseY *= -1; vitesseY4 *= -1;
}
else{
vitesseY *= 1; vitesseY4 *= 1;
}
}
if(dist23 <= parseFloat(rBalle)*2){ //balles 2 et 3
if(vitesseX2*vitesseX3 < 0)
{
vitesseX2 *= -1; vitesseX3 *= -1;
}
else{
vitesseX2 *= 1; vitesseX2 *= 1;
}
if(vitesseY2*vitesseY3 < 0){
vitesseY2 *= -1; vitesseY3 *= -1;
}
else{
vitesseY2 *= 1; vitesseY3 *= 1;
}
}
if(dist24 <= parseFloat(rBalle)*2){ //balles 2 et 4
if(vitesseX2*vitesseX4 < 0)
{
vitesseX2 *= -1; vitesseX4 *= -1;
}
else{
vitesseX2 *= 1; vitesseX4 *= 1;
}
if(vitesseY2*vitesseY4 < 0){
vitesseY2 *= -1; vitesseY4 *= -1;
}
else{
vitesseY2 *= 1; vitesseY4 *= 1;
}
}
if(dist34 <= parseFloat(rBalle)*2){ //balles 3 et 4
if(vitesseX3*vitesseX4 < 0)
{
vitesseX3 *= -1; vitesseX4 *= -1;
}
else{
vitesseX3 *= 1; vitesseX4 *= 1;
}
if(vitesseY3*vitesseY4 < 0){
vitesseY3 *= -1; vitesseY4 *= -1;
}
else{
vitesseY3 *= 1; vitesseY4 *= 1;
}
}
を教えてください。
だけ「のコードが動作していない」ではない、完全な、実行可能な例と、問題の具体的な説明を投稿してください。質問を編集してhtmlを含めることはできますか?壊れたjsを2回ポストする必要はありません。コード全体に、機能していないというコメントを追加するだけです。それが何をしているのか、何をすべきかを説明してください。ボンのチャンス! – JasonB
オブジェクトの配列を使用する方が、balle1、balle2などよりも優れています。すべての関数と変数を英語で指定することも良い習慣です。これは、オープンソースプロジェクトや他の国の人々と一緒に働いている会社で働いている場合に役立ちます。 – Tuure