Hello,
I’m very new to developing and am stuck on how to load a chip in a connect 4 game. Right now, anywhere I click on the game board is where the chip is drawn. How do I get to draw to the bottom of the column?
{
//context.drawImage(knockout, 7 * 150, 7 * 150);
var pat = context.createPattern(knockout, "repeat");
context.rect(0, 0, 1050, 1050);
context.fillStyle=pat;
context.fill();
redChip = new Image();
redChip.onload = function()
{
//context.drawImage(redChip, 0, 446);
};
redChip.src = "red.png";
yellowChip = new Image();
yellowChip.onload = function()
{
//context.drawImage(yellowChip, 300, 296);
};
yellowChip.src = "yellow.png";
};
knockout.src = "knockout.png";
myCanvas.addEventListener("click", getPosition, true);
function getClickPosition()
{
var parentPosition = getPosition(e.currentTarget);
var xPosition = e.clientX - parentPosition.x;
var yPosition = e.clientY - parentPosition.y;
}
function getPosition(evt)
{
console.log("Column", parseInt(evt.clientX / 150) + 1)
console.log("Row", parseInt(evt.clientY / 150) + 1)
var coinColPos = parseInt(evt.clientX / 150);
var coinRowPos = parseInt(evt.clientY / 150);
if (isYellow)
context.drawImage(yellowChip, coinColPos * 150, coinRowPos * 148);
else
context.drawImage(redChip, coinColPos * 150, coinRowPos * 148);
//isYellow = !isYellow;
if (isYellow)
isYellow = false;
else
isYellow = true;
//______________________________________________________Player Info
var playerOneSpaces = {};
var playerTwoSpaces = {};
var playerOneCanvas = document.getElementById("player-one");
var playerTwoCanvas = document.getElementById("player-two");
//________________________________________________________game board array
var availableSpaces = [7, 7, 7, 7, 7, 7, 7];
var turnCount = 1; //which color goes first
//track the cursor to determine the column, divide the area by the number of rows
//and figure out the position based on the size of the chip, and draw a new chip there
function drawChip(col, row, chipColor)
{
var clientX = (canvas.width / 7) * (col - 1) - settings.chip.diameter / 2 - settings.chip.padding,
clientY = canvas.height - ((canvas.height / 7) * (row - 1) - settings.chip.diameter / 2 - settings.chip.padding);
switch(chip)
{
case chip.red.chip:
drawChip(clientX, clientY, chip.red.fill, chip.red.stroke);
break;
case chip.yellow.chip:
drawChip(clientX, clientY, chip.yellow.fill, chip.yellow.stroke);
break;
default:
drawChip(clientX, clientY, settings.knockoutBackground, settings.knockoutBackground);
// determine which column was clicked______________________________
function getColumn(evt)
{
var rect = canvas.getBoundingClientRect(),
x = evt.clientX - rect.left;
return Math.floor(x / (settings.chip.diameter + (settings.chip.padding * 2)));
}
function reset()
{
context.clearRect(0, 0, canvas.width, canvas.height);
}
function checkUp(row, col)
{
var count = 0;
if (cells[row][col] != '')
{
for (var offset = 1; offset < settings.target; offset++)
{
if (cells[row + offset][col] != cells[row][col])
return;
count++;
}
}
if (count == settings.target - 1)
winner = cells[row][col];
}
}
}
}
</script>
