{"id":24171285,"url":"https://github.com/gitfrandu4/webgl2-pong-game","last_synced_at":"2026-05-31T21:32:07.149Z","repository":{"id":271627201,"uuid":"914062435","full_name":"gitfrandu4/webgl2-pong-game","owner":"gitfrandu4","description":"IG P2. A WebGL2-based Pong game demonstrating 2D primitive rendering and basic computer graphics concepts. Built with vanilla JavaScript and GLSL shaders.","archived":false,"fork":false,"pushed_at":"2025-01-08T21:56:09.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T12:33:07.016Z","etag":null,"topics":["computer-gr","glsl","pong-game","webgl","webgl2"],"latest_commit_sha":null,"homepage":"https://gitfrandu4.github.io/webgl2-pong-game/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gitfrandu4.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-08T21:53:56.000Z","updated_at":"2025-01-08T21:56:12.000Z","dependencies_parsed_at":"2025-01-08T22:51:00.740Z","dependency_job_id":null,"html_url":"https://github.com/gitfrandu4/webgl2-pong-game","commit_stats":null,"previous_names":["gitfrandu4/webgl2-pong-game"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/gitfrandu4/webgl2-pong-game","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fwebgl2-pong-game","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fwebgl2-pong-game/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fwebgl2-pong-game/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fwebgl2-pong-game/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gitfrandu4","download_url":"https://codeload.github.com/gitfrandu4/webgl2-pong-game/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gitfrandu4%2Fwebgl2-pong-game/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33750474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["computer-gr","glsl","pong-game","webgl","webgl2"],"created_at":"2025-01-13T00:36:27.967Z","updated_at":"2026-05-31T21:32:07.132Z","avatar_url":"https://github.com/gitfrandu4.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pong Game - Practica 2\n\nEste proyecto es un juego de Pong implementado usando WebGL, desarrollado como parte del curso \"Informática Gráfica\", Practica 2. Demuestra la aplicación práctica de conceptos fundamentales de primitivas 2D y renderización gráfica.\n\n## Tabla de Contenidos\n\n- [Pong Game - Practica 2](#pong-game---practica-2)\n  - [Tabla de Contenidos](#tabla-de-contenidos)\n  - [Descripción General](#descripción-general)\n  - [Fundamentos Técnicos](#fundamentos-técnicos)\n  - [Características](#características)\n  - [Instalación](#instalación)\n  - [Uso](#uso)\n  - [Controles](#controles)\n  - [Implementación Técnica](#implementación-técnica)\n  - [Mejoras](#mejoras)\n  - [Licencia](#licencia)\n\n## Descripción General\n\nEste proyecto implementa un juego de Pong utilizando WebGL, demostrando la aplicación práctica de primitivas 2D y técnicas de renderización. El juego incluye elementos básicos como una bola y una paleta, implementados mediante primitivas geométricas fundamentales.\n\n## Fundamentos Técnicos\n\nEl juego se basa en los siguientes conceptos clave de gráficos por computadora:\n\n- **Primitivas 2D**:\n\n  - Uso de formas básicas (rectángulos y círculos)\n  - Rasterización de primitivas a píxeles\n  - Renderización basada en triángulos\n\n  ```javascript\n  function drawRectangle(x, y, width, height, color) {\n  \tvar vertices = [\n  \t\tx,\n  \t\ty,\n  \t\tx + width,\n  \t\ty,\n  \t\tx,\n  \t\ty + height,\n  \t\tx,\n  \t\ty + height,\n  \t\tx + width,\n  \t\ty,\n  \t\tx + width,\n  \t\ty + height,\n  \t];\n  \tgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);\n  \tgl.uniform4fv(colorLocation, color);\n  \tgl.drawArrays(gl.TRIANGLES, 0, 6);\n  }\n  ```\n\n- **Técnicas de Renderizado**:\n\n  - Implementación de shaders personalizados (vertex y fragment)\n  - Manejo de buffers de vértices\n  - Control de color y posicionamiento\n\n  ```javascript\n  // Vertex Shader\n  #version 300 es\n  precision mediump float;\n  in vec2 aCoordinates;\n  out vec2 vCoordinates;\n  void main(void) {\n    gl_Position = vec4(aCoordinates, 0, 1);\n    vCoordinates = aCoordinates;\n  }\n\n  // Fragment Shader\n  #version 300 es\n  precision mediump float;\n  uniform vec4 uColor;\n  in vec2 vCoordinates;\n  out vec4 fragColor;\n  void main(void) {\n    fragColor = uColor;\n  }\n  ```\n\n## Características\n\n- Sistema de renderizado WebGL2\n- Shaders GLSL 300 es\n- Manejo de colisiones\n- Sistema de puntuación\n- Diseño responsivo\n- Controles multiplataforma\n- Historial de puntuaciones\n\n## Instalación\n\n1. Clona el repositorio\n2. No requiere dependencias adicionales\n3. Abre `index.html` en un navegador compatible con WebGL2\n\n## Uso\n\nEl juego se inicia a través del botón \"Empezar\" y muestra:\n\n- Canvas de juego (350x350 píxeles)\n- Panel de puntuación actual\n- Historial de últimas 5 partidas\n\n## Controles\n\n- **Teclado**:\n\n  - Flecha Arriba: Mover paleta arriba\n  - Flecha Abajo: Mover paleta abajo\n  - Espacio: Iniciar juego\n\n- **Táctil**:\n  - Deslizar arriba/abajo para mover la paleta\n\n## Implementación Técnica\n\n1. **Renderizado**:\n\n   - Uso de WebGL2 para renderizado\n   - Shaders personalizados para vértices y fragmentos\n   - Buffer de vértices para geometría\n\n   ```javascript\n   function init() {\n   \tcanvas = document.getElementById('my_Canvas');\n   \tgl = canvas.getContext('webgl2');\n\n   \tvar vertShader = createShader(\n   \t\tgl,\n   \t\tgl.VERTEX_SHADER,\n   \t\tdocument.getElementById('vertex-shader').text.trim()\n   \t);\n   \tvar fragShader = createShader(\n   \t\tgl,\n   \t\tgl.FRAGMENT_SHADER,\n   \t\tdocument.getElementById('fragment-shader').text.trim()\n   \t);\n\n   \tvar shaderProgram = createProgram(gl, vertShader, fragShader);\n   \tgl.useProgram(shaderProgram);\n   }\n   ```\n\n2. **Primitivas Utilizadas**:\n\n   - Rectángulos para la paleta\n   - Círculo para la bola\n   - Líneas para el campo de juego\n\n   ```javascript\n   function drawLines() {\n   \tvar lines = [\n   \t\t[-0.9, -1, -0.9, 1],\n   \t\t[0, -1, 0, 1],\n   \t\t[-0.8, -1, -0.8, 1],\n   \t\t[-1, 0, 1, 0],\n   \t];\n   \tlines.forEach((line) =\u003e {\n   \t\tgl.bufferData(gl.ARRAY_BUFFER, new Float32Array(line), gl.STATIC_DRAW);\n   \t\tgl.uniform4fv(colorLocation, [1, 1, 1, 1]);\n   \t\tgl.drawArrays(gl.LINES, 0, 2);\n   \t});\n   }\n   ```\n\n3. **Sistema de Colisiones**:\n\n   - Detección de bordes\n   - Colisiones paleta-bola\n   - Ajuste de velocidad dinámico\n\n   ```javascript\n   function handleCollisions() {\n   \tif (ball.x + ball.width \u003e 1) {\n   \t\tball.speedX = -ball.speedX;\n   \t}\n   \tif (ball.x \u003c -0.95) {\n   \t\tresetBall();\n   \t\tupdateScoreHistory();\n   \t\tresetPlayer();\n   \t}\n   \tif (ball.y + ball.height \u003e 1 || ball.y \u003c -1) {\n   \t\tball.speedY = -ball.speedY;\n   \t}\n   }\n   ```\n\n4. **Optimizaciones**:\n\n   - Uso de requestAnimationFrame para el bucle de juego\n   - Manejo eficiente de buffers\n   - Cálculos optimizados para colisiones\n\n   ```javascript\n   function render() {\n   \tgl.clearColor(0.1, 0.2, 0.3, 1.0);\n   \tgl.clear(gl.COLOR_BUFFER_BIT);\n   \tgl.viewport(0, 0, canvas.width, canvas.height);\n\n   \tdrawShapePong(ball.shape, ball);\n   \tdrawShapePong(player1.shape, player1);\n   \tdrawLines();\n   \thandleCollisions();\n\n   \tball.x += ball.speedX;\n   \tball.y += ball.speedY;\n   \tplayer1.y += player1.movement;\n\n   \twindow.requestAnimationFrame(render);\n   }\n   ```\n\n## Mejoras\n\n- Sistema de dificultad progresiva\n- Seguimiento de puntuación\n- Historial de partidas\n- Controles multiplataforma\n- Diseño responsivo\n- Feedback visual y de jugabilidad\n\n## Licencia\n\nMIT License\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitfrandu4%2Fwebgl2-pong-game","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgitfrandu4%2Fwebgl2-pong-game","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgitfrandu4%2Fwebgl2-pong-game/lists"}