Made fifteen in JavaScript. I would like JavaScript programmers to point out my mistakes. My code works fine. I made fifteen using a two-dimensional array and a one-dimensional array. The function for determining the winner in a simplified form. How can I make the function for determining the winner more correctly?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>javascript Canvas 15taggame</title>
<style>
body
{
text-align: center;
}
#my_canvas
{
border: 2px solid green;
background-color: lightblue;
}
</style>
</head>
<body>
<h1>javascript Canvas 15taggame</h1>
<p>javascript Canvas 15taggame</p>
<canvas id="my_canvas"></canvas>
<br>
<br>
<div id="coord"></div>
<br>
<br>
<span>CoordMouse: X - <tt id="myX">0</tt> --- Y - <tt id="myY">0</tt></span>
<script>
var canvas = document.getElementById('my_canvas');
// set native size of the canvas
canvas.width = 800;
canvas.height = 500;
const mouse = { x:0, y:0}; // координаты мыши
var ctx = canvas.getContext("2d");
let SPACE_SIZE = 100;
let limit = 4;
let arrVal = [];
let arr15_02 = [];
let arr___03 = [];
let array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];
shufleArray();
rect =
{
startX: 1,
startY: 1,
w: 400,
h: 400
}
// randomize (shuffle) array
function shufleArray()
{
for (var i = 0; i < 10; i++)
{
array.sort(()=> Math.random() - 0.5);
}
for (var i = 0; i < array.length; i += limit)
{
arr___03.push(array.slice(i, i + limit));
}
return arr___03;
}
//Filling the array
for(i = 0; i < 4; i++)
{
arr15_02[i] = [];
for(j = 0; j < 4; j++)
{
arr15_02[i][j] = arr___03[i][j];
arrVal.push(arr15_02[i][j]);
}
}
console.log("arrVal: " + arrVal);
draw();
buildBoard();
//Building a board
function buildBoard()
{
for(i = 0; i < 4; i++)
{
arr15_02[i] = [];
for(j = 0; j < 4; j++)
{
arr15_02[i][j] = arr___03[i][j];
drawSquare(j * SPACE_SIZE, i * SPACE_SIZE, arr15_02[i][j]);
}
}
}
//----------------------------------------------------------
//Draw a grid
function draw()
{
ctx.beginPath();
ctx.rect(rect.startX, rect.startY, rect.w, rect.h);
ctx.fillStyle = "rgba(0,122,0, 0.2)";
ctx.fill();
ctx.closePath();
// Horizontal ------------------------
ctx.beginPath();
ctx.moveTo(0, 100);
ctx.lineTo(400, 100);
ctx.moveTo(0, 200);
ctx.lineTo(400, 200);
ctx.moveTo(0, 300);
ctx.lineTo(400, 300);
ctx.moveTo(0, 400);
ctx.lineTo(400, 400);
// Vertical --------------------------------
ctx.moveTo(100, 0);
ctx.lineTo(100, 400);
ctx.moveTo(200, 0);
ctx.lineTo(200, 400);
ctx.moveTo(300, 0);
ctx.lineTo(300, 400);
ctx.moveTo(400, 0);
ctx.lineTo(400, 400);
ctx.strokeStyle = "fuchsia";
ctx.closePath(); // закрываем путь
ctx.stroke();
ctx.fill();
ctx.closePath();
}
//-------------------------------------------------------
//Draw a square - cell of fifteen
function drawSquare(x, y, val)
{
ctx.fillStyle = "blue"
ctx.shadowColor = '#000';
ctx.fillRect(x, y, 100, 100)
if(val === 0)
{
ctx.fillStyle = "white"
ctx.fillRect(x + 5, y + 5, 90, 90);
}
else
{
ctx.fillStyle = "teal"
ctx.shadowBlur = 4;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 2;
ctx.fillRect(x + 5, y + 5, 90, 90);
}
ctx.font = "60px Arial"
ctx.fillStyle = "white"
if(val === 0)
{
ctx.font = "0px Arial"
}
if(val < 10)
{
ctx.fillText(val, x + 35, y + 70)
}
else
{
ctx.fillText(val, x + 15, y + 70)
}
}
//Draw on a Canvas Tag - cell position
function drawTag(pos, val)
{
switch(pos)
{
case 0:
drawSquare(0, 0, val);
break
case 1:
drawSquare(100, 0, val);
break
case 2:
drawSquare(200, 0, val);
break
case 3:
drawSquare(300, 0, val);
break
case 4:
drawSquare(0, 100, val);
break
case 5:
drawSquare(100, 100, val);
break
case 6:
drawSquare(200, 100, val);
break
case 7:
drawSquare(300, 100, val);
break
case 8:
drawSquare(0, 200, val);
break
case 9:
drawSquare(100, 200, val);
break
case 10:
drawSquare(200, 200, val);
break
case 11:
drawSquare(300, 200, val);
break
case 12:
drawSquare(0, 300, val);
break
case 13:
drawSquare(100, 300, val);
break
case 14:
drawSquare(200, 300, val);
break
case 15:
drawSquare(300, 300, val);
break
}
}
//Determine the click location on the canvas
function checkPlace(evX)
{
if (evX < 100)
{
console.log("column 1");
return 1
}
if (evX < 200)
{
console.log("column 2");
return 2
}
if (evX < 300)
{
console.log("column 3");
return 3
}
if (evX < 400)
{
console.log("column 4");
return 4
}
}
//------------------------------------
// Processing mouse clicks
canvas.addEventListener("mousedown", function(e)
{
const x = e.offsetX;
const y = e.offsetY;
//console.log("row 1")
console.log("mousedown__x: " + x);
console.log("mousedown__y: " + y);
<!-- console.log(event); -->
<!-- console.log("event --- " + event); -->
if (y < 100)
{
console.log("row 1")
var place = checkPlace(x);
switch(place)
{
case 1:
var clickPos = 0
break
case 2:
var clickPos = 1
break
case 3:
var clickPos = 2
break
case 4:
var clickPos = 3
break
}
}
if (y > 100 && y < 200)
{
console.log("row 2");
var place = checkPlace(x);
switch(place)
{
case 1:
var clickPos = 4
break
case 2:
var clickPos = 5
break
case 3:
var clickPos = 6
break
case 4:
var clickPos = 7
break
}
}
if (y > 200 && y < 300)
{
console.log("row 3");
var place = checkPlace(x);
switch(place)
{
case 1:
var clickPos = 8
break
case 2:
var clickPos = 9
break
case 3:
var clickPos = 10
break
case 4:
var clickPos = 11
break
}
}
if (y > 300 && y < 400)
{
console.log("row 4");
var place = checkPlace(x);
switch(place)
{
case 1:
var clickPos = 12
break
case 2:
var clickPos = 13
break
case 3:
var clickPos = 14
break
case 4:
var clickPos = 15
break
}
}
console.log("clickPos --- " + clickPos);
console.log("arrVal[clickPos] --- " + arrVal[clickPos]);
// если нулевая плитка сверху
//if the zero tile is on top
if (arrVal[clickPos - 4] === 0)
{
arrVal[clickPos - 4] = arrVal[clickPos]
arrVal[clickPos] = 0
for (var i = 0; i <=15; i++)
{
drawTag(i, arrVal[i])
}
console.log("нулевая плитка сверху --- ");
}
// если нулевая плитка снизу
//if the zero tile is below
if (arrVal[clickPos + 4] === 0)
{
arrVal[clickPos + 4] = arrVal[clickPos]
arrVal[clickPos] = 0
for (var i = 0; i <= 15; i++)
{
drawTag(i, arrVal[i])
}
}
// если нулевая плитка справа
// if the zero tile is on the right
if (arrVal[clickPos + 1] === 0 && clickPos !== 3
&& clickPos !== 7 && clickPos !== 11)
{
arrVal[clickPos + 1] = arrVal[clickPos]
arrVal[clickPos] = 0
for (var i = 0; i <=15; i++)
{
drawTag(i, arrVal[i])
}
}
// если нулевая плитка слева
// if the zero tile is on the left
if (arrVal[clickPos - 1] === 0 && clickPos !== 4
&& clickPos !== 8 && clickPos !== 12)
{
arrVal[clickPos - 1] = arrVal[clickPos]
arrVal[clickPos] = 0
for (var i = 0; i <=15; i++)
{
drawTag(i, arrVal[i])
}
}
checkWin();
});
//----------------------------------------------------------
//Determine the winner
function checkWin()
{
if (arrVal[0] === 1 && arrVal[1] === 2 && arrVal[2] === 3
&& arrVal[3] === 4 && arrVal[4] === 5 && arrVal[5] === 6
&& arrVal[6] === 7 && arrVal[7] === 8 && arrVal[8] === 9
&& arrVal[9] === 10 && arrVal[10] === 11 && arrVal[11] === 12
&& arrVal[12] === 13 && arrVal[13] === 14 && arrVal[14] === 15
&& arrVal[15] === 0)
{
console.log("ПОБЕДА! --- ");
ctx.font = "60px Verdana";
ctx.fillStyle = "red";
ctx.fillText("VICTORY", 60, 200);
<!-- ctx.fillText("ПОБЕДА!", 70, 200); -->
}
}
//----------------------------------------------------------
// mouse click
canvas.addEventListener("mousedown", function(e)
{
mouse.x = e.pageX - this.offsetLeft;
mouse.y = e.pageY - this.offsetTop;
coord.innerHTML = 'Coord mouseup: (' + mouse.x + ',' + mouse.y + ')';
myX.innerHTML = mouse.x;
myY.innerHTML = mouse.y;
});
</script>
</body>
</html>
switch--use object or array lookups orifs. \$\endgroup\$