-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgame.js
188 lines (163 loc) · 5.6 KB
/
game.js
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
// Constants
let SIZE_X = 7;
let SIZE_Y = 5;
let CELL_SIZE = 100;
let SCREEN_WIDTH = SIZE_X * CELL_SIZE;
let SCREEN_HEIGHT = SIZE_Y * CELL_SIZE;
let COLORS = 2; // Default is 2 for black and white
let rainbowColors = [];
// Generate colors based on the current COLORS value
function generateColors() {
if (COLORS == 2) {
rainbowColors = ['#000000', '#FFFFFF'];
} else {
rainbowColors = Array.from({ length: COLORS }, (_, i) => {
const hue = Math.floor((i / COLORS) * 360);
return `hsl(${hue}, 100%, 50%)`;
});
}
}
// Initialize the canvas
const canvas = document.getElementById('gameCanvas');
const context = canvas.getContext('2d');
context.font = '36px Monospace';
context.textAlign = 'center';
let matrix;
function generateMatrix() {
return Array.from({ length: SIZE_X }, () => Array(SIZE_Y).fill(0));
}
let scrambleSequence = [];
function resetMatrix() {
generateColors(); // Ensure colors are generated based on the current COLORS value
matrix = generateMatrix();
scrambleSequence = [];
let steps = SIZE_X * SIZE_Y * Math.pow(COLORS, 2);
for (let i = 0; i < steps; i++) {
const x = Math.floor(Math.random() * SIZE_X);
const y = Math.floor(Math.random() * SIZE_Y);
action(x, y);
scrambleSequence.push({ x, y });
}
drawMatrix();
}
function flip(num, reverse = false) {
if (reverse) {
return (num - 1 + COLORS) % COLORS; // Cycle backwards
} else {
return (num + 1) % COLORS; // Cycle forwards
}
}
// Detect shift-click for backward cycling
canvas.addEventListener('mousedown', event => {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const x = Math.floor((event.clientX - rect.left) * scaleX / CELL_SIZE);
const y = Math.floor((event.clientY - rect.top) * scaleY / CELL_SIZE);
if (0 <= x && x < SIZE_X && 0 <= y && y < SIZE_Y) {
const reverse = event.shiftKey;
action(x, y, reverse);
}
});
function action(x, y, reverse = false) {
if (x < 0 || x >= SIZE_X || y < 0 || y >= SIZE_Y) {
return -1;
} else {
matrix[x][y] = flip(matrix[x][y], reverse);
if (x > 0) {
matrix[x - 1][y] = flip(matrix[x - 1][y], reverse);
}
if (x < SIZE_X - 1) {
matrix[x + 1][y] = flip(matrix[x + 1][y], reverse);
}
if (y > 0) {
matrix[x][y - 1] = flip(matrix[x][y - 1], reverse);
}
if (y < SIZE_Y - 1) {
matrix[x][y + 1] = flip(matrix[x][y + 1], reverse);
}
}
}
function drawMatrix() {
for (let i = 0; i < SIZE_X; i++) {
for (let j = 0; j < SIZE_Y; j++) {
const rectX = i * CELL_SIZE;
const rectY = j * CELL_SIZE;
const color = rainbowColors[matrix[i][j]];
context.fillStyle = color;
context.fillRect(rectX, rectY, CELL_SIZE, CELL_SIZE);
}
}
}
function checkWin() {
const targetColor = matrix[0][0];
return matrix.every(col => col.every(row => row === targetColor));
}
function resizeCanvas() {
const availableWidth = canvas.parentElement.clientWidth;
const availableHeight = canvas.parentElement.clientHeight;
const cellSizeX = Math.floor(availableWidth / SIZE_X);
const cellSizeY = Math.floor(availableHeight / SIZE_Y);
CELL_SIZE = Math.min(cellSizeX, cellSizeY);
SCREEN_WIDTH = SIZE_X * CELL_SIZE;
SCREEN_HEIGHT = SIZE_Y * CELL_SIZE;
canvas.width = SCREEN_WIDTH;
canvas.height = SCREEN_HEIGHT;
context.font = `${CELL_SIZE / 2}px Monospace`;
}
// Generate initial colors and matrix
resetMatrix();
resizeCanvas();
window.addEventListener('resize', resizeCanvas);
function gameLoop() {
// Clear the screen
context.fillStyle = 'rgb(0, 0, 0)';
context.fillRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
context.message = 'You won!'
// Draw the matrix
drawMatrix();
// Check if all tiles are the same color
if (checkWin()) {
// Determine the final color
const winningColor = rainbowColors[matrix[0][0]];
// Set text color and message based on the winning color
if (winningColor === '#FFFFFF') {
context.message = 'You won?'
context.fillStyle = 'rgb(0, 0, 0)'
} else {
context.fillStyle = 'rgb(255, 255, 255)'
}
// Center the "You won!" text
context.textAlign = 'center'; // Center text horizontally
context.textBaseline = 'middle'; // Center text vertically
context.fillText(context.message, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
}
// Request next frame
requestAnimationFrame(gameLoop);
}
gameLoop();
document.addEventListener('keydown', event => {
if (event.key === 'r') {
resetMatrix();
} else if (event.key === 'i') {
const newX = parseInt(prompt('Enter new width:'));
const newY = parseInt(prompt('Enter new height:'));
if (!isNaN(newX) && !isNaN(newY) && newX > 0 && newY > 0) {
SIZE_X = newX;
SIZE_Y = newY;
resetMatrix();
resizeCanvas();
} else {
alert('Invalid input. Please enter valid numbers.');
}
} else if (event.key === 'c') {
const newColors = parseInt(prompt('Enter amount of colors: '));
if (!isNaN(newColors) && newColors > 1 && newColors <= 256) { // Limit colors for practical use
COLORS = newColors;
generateColors();
resetMatrix();
} else {
alert('Invalid input. Please enter valid numbers.');
}
}
});