mouseClicked関数でマウス制御

JavaScriptのProcessing版の、
p5.jsを利用しています。

以外のプログラムの動きを
マウスで制御できるようにしたいです。

マウスクリックで点(アニメーション)が止まり、もう一度クリックすると動き出すようにして、mouseClicked関数を使わなきゃいけないです。

分かる方いたら教えてください。

<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js">

        /*p5.js使用*/
    </script>
</head>

<body>
    <script>
        var x, y, stage, photo;
        //グローバル関数にしておく
        x = 350;
        y = 250;

        function setup() { //はじめの1回だけ実行
            createCanvas(640, 480);
            photo = loadImage("siro.jpg"); //背景
            frameRate(100); //速さ10
            ugoki = 1;
        }

        function draw() {

            //if (flag) { // if (flag==true)と同じ

            if (ugoki <= 3) { //動き(ugoki)が3になるまで
                image(photo, 0, 0, width, height); //背景
                line(50, 250, 350, 250);
                line(350, 250, 350, 100);
                line(350, 100, 250, 100);
                line(250, 100, 50, 250); //四角ライン
                fill(100); //三角形の背景(灰色)
                triangle(50, 250, 350, 250, x, y); //三角形

                //   }

                switch (ugoki) {
                    case 1: //1回目の動き
                        if (y >= 100) {
                            y--;
                            break;
                        }
                        ugoki++; //1→2
                    case 2: //2回目の動き
                        if (x >= 250) {
                            x--;
                            break;
                        }
                        ugoki++; //2→3
                    case 3: //3回目の動き
                        if (x >= 50 && y <= 250) {
                            x = x - 1.3;
                            y++;
                            break;
                        }
                        ugoki++; //3→4(上のifで3までの条件指定のため動か
ない)
                }

                //               function mouseClicked() { // if (flag)
{ // flag = true; // } else { // flag = false; // } // }

            }
        }

        //2.(1)のプログラムをマウスで制御できるようにせよ
        //マウスクリックで点(アニメーション)が止まり、もう一度クリックす
ると動き出すようにせよ。mouseClicked関数を用いること。35~40行程度ででき
る。
    </script>

</body>

</html>

よろしくお願い致します。

行動規範の内容に同意します

回答2件

ベストアンサー

「mouseClickedってどう利用すればいいの？」という点がお判りではないのだろうと推測します。

簡単なサンプルを挙げてみます。これはマウスクリックの度に"clicked"というテキストを表示するものですが、どんな感じに書けばよいかつかめるのではないでしょうか？

Javascript
1let y = 10, clicked = false
2
3function setup() {
4  createCanvas(400, 400);
5}
6
7function draw() {
8  if (clicked) {
9    text("clicked", 5, y)
10    y += 12
11    clicked = false
12  }
13}
14
15// マウスがクリックされたらp5.jsが自動的に
16// この関数(mouseClicked)を呼び出してくれるのです。
17function mouseClicked() {
18  clicked = true
19}

投稿2018/03/21 13:41

KSwordOfHaste

総合スコア18394

退会済みユーザー

2018/03/22 18:00

ありがとうございます！お返事を自己解決の部分に書かせていただきました。よろしくお願いします(;_;)

KSwordOfHaste

2018/03/22 23:27

疑問点、問題、自分の課題はあくまで質問欄に書くべきということにご注意ください。 (1)質問したかったことが質問文に充分かけていなかったことに気づいた場合 =>質問を編集して追記しましょう (2)質問したかったことの一部は解決したが最終的な目標（コードを書く、動かす）に至らなかった場合 =>質問者さんにはクリアすべき疑問・課題が複数あったということです。この場合、(1)と同様未解決の部分を質問欄に追記するか、新たな質問を挙げるかどちらかにすべきです。一つの質問の中でどこまでの内容を尋ねたらよいか一概にはいえないのですが、個人的意見としては本件は複数のトピックが含まれているような気がするので自己解決欄に書いておられることは新たに質問を挙げた方がよい気がします。また質問を挙げる際には「自分がどこまで理解しているか」「どこが理解できない点なのか」もっと詳しく書いた方がよいと思います。「ここまでの何が違うのかが分かりません( ;;) 」これだと「具体的にどこがわからないのか」曖昧な印象です。

退会済みユーザー

2018/03/23 05:04

そうなのですね。すみません。まだ始めたばかりで何も分からなくて、、、そのようにさせて頂きます。勉強になりました。本当にありがとうございます。

行動規範の内容に同意します

先ほど間違えた内容をこちらに書いてしまったため、
修正して分かった結果を回答します。

<script>
        var x, y, stage, photo, ugoki;
        x = 350;
        y = 250;
        clicked = true; //はじめに指定②

        function setup() { //はじめの1回だけ実行

            createCanvas(640, 480);
            photo = loadImage("siro.jpg"); //背景
            frameRate(100); //速さ100
            ugoki = 1;

        }

        function draw() {

            if (ugoki <= 3) { //動き(ugoki)が3になるまで　//〇
                image(photo, 0, 0, width, height); //背景
                line(50, 250, 350, 250);
                line(350, 250, 350, 100);
                line(350, 100, 250, 100);
                line(250, 100, 50, 250); //四角ライン
                fill(100); //三角形の背景(灰色)
                triangle(50, 250, 350, 250, x, y); //三角形

                switch (ugoki) { // ugoki=1 //▲
                    case 1:
                        if (y >= 100) {
                            if (clicked) { // if (clicked==true)と同じ。②
                                y--;
                            }
                            break;
                            //ここを通らない
                            ugoki++; //ugoki=2
                        }
                    case 2:
                        //ugoki == 1 でもy > 100 だとここを通る
                        if (x >= 250) {
                            // if (clicked) {
                            x--;
                            // }
                            break;
                        }
                        ugoki++; //ugoki=3
                    case 3:
                        //ugoki == 1 でも、y > 100かつx<250 だとここを通る
                        //ugoki == 2 でも、x<250 だとここを通る
                        if (x >= 50 && y <= 250) {
                            //  if (clicked) {
                            x = x - 1.3;
                            y++;
                            // }
                            break;
                        }
                        ugoki++; //ugoki=4(上のifで3までの条件のため動かない)
                } //▲

            } //〇
        }

        function mouseClicked() { //クリックで呼び出される②
            if (clicked) {
                clicked = false;
            } else {
                clicked = true;
            }
        }


    </script>

投稿2018/03/22 17:58

編集2018/03/25 11:07

退会済みユーザー

総合スコア0