INTRODUCCIÓN a el Desarrollo de juegos

con el HTML5 Canvas API



@Johnp_js



ABOUT ME


Im a freelance Web Developer/ Designer
Im from Lima, Peru
Javascript is my favorite language!!

@johnp_js
My channel:  https://www.youtube.com/user/TecTimeJohnProg

Indice

¿Qué es?

LET'S GET STARTED

Lineas y Polígonos

Curvas y círculos

Imágenes

Animaciones

Ejemplos

Herramientas




¿ QUÉ es canvas?

canvas

  • Es un elemento HTML que permite la generación de gráficos dinámicamente por medio del scripting.
  • Permite generar gráficos estáticos y animaciones.
  • Introducido for  Safari 1.3 en el 2004
  • client-side JavaScript


3D





Let's Get Started

SOPORTE DE LOS NAVEGADORES


EL ELEMENTO Canvas 


<canvas></canvas>
 <canvas width="500" height="500"></canvas>
 <canvas width="500" height="500">Your browser does not support the HTML5 Canvas API</canvas>
<canvas id="canvas" width="500" height="500"></canvas>
<script>    var canvas = document.getElementById('canvas'),        ctx    = canvas.getContext('2d');</script>
http://jsbin.com/AwelacO/1/edit




LineAS Y POLIGONOS

LineAS

beginPath()
moveTo(x, y)
lineTo(x, y)
fill()
stroke()
http://jsbin.com/AMoDiPe/1/edit

POLÍGONOS

fillRect(x, y, w, h)
strokeRect(x, y, w, h)
clearRect(x, y, w, h)
rect(x,y,w,h)
http://jsbin.com/UgofeYu/1/edit






cÍrcULOS

ArcOS

arc(x, y, radius, startAngle, endAngle, counterclockwise)
arcTo(x1, y1, x2, y2, radius)
http://jsbin.com/IVuPEwE/1/edit





ImÁgeNES

dIBUJAR

drawImage()
3 arguments
drawImage(source, x, y)
5 arguments
drawImage(source, x, y, w, h)
9 arguments
drawImage(source, sourceX, sourceY,
sourceW, sourceH, x, y, w, h)
http://jsbin.com/eMajepI/1/edit

copIAR

  • from the same canvas
  • from a different canvas
  • from a <video> tag
http://jsbin.com/umolIRi/1/edit






AnimaCIONES

AnimaCIONES

setTimeout()
requestAnimationFrame()

http://jsbin.com/UCuloxa/1/edit





EJEMPLO:

Parallax Background Animation
http://superseriousness.com/canvas/
(Example only optimised for Chrome)


Frameworks



http://paperjs.org/
http://canvasxpress.org/
http://jcscript.com/
http://kineticjs.com/
http://fabricjs.com/

HERRAMIENTAS
https://www.scirra.com/

EJEMPLOS

http://hexgl.bkcore.com/play/
http://dragonbound.net/

3d

http://threejs.org/

thanks

Introducción a desarrollo de juegos con HTML5 CANVAS API

By johnprog

Source: Sebastian Piott

Introducción a desarrollo de juegos con HTML5 CANVAS API

En estos slides se muestra algunos ejemplos básicos que son las herramientas para poder crear nuestros juegos con javascript. Yeah!!

  • 1,316

More from johnprog