¿Estás disfrutando #SemanaBackend? Desbloquea Premium anual con precio especial

D
H
M
S
Ir al descuento.

12 comentario(s)

Ivan Acuña

08 Septiembre 17

more_vert
this.canvas is null

en las siguientes lineas:
this.canvas.width = board.width;
var board_view = new BoardView(canvas,board);

mi codigo completo:

(function(){
self.Board = function(width,height){
this.width = width;
this.height = height;
this.playing = false;
this.game_over = false;
this.bars = [];
this.ball = null;
}
self.Board.prototype = {
get elements(){
var elements = this.bars;
elements.push(this.ball);
return elements;
}
}
})();
//funcion para las barras
(function(){

self.Bar = function (x,y,width,height,board){

this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.board = board;
this.board.bars.push(this);
this.kind = "rectangle";
}

self.Bar.prototype = {
down: function(){

},
up: function(){

}
}

})();

(function(){
self.BoardView = function(canvas,board){
this.canvas = canvas;
this.canvas.width = board.width;
this.canvas.height = board.height;
this.board = board;
this.ctx = canvas.getContext("2d");

}
self.BoardView.prototype = {
draw : function(){
for (var i = this.board.elements.length - 1; i >= 0; i--) {
var el = this.board.elements[i];
draw(this.ctx,el);
};
}
}

function draw(ctx,element){
if(element !== null && element.hasOwnProperty("kind")){
switch(element.kind){
case "rectangle":
ctx.fillRect(element.x,element.y,element.width,element.height);
break;
}

}

}
})();

self.addEventListener("load",main)
function main(){
var board = new Board(800,400);
var bar = new Bar(20,100,40,100,board);
var canvas = document.getElementById('canvas');
var board_view = new BoardView(canvas,board);
board_view.draw();
}






Ver respuestas (3)

@endaniel1

31 Marzo 17

more_vert
tengo un problema con el codigo hice todo lo q dijistes q hay q hacer, claro hay algunas cosas q por los momentos no entiendo, pero mi problema esta es q no se muestra el rectangula si me pudieran ayudar
//funcion del modelo
(function(){

self.Board = function(width,height){
this.width=width;//varible en donde capturamos el ancho
this.height=height;//varible en donde capturamos el largo
this.star=true;//varible para ver si el juego se esta jugando
this.game_over=false;//varible para ver si se acabo el juego
this.bars=[];//tiene un arrglo en donde van a estar las bars
this.ball=null;
}

self.Board.prototype = {
get elementos(){//este elemento lo q hace es retorna tantos las bars del juego como la ball q estan dentro del tablero
var elementos=this.bars;
elementos.push(this.ball);
return elementos;
}

}


})();

//funcion de la bars
(function(){
self.Bar=function(x,y,width,heigth,board){//funcion q envia los valores de "x","y","width","heigth","board"
this.x=x;//varible en donde obtiene el valor del eje "x"
this.y=y;//varible en donde obtiene el valor del eje "y"
this.width=width;//varible en donde obtiene el valor del ancho "width"
this.heigth=heigth;//varible en donde obtiene el valor del largo "heigth"
this.board=board;//varible en donde obtiene el valor del board o q tabla o lugar en donde va a estar las bars

this.board.bars.push(this);//varrble q accede al construtor "board" a donde esta el arrglo bars y le asignamos un nuevo elemento con "push" q es "this"

this.kind="rectangle";//varrible end donde el "canvas" sabe si en un rectagulo circulo, etc
}

self.Bar.prototype={
arriba:function(){

},
abajo: function(){
}

}

})();



//vista de board o tablero en este caso
(function(){

self.BoardVista= function(canvas,board){
this.canvas=canvas;
this.canvas.width=board.width;
this.canvas.heigth=board.heigth;
this.board=board;
this.ctx=canvas.getContext("2d");//"this.ctx"es el obejeto atraves en donde podemos dibujar en javascript
}


self.BoardVista.prototype = {
draw:function(){
for(var i=this.board.elementos.lenght-1;i>=0;i--){

var el=this.board.elementos[i];//elemento a dibujar

draw(this.ctx,el);
}

}

}

//no entiendo muy bien estas funciones porque no la explicaron ver o buscar un curso en donde las expliquen
//solo se q sirva para dibujar los elementos
function draw(ctx,elementos){
if(elementos !== null && elementos.hasOwnProperty("kind")){
switch(elementos.kind){
case "rectangle":
ctx:fillRect(elementos.x,elementos.x,elemento.width,elemento.heigth);
break;
}

}



}

})();


window.addEventListener("load",principal);//funcion que se ejecuta cuando se carga la ventada del navegador "load" cuando carga y como segundo parametro colocamos la funcion "principal" en este caso


