1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards</title>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<canvas id="cards"></canvas>
<script>
// Constants
const CARD_WIDTH = 100;
const CARD_HEIGHT = 150;
const PADDING = 10;
const SUITS = ['❤️', '♦️', '♣️', '♠️'];
const VALUES = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A'];
const CARD_BACK_COLOR = '#0066cc';
const PATTERN_SIZE = 10;
// Canvas setup
const canvas = document.getElementById('cards');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Pure functions
const shuffle = array => [...array]
.reduce((acc, _, i) => {
const j = Math.floor(Math.random() * (i + 1));
[acc[i], acc[j]] = [acc[j], acc[i]];
return acc;
}, [...array]);
const createDeck = () =>
SUITS.flatMap(suit => VALUES.map(value => ({ suit, value })));
const createCard = (x, y, cardData) => ({
x: x + 20,
y: y + 20,
card: cardData,
isFaceUp: false // Cards start face down
});
const isPointInCard = (x, y, card) =>
x >= card.x &&
x <= card.x + CARD_WIDTH &&
y >= card.y &&
y <= card.y + CARD_HEIGHT;
// Rendering functions
const clearCanvas = () => {
ctx.fillStyle = 'beige';
ctx.fillRect(0, 0, canvas.width, canvas.height);
};
const renderCardBack = card => {
// Draw blue background
ctx.fillStyle = CARD_BACK_COLOR;
ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
// Draw checkered pattern
ctx.strokeStyle = '#003366';
for (let i = 0; i < CARD_WIDTH; i += PATTERN_SIZE) {
for (let j = 0; j < CARD_HEIGHT; j += PATTERN_SIZE) {
if ((i + j) % (PATTERN_SIZE * 2) === 0) {
ctx.fillStyle = '#0055aa';
ctx.fillRect(card.x + i, card.y + j, PATTERN_SIZE, PATTERN_SIZE);
}
}
}
// Draw border
ctx.strokeStyle = 'black';
ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
};
const renderCardFront = card => {
ctx.fillStyle = 'white';
ctx.fillRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.strokeRect(card.x, card.y, CARD_WIDTH, CARD_HEIGHT);
ctx.fillText(card.card.value, card.x + 10, card.y + 30);
ctx.fillText(card.card.suit, card.x + 10, card.y + 60);
};
const renderCard = card => {
if (card.isFaceUp) {
renderCardFront(card);
} else {
renderCardBack(card);
}
};
const renderAllCards = cards => {
clearCanvas();
cards.forEach(renderCard);
};
// State management
const gameState = {
cards: [],
draggingCard: null,
deck: shuffle(createDeck()),
stackPosition: {
x: 0,
y: 0
}
};
// Add function to get top card
const getTopStackCard = () => {
return gameState.cards.find(card =>
card.x === gameState.stackPosition.x &&
card.y === gameState.stackPosition.y
);
};
// Event handlers
const handleMouseMove = e => {
if (!gameState.draggingCard) return;
const rect = canvas.getBoundingClientRect();
gameState.draggingCard.x = e.clientX - rect.left;
gameState.draggingCard.y = e.clientY - rect.top;
renderAllCards(gameState.cards);
};
const handleMouseUp = () => {
gameState.draggingCard = null;
document.removeEventListener('mousemove', handleMouseMove);
document.removeEventListener('mouseup', handleMouseUp);
};
// Add this function to distribute cards evenly with overlap
const distributeCards = () => {
const totalCards = gameState.cards.length;
const cols = Math.floor((canvas.width - 20) / (CARD_WIDTH / 2)); // Allow overlap by halving the width and accounting for border
const rows = Math.ceil(totalCards / cols); // Calculate number of rows
const cardWidthWithPadding = CARD_WIDTH / 2; // Allow overlap
const cardHeightWithPadding = CARD_HEIGHT / 2; // Allow overlap
// Calculate starting positions
const startX = 20 + (canvas.width - (cols * cardWidthWithPadding)) / 2; // Start from 20 pixels from the left
const startY = 20 + (canvas.height - (rows * cardHeightWithPadding)) / 2; // Start from 20 pixels from the top
// Distribute cards
gameState.cards.forEach((card, index) => {
const row = Math.floor(index / cols);
const col = index % cols;
card.x = startX + col * cardWidthWithPadding + (Math.random() * 20 - 10); // Random offset for overlap
card.y = startY + row * cardHeightWithPadding + (Math.random() * 20 - 10); // Random offset for overlap
card.isFaceUp = true; // Flip cards face up when distributed
});
renderAllCards(gameState.cards);
};
// Update handleMouseDown to include double-click detection
let lastClickTime = 0;
const handleMouseDown = e => {
const rect = canvas.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
// Handle right click for card flipping
if (e.button === 2) { // Right click
e.preventDefault();
const clickedCard = gameState.cards.find(card =>
isPointInCard(x, y, card) &&
(card.x !== gameState.stackPosition.x || card.y !== gameState.stackPosition.y)
);
if (clickedCard) {
clickedCard.isFaceUp = !clickedCard.isFaceUp;
renderAllCards(gameState.cards);
}
return;
}
// Check for double-click
const currentTime = new Date().getTime();
if (currentTime - lastClickTime < 300) { // 300 ms for double-click
distributeCards(); // Show all cards when double-clicked
lastClickTime = 0; // Reset last click time
return;
}
lastClickTime = currentTime;
// Find any clicked card
const clickedCard = gameState.cards.find(card => isPointInCard(x, y, card));
if (clickedCard) {
// If it's a card in the stack, handle drawing it
if (clickedCard.x === gameState.stackPosition.x &&
clickedCard.y === gameState.stackPosition.y) {
clickedCard.isFaceUp = true;
}
// Allow dragging regardless of where the card is
gameState.draggingCard = clickedCard;
document.addEventListener('mousemove', handleMouseMove);
document.addEventListener('mouseup', handleMouseUp);
}
};
// Initialize game
const initializeGame = () => {
// Create a full deck of cards
gameState.deck = shuffle(createDeck()); // Ensure we have a full deck
gameState.cards = gameState.deck.map(cardData => createCard(0, 0, cardData)); // Create cards with initial position (0, 0)
// Draw cards in a pile with their reverse side showing
gameState.cards.forEach((card, index) => {
card.x = 20; // Pile at 20 pixels from the left
card.y = 20 + index * 5; // Stack cards with a slight offset for visibility
});
clearCanvas();
renderAllCards(gameState.cards);
// Add event listeners
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('contextmenu', e => e.preventDefault());
};
// Start the game
initializeGame();
// Clean up on window unload
window.addEventListener('unload', () => {
canvas.removeEventListener('mousedown', handleMouseDown);
canvas.removeEventListener('contextmenu', e => e.preventDefault());
});
</script>
</body>
</html>
|