so://phie

game-engine

A lightweight JavaScript game engine
git clone git://soophie.de/game-engine

• log
• tree
• refs
• README
• LICENSE

branch:main tag:v0.1

• index.html [new file] [old file]

  28					<h3>Overview</h3>
  29					<ul class="overview">
  30						<li>
  31							<a href="#game">Game</a>
  31							<p>JavaScript</p>
  32							<ul>
  33								<li>
  34									<a href="#game">Game</a>
  35								</li>
  36								<li>
  37									<a href="#group">Group</a>
  38								</li>
  39								<li>
  40									<a href="#surface">Surface</a>
  41								</li>
  42								<li>
  43									<a href="#rect">Rect</a>
  44								</li>
  45								<li>
  46									<a href="#scaleCanvas">scaleCanvas</a>
  47								</li>
  48							</ul>
  49						</li>
  50						<li>
  34							<a href="#group">Group</a>
  35						</li>
  36						<li>
  37							<a href="#surface">Surface</a>
  38						</li>
  39						<li>
  40							<a href="#rect">Rect</a>
  41						</li>
  42						<li>
  43							<a href="#scaleCanvas">scaleCanvas</a>
  51							<p>CSS</p>
  52							<ul>
  53								<li>
  54									<a href="#normalize">Normalize</a>
  55								</li>
  56								<li>
  57									<a href="#color">Color</a>
  58								</li>
  59								<li>
  60									<a href="#icons">Icons</a>
  61								</li>
  62							</ul>
  63						</li>
  64					</ul>
  65					<h2>JavaScript</h2>
  66					<article>
  67						<label><a name="game">Game</a></label>
  68						<pre>Game(width, height, { fps })</pre>
  

  131						<code><pre>const canvas = document.createElement('canvas');
  132scaleCanvas(canvas, 900, 600); // (width, height)
  133document.body.append(canvas);</pre></code>
  134					</article>
  135					<h2>CSS</h2>
  136					<article>
  137						<label><a name="normalize">Normalize</a></label>
  138						<p>Normalizes spacing and interactive elements and adds additional alignment classes.</p>
  139						<code><pre>@import url('https://git.typable.dev/std/less/normalize.less');</pre></code>
  140						<p>Following variables are required (insert before import):</p>
  141						<code><pre>@gap: px - Space between column elements
  142@full-width: px - Maximum width for centered container elements</pre></code>
  143						<p>Additional alignment classes:</p>
  144						<code><pre>.col - Horizontal spacing
  145.row - Inverts horziontal spacing
  146.container - Align centered with horizontal spacing
  147.container-fluid - Align full width with horizontal spacing</pre></code>
  148<p>Structure:</p>
  149<code><pre>.container-fluid {
  150	.row {
  151		.container {
  152			...
  153		}
  154	}
  155}</pre></code>
  156					</article>
  157					<article>
  158						<label><a name="color">Color</a></label>
  159						<pre>@color-{color}[-(50,100,200,300,400,500,600,700,800,900)]</pre>
  160						<p>A collection of material colors inspired by the Google Material Colors.</p>
  161						<code><pre>@import url('https://git.typable.dev/std/less/color.less');</pre></code>
  162						<code><pre>@color-black;
  163@color-teal-50;
  164@color-blue-500;</pre></code>
  165					</article>
  166					<article>
  167						<label><a name="icons">Icons</a></label>
  168						<pre>.ico</pre>
  169						<p>Imports the Google Material Icons Fonts.</p>
  170						<code><pre>@import url('https://git.typable.dev/std/less/icons.less');</pre></code>
  171						<code><pre>&lt;span class="ico"&gt;close&lt;/span&gt;</pre></code>
  172					</article>
  173				</div>
  174			</div>
  175		</main>
  