//funcion en donde controlador en donde instanciamos los objetos
function principal(){
var board = new Board(800,400);//crea una instancia de la clase board en donde obtiene el ando"width" y el alto"heigth"

var bar=new Bar(20,100,40,100,board);

var canvas=document.getElementById("canvas");//"getElementById" obtenemos el valor del "canvas" y
//se lo asinamos a una varible n esta caso llamada "canvas"
var board_vista=new BoardVista(canvas,board);//a esta instancia le pasa el valor del "canvas"  el modelo del board(o la vista)
board_vista.draw();
}

@luisangel97

11 Octubre 16

1
more_vert

buenas, he estado siguiendo este curso y ya he revisado bastante pero no consigo descubir el error.

este es el error scripts.js:21 Uncaught TypeError: Cannot read property 'push' of undefined


y este es mi codigo:

$(document).ready(function(){



(function(){
  //clase Board
  // se incicializa el width, height, dos variables para saber si se esta jugando o se a cabo y los elementos.
  self.Board = function(width,height)
  {
    this.width = width;
    this.height = height;
    this.playing = false;
    this.gameOver = false;
    this.bar = [];
    this.ball = null;
  }
// constructor
  self.Board.prototype = {
    get elements()
    {
      var elements = this.bars;
      elements.push(this.ball);
      return elements;
    }



}



})();



(function(){
  self.Bar = function(x,y,width,height,board)
  {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.board = board;
    this.board.bar.push(this);
    this.kind = 'rectangle';
  }



self.Bar.prototype = {
    down : function(){



},
up : function(){

}




}
})();



(function(){
  self.BoardView = function(canvas,board)
  {
    this.canvas = canvas;
    this.canvas.width = board.width;
    this.canvas.height = board.height;
    this.board = board;
    this.ctx = canvas.getContext('2d');
  }



self.BoardView.prototype = {
    draw : function(){
      for (var i = 0; i <= this.board.elements.length -1; i++) {
        var el = this.Board.elements[i];



    draw(this.ctx,el);
  };
}




}



function draw(ctx,element)
  {
    if (element !== null && element.hasOwnProperty('kind')) {
      switch(element.kind)
      {
        case 'rectangle' :
        ctx.fillRect(element.x,element.y,element.width,element.height);
        break;
      }
    }



}
})();



main();



function main ()
{
  var board = new Board(500,200);
  var bar = new Bar(20,100,40,100,board);
  var canvas = document.getElementById('canvas');
  var boardView = new BoardView(canvas,board);
  boardView.draw();
}
});

Ver respuestas (3)

@oriolrg

02 Septiembre 16

more_vert
He seguido el video, y no veo ningun tipo de problema en el codigo, pero al debugar con la consola de firefox, me da un problema con element

TypeError: element is undefined
draw()
main.js:77
self.BoardView.prototype.draw()
main.js:70
main()

Y definitivament con el loc de la consola veo que esta vacio element

Alvaro Chirou

09 Agosto 16

2
more_vert

Hola.

Siguiendo por completo el video, termine con este código en main.js :

(function(){ self.Board =function(width,height){ //pizarron this.width = width; this.height = height; this.playing = false; this.game_over = false; this.bars = []; this.ball = null; }

self.Board.prototype = { get elements(){ var elements = this.bars; elements.push(this.ball); return elements; } } })();

(function(){ self.Bar = function(x,y,width,height,board){ this.x = x; this.y = y; this.width = width; this.height = height; this.board = board; this.board.bars.push(this); this.kind = "rectangle"; }

self.Bar.prototype = { down: function(){

}, up: function(){

} } })();

(function(){ self.BoardView = function(canvas,board){ this.canvas = canvas; this.canvas.width = board.width; this.canvas.height = board.height; this.board = board; this.ctx = canvas.getContext("2d"); }

self.BoardView.prototype = { draw: function () { for (var i = this.board.elements.length - 1; i >= 0; i--) { var el = this.board.elements[i];

draw(this.ctx,el);

} } }

function draw(ctx,element){ if (element !== null && element.hasOwnProperty("kind")){ swith(element.kind){ case "rectangle": ctx.fillRect(element.x,element.y,element.height,element.width); break; } } } })();

self.addEventListener("load",main); function main (){ var board = new Board(800,400); var bar = new Bar(20,100,40,100,board); var canvas = document.getElementById('canvas'); var board_view = new BoardView(canvas,board); console.log(board); board_view.draw(); }

en index.html:

<!DOCTYPE html>

Ping Pong Álvaro

El problema lo tengo en main.js, en la linea 62 me devuelve un error que dice Uncaught SyntaxError: Unexpected token {

Que es en la linea que contiene lo siguiente:

function draw(ctx,element){ if (element !== null && element.hasOwnProperty("kind")){ swith(element.kind){ case "rectangle": ctx.fillRect(element.x,element.y,element.height,element.width); break; } } }

Ya me queme las pestañas y no encuentro el error...

Ver respuestas (1)
Cargar más comentarios

Clase 24

2 Curso javaScript - Práctica MVC parte 2

Siguiente arrow_forward

24/34