zeyu2001 / chess-ai

Simple chess AI in JavaScript. Uses the chess.js and chessboard.js libraries.
https://zeyu2001.github.io/chess-ai
MIT License
237 stars 100 forks source link

Mobile Play #9

Open ericborgos opened 1 year ago

ericborgos commented 1 year ago

I created a page on my site at https://boredhumans.com/chess.php using your program, but it is hard to get the pieces to move on my iPhone. I can't drag them like on PC, I have to click the piece first (which then makes a giant sized version of it pop up which I then have to click again get off the screen) and then click where I want it to go. Any suggestions on how to improve that?

hahmann1979 commented 2 weeks ago

Hi,

Add the code below at the beginning of the main.js file :

function touchHandler(event) { var touch = event.changedTouches[0];

var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent({
    touchstart: "mousedown",
    touchmove: "mousemove",
    touchend: "mouseup"
}[event.type], true, true, window, 1,
    touch.screenX, touch.screenY,
    touch.clientX, touch.clientY, false,
    false, false, false, 0, null);

touch.target.dispatchEvent(simulatedEvent);
event.preventDefault();

}

function init() { var d = document.querySelectorAll("#myBoard"); for (var i = 0; i < d.length; i++) { d[i].addEventListener("touchstart", touchHandler, true); d[i].addEventListener("touchmove", touchHandler, true); d[i].addEventListener("touchend", touchHandler, true); d[i].addEventListener("touchcancel", touchHandler, true); } }

and at the of the file add : init();

Should work now on mobile devices.....