+1 szavazat
(3,2e pont) által 
által szerkesztett

Sziasztok!

A codeberry feladatainál a lineToCenter() résznél tartok. Elakadtam a feladattal, a neten sem találtam hozzá semmit, ezért szeretnék kérni kiindulásnak rávezető segítséget.

A kódom nem működik egyáltalán. Mi rossz a kódomban, miért nem működik? Hova kell a véletlen szám generálási függvényt beírnom?

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

function lineToCenter(x, y, color) {
  var color="green";
  var random = function(max, min) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }
  for(var i = 0; i < 100; i++) {
    //context.strokeStyle ="color";
    context.beginPath();
    context.moveTo(x,y);
    context.lineTo(225, 150);
    context.stroke();
  }
}
lineToCenter(x, y, color);

Köszönöm!

1 válasz

+1 szavazat
(15,8e pont) által 
által szerkesztett
 
Legjobb válasz

Mindig legyen nyitva a dev tools (fejlesztői eszközök) a böngészőben, ha éppen fejlesztesz. Ha nyitva van, akkor a konzol ablakban láthatsz is rögtön egy hibaüzenetet:

ReferenceError: x is not defined

Ez azért van, mert mikor meghívod a lineToCenter függvényt a paraméterekkel, akkor nem tudja, hogy mik a paraméterben megadott x, y, és color változók, hiszen nem voltak sehol meghatározva a kódban.

Vannak jó részek a kódban, de sajnos sok hiba is van. Ezeket nézzük meg sorban, tegyük kicsit tisztába az egészet:

  • Első, amiről már ítam, hogy a paraméterek nincsenek definiálva. Valahol a lineToCenter hívása előtt létre kellene hozni az x, y, és color változókat, valamit értéket is kellene adni nekik. Az x, és y változókat természetesen a legjobb lenne a random függvény segítségével létrehozni.
  • Ha a paraméterek jók is lennének, akkor is gond lenne például a color-ral, mivel a var color="green" sorral rögtön felülírnád a paraméterként kapott colort.
  • A random függvényt célszerű lenne a lineToCenter függvényen kívül létrehozni, mivel így csak a függvényen keresztül érhető el, ráadásul minden egyes alkalommal újra létrejön, amikor a lineToCentert meghívjuk.
  • Jobb lenne úgy megközelíteni, hogy a lineToCenter csak egyetlen vonalat húz meg. Tehát ez a for ciklus ne legyen benne a függvényben, hanem inkább írj külön egy for ciklust, és azon belül hívd meg a lineToCenter-t (ami önmagában csak egy vonalat húz).
  • Látom, próbálkoztál a szín beállításával (de most ki van kommentelve). Majdnem jó így, de figyelj rá, hogy a color ne legyen idézőjelben, mert akkor már nem a color változót fogja jelenteni, hanem egy szöveget, ami a color szót tartalmazza.
  • A context.lineTo(225, 150) helyett jobb lenne ha ezt írnád: context.lineTo(canvas.width / 2, canvas.height / 2), mert ha később megszeretnéd változtatni a canvas méretét, akkor úgy automatikusan igazodik az új mérethez, és mindenképpen a canvas közepére húzza a vonalat.
(3,2e pont) által 
Köszönöm a részletes választ, megcsináltam ezeket a változtatásokat, így már tökéletesen működik! Itt a jelenlegi kód:

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  
  var random = function(max, min) {
    return Math.floor(Math.random()*(max-min+1)+min);
  }

  function lineToCenter(x, y, color) {
    context.strokeStyle = color;
    context.beginPath();
    context.moveTo(x, y);
    context.lineTo(canvas.width / 2, canvas.height / 2);
    context.stroke();
  }
  
  var color = "green";
  
  for (var i = 0; i < 100; ++i) {
    var x = random(canvas.width, 0);
    var y = random(canvas.height, 0);
    lineToCenter(x, y, color);
  }
...