Game Gallery: WebGL & Coding Demos

Game Gallery: WebGL & Coding Demos

body { font-family: Arial, sans-serif; background: #181c20; color: #f0f0f0; margin: 0; padding: 0; } h1 { text-align: center; margin-top: 24px; } #gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 24px 0; } .gallery-btn { background: #222; color: #fff; border: none; padding: 12px 24px; border-radius: 6px; font-size: 1rem; cursor: pointer; transition: background 0.2s; margin-bottom: 8px; } .gallery-btn:hover { background: #444; } #demo-container { display: flex; justify-content: center; align-items: flex-start; min-height: 400px; margin-bottom: 40px; } .demo-panel { display: none; width: 500px; min-height: 350px; background: #222; border-radius: 10px; box-shadow: 0 2px 12px #000a; padding: 24px; margin: 0 12px; position: relative; } .demo-panel.active { display: block; } canvas { display: block; margin: 0 auto; background: #111; border-radius: 8px; } #snake-canvas, #pong-canvas, #breakout-canvas, #tictactoe-canvas, #2048-canvas, #minesweeper-canvas, #memory-canvas, #flappy-canvas, #asteroids-canvas, #invaders-canvas, #maze-canvas, #platformer-canvas, #sokoban-canvas, #lightsout-canvas, #connect4-canvas, #simon-canvas, #dino-canvas, #match3-canvas, #pacman-canvas, #tetris-canvas, #webgl-cube-canvas { background: #222; border: 2px solid #444; margin: 0 auto; display: block; } #fib-output { background: #181c20; color: #fff; border: 1px solid #333; border-radius: 6px; padding: 8px; margin-top: 12px; min-height: 32px; font-size: 1.1em; } import { setupWebGLCube } from './webgl-cube.js'; import { setupSnakeGame } from './snake.js'; import { setupPong } from './pong.js'; import { setupBreakout } from './breakout.js'; import { setupTicTacToe } from './tictactoe.js'; import { setup2048 } from './2048.js'; import { setupMinesweeper } from './minesweeper.js'; import { setupMemory } from './memory.js'; import { setupFlappy } from './flappy.js'; import { setupAsteroids } from './asteroids.js'; import { setupInvaders } from './invaders.js'; import { setupMaze } from './maze.js'; import { setupPlatformer } from './platformer.js'; import { setupSokoban } from './sokoban.js'; import { setupLightsOut } from './lightsout.js'; import { setupConnect4 } from './connect4.js'; import { setupSimon } from './simon.js'; import { setupDino } from './dino.js'; import { setupMatch3 } from './match3.js'; import { setupPacman } from './pacman.js'; import { setupTetris } from './tetris.js'; import { setupPythonFib } from './python-fib.js'; const demos = [ { id: 'webgl-cube', label: 'WebGL Rotating Cube', setup: setupWebGLCube }, { id: 'snake-js', label: 'Snake Game', setup: setupSnakeGame }, { id: 'pong', label: 'Pong', setup: setupPong }, { id: 'breakout', label: 'Breakout', setup: setupBreakout }, { id: 'tictactoe', label: 'Tic-Tac-Toe', setup: setupTicTacToe }, { id: '2048', label: '2048', setup: setup2048 }, { id: 'minesweeper', label: 'Minesweeper', setup: setupMinesweeper }, { id: 'memory', label: 'Memory', setup: setupMemory }, { id: 'flappy', label: 'Flappy Bird', setup: setupFlappy }, { id: 'asteroids', label: 'Asteroids', setup: setupAsteroids }, { id: 'invaders', label: 'Space Invaders', setup: setupInvaders }, { id: 'maze', label: 'Maze', setup: setupMaze }, { id: 'platformer', label: 'Platformer', setup: setupPlatformer }, { id: 'sokoban', label: 'Sokoban', setup: setupSokoban }, { id: 'lightsout', label: 'Lights Out', setup: setupLightsOut }, { id: 'connect4', label: 'Connect Four', setup: setupConnect4 }, { id: 'simon', label: 'Simon', setup: setupSimon }, { id: 'dino', label: 'Dino Run', setup: setupDino }, { id: 'match3', label: 'Match-3', setup: setupMatch3 }, { id: 'pacman', label: 'Pac-Man', setup: setupPacman }, { id: 'tetris', label: 'Tetris', setup: setupTetris }, { id: 'python-fib', label: 'Python: Fibonacci (Pyodide)', setup: setupPythonFib } ]; const gallery = document.getElementById('gallery'); const demoContainer = document.getElementById('demo-container'); const demoPanels = {}; // Create buttons and panels demos.forEach(demo => { const btn = document.createElement('button'); btn.className = 'gallery-btn'; btn.textContent = demo.label; btn.dataset.demo = demo.id; gallery.appendChild(btn); const panel = document.createElement('div'); panel.id = demo.id; panel.className = 'demo-panel'; demoContainer.appendChild(panel); demoPanels[demo.id] = panel; }); function showDemo(demoId) { Object.keys(demoPanels).forEach(key => { demoPanels[key].classList.toggle('active', key === demoId); }); } gallery.addEventListener('click', e => { if (e.target.tagName === 'BUTTON') { const demoId = e.target.getAttribute('data-demo'); showDemo(demoId); const demo = demos.find(d => d.id === demoId); if (demo && !demoPanels[demoId].hasChildNodes()) { demo.setup(demoPanels[demoId]); } } }); // Show the first demo by default showDemo(demos[0].id); demos[0].setup(demoPanels[demos[0].id]); export function setupWebGLCube(container) { container.innerHTML = ''; const canvas = document.createElement('canvas'); canvas.id = 'webgl-cube-canvas'; canvas.width = 400; canvas.height = 350; container.appendChild(canvas); const gl = canvas.getContext('webgl'); if (!gl) { container.innerHTML = 'WebGL not supported.'; return; } const vsSource = ` attribute vec4 aPosition; attribute vec4 aColor; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; varying lowp vec4 vColor; void main(void) { gl_Position = uProjectionMatrix * uModelViewMatrix * aPosition; vColor = aColor; } `; const fsSource = ` varying lowp vec4 vColor; void main(void) { gl_FragColor = vColor; } `; function loadShader(type, source) { const shader = gl.createShader(type); gl.shaderSource(shader, source); gl.compileShader(shader); if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { gl.deleteShader(shader); return null; } return shader; } const vertexShader = loadShader(gl.VERTEX_SHADER, vsSource); const fragmentShader = loadShader(gl.FRAGMENT_SHADER, fsSource); const shaderProgram = gl.createProgram(); gl.attachShader(shaderProgram, vertexShader); gl.attachShader(shaderProgram, fragmentShader); gl.linkProgram(shaderProgram); if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) { container.innerHTML = 'Unable to initialize the shader program.'; return; } gl.useProgram(shaderProgram); const positions = new Float32Array([ -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, 1, -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1, -1, -1, 1, -1, -1, 1, 1, 1, 1, 1, 1, 1, -1, -1, -1, -1, 1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, -1, 1, 1, -1, 1, 1, 1, 1, -1, 1, -1, -1, -1, -1, -1, 1, -1, 1, 1, -1, 1, -1, ]); const colors = new Float32Array([ 1,0,0,1, 1,0,0,1, 1,0,0,1, 1,0,0,1, 0,1,0,1, 0,1,0,1, 0,1,0,1, 0,1,0,1, 0,0,1,1, 0,0,1,1, 0,0,1,1, 0,0,1,1, 1,1,0,1, 1,1,0,1, 1,1,0,1, 1,1,0,1, 1,0,1,1, 1,0,1,1, 1,0,1,1, 1,0,1,1, 0,1,1,1, 0,1,1,1, 0,1,1,1, 0,1,1,1, ]); const indices = new Uint16Array([ 0,1,2, 0,2,3, 4,5,6, 4,6,7, 8,9,10, 8,10,11, 12,13,14, 12,14,15, 16,17,18, 16,18,19, 20,21,22, 20,22,23, ]); const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW); const colorBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.bufferData(gl.ARRAY_BUFFER, colors, gl.STATIC_DRAW); const indexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); const aPosition = gl.getAttribLocation(shaderProgram, 'aPosition'); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.vertexAttribPointer(aPosition, 3, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(aPosition); const aColor = gl.getAttribLocation(shaderProgram, 'aColor'); gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer); gl.vertexAttribPointer(aColor, 4, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(aColor); const uModelViewMatrix = gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'); const uProjectionMatrix = gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'); function mat4Identity() { return [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1]; } function mat4Perspective(out, fovy, aspect, near, far) { const f = 1.0 / Math.tan(fovy / 2); out[0] = f / aspect; out[1] = 0; out[2] = 0; out[3] = 0; out[4] = 0; out[5] = f; out[6] = 0; out[7] = 0; out[8] = 0; out[9] = 0; out[10] = (far + near) / (near - far); out[11] = -1; out[12] = 0; out[13] = 0; out[14] = (2 * far * near) / (near - far); out[15] = 0; } function mat4RotateY(out, a, rad) { const s = Math.sin(rad); const c = Math.cos(rad); out[0] = c; out[2] = s; out[8] = -s; out[10] = c; } function mat4RotateX(out, a, rad) { const s = Math.sin(rad); const c = Math.cos(rad); out[5] = c; out[6] = s; out[9] = -s; out[10] = c; } let then = 0; function render(now) { now *= 0.001; then = now; gl.clearColor(0.08, 0.09, 0.12, 1); gl.clearDepth(1.0); gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.LEQUAL); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); const projectionMatrix = new Float32Array(16); mat4Perspective(projectionMatrix, Math.PI / 4, canvas.width / canvas.height, 0.1, 100.0); const modelViewMatrix = new Float32Array(mat4Identity()); modelViewMatrix[14] = -6; mat4RotateY(modelViewMatrix, modelViewMatrix, now); mat4RotateX(modelViewMatrix, modelViewMatrix, now * 0.7); gl.uniformMatrix4fv(uProjectionMatrix, false, projectionMatrix); gl.uniformMatrix4fv(uModelViewMatrix, false, modelViewMatrix); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer); gl.drawElements(gl.TRIANGLES, 36, gl.UNSIGNED_SHORT, 0); requestAnimationFrame(render); } requestAnimationFrame(render); } export function setupSnakeGame(container) { container.innerHTML = ''; const canvas = document.createElement('canvas'); canvas.id = 'snake-canvas'; canvas.width = 400; canvas.height = 400; container.appendChild(canvas); const ctx = canvas.getContext('2d'); const gridSize = 20; const tileCount = canvas.width / gridSize; let snake = [{ x: 10, y: 10 }]; let direction = { x: 0, y: 0 }; let food = { x: 15, y: 15 }; let score = 0; let gameOver = false; function draw() { ctx.fillStyle = '#181c20'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#e74c3c'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize); ctx.fillStyle = '#2ecc40'; snake.forEach((segment, i) => { ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize); }); ctx.fillStyle = '#fff'; ctx.font = '18px Arial'; ctx.fillText('Score: ' + score, 10, 24); if (gameOver) { ctx.fillStyle = '#fff'; ctx.font = '32px Arial'; ctx.fillText('Game Over', 110, 200); } } function update() { if (gameOver) return; const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; if ( head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount ) { gameOver = true; draw(); return; } if (snake.some(seg => seg.x === head.x && seg.y === head.y)) { gameOver = true; draw(); return; } snake.unshift(head); if (head.x === food.x && head.y === food.y) { score++; food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; } else { snake.pop(); } } function loop() { update(); draw(); if (!gameOver) setTimeout(loop, 100); } document.addEventListener('keydown', e => { if (gameOver && (e.key === ' ' || e.key === 'Enter')) { snake = [{ x: 10, y: 10 }]; direction = { x: 0, y: 0 }; food = { x: 15, y: 15 }; score = 0; gameOver = false; loop(); } if (e.key === 'ArrowUp' && direction.y !== 1) direction = { x: 0, y: -1 }; if (e.key === 'ArrowDown' && direction.y !== -1) direction = { x: 0, y: 1 }; if (e.key === 'ArrowLeft' && direction.x !== 1) direction = { x: -1, y: 0 }; if (e.key === 'ArrowRight' && direction.x !== -1) direction = { x: 1, y: 0 }; }); draw(); loop(); } export function setupPythonFib(container) { container.innerHTML = `

Fibonacci N:

Loading Python...

`; let pyodideReady = false; let pyodide = null; async function loadPyodideAndRun() { if (!window.loadPyodide) { const script = document.createElement('script'); script.src = "https://cdn.jsdelivr.net/pyodide/v0.25.1/full/pyodide.js"; script.onload = runFib; document.body.appendChild(script); } else { runFib(); } } async function runFib() { if (!pyodideReady) { container.querySelector('#fib-output').textContent = 'Loading Python...'; pyodide = await window.loadPyodide(); pyodideReady = true; } runPythonFib(); } async function runPythonFib() { const n = parseInt(container.querySelector('#fib-n').value, 10); const code = ` def fib(n): a, b = 0, 1 for _ in range(n): a, b = b, a + b return a fib(${n}) `; const result = await pyodide.runPythonAsync(code); container.querySelector('#fib-output').textContent = `fib(${n}) = ${result}`; } container.querySelector('#fib-run').addEventListener('click', () => { if (pyodideReady) { runPythonFib(); } else { loadPyodideAndRun(); } }); loadPyodideAndRun(); } export function setupPong(container) { container.innerHTML = '

Pong coming soon!

'; } export function setupBreakout(container) { container.innerHTML = '

Breakout coming soon!

'; } export function setupTicTacToe(container) { container.innerHTML = '

Tic-Tac-Toe coming soon!

'; } export function setup2048(container) { container.innerHTML = '

2048 coming soon!

'; } export function setupMinesweeper(container) { container.innerHTML = '

Minesweeper coming soon!

'; } export function setupMemory(container) { container.innerHTML = '

Memory coming soon!

'; } export function setupFlappy(container) { container.innerHTML = '

Flappy Bird coming soon!

'; } export function setupAsteroids(container) { container.innerHTML = '

Asteroids coming soon!

'; } export function setupInvaders(container) { container.innerHTML = '

Space Invaders coming soon!

'; } export function setupMaze(container) { container.innerHTML = '

Maze coming soon!

'; } export function setupPlatformer(container) { container.innerHTML = '

Platformer coming soon!

'; } export function setupSokoban(container) { container.innerHTML = '

Sokoban coming soon!

'; } export function setupLightsOut(container) { container.innerHTML = '

Lights Out coming soon!

'; } export function setupConnect4(container) { container.innerHTML = '

Connect Four coming soon!

'; } export function setupSimon(container) { container.innerHTML = '

Simon coming soon!

'; } export function setupDino(container) { container.innerHTML = '

Dino Run coming soon!

'; } export function setupMatch3(container) { container.innerHTML = '

Match-3 coming soon!

'; } export function setupPacman(container) { container.innerHTML = '

Pac-Man coming soon!

'; } export function setupTetris(container) { container.innerHTML = '

Tetris coming soon!

'; }