Arkadiusz Burszczan

Arkadiusz Burszczan Programista Java

Temat: Różnica pomiędzy jquery a js

Mam taką zagowostkę, a może już późna pora i nie myślę. Chce zrobić gre kółko i krzyżyk na canvie w html5 i mam oto taki obiekt js
//klasa z gra
var Game = {

canvas : document.getElementById('canvas'),
context : $("#canvas").get(0),

//metoda zwraca obiekt z canvasem
getCanvas : function(){
return this,canvas;
},

//metoda zwraca obiekt z contextem
getContext : function(){
return this.context;
},

//metoda pobiera x pkt
getX : function(e) {
// Odczytuje współrzędne punktu klikniętego przez użytkownika.
return e.pageX - canvas.offsetLeft;

},
//metoda pobiera y pkt
getY : function(e) {
// Odczytuje współrzędne punktu klikniętego przez użytkownika.
return e.pageY - canvas.offsetTop;

},

drawDiagram : function(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
alert(this.canvas);
alert(canvas);
// context = this.getContext();
//context.lineWidth = 20;
//context.strokeStyle = "rgb(205,40,40)";
//context.moveTo(10,50);
//context.lineTo(30,100);
//context.stroke();
}
};

//poczatek gry,
$(document).ready(function(){
Game.drawDiagram();

//klikamy na canvas
$('#canvas').live('click',clickInCanvas);
});

function clickInCanvas(e){

var context = Game.getContext();
var canvas = Game.getCanvas();
var clickX = Game.getX(e);
var clickY = Game.getY(e);

}


Teraz moje pytanie, po przeładowaniu strony mam 2 alerty, z czego jeden alert(this.canvas) zwraca mi null, a z kolei drugi alert(canvas) zwraca object... Nie mam zielonego pojecia dlaczego tak jest... Czy ktoś mi może wyjaśnić skąd wynikają róźnice??
Arkadiusz Burszczan

Arkadiusz Burszczan Programista Java

Temat: Różnica pomiędzy jquery a js

Dobra doszedłęm do wniosku, że jak wywoływany jest object, to jeszcze nie ma DOM'u stąd ten null... Problem rozwiązałęm, wystarczyło wrzucić object do środka funckji
 $(document).ready(function(){



Czas iść spać... Bo człowiek głupie błędy robi...

konto usunięte

Temat: Różnica pomiędzy jquery a js

ano. Ale w takim układzie linijka
var canvas = document.getElementById('canvas');
jest do wywalenia, bo możesz użyć po prostu this.canvas, jak będzie ta zmienna już przypisana.

Poza tym nie wiem czy nie lepiej tworzyć tych zmiennych w konstruktorze obiektu Game i samą "klasę" zadeklarować od razu, a jedynie sam konstruktor odpalać po załadowaniu DOM:
$(document).ready(function(){
zmiennaPrzechowujacaObiektGame = new Game();
});

swoją drogą nie wiem czemu ludzie się uparli na ten $(document).ready, skoro w jQuery wystarczy napisać coś takiego:
$(function() {
});
i masz to samo co $(document).ready, tylko krócej i mniej verbose.

poza tym:
context : $("#canvas").get(0),
tu masz błąd, powinno być $("#canvas").get(0).getContext('2d');
//metoda zwraca obiekt z canvasem
really? Nazwałeś metodę getCanvas, i opisałeś ją komentarzem "metoda zwraca obiekt z canvasem". Aha o.O
return e.pageX - canvas.offsetLeft;
no dobrze, a gdzie jest ta zmienna canvas? Dlaczego nie this.canvas? canvas czyli window.canvas? :/
return this,canvas;
kropka powinna być, a nie przecinek.Łukasz Lityński edytował(a) ten post dnia 25.01.13 o godzinie 13:08
Arkadiusz Burszczan

Arkadiusz Burszczan Programista Java

Temat: Różnica pomiędzy jquery a js

Ok, to było na szybko pisane, fakt te błędy o których pisałeś to poprawiłem później...Mi tu głównie chodzi o błąd DOM'a i to wszystko. Ale dziękuje za wyczerpujący komentarz do mojej wypowiedzi.
Sławomir Jach

Sławomir Jach Programista,
DreamLab

Temat: Różnica pomiędzy jquery a js

Polecam http://kineticjs.com/ do tworzenia czegokolwiek na canvie. Prosto łatwo i przyjemnie.

konto usunięte

Temat: Różnica pomiędzy jquery a js

" One problem with the Canvas, though, is that the rendered image is just that: an image. The user is unable to interact with any of the shapes that are drawn to the Canvas. However, an open source library called Kinetic bridges that gap, allowing shapes or images to be drawn using the existing Canvas API, event listeners attached to them, and manipulated individually using mouse or touch (i.e., move, scale and rotation"
Ciekawe, muszę to obadać. W dodatku samo API sądząc po dokumentacji wygląda dośc przyjaźnie.

Następna dyskusja:

Linki do fajnych wtyczek, k...




Wyślij zaproszenie do