มาฝึกเขียน JavaScript กันเถอะ
ในตัวอย่างนี้เมื่อคลิกที่ปุ่ม Click Me กรอบสี่เหลี่ยมสีแดงจะเคลื่อนจากตำแหน่งบนซ้าย ไปยังมุมล่างขวา ซึ่งถูกกำหนดพิกัดไว้ที่ 350
if(!pX) pX=350;
if(!pY) pY=350;
if(posY < pY) posY++;
if(posX < pX) posX++;
elem.style.top = posY + 'px';
elem.style.left = posX + 'px';
และในพื้นที่สีเหลืองนี้ ได้กำหนดคำสั่ง OnClick เอาไว้เพื่อให้กรอบสีแดงเคลื่อนไปยังจุดที่คลิก
<div id ="container" onclick="sendPos(event)">
ในฟังก์ชั่น sendPos() จะรับค่า event ที่ได้จาก onclick และรับค่าตำแหน่ง offsetX, offsetY เพื่อส่งไปยังฟังก์ชั่น myMove() เพื่อเคลื่อนย้ายสีเหลี่ยมสีแดงไปยังตำแหน่งที่คลิก
function sendPos(event){
myMove(event.offsetX , event.offsetY );
}
สังเกตุว่าการเคลื่อนย้ายจะไม่เป็นเส้นตรง เพราะตำแหน่ง X และ Y ไม่เท่ากัน ดังนั้นเมื่อถึงตำแหน่งแนวไหนก่อน ก็จะเคลื่อนไปอีกแนวเท่านั้น
แนวทางการปรับปรุงโค้ดให้การเคลื่อนที่เป็นเส้นตรง
ยกตัวอย่าง x = 78 , y = 264ให้ยึดค่าที่มากกว่าเป็นหลัก นั่นคือแกน y จะขยับอยู่ 264 ครั้ง
ดังนั้น ต้องนำค่าแกน x มาเฉลี่ยให้ได้ 264 ครั้งด้วยสูตร
min / max นั่นก็คือ 78 / 264 = 0.295
ซึ่งถ้าคูณกลับ 0.295 * 264 = 77.88 ซึ่งยังไม่ครบตำแหน่งจริงคือ 78
ดังนั้นจะมีการขยับอีกครั้ง 77.88 + 0.295 จะกลายเป็น 78.175
จะเห็นว่าเลยตำแหน่งจริงไป 0.175
ดังนั้น ต้องตรวจสอบว่าถ้าเลยตำแหน่งจริงเมื่อไหร่ต้องกำหนดให้เท่าตำแหน่งจริง
รายละเอียด
ตัวอย่างโค้ด JavaScript ทั้งหมด
<!DOCTYPE html>
<html>
<style>
#container {
width: 400px;
height: 400px;
position: relative;
background: yellow;
}
#animate {
width: 50px;
height: 50px;
position: absolute;
background-color: red;
}
</style>
<body>
<p>
<button onclick="myMove()">Click Me</button>
</p>
<p><span id="debug"></span> || <span id="current"></span></p>
<div id ="container" onclick="sendPos(event)">
<div id ="animate"></div>
</div>
<script>
function myMove(pX, pY) {
if(!pX) pX=350;
if(!pY) pY=350;
document.getElementById("debug").innerHTML = pX + " : " + pY;
var elem = document.getElementById("animate");
var posX = 0;
var posY = 0;
var id = setInterval(frame, 5);
function frame() {
if (posX >= pX && posY >= pY) {
clearInterval(id);
} else {
if(posY < pY) posY++;
if(posX < pX) posX++;
elem.style.top = posY + 'px';
elem.style.left = posX + 'px';
document.getElementById("current").innerHTML = posX + " : " + posY;
}
}
}
function sendPos(event){
myMove(event.offsetX , event.offsetY );
}
</script>
</body>
</html>
--------------------------
อ้างอิง
JavaScript HTML DOM Animation
https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3
How do I get the coordinates of a mouse click on a canvas element?
https://stackoverflow.com/questions/55677/how-do-i-get-the-coordinates-of-a-mouse-click-on-a-canvas-element
