Skip to content

Commit abe3e2e

Browse files
samuelsantosdevsamuelsantosdev
committed
fix canvas sdn issues, modernize
1 parent d3c0de1 commit abe3e2e

4 files changed

Lines changed: 351 additions & 83 deletions

File tree

‎index.html‎

Lines changed: 290 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,300 @@
11
<!DOCTYPE html>
2-
<html lang="en-us">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>SimpleCanvas by samuelsantosdev</title>
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
8-
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
9-
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
10-
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
11-
</head>
12-
<body>
13-
<section class="page-header">
14-
<h1 class="project-name">SimpleCanvas</h1>
15-
<h2 class="project-tagline">Simple Canvas</h2>
16-
<a href="https://github.com/samuelsantosdev/SimpleCanvas" class="btn">View on GitHub</a>
17-
<a href="https://github.com/samuelsantosdev/SimpleCanvas/zipball/master" class="btn">Download .zip</a>
18-
<a href="https://github.com/samuelsantosdev/SimpleCanvas/tarball/master" class="btn">Download .tar.gz</a>
19-
</section>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>SimpleCanvas – Snake Game</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
9+
<style>
10+
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
11+
12+
body {
13+
background: #080c14;
14+
color: #c5cfe8;
15+
font-family: 'Space Grotesk', sans-serif;
16+
min-height: 100vh;
17+
}
18+
19+
header {
20+
padding: 40px 24px 0;
21+
text-align: center;
22+
}
23+
24+
.badge {
25+
display: inline-block;
26+
background: rgba(57,255,20,0.08);
27+
border: 1px solid rgba(57,255,20,0.25);
28+
color: #39ff14;
29+
font-family: 'Share Tech Mono', monospace;
30+
font-size: 11px;
31+
letter-spacing: 2.5px;
32+
padding: 4px 14px;
33+
border-radius: 20px;
34+
text-transform: uppercase;
35+
margin-bottom: 18px;
36+
}
37+
38+
h1.site-title {
39+
font-size: clamp(38px, 6vw, 68px);
40+
font-weight: 700;
41+
color: #fff;
42+
letter-spacing: -1.5px;
43+
line-height: 1.05;
44+
}
45+
46+
h1.site-title span { color: #39ff14; }
47+
48+
.tagline {
49+
margin-top: 10px;
50+
color: #4a5e72;
51+
font-size: 14px;
52+
font-family: 'Share Tech Mono', monospace;
53+
letter-spacing: 0.5px;
54+
}
55+
56+
.header-links {
57+
margin-top: 22px;
58+
display: flex;
59+
gap: 10px;
60+
justify-content: center;
61+
flex-wrap: wrap;
62+
}
63+
64+
.btn {
65+
display: inline-flex;
66+
align-items: center;
67+
gap: 6px;
68+
padding: 8px 18px;
69+
border-radius: 6px;
70+
font-size: 13px;
71+
font-weight: 600;
72+
font-family: 'Space Grotesk', sans-serif;
73+
text-decoration: none;
74+
transition: 0.2s;
75+
border: 1.5px solid;
76+
}
77+
78+
.btn-primary {
79+
background: rgba(57,255,20,0.1);
80+
border-color: rgba(57,255,20,0.45);
81+
color: #39ff14;
82+
}
83+
.btn-primary:hover {
84+
background: rgba(57,255,20,0.2);
85+
border-color: #39ff14;
86+
}
87+
.btn-secondary {
88+
background: rgba(255,255,255,0.03);
89+
border-color: rgba(255,255,255,0.1);
90+
color: #8899aa;
91+
}
92+
.btn-secondary:hover {
93+
background: rgba(255,255,255,0.07);
94+
border-color: rgba(255,255,255,0.2);
95+
color: #c5cfe8;
96+
}
97+
98+
/* Canvas */
99+
.canvas-section {
100+
margin-top: 36px;
101+
display: flex;
102+
flex-direction: column;
103+
align-items: center;
104+
}
105+
106+
.canvas-wrapper {
107+
position: relative;
108+
display: inline-block;
109+
border-radius: 12px;
110+
padding: 3px;
111+
background: linear-gradient(135deg, rgba(57,255,20,0.35), rgba(0,180,100,0.12), rgba(57,255,20,0.04));
112+
box-shadow: 0 0 40px rgba(57,255,20,0.08), 0 20px 60px rgba(0,0,0,0.5);
113+
}
114+
115+
#stageGame {
116+
display: block;
117+
border-radius: 10px;
118+
max-width: 100%;
119+
}
120+
121+
/* Controls */
122+
.controls {
123+
margin-top: 18px;
124+
display: flex;
125+
gap: 20px;
126+
justify-content: center;
127+
flex-wrap: wrap;
128+
}
129+
130+
.control-key {
131+
display: flex;
132+
align-items: center;
133+
gap: 8px;
134+
font-family: 'Share Tech Mono', monospace;
135+
font-size: 12px;
136+
color: #4a5e72;
137+
}
138+
139+
.key {
140+
display: inline-flex;
141+
align-items: center;
142+
justify-content: center;
143+
background: #0d1525;
144+
border: 1px solid #1c2d45;
145+
border-bottom: 3px solid #1c2d45;
146+
border-radius: 5px;
147+
padding: 3px 10px;
148+
font-family: 'Share Tech Mono', monospace;
149+
font-size: 11px;
150+
color: #39ff14;
151+
min-width: 34px;
152+
}
20153

