Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
4
respuestas

creeper sencillo

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Diseñando gráficos con Canvas y actividad La cara de Creeper

por Arturo José Mogollon Diaz
| 54.2k xp | 14 posts
<canvas width="600" height="400"></canvas>

<script>

    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "darkgreen";
    pincel.fillRect(0,0,350,300);

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.fillRect(50,50,90,90);  //ojo izquierdo

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.fillRect(210,50,90,90);  //ojo derecho

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.fillRect(140,140,70,100);  //nariz

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.fillRect(100,190,40,110);  //boca izquierda

    pincel.fillStyle = "black";
    pincel.beginPath();
    pincel.fillRect(210,190,40,110);  //boca derecha



</script>
4 respuestas
por Cristian Manuel Orihuela
| 147.5k xp | 8 posts
Jefe de Administración

HolaArturo! Solo una sugerencia: para dibujar los rectangulos no es necesaria la instruccion beginpath, el profe la uso para circulo y triangulo. Saludos!

por Gustavo Adolfo Lopez
| 169.1k xp | 16 posts

Hola a todos, yo dibuje solo usando el ancho y alto de la pizarra con las medidas de la cabeza..

<canvas width="350" height="300"></canvas> <!-- Aca se define el tamaño de la pizarra. -->
<script>
    var pantalla = document.querySelector("canvas");  //querySelector conecta las eiquetas HTML con acciones en JS. Entoces se crea pantalla y se toma el valor de canvas, o sea la pizarra.
    var pincel = pantalla.getContext("2d");  //getContext toma todo el contenido de pantalla, y se trabaja en 2d.

    pincel.fillStyle = "Green";   //Cabeza
    pincel.fillRect(0,0,350,300);

    pincel.fillStyle = "black";   //Ojos
    pincel.fillRect(50,50,90,90);
    pincel.fillStyle = "black";   //Ojos
    pincel.fillRect(210,50,90,90);


    pincel.fillStyle = "black";  //Nariz
    pincel.fillRect(140,140,70,100);

    pincel.fillStyle = "black";     //Boca
    pincel.fillRect(210,190,40,110);
    pincel.fillStyle = "Black";     //Boca
    pincel.fillRect(100,190,40,110);

</script>

Saludos a todos,,,y exitos!!

por Arturo José Mogollon Diaz
| 54.2k xp | 14 posts

gracias Cristian Manuel Orihuela, si es cierto ! gracias por tu recomendación

por Yeimer Alberto Márquez
| 137.8k xp | 101 posts

A mi me gustó eso. Hiciste cálculo basado en una estrategia diferente para llegar al mismo objetivo. Valorar que es más eficiente sería otra cosa. Pero me pareció genial. Felicitaciones Gustavo.