<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="3900" height="900" style="border:1px solid
#d3d3d3;">
</canvas>
<script>
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
let cards = [];
for (let i = 0;i < 36;i++){
cards[i] = i;
}
swapcard();
for (let i = 0;i < 36;i++){
console.log("index "+i+" "+cards[i]+" ");
}
ctx.clearRect(0,0,900,900);
for (let i = 0;i < 36;i++){
generatecard(i*100,0,i,100);
}
function generatecard(x,y,index,size){
if (cards[index]>=0 && cards[index] < 4){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("6", x, 50);
}
if (cards[index]>=4 && cards[index] < 8){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("7", x, 50);
}
if (cards[index]>=8 && cards[index] < 12){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("8", x, 50);
}
if (cards[index]>=12 && cards[index] < 16){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("9", x, 50);
}
if (cards[index]>=16 && cards[index] < 20){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("10", x, 50);
}
if (cards[index]>=20 && cards[index] < 24){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("валет", x, 50);
}
if (cards[index]>=24 && cards[index] < 28){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("дама", x, 50);
}
if (cards[index]>=28 && cards[index] < 32){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("король", x, 50);
}
if (cards[index]>=32 && cards[index] < 36){
ctx.strokeRect(x,y,size,200);
ctx.font = "20px Georgia";
ctx.fillStyle = "red";
ctx.fillText("туз", x, 50);
}
}
function swapcard(){
for (let i = 0;i < 36;i++){
let position = Math.floor(Math.random()*36);
let currentcard = cards[i];
let randomcard = cards[position];
cards[position] = currentcard;
cards[i] = randomcard;
}
}
</script>
</body>
</html>
| 