I need to rotate the rotateTan to rotate when shift key is pressed. Eveything else in the JS works just not the rotating of the shapes when shift and click are pressed.
I need to rotate the rotateTan to rotate when shift key is pressed. Eveything else in the JS works just not the rotating of the shapes when shift and click are pressed.
Computer Networking: A Top-Down Approach (7th Edition)
7th Edition
ISBN:9780133594140
Author:James Kurose, Keith Ross
Publisher:James Kurose, Keith Ross
Chapter1: Computer Networks And The Internet
Section: Chapter Questions
Problem R1RQ: What is the difference between a host and an end system? List several different types of end...
Related questions
Question
I need to rotate the rotateTan to rotate when shift key is pressed. Eveything else in the JS works just not the rotating of the shapes when shift and click are pressed.
!["use strict";
2
3
// Reference to the tangram puzzle board
let puzzleBoard = document.getElementById ("puzzle");
// Counter for the zIndex style of each puzzle piece
let zCounter = 1;
7
8.
let eventX, eventY, tanX, tanY;
10
// Function to rotate a tan by a specified number of degrees
function rotateTan(elem, deg) {
11
12
const obj = window.getComputedStyle(elem, null);
const matrix = obj.getPropertyValue("transform");
let angle = 0;
if (matrix !== "none") {
const values = matrix.split('(') [1].split(')') [0].split(',');
const a = values [0];
const b = values [1];
ang le = Math.round (Math.atan2(b, a) * (180/Math.PI));
13
14
15
16
17
18
19
20
21
22
23
if (angle < 0) {
|ang le += 360;
24
25
26
let newAngle = angle + deg;
27
28
29
elem.style.transform = "rotate(" + newAngle + "deg)";
30
31
// Node list representing the tangram pieces
let tans = document.querySelectorAll("div#puzzle > img");
32
33
34
// for loop
for(let items of tans) {
35
36
37
items.addEventListener("pointerdown", grabTan);
}
38
39
// if else
function grabTan(e) {
if (e.shiftKey) {
e.target.parentElement.removeChild(e.target);
rotateTan();
} else
eventX = e.clientX;
40
41
42
43
44
45
46
47
eventY = e.clientY;
48
e.target.style.touchAction = "none";
49
zCounter++;
50
e.target.style.zIndex = zCounter;
51
52
tanX = e.target.offsetLeft;
53
tanY = e.target.offsetTop;
54
55
56
e.target.addEventListener("pointermove", moveTan);
e.target.addEventListener("pointerup", dropTan);
57
58
59
60
}
61
62
function moveTan (e) {
63
let diffX = e.clientX - eventX;
64
let diffy = e.clientY
- eventY;
65
e.target.style.left = tanX + diffX + "px";
e. target.style.top = tanY + diffY + "px";
66
67
68
69
}
70
function dropTan(e) {
e.target.removeEventListener("pointermove", moveTan);
e. target.removeEventListener("pointerup", dropTan);
71
72
73
74
75
}](/v2/_next/image?url=https%3A%2F%2Fcontent.bartleby.com%2Fqna-images%2Fquestion%2F8f399ba7-b009-4644-8bcd-a13b6a8c4ed8%2F7063d6e4-958d-4640-b87b-d7b27145f570%2Fej0nah8_processed.png&w=3840&q=75)
Transcribed Image Text:"use strict";
2
3
// Reference to the tangram puzzle board
let puzzleBoard = document.getElementById ("puzzle");
// Counter for the zIndex style of each puzzle piece
let zCounter = 1;
7
8.
let eventX, eventY, tanX, tanY;
10
// Function to rotate a tan by a specified number of degrees
function rotateTan(elem, deg) {
11
12
const obj = window.getComputedStyle(elem, null);
const matrix = obj.getPropertyValue("transform");
let angle = 0;
if (matrix !== "none") {
const values = matrix.split('(') [1].split(')') [0].split(',');
const a = values [0];
const b = values [1];
ang le = Math.round (Math.atan2(b, a) * (180/Math.PI));
13
14
15
16
17
18
19
20
21
22
23
if (angle < 0) {
|ang le += 360;
24
25
26
let newAngle = angle + deg;
27
28
29
elem.style.transform = "rotate(" + newAngle + "deg)";
30
31
// Node list representing the tangram pieces
let tans = document.querySelectorAll("div#puzzle > img");
32
33
34
// for loop
for(let items of tans) {
35
36
37
items.addEventListener("pointerdown", grabTan);
}
38
39
// if else
function grabTan(e) {
if (e.shiftKey) {
e.target.parentElement.removeChild(e.target);
rotateTan();
} else
eventX = e.clientX;
40
41
42
43
44
45
46
47
eventY = e.clientY;
48
e.target.style.touchAction = "none";
49
zCounter++;
50
e.target.style.zIndex = zCounter;
51
52
tanX = e.target.offsetLeft;
53
tanY = e.target.offsetTop;
54
55
56
e.target.addEventListener("pointermove", moveTan);
e.target.addEventListener("pointerup", dropTan);
57
58
59
60
}
61
62
function moveTan (e) {
63
let diffX = e.clientX - eventX;
64
let diffy = e.clientY
- eventY;
65
e.target.style.left = tanX + diffX + "px";
e. target.style.top = tanY + diffY + "px";
66
67
68
69
}
70
function dropTan(e) {
e.target.removeEventListener("pointermove", moveTan);
e. target.removeEventListener("pointerup", dropTan);
71
72
73
74
75
}
Transcribed Image Text:// if else
function grabTan(e) {
if (e.shiftKey) {
e.target.parentElement.removeChild(e.target);
rotateTan();
} else {
eventX =
e.clientX;
eventY = e.clientY;
e.target.style.touchAction = "none";
zCounter++;
e.target.style.zIndex = zCounter;
tanX = e.target.offsetLeft;
tanY = e.target.offsetTop;
e.target.addEventListener("pointermove", moveTan);
e. target.addEventListener("pointerup", dropTan);
}
Expert Solution
This question has been solved!
Explore an expertly crafted, step-by-step solution for a thorough understanding of key concepts.
This is a popular solution!
Trending now
This is a popular solution!
Step by step
Solved in 2 steps
Recommended textbooks for you
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Computer Networking: A Top-Down Approach (7th Edi…
Computer Engineering
ISBN:
9780133594140
Author:
James Kurose, Keith Ross
Publisher:
PEARSON
Computer Organization and Design MIPS Edition, Fi…
Computer Engineering
ISBN:
9780124077263
Author:
David A. Patterson, John L. Hennessy
Publisher:
Elsevier Science
Network+ Guide to Networks (MindTap Course List)
Computer Engineering
ISBN:
9781337569330
Author:
Jill West, Tamara Dean, Jean Andrews
Publisher:
Cengage Learning
Concepts of Database Management
Computer Engineering
ISBN:
9781337093422
Author:
Joy L. Starks, Philip J. Pratt, Mary Z. Last
Publisher:
Cengage Learning
Prelude to Programming
Computer Engineering
ISBN:
9780133750423
Author:
VENIT, Stewart
Publisher:
Pearson Education
Sc Business Data Communications and Networking, T…
Computer Engineering
ISBN:
9781119368830
Author:
FITZGERALD
Publisher:
WILEY