0

私はカーン アカデミーで JavaScript を学んでいて、ラジオ タイプ ボタンの作成に助けが必要です。このコードでは、html タグを使用しないことをお勧めします。

私は最初、mouseX と mouseY の動きに合わせて動く絵文字を持っていました。ただし、ボタン機能を追加した後 (機能します)、絵文字は機能しません。どちらか一方のケースのようです。両方が機能するようにコードを並べ替える方法はありますか?

基本的に、mouseX と mouseY (マウスの X、Y 位置) で移動する絵文字が必要で、クリックされたボタンに応じて、絵文字の上部または下部に円を追加するボタン機能を追加できます。円を追加した後も絵文字を動かせるようにしたいです。右下の 2 つの長方形はボタンです。白い円は絵文字で、背景はピンクの円とピンクの空白の画面です。

描画内、描画外、または drawEmoji 内の mouseClicked のさまざまな組み合わせでコードを並べ替えてみました。しかし、これまでのところ、私が探しているものを私に与える方法に偶然出会ったことはありません. 純粋にjavascriptを使用してこれを行うことは可能ですか? ティア

編集：

これまでの私のコードは次のとおりです。

var x = 250;
var y = 300;
var btnwidth = 100;
var btnheight = 30;

//to highlight the button that is pressed
var highlightbox = function(hix, hiy, hiw, hih) {
 noFill();
 stroke(56, 247, 8);
 strokeWeight(5);
 rect(hix, hiy, hiw, hih);
};

//outer circle of the emoji face, the idea was for it to move along with the mouse but now it doesn't
var X = constrain(mouseX, 190, 210);
var Y = constrain(mouseY, 115, 140);
var W = 160;
var H = W;
var drawEmoji = function() {
    var X = constrain(mouseX, 190, 210);
    var Y = constrain(mouseY, 115, 140);
    var W = 160;
    var H = W;
    fill(247, 242, 242);
    stroke(0, 51, 255);
    strokeWeight(3);
    ellipse(X,Y,W,H);
};

//background behind the emoji
var drawBackground = function() {
 background(250, 187, 187);
 fill(191, 130, 130);
 stroke(255, 0, 0);
 strokeWeight(3);
 ellipse(200,200,400,400);

 fill(247, 207, 247);
 rect(x, y, btnwidth, btnheight);
 fill(173, 207, 250);
 rect(x, y+50, btnwidth, btnheight);

};

drawBackground();
drawEmoji();

var draw = function() {
 //mouse click function for the button, when it's clicked a circle appears on the emoji
 mouseClicked = function(){
    drawBackground();
    drawEmoji();

    if (mouseX > x && mouseX < (x + btnwidth) && mouseY > y && mouseY < (y + btnheight)) {
        highlightbox(x, y, btnwidth, btnheight);
        stroke(68, 0, 255);
        fill(247, 207, 247);
        ellipse(X - 49,Y - 50,W/3,H/3);
    }
    else if (mouseX > x && mouseX < (x + btnwidth) && mouseY > y + 50 && mouseY < (y + 50 + btnheight)) {
        highlightbox(x, y + 50, btnwidth, btnheight);
        stroke(68, 0, 255);
        fill(173, 207, 250);
        ellipse(X+1,Y+100,W/3,H/3);
    }

 };

};
4

1 に答える 1

0

この質問は 6 か月前のものですが、Khan で、ここに投稿したものからコードを変更していないことに気付きました。だから、あなたはまだそれを終わらせたいと思うかもしれないと思います.

それを修正するための特定のコードを提供するつもりはありません (それはあなたの仕事です!) が、ここにいくつかの指針があります。

まず、mouseClicked 関数を draw 関数の外に移動し、draw 関数を完全に削除する必要があります。draw 関数は、定義されている場合、継続的に呼び出され、マウス操作が行われない場合でもアニメーションを目的としています。現在、マウスで何らかのアクションが行われたときにのみ描画する必要があります。連続で描くのはやり過ぎ！

次に、グローバル変数を追加して、円を描く必要があるかどうかを示します。描く必要がある場合は、上か下かを示します。mouseClicked 関数では、円を描画してはなりません。この変数を本来あるべき値に設定し、背景と絵文字の 2 つの描画関数を呼び出すだけです。

mouseMoved 関数を追加して、描画関数を呼び出します。

絵文字の描画関数で、グローバル変数をテストして、どこに円を描画するか (または描画しないか) を決定します。

于 2016-02-08T09:07:54.083 に答える