Skip to content

Commit abe8457

Browse files
leoncoolmoonleoncoolmoon
committed
now you can adjust game grid size and winning number
1 parent c961594 commit abe8457

File tree

3 files changed

+250
-526
lines changed

3 files changed

+250
-526
lines changed

‎15-Connect-Four-Game/index.html

Lines changed: 15 additions & 285 deletions
Original file line numberDiff line numberDiff line change
@@ -24,299 +24,29 @@
2424

2525
</head>
2626
<body>
27-
27+
<div id="grid-config">
28+
<div class="input-group">
29+
<label for="grid-width">Columns:</label>
30+
<input type="number" id="grid-width" min="3" max="20" value="10">
31+
</div>
32+
<div class="input-group">
33+
<label for="grid-height">Rows:</label>
34+
<input type="number" id="grid-height" min="3" max="20" value="10">
35+
</div>
36+
<div class="input-group">
37+
<label for="win-condition">Win Condition:</label>
38+
<input type="number" id="win-condition" min="3" max="8" value="5">
39+
</div>
40+
<button id="update-grid">OK</button>
41+
</div>
2842
<div id="main-container">
29-
3043
<div id="player">
31-
3244
<h1 id="player-type">Player - 1</h1>
33-
3445
</div>
35-
3646
<div id="grid">
37-
38-
<div class="row">
39-
40-
<div class="col">
41-
42-
<button class="btn btn-1"></button>
43-
44-
</div>
45-
46-
<div class="col">
47-
48-
<button class="btn btn-2"></button>
49-
50-
</div>
51-
52-
<div class="col">
53-
54-
<button class="btn btn-3"></button>
55-
56-
</div>
57-
58-
<div class="col">
59-
60-
<button class="btn btn-4"></button>
61-
62-
</div>
63-
64-
<div class="col">
65-
66-
<button class="btn btn-5"></button>
67-
68-
</div>
69-
70-
<div class="col">
71-
72-
<button class="btn btn-6"></button>
73-
74-
</div>
75-
76-
<div class="col">
77-
78-
<button class="btn btn-7"></button>
79-
80-
</div>
81-
82-
</div>
83-
84-
<div class="row">
85-
86-
<div class="col">
87-
88-
<button class="btn btn-8"></button>
89-
90-
</div>
91-
92-
<div class="col">
93-
94-
<button class="btn btn-9"></button>
95-
96-
</div>
97-
98-
<div class="col">
99-
100-
<button class="btn btn-10"></button>
101-
102-
</div>
103-
104-
<div class="col">
105-
106-
<button class="btn btn-11"></button>
107-
108-
</div>
109-
110-
<div class="col">
111-
112-
<button class="btn btn-12"></button>
113-
114-
</div>
115-
116-
<div class="col">
117-
118-
<button class="btn btn-13"></button>
119-
120-
</div>
121-
122-
<div class="col">
123-
124-
<button class="btn btn-14"></button>
125-
126-
</div>
127-
128-
</div>
129-
130-
<div class="row">
131-
132-
<div class="col">
133-
134-
<button class="btn btn-15"></button>
135-
136-
</div>
137-
138-
<div class="col">
139-
140-
<button class="btn btn-16"></button>
141-
142-
</div>
143-
144-
<div class="col">
145-
146-
<button class="btn btn-17"></button>
147-
148-
</div>
149-
150-
<div class="col">
151-
152-
<button class="btn btn-18"></button>
153-
154-
</div>
155-
156-
<div class="col">
157-
158-
<button class="btn btn-19"></button>
159-
160-
</div>
161-
162-
<div class="col">
163-
164-
<button class="btn btn-20"></button>
165-
166-
</div>
167-
168-
<div class="col">
169-
170-
<button class="btn btn-21"></button>
171-
172-
</div>
173-
174-
</div>
175-
176-
<div class="row">
177-
178-
<div class="col">
179-
180-
<button class="btn btn-22"></button>
181-
182-
</div>
183-
184-
<div class="col">
185-
186-
<button class="btn btn-23"></button>
187-
188-
</div>
189-
190-
<div class="col">
191-
192-
<button class="btn btn-24"></button>
193-
194-
</div>
195-
196-
<div class="col">
197-
198-
<button class="btn btn-25"></button>
199-
200-
</div>
201-
202-
<div class="col">
203-
204-
<button class="btn btn-26"></button>
205-
206-
</div>
207-
208-
<div class="col">
209-
210-
<button class="btn btn-27"></button>
211-
212-
</div>
213-
214-
<div class="col">
215-
216-
<button class="btn btn-28"></button>
217-
218-
</div>
219-
220-
</div>
221-
222-
<div class="row">
223-
224-
<div class="col">
225-
226-
<button class="btn btn-29"></button>
227-
228-
</div>
229-
230-
<div class="col">
231-
232-
<button class="btn btn-30"></button>
233-
234-
</div>
235-
236-
<div class="col">
237-
238-
<button class="btn btn-31"></button>
239-
240-
</div>
241-
242-
<div class="col">
243-
244-
<button class="btn btn-32"></button>
245-
246-
</div>
247-
248-
<div class="col">
249-
250-
<button class="btn btn-33"></button>
251-
252-
</div>
253-
254-
<div class="col">
255-
256-
<button class="btn btn-34"></button>
257-
258-
</div>
259-
260-
<div class="col">
261-
262-
<button class="btn btn-35"></button>
263-
264-
</div>
265-
266-
</div>
267-
268-
<div class="row">
269-
270-
<div class="col">
271-
272-
<button class="btn btn-36"></button>
273-
274-
</div>
275-
276-
<div class="col">
277-
278-
<button class="btn btn-37"></button>
279-
280-
</div>
281-
282-
<div class="col">
283-
284-
<button class="btn btn-38"></button>
285-
286-
</div>
287-
288-
<div class="col">
289-
290-
<button class="btn btn-39"></button>
291-
292-
</div>
293-
294-
<div class="col">
295-
296-
<button class="btn btn-40"></button>
297-
298-
</div>
299-
300-
<div class="col">
301-
302-
<button class="btn btn-41"></button>
303-
304-
</div>
305-
306-
<div class="col">
307-
308-
<button class="btn btn-42"></button>
309-
310-
</div>
311-
312-
</div>
313-
31447
</div>
315-
31648
<button type="button" id="reset-btn">Play Again</button>
317-
31849
</div>
319-
32050
<script src="script.js"></script>
32151

32252
</body>

0 commit comments

Comments
 (0)