tworzenie bazy na obiekcie

0

Cześć,

var potwor = [
	{
		Imie: "Pierwszy",
		Sila: 17,
		Zycie: 100
	},
	
    {
		Imie: "Drugi",
		Sila: 11,
		Zycie: 100
	},	
];

var czlowiek = [
	{
		Imie: "Czlek1",
		Sila: 7,
		Zycie: 100
	},
    {
		Imie: "Czlek2",
		Sila: 4,
		Zycie: 100
	}	
];


//potwor
function pokazPotwor() {
	var output = '';
	for(var i=0; i<potwor.length; i++){
		output += '<h2>' + potwor[i].Imie + '</h2>';
		output += '<ul><li>Siła: ' + potwor[i].Sila + '</li>';
		output += '<li>dod: ' + potwor[i].dod + '</li>';
		output += '<li> Życie: ' + potwor[i].Zycie + '</li></ul>';
	}
	document.getElementById('potwor').innerHTML = output;
};

//czlowiek
function pokazCzlowiek() {
	var output1 = '';
	for(var i=0; i<czlowiek.length; i++){
		output1 += '<h2>' + czlowiek[i].Imie + '</h2>';
		output1 += '<ul><li>Siła: ' + czlowiek[i].Sila + '</li>';
		output1 += '<li> Życie: ' + czlowiek[i].Zycie + '</li></ul>';
	}
	document.getElementById('czlowiek').innerHTML = output1;
};

pokazPotwor();
pokazCzlowiek();

Chcę taką jakby baze danych zrobić. Dobrze kombinuje?

Teraz chce aby zmienialo sie imie w zaleznosci od sily:

zmienImie = function() {
	if(this.potwor.Sila >= 15) {
			return '***';
		}
		else if(this.potwor.Sila >= 10) {
			return '**';
		}
		else {
			return '*';
		}
}

I w funkcji pokazPotwor() w for:

output += '<li>ZmienImie: ' + potwor.zmienImie() + '</li>';

To mi nie działa, ktos pomoże?

1

Wskocz do XXI wieku i poczytaj o tym, jak działają klasy w nowoczesnym JSie: https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Classes.

0

To jest dobre rozwiązanie przy dużej ilosci wojownikow?

function Wojownik(imie, sila, zycie){
	this.imie = imie;
	this.sila = sila;
	this.zycie = zycie;
	
	this.showWojownik = function() {
		document.write("Imie: " + this.imie + "<br>");
		document.write("Siła: " + this.sila + "<br>");
		document.write("Zycie: " + this.zycie + "<br>");
		document.write("<br>");
	}
}

var wojownik1 = new Wojownik('Wojownik1', 10, 10);
var wojownik2 = new Wojownik('Wojownik2', 9, 9);

wojownik1.showWojownik();
wojownik2.showWojownik();
1

Ile to jest dużo?

0
<div id="wojownik1">
	<h1><span class="name"></span></h1>
	Siła: <span class="sila"></span><br>
	Obrona: <span class="zycie"></span><br>
</div>

<div id="wojownik2">
	<h1><span class="name"></span></h1>
	Siła: <span class="sila"></span><br>
	Obrona: <span class="zycie"></span><br>
</div>
function pokaz(wojownik, ktory) {
	ktory.querySelector('.name').innerHTML = wojownik.imie;
	ktory.querySelector('.sila').textContent = wojownik.sila;
	ktory.querySelector('.zycie').textContent = wojownik.zycie;
};

var wojownik1 = new Wojownik('Wojownik1', 10, 10);
var wojownik2 = new Wojownik('Wojownik2', 9, 9);

pokaz(wojownik1, document.getElementById('wojownik1'));
pokaz(wojownik2, document.getElementById('wojownik2'));

Więc mam w taki sposób to zrobione.
Czy da radę zastąpić jedną funkcją wypełnienie każdego div'a Wojownika ? Np. będę chciał dodać do div'a Poziom to w każdym będe musiał dopisywać...
Proszę wziąć też pod uwagę, że będe css używał.
Może da radę to prościej napisać? Prosze o pomoc

0

Chyba za trudne zadanie :(

0
 document.write("Imie: " + this.imie + "<br>");

nie używaj document.write, bo będziesz miał kuku i zdziwienie, że się nie wyświetla strona po wczytaniu.

Czy da radę zastąpić jedną funkcją wypełnienie każdego div'a Wojownika ? Np. będę chciał dodać do div'a Poziom to w każdym będe musiał dopisywać...

Możesz przecież umieścić wojowników w tablicy tak jak w pierwszym poście. A potem użyć metody push jak chcesz dodać wojownika, oraz przelatywać przez wojowników za pomocą forEach albo przez pętle for tak jak to robiłeś w pierwszym poście.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Coś w tym stylu

var wojownicy = [];
// ....
wojownicy.push(new Wojownik('Wojownik1', 10, 10))
wojownicy.push(new Wojownik('Wojownik2', 9, 9));

wojownicy.forEach(function (wojownik) {
   pokaz(wojownik);
});

(swoją drogą sugerowałbym angielskie zmienne zamiast polskich).

plus trzeba się zastanowić, co robić z elementami DOM, jak tworzyć docelowe elementy DOM, w których mają być wyświetleni wojownicy, bo takie podejście

document.getElementById('wojownik1')

się nie skaluje. Bo jak będziesz chciał utworzyć 100 wojowników, to byś musiał ręcznie tworzyć 100 elementów w HTML, co by było bez sensu. Lepiej, żeby elementy DOM były tworzone dynamicznie (np. przez document.createElement) i wtedy do danych wojownika, razem z siłą czy życiem można by było dokleić taki element, np.

wojownik.element = document.createElement('div');
wojownik.element.className = "jakas-klasa";

a potem....

 wojownik.element.querySelector('.name').innerHTML = wojownik.imie;

1 użytkowników online, w tym zalogowanych: 0, gości: 1