我目前正在尝试将跳棋游戏(没有AI)作为帮助我学习JS和HTML事件和动画的东西。这是功课。如果这是其他地方已经解决的问题,请原谅我并指出我正确的方向。
这是此问题的相关代码:
canvas = document.getElementById('board');
canvas.addEventListener('click', funcMovePiece);
function funcMovePiece(event)
{
var legalMove = false;
var DXClick = 0;
var DYClick = 0;
var Drow = 0;
var Dcol = 0;
var pieceColor;
//First Click
var SXClick = event.pageX;
var SYClick = event.pageY;
var Scol = parseInt(SXClick / 100);
var Srow = parseInt(SYClick / 100);
canvas.addEventListener('click', funcGetSecondClick);
//Problem: First click gives me SX and SY, then skips this function. Browser finishes interpreting.
//Second click skips SX and SY (leaving them undefined) and triggers this function. Browser finishes interpreting.
function funcGetSecondClick(event)
{
//Second Click
DXClick = event.pageX;
DYClick = event.pageY;
Dcol = parseInt(DXClick / 100);
Drow = parseInt(DYClick / 100);
}
通过col(umn)和row,我的意思是8x8 2D数组中的列和行。 2组行和列变量最终将用作条件语句的索引。如果它被认为是相关的,我可以包括我的其余代码。我有一个名为的jquery链接。 我遇到的问题是,一旦点击第一部分并触发点击事件,它就完全跳过第二次点击事件。 DXClick和DYClick的我的X和Y没有被更改。如果我再次单击,它会重新解释该程序,进入第二次单击事件功能,使SXClick和SYClick未定义。 S代表Source并表示第一次单击,而D代表destination并表示第二次单击。我的意图是有人可以点击一个棋子,然后点击一个空的红色方块。该程序确定它是否合法移动并移动该部分(尚未在代码中获得那么远)。
答案 0 :(得分:1)
canvas = document.getElementById('board');
canvas.addEventListener('click', funcMovePiece);
function funcMovePiece(event)
{
var legalMove = false;
var DXClick = 0;
var DYClick = 0;
var Drow = 0;
var Dcol = 0;
var pieceColor;
//First Click
var SXClick = event.pageX;
var SYClick = event.pageY;
var Scol = parseInt(SXClick / 100);
var Srow = parseInt(SYClick / 100);
alert('first click');
canvas.removeEventListener('click', funcMovePiece);
canvas.addEventListener('click', funcGetSecondClick);
}
function funcGetSecondClick(event)
{
alert('second click');
DXClick = event.pageX;
DYClick = event.pageY;
Dcol = parseInt(DXClick / 100);
Drow = parseInt(DYClick / 100);
canvas.removeEventListener('click',funcGetSecondClick);
canvas.addEventListener('click', funcMovePiece);
}