21-
<section class="main-content">
22-
<h1>
23-
<a id="simplecanvas" class="anchor" href="#simplecanvas" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>SimpleCanvas</h1>
24-
25-
<h2>
26-
<a id="example-snake-game" class="anchor" href="#example-snake-game" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Example snake game</h2>
27-
28-
<h3>
29-
<a id="this-is-a-simplecanvas-coming-soon-the-more-easy-html5-framework--to-learn-canvas-2d" class="anchor" href="#this-is-a-simplecanvas-coming-soon-the-more-easy-html5-framework--to-learn-canvas-2d" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>This is a SimpleCanvas, coming soon the more easy html5 framework to learn Canvas 2d.</h3>
30-
31-
<center>
32-
<canvas id="stageGame" width="500" height="500" style="background-color:#000;"></canvas>
33-
</center>
34-
35-
<br/>
36-
<table>
37-
<thead>
38-
<tr>
39-
<th>Version</th>
40-
<th>Features</th>
41-
</tr>
42-
</thead>
43-
<tbody>
44-
<tr>
45-
<td>0.2</td>
46-
<td>New Engine with a singleton concept, comments in code, prototype in all metadata, effects transition to colors, animation to multple coordenates, simple animation</td>
47-
</tr>
48-
<tr>
49-
<td>0.1</td>
50-
<td>Render shapes and animate objects, example game snake</td>
51-
</tr>
52-
</tbody>
53-
</table>
54-
55-
<footer class="site-footer">
56-
<span class="site-footer-owner"><a href="https://github.com/samuelsantosdev/SimpleCanvas">SimpleCanvas</a> is maintained by <a href="https://github.com/samuelsantosdev">samuelsantosdev</a>.</span>
57-
58-
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
59-
</footer>
154+
/* Info */
155+
.info-section {
156+
max-width: 620px;
157+
margin: 56px auto 0;
158+
padding: 0 24px;
159+
}
60160

