2019.05.19 - Canvas를 블로그 내에서 사용할 수 있도록 수정하였습니다.
이번 글은 Html의 <canvas> 태그를 이용해 조이스틱을 만드는 것을 목표로 하고 있고, RC카에 연동하기 위해 w, a, s, d, x 등 커맨드 보내는 것을 간단히 구현하도록 하겠습니다.
1. 완성 코드
<!DOCTYPE html>
<html>
<body>
<canvas id="joy" style="border:5px dashed #BDBDBD"></canvas>
<script>
var joy = document.getElementById("joy");
joy.width = 200;
joy.height = 200;
joy.addEventListener("touchstart", down);
joy.addEventListener("touchmove", move);
joy.addEventListener("touchend", up);
joy.addEventListener("mousedown", down);
joy.addEventListener("mousemove", move);
joy.addEventListener("mouseup", up);
var ctx = joy.getContext("2d");
ctx.lineWidth = 10;
clearBackground();
drawCircle(100, 100, 50, "rgb(255,000,051)");
var startX, startY, moveX, moveY;
var joyPos = joy.getBoundingClientRect();
var onTouch = false;
function down(event) {
try {
startX = Math.round(event.touches[0].clientX - joyPos.left);
startY = Math.round(event.touches[0].clientY - joyPos.top);
} catch{
startX = Math.round(event.clientX - joyPos.left);
startY = Math.round(event.clientY - joyPos.top);
}
onTouch = true;
}
var moveMax = 40;
var msgPrev = "s";
var msg = "s";
function move(event) {
if (onTouch) {
try {
moveX = Math.round(event.touches[0].clientX - joyPos.left) - startX;
moveY = Math.round(event.touches[0].clientY - joyPos.top) - startY;
} catch{
moveX = Math.round(event.clientX - joyPos.left) - startX;
moveY = Math.round(event.clientY - joyPos.top) - startY;
}
if (moveX > moveMax) moveX = moveMax;
else if (moveX < -moveMax) moveX = -moveMax;
if (moveY > moveMax) moveY = moveMax;
else if (moveY < -moveMax) moveY = -moveMax;
clearBackground();
drawCircle(100 + moveX, 100 + moveY, 50, "rgb(255,000,051)");
if (moveX >= 40) msg = "d";
else if (moveX <= -40) msg = "a";
else if (moveY <= -40) msg = "w";
else if (moveY >= 40) msg = "x";
if (msg != msgPrev) {
send(msg);
msgPrev = msg;
}
}
}
function up() {
clearBackground();
drawCircle(100, 100, 50, "rgb(255,000,051)");
msg = "s";
msgPrev = "s";
onTouch = false;
send(msg);
}
function send(msg) {
console.log(msg);
}
function clearBackground() {
ctx.clearRect(0, 0, joy.width, joy.height);
ctx.beginPath();
ctx.strokeStyle = "rgb(153,000,051)";
ctx.arc(100, 100, 90, 0, 2 * Math.PI);
ctx.stroke();
}
function drawCircle(x, y, r, c) {
ctx.beginPath();
ctx.fillStyle = c;
ctx.arc(x, y, r, 0, 2 * Math.PI);
ctx.fill();
}
</script>
</body>
</html>2. 작동설명
해당 코드로 html 파일을 만들어 열어보면 조이스틱 모양이 보이고, 움직이면 console.log로 w, a, s, d, x 와 같은 출력을 나타냅니다.
send함수를 수정하면 droidscript에서 블루투스로 신호를 보낼 수 있습니다.
모바일 환경의 터치 이벤트와, 마우스를 이용한 클릭 이벤트를 모두 수용하기 위해 try catch문을 사용했습니다.
3. 마무리
Html/css/javascript로 만든 웹페이지는 손쉽게 Dridscript와 연동이 가능합니다. 기타 문의사항은 댓글을 남겨주세요~
* 이 글은 티스토리 카카오계정 연동정책으로 인해 이전 블로그(오코취) 글을 옮겨왔습니다.
[끝].
728x90
'소프트웨어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] 접속환경(Mobile/PC) 확인하기 (0) | 2021.01.23 |
|---|---|
| [자바스크립트] WebRTC를 이용한 카메라 사용 기초 (0) | 2021.01.23 |
| [자바스크립트] Droidscript - Tensorflow.js를 이용한 사물인식(Object Detection) (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 물체추적(Object tracking) 앱 만들기 (0) | 2021.01.23 |
| [자바스크립트] Droidscript - 카메라를 장착한 RC카 만들기 (0) | 2021.01.23 |
댓글