ドラッグ&ドロップで要素を表示したい

前提・実現したいこと

p5jsを使用しています。
ピンク色の正方形をドラッグして白の正方形の枠にドロップすると、ピンク色の正方形は消えて白の正方形の枠の色が変わるようにプログラムしたいです。
授業の関係で急にプログラミングに触れることになり、まだプログラミング言語に関して何もわかっていない状態です。
コードを教えていただけると助かります。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

var x;
var by;
//var boxSize = 120;
var boxSize = 40
var overBox = false;
var locked = false;
var rect1;
var xOffset = 0.0;
var yOffset = 0.0;
var button;
//var img;
//var img2;
//var img3;

function setup() {
//createCanvas(1500,200);
createCanvas(720, 400);
bx = width/1.35;
by = height/6.6;
rectMode(RADIUS);
strokeWeight(2);
rect(100,100,200,300)
//img = loadImage("rayout5-2.1500px.png");
//img2 = loadImage("rayout5@300x-8.JPG");
//img3 = loadImage("rayout5300x-8.png");

}

function draw() {
//image(img,0,0);
background(237,34,93);

//枠
fill(255);
strokeWeight(0.5);
stroke(140);
rect(100, 100, 50, 51);

// Test if the cursor is over the box
if (mouseX > bx-boxSize && mouseX < bx+boxSize &&
mouseY > by-boxSize && mouseY < by+boxSize) {
overBox = true;
if(!locked) {
stroke(255);
fill(244,122,158);
}
} else {
stroke(156,39,176);
fill(244,122,158);
overBox = false;
}

// Draw the box
rect(bx, by, boxSize, boxSize);
//image(img2, bx, by, boxSize, boxSize);
}

function mousePressed() {
if(overBox) {
locked = true;
fill(255, 255, 255);
} else {
locked = false;
}
xOffset = mouseX-bx;
yOffset = mouseY-by;

}

function mouseDragged() {
if(locked) {
bx = mouseX-xOffset;
by = mouseY-yOffset;
}
}

function mouseReleased() {
if (mouseX > 100 && mouseX < 150 &&
mouseY > 100 && mouseY < 151) {
overBox = true;
if(!locked) {
fill(244, 122, 158);
strokeWeight(0.5);
stroke(140);
rect(100, 100, 50, 51);
}
}else{
stroke(156,39,176);
fill(244,122,158);
rect(bx, by, boxSize, boxSize);

locked = false;

}
} ```Javascript
p5js


### 試したこと



### 補足情報（FW/ツールのバージョンなど）

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

回答1件

ベストアンサー

こんにちは、以下のような感じで出来ると思います。
どうでしょうか？

Javascript
1var x;
2var by;
3//var boxSize = 120;
4var boxSize = 40;
5var overBox = false;
6var locked = false;
7var rect1;
8var xOffset = 0.0;
9var yOffset = 0.0;
10var button;
11//var img;
12//var img2;
13//var img3;
14
15//新しく追加した変数
16var dropped = false;
17var waku_color = 255;
18
19function setup() {
20    //createCanvas(1500,200);
21    createCanvas(720, 400);
22    bx = width / 1.35;
23    by = height / 6.6;
24    rectMode(RADIUS);
25    strokeWeight(2);
26    rect(100, 100, 200, 300);
27    //img = loadImage("rayout5-2.1500px.png");
28    //img2 = loadImage("rayout5@300x-8.JPG");
29    //img3 = loadImage("rayout5300x-8.png");
30}
31
32function draw() {
33    //image(img,0,0);
34    background(237, 34, 93);
35
36    //枠
37    fill(waku_color);
38    strokeWeight(0.5);
39    stroke(140);
40    rect(100, 100, 50, 51);
41
42    // Test if the cursor is over the box
43    if (mouseX > bx - boxSize && mouseX < bx + boxSize && mouseY > by - boxSize && mouseY < by + boxSize) {
44        overBox = true;
45        if (!locked) {
46            stroke(255);
47            fill(244, 122, 158);
48        }
49    } else {
50        stroke(156, 39, 176);
51        fill(244, 122, 158);
52        overBox = false;
53    }
54
55    // Draw the box
56    if (dropped) {
57        //白の正方形の枠にドロップされた場合、ピンク色の正方形は描写しない。
58    } else {
59        //ピンク色の正方形を描写
60        rect(bx, by, boxSize, boxSize);
61    }
62    //image(img2, bx, by, boxSize, boxSize);
63}
64
65function mousePressed() {
66    if (overBox) {
67        locked = true;
68        fill(255, 255, 255);
69    } else {
70        locked = false;
71    }
72    xOffset = mouseX - bx;
73    yOffset = mouseY - by;
74}
75
76function mouseDragged() {
77    if (locked) {
78        bx = mouseX - xOffset;
79        by = mouseY - yOffset;
80    }
81}
82
83function mouseReleased() {
84    if (mouseX > 100 && mouseX < 150 && mouseY > 100 && mouseY < 151) {
85        overBox = true;
86
87        //白の正方形の枠にドロップされた判定
88        dropped = true;
89        //白の正方形の枠を変更する色
90        waku_color = 0;
91
92        if (!locked) {
93            fill(244, 122, 158);
94            strokeWeight(0.5);
95            stroke(140);
96            rect(100, 100, 50, 51);
97        }
98    } else {
99        stroke(156, 39, 176);
100        fill(244, 122, 158);
101        rect(bx, by, boxSize, boxSize);
102
103        locked = false;
104    }
105}