26 |
27 |
28 |
29 |
30 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/2d test/js/joy.js:
--------------------------------------------------------------------------------
1 | let StickStatus =
2 | {
3 | xPosition: 0,
4 | yPosition: 0,
5 | x: 0,
6 | y: 0,
7 | cardinalDirection: "C"
8 | };
9 |
10 | /**
11 | * @desc Principal object that draw a joystick, you only need to initialize the object and suggest the HTML container
12 | * @costructor
13 | * @param container {String} - HTML object that contains the Joystick
14 | * @param parameters (optional) - object with following keys:
15 | * title {String} (optional) - The ID of canvas (Default value is 'joystick')
16 | * width {Int} (optional) - The width of canvas, if not specified is setted at width of container object (Default value is the width of container object)
17 | * height {Int} (optional) - The height of canvas, if not specified is setted at height of container object (Default value is the height of container object)
18 | * internalFillColor {String} (optional) - Internal color of Stick (Default value is '#00AA00')
19 | * internalLineWidth {Int} (optional) - Border width of Stick (Default value is 2)
20 | * internalStrokeColor {String}(optional) - Border color of Stick (Default value is '#003300')
21 | * externalLineWidth {Int} (optional) - External reference circonference width (Default value is 2)
22 | * externalStrokeColor {String} (optional) - External reference circonference color (Default value is '#008000')
23 | * autoReturnToCenter {Bool} (optional) - Sets the behavior of the stick, whether or not, it should return to zero position when released (Default value is True and return to zero)
24 | * @param callback {StickStatus} -
25 | */
26 | var JoyStick = (function(container, parameters, callback)
27 | {
28 | parameters = parameters || {};
29 | var title = (typeof parameters.title === "undefined" ? "joystick" : parameters.title),
30 | width = (typeof parameters.width === "undefined" ? 0 : parameters.width),
31 | height = (typeof parameters.height === "undefined" ? 0 : parameters.height),
32 | internalFillColor = (typeof parameters.internalFillColor === "undefined" ? "#00AA00" : parameters.internalFillColor),
33 | internalLineWidth = (typeof parameters.internalLineWidth === "undefined" ? 2 : parameters.internalLineWidth),
34 | internalStrokeColor = (typeof parameters.internalStrokeColor === "undefined" ? "#003300" : parameters.internalStrokeColor),
35 | externalLineWidth = (typeof parameters.externalLineWidth === "undefined" ? 2 : parameters.externalLineWidth),
36 | externalStrokeColor = (typeof parameters.externalStrokeColor === "undefined" ? "#008000" : parameters.externalStrokeColor),
37 | autoReturnToCenter = (typeof parameters.autoReturnToCenter === "undefined" ? true : parameters.autoReturnToCenter);
38 |
39 | callback = callback || function(StickStatus) {};
40 |
41 | // Create Canvas element and add it in the Container object
42 | var objContainer = document.getElementById(container);
43 |
44 | // Fixing Unable to preventDefault inside passive event listener due to target being treated as passive in Chrome [Thanks to https://github.com/artisticfox8 for this suggestion]
45 | objContainer.style.touchAction = "none";
46 |
47 | var canvas = document.createElement("canvas");
48 | canvas.id = title;
49 | if(width === 0) { width = objContainer.clientWidth; }
50 | if(height === 0) { height = objContainer.clientHeight; }
51 | canvas.width = width;
52 | canvas.height = height;
53 | objContainer.appendChild(canvas);
54 | var context=canvas.getContext("2d");
55 |
56 | var pressed = 0; // Bool - 1=Yes - 0=No
57 | var circumference = 2 * Math.PI;
58 | var internalRadius = (canvas.width-((canvas.width/2)+10))/2;
59 | var maxMoveStick = internalRadius + 5;
60 | var externalRadius = internalRadius + 30;
61 | var centerX = canvas.width / 2;
62 | var centerY = canvas.height / 2;
63 | var directionHorizontalLimitPos = canvas.width / 10;
64 | var directionHorizontalLimitNeg = directionHorizontalLimitPos * -1;
65 | var directionVerticalLimitPos = canvas.height / 10;
66 | var directionVerticalLimitNeg = directionVerticalLimitPos * -1;
67 | // Used to save current position of stick
68 | var movedX=centerX;
69 | var movedY=centerY;
70 |
71 | // Check if the device support the touch or not
72 | if("ontouchstart" in document.documentElement)
73 | {
74 | canvas.addEventListener("touchstart", onTouchStart, false);
75 | document.addEventListener("touchmove", onTouchMove, false);
76 | document.addEventListener("touchend", onTouchEnd, false);
77 | }
78 | else
79 | {
80 | canvas.addEventListener("mousedown", onMouseDown, false);
81 | document.addEventListener("mousemove", onMouseMove, false);
82 | document.addEventListener("mouseup", onMouseUp, false);
83 | }
84 | // Draw the object
85 | drawExternal();
86 | drawInternal();
87 |
88 | /******************************************************
89 | * Private methods
90 | *****************************************************/
91 |
92 | /**
93 | * @desc Draw the external circle used as reference position
94 | */
95 | function drawExternal()
96 | {
97 | context.beginPath();
98 | context.arc(centerX, centerY, externalRadius, 0, circumference, false);
99 | context.lineWidth = externalLineWidth;
100 | context.strokeStyle = externalStrokeColor;
101 | context.stroke();
102 | }
103 |
104 | /**
105 | * @desc Draw the internal stick in the current position the user have moved it
106 | */
107 | function drawInternal()
108 | {
109 | context.beginPath();
110 | if(movedX