161+
.section-label {
162+
font-family: 'Share Tech Mono', monospace;
163+
font-size: 10px;
164+
letter-spacing: 3px;
165+
color: #39ff14;
166+
text-transform: uppercase;
167+
margin-bottom: 14px;
168+
opacity: 0.8;
169+
}
170+
171+
p.description {
172+
font-size: 15px;
173+
line-height: 1.85;
174+
color: #637282;
175+
}
176+
177+
.versions {
178+
margin-top: 36px;
179+
overflow-x: auto;
180+
}
181+
182+
table {
183+
width: 100%;
184+
border-collapse: collapse;
185+
font-size: 14px;
186+
}
187+
188+
thead th {
189+
font-family: 'Share Tech Mono', monospace;
190+
font-size: 10px;
191+
letter-spacing: 2.5px;
192+
text-transform: uppercase;
193+
color: #39ff14;
194+
padding: 10px 16px;
195+
text-align: left;
196+
border-bottom: 1px solid rgba(57,255,20,0.18);
197+
opacity: 0.8;
198+
}
199+
200+
tbody td {
201+
padding: 14px 16px;
202+
color: #637282;
203+
border-bottom: 1px solid rgba(255,255,255,0.04);
204+
vertical-align: top;
205+
line-height: 1.6;
206+
}
207+
208+
tbody td:first-child {
209+
color: #c5cfe8;
210+
font-family: 'Share Tech Mono', monospace;
211+
white-space: nowrap;
212+
}
213+
214+
tbody tr:hover td { background: rgba(57,255,20,0.025); }
215+
216+
footer {
217+
margin-top: 64px;
218+
padding: 28px 24px;
219+
text-align: center;
220+
border-top: 1px solid rgba(255,255,255,0.04);
221+
}
222+
223+
footer p {
224+
font-size: 12px;
225+
color: #2e3d50;
226+
font-family: 'Share Tech Mono', monospace;
227+
line-height: 1.8;
228+
}
229+
230+
footer a { color: #39ff14; text-decoration: none; opacity: 0.7; }
231+
footer a:hover { opacity: 1; text-decoration: underline; }
232+
</style>
233+
</head>
234+
<body>
235+
236+
<header>
237+
<div class="badge">open source &middot; canvas 2d engine</div>
238+
<h1 class="site-title">Simple<span>Canvas</span></h1>
239+
<p class="tagline">// a lightweight HTML5 Canvas 2D framework</p>
240+
<div class="header-links">
241+
<a href="https://github.com/samuelsantosdev/SimpleCanvas" class="btn btn-primary">&#9095; View on GitHub</a>
242+
<a href="https://github.com/samuelsantosdev/SimpleCanvas/zipball/master" class="btn btn-secondary">&#8595; Download .zip</a>
243+
<a href="https://github.com/samuelsantosdev/SimpleCanvas/tarball/master" class="btn btn-secondary">&#8595; Download .tar.gz</a>
244+
</div>
245+
</header>
246+
247+
<main>
248+
<section class="canvas-section">
249+
<div class="canvas-wrapper">
250+
<canvas id="stageGame" width="500" height="500"></canvas>
251+
</div>
252+
<div class="controls">
253+
<div class="control-key"><span class="key">&#8593; &#8595; &#8592; &#8594;</span>&nbsp;Move</div>
254+
<div class="control-key"><span class="key">Enter</span>&nbsp;Start / Restart</div>
255+
<div class="control-key"><span class="key">Esc</span>&nbsp;Pause</div>
256+
</div>
61257
</section>
62258

63-
64-
</body>
65-
<script src="https://rawgit.com/samuelsantosdev/SimpleCanvas/master/js/simplecanvas.js"></script>
259+
<section class="info-section">
260+
<p class="section-label">// about</p>
261+
<p class="description">
262+
SimpleCanvas is a lightweight HTML5 Canvas 2D engine that simplifies creating
263+
games and interactive graphics. The snake game above demonstrates its animation,
264+
entity, and event systems working together.
265+
</p>
266+
<div class="versions">
267+
<table>
268+
<thead>
269+
<tr><th>Version</th><th>Features</th></tr>
270+
</thead>
271+
<tbody>
272+
<tr>
273+
<td>v0.2</td>
274+
<td>New Engine with singleton concept, code comments, prototype on all metadata, color transition effects, multi-coordinate animations, simple animation system</td>
275+
</tr>
276+
<tr>
277+
<td>v0.1</td>
278+
<td>Render shapes and animate objects — example snake game</td>
279+
</tr>
280+
</tbody>
281+
</table>
282+
</div>
283+
</section>
284+
</main>
285+
286+
<footer>
287+
<p>
288+
<a href="https://github.com/samuelsantosdev/SimpleCanvas">SimpleCanvas</a> is maintained by
289+
<a href="https://github.com/samuelsantosdev">samuelsantosdev</a><br>
290+
Generated by <a href="https://pages.github.com">GitHub Pages</a>
291+
</p>
292+
</footer>
293+
294+
<script src="js/simplecanvas.js"></script>
66295
<script>
67296
const canvas = document.querySelector("#stageGame");
68297
canvas.SimpleCanvas().Initialize();
69298
</script>
299+
</body>
70300
</html>

0 commit comments

Comments
 (0)