• less/style.less [new file] [old file]

  62main {
  63	margin-bottom: 100px;
  64
  65	h2 {
  66		color: #212121;
  67		font-size: 24px;
  68		margin-top: 80px;
  69		margin-bottom: 30px;
  70	}
  71
  72	h3 {
  73		color: #212121;
  74		font-size: 20px;
  68		margin-bottom: 15px;
  75		margin-bottom: 20px;
  76	}
  77
  78	.overview {
  

  80		margin-bottom: 50px;
  81
  82		li {
  76			margin-bottom: 5px;
  83			margin-bottom: 25px;
  84
  85			p {
  86				font-weight: 500;
  87				margin-bottom: 5px;
  88			}
  89
  90			ul {
  91				padding-left: 20px;
  92
  93				li {
  94					margin-bottom: 5px;
  95				}
  96			}
  97
  98			a {
  99				color: #424242;
  

• std/less/color.less [new file]

  1@color-red-50: #FFEBEE;
  2@color-red-100: #FFCDD2;
  3@color-red-200: #EF9A9A;
  4@color-red-300: #E57373;
  5@color-red-400: #EF5350;
  6@color-red-500: #F44336;
  7@color-red-600: #E53935;
  8@color-red-700: #D32F2F;
  9@color-red-800: #C62828;
  10@color-red-900: #B71C1C;
  11
  12@color-pink-50: #FCE4EC;
  13@color-pink-100: #F8BBD0;
  14@color-pink-200: #F48FB1;
  15@color-pink-300: #F06292;
  16@color-pink-400: #EC407A;
  17@color-pink-500: #E91E63;
  18@color-pink-600: #D81B60;
  19@color-pink-700: #C2185B;
  20@color-pink-800: #AD1457;
  21@color-pink-900: #880E4F;
  22
  23@color-purple-50: #F3E5F5;
  24@color-purple-100: #E1BEE7;
  25@color-purple-200: #CE93D8;
  26@color-purple-300: #BA68C8;
  27@color-purple-400: #AB47BC;
  28@color-purple-500: #9C27B0;
  29@color-purple-600: #8E24AA;
  30@color-purple-700: #7B1FA2;
  31@color-purple-800: #6A1B9A;
  32@color-purple-900: #4A148C;
  33
  34@color-blue-50: #E3F2FD;
  35@color-blue-100: #BBDEFB;
  36@color-blue-200: #90CAF9;
  37@color-blue-300: #64B5F6;
  38@color-blue-400: #42A5F5;
  39@color-blue-500: #2196F3;
  40@color-blue-600: #1E88E5;
  41@color-blue-700: #1976D2;
  42@color-blue-800: #1565C0;
  43@color-blue-900: #0D47A1;
  44
  45@color-cyan-50: #E0F7FA;
  46@color-cyan-100: #B2EBF2;
  47@color-cyan-200: #80DEEA;
  48@color-cyan-300: #4DD0E1;
  49@color-cyan-400: #26C6DA;
  50@color-cyan-500: #00BCD4;
  51@color-cyan-600: #00ACC1;
  52@color-cyan-700: #0097A7;
  53@color-cyan-800: #00838F;
  54@color-cyan-900: #006064;
  55
  56@color-teal-50: #E0F2F1;
  57@color-teal-100: #B2DFDB;
  58@color-teal-200: #80CBC4;
  59@color-teal-300: #4DB6AC;
  60@color-teal-400: #26A69A;
  61@color-teal-500: #009688;
  62@color-teal-600: #00897B;
  63@color-teal-700: #00796B;
  64@color-teal-800: #00695C;
  65@color-teal-900: #004D40;
  66
  67@color-green-50: #E8F5E9;
  68@color-green-100: #C8E6C9;
  69@color-green-200: #A5D6A7;
  70@color-green-300: #81C784;
  71@color-green-400: #66BB6A;
  72@color-green-500: #4CAF50;
  73@color-green-600: #43A047;
  74@color-green-700: #388E3C;
  75@color-green-800: #2E7D32;
  76@color-green-900: #1B5E20;
  77
  78@color-lime-50: #F9FBE7;
  79@color-lime-100: #F0F4C3;
  80@color-lime-200: #E6EE9C;
  81@color-lime-300: #DCE775;
  82@color-lime-400: #D4E157;
  83@color-lime-500: #CDDC39;
  84@color-lime-600: #C0CA33;
  85@color-lime-700: #AFB42B;
  86@color-lime-800: #9E9D24;
  87@color-lime-900: #827717;
  88
  89@color-yellow-50: #FFFDE7;
  90@color-yellow-100: #FFF9C4;
  91@color-yellow-200: #FFF59D;
  92@color-yellow-300: #FFF176;
  93@color-yellow-400: #FFEE58;
  94@color-yellow-500: #FFEB3B;
  95@color-yellow-600: #FDD835;
  96@color-yellow-700: #FBC02D;
  97@color-yellow-800: #F9A825;
  98@color-yellow-900: #F57F17;
  99
  100@color-orange-50: #FFF3E0;
  101@color-orange-100: #FFE0B2;
  102@color-orange-200: #FFCC80;
  103@color-orange-300: #FFB74D;
  104@color-orange-400: #FFA726;
  105@color-orange-500: #FF9800;
  106@color-orange-600: #FB8C00;
  107@color-orange-700: #F57C00;
  108@color-orange-800: #EF6C00;
  109@color-orange-900: #E65100;
  110
  111@color-brown-50: #EFEBE9;
  112@color-brown-100: #D7CCC8;
  113@color-brown-200: #BCAAA4;
  114@color-brown-300: #A1887F;
  115@color-brown-400: #8D6E63;
  116@color-brown-500: #795548;
  117@color-brown-600: #6D4C41;
  118@color-brown-700: #5D4037;
  119@color-brown-800: #4E342E;
  120@color-brown-900: #3E2723;
  121
  122@color-gray-50: #FAFAFA;
  123@color-gray-100: #F5F5F5;
  124@color-gray-200: #EEEEEE;
  125@color-gray-300: #E0E0E0;
  126@color-gray-400: #BDBDBD;
  127@color-gray-500: #9E9E9E;
  128@color-gray-600: #757575;
  129@color-gray-700: #616161;
  130@color-gray-800: #424242;
  131@color-gray-900: #212121;
  132
  133@color-black: #000000;
  134@color-white: #FFFFFF;
  134
  \ No newline at end of file
  

• std/less/icons.less [new file]

  1@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
  2
  3.ico {
  4	font-family: 'Material Icons';
  5	font-weight: normal;
  6	font-style: normal;
  7	font-size: 24px;
  8	display: inline-block;
  9	line-height: 1;
  10	text-transform: none;
  11	letter-spacing: normal;
  12	word-wrap: normal;
  13	white-space: nowrap;
  14	direction: ltr;
  15	-webkit-font-smoothing: antialiased;
  16	text-rendering: optimizeLegibility;
  17	-moz-osx-font-smoothing: grayscale;
  18	font-feature-settings: 'liga';
  19	user-select: none;
  20  }
  20
  \ No newline at end of file
  

• std/less/normalize.less [new file]

  1* {
  2	margin: 0;
  3	padding: 0;
  4	font-family: sans-serif;
  5	box-sizing: border-box;
  6
  7	&:hover,
  8	&:focus {
  9		outline: none;
  10	}
  11}
  12
  13html {
  14	position: relative;
  15	overflow-x: hidden;
  16	min-height: 100vh;
  17}
  18
  19body {
  20	width: 100%;
  21	font-size: 14px;
  22	min-height: 100vh;
  23}
  24
  25img {
  26	pointer-events: none;
  27	user-select: none;
  28}
  29
  30button,
  31input[type="submit"] {
  32	user-select: none;
  33	cursor: pointer;
  34}
  35
  36.hidden {
  37	display: none !important;
  38}
  39
  40.col {
  41	padding-left: @gap;
  42	padding-right: @gap;
  43}
  44
  45.container {
  46	.col;
  47	margin: 0 auto;
  48	max-width: @full-width;
  49}
  50
  51.container-fluid {
  52	.col;
  53	width: 100%;
  54}
  55
  56.row {
  57	margin-left: -@gap;
  58	margin-right: -@gap;
  59}
  59
  \ No newline at end of file