home | index | menu | help

Er is geen CSS ondersteuning.

• klik hier voor het javascript-menu

Een leuk klein spelletje, waar je even je tanden in kan zetten. Ik heb er meestal geen geduld voor. En het is nog frustrerender dat mijn buurman het veel beter doet dan ondergetekende...
Er zal weinig animo zijn om dit op een andere website te zetten, maar als jij je geroepen voelt om dat te doen, heb ik hier de CSS-code voor jou:

<style type="text/css">
	table{margin-left:100px}
	input{width:30px;color:#eee;background:#040}
	.start{width:132px;color:#bbb;background:#050}
	.uitleg{width:64px;color:#bbb;background:#050}
</style>
		

gevolg door het stuk javascript:

<script>
	var x,
	y,
	i,
	klaar,
	j,
	button,
	knopp,
	tmp,
	val,
	deuitleg;
	var max = 3;
	var score = 0;
	var hoeveelzet = 0;
	var q = 3;
	var z = 3;
	function haalelement(form, name) {
		var k;
		var elements = form.elements;
		for (k = 0; k < elements.length; k++) {
			if (elements[k].name == name) {
				return elements[k];
			}
		}
	}
	function nakijken(form) {
		score = 0;
		for (i = 0; i < 4; i++) {
			for (j = 0; j < 4; j++) {
				val = 1 + i + (4 * j);
				if (val < 16) {
					if (haalelement(form, i + '_' + j).value == val) {
						score++;
					}
				}
			}
		}
		return score == 15;
	}
	function wisselen(form, x, y, x1, y1) {
		if (x < 0 || y < 0 || x > max || y > max) {
			return false;
		}
		if (x1 < 0 || y1 < 0 || x1 > max || y1 > max) {
			return false;
		}
		name = x + '_' + y;
		button = haalelement(form, name);
		name = x1 + '_' + y1;
		knopp = haalelement(form, name);
		if (button.value == ' ' || knopp.value == ' ') {
			tmp = button.value;
			button.value = knopp.value;
			knopp.value = tmp;
			if (button.value == ' ') {
				q = x;
				z = y;
			} else {
				q = x1;
				z = y1;
			}
			return true;
		}
		return false;
	}
	function resetalles(form) {
		for (i = 0; i < 4; i++) {
			for (j = 0; j < 4; j++) {
				val = 1 + i + (4 * j);
				if (val == 16) {
					haalelement(form, i + '_' + j).value = ' ';
				} else {
					haalelement(form, i + '_' + j).value = val;
				}
			}
		}
		score = 0;
		hoeveelzet = 0;
		q = 3;
		z = 3;
	}
	function schuiver(form, x, y) {
		if (Math.abs(q - x) + Math.abs(z - y) == 1) {
			klaar = wisselen(form, x, y, x + 1, y);
			if (!klaar) {
				klaar = wisselen(form, x, y, x - 1, y);
			}
			if (!klaar) {
				klaar = wisselen(form, x, y, x, y + 1);
			}
			if (!klaar) {
				klaar = wisselen(form, x, y, x, y - 1);
			}
			hoeveelzet++;
			if (nakijken(form)) {
				alert('Je wint in ' + hoeveelzet + ' zetten...');
				resetalles(form);
			}
		}
	}
	function schuif(form, button) {
		name = button.name;
		x = name.substring(0, 1);
		y = name.substring(2, 3);
		schuiver(form, (x - 1 + 1), (y - 1 + 1));
	}
	function doen(form, num) {
		for (i = 0; i < num; i++) {
			x = Math.floor(Math.random(4) * 4);
			if (x === 0) {
				wisselen(form, q, z, q + 1, z);
			} else if (x == 1) {
				wisselen(form, q, z, q - 1, z);
			} else if (x == 2) {
				wisselen(form, q, z, q, z + 1);
			} else if (x == 3) {
				wisselen(form, q, z, q, z - 1);
			}
		}
	}
	function uitleg() {
		deuitleg = 'Uitleg \n\n' + 'Probeer de cijfers weer in de \n' +
			'originele volgorde van 1 tot 15 \n' +
			'te schuiven. Je hebt gewonnen \n' +
			'als alles op volgorde staat en \n' +
			'het vakje rechts-beneden leeg is. \n';
		alert(deuitleg);
	}
</script>
		

en natuurlijk de "form" die het spelletje op het scherm zet...:

<form>
	<table>
		<tr>
			<td><input type="button" name="0_0" value="1" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="1_0" value="2" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="2_0" value="3" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="3_0" value="4" onclick="schuif(this.form, this);"></td>
		</tr>
		<tr>
			<td><input type="button" name="0_1" value="5" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="1_1" value="6" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="2_1" value="7" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="3_1" value="8" onclick="schuif(this.form, this);"></td>
		</tr>
		<tr>
			<td><input type="button" name="0_2" value="9" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="1_2" value="10" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="2_2" value="11" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="3_2" value="12" onclick="schuif(this.form, this);"></td>
		</tr>
		<tr>
			<td><input type="button" name="0_3" value="13" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="1_3" value="14" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="2_3" value="15" onclick="schuif(this.form, this);"></td>
			<td><input type="button" name="3_3" value=" " onclick="schuif(this.form, this);"></td>
		</tr>
		<tr>
			<td colspan="2">
				<input class="uitleg" type="button" value="reset" onclick="resetalles(this.form);">
			</td>
			<td colspan="2">
				<input class="uitleg" type="button" value="uitleg" onclick="uitleg();">
			</td>
		</tr>
		<tr>
			<td colspan="4">
				<input class="start" type="button" value="start" onclick="doen(this.form,150);">
			</td>
		</tr>
	</table>
</form>
		

cache 28-09-2010