Schatzsuche

Chris! · 11. Oktober 2009

Hallo,

heut schreib ich mal wieder ein kleines Tutorial..
Entstanden ist es aus langeweile, hab auch ned lang fürs Script gebraucht..

Es geht um eine Schatzsuche. Ein Schatz wurde im Sand versteckt und die User deiner Seite können versuchen ihn zu finden ;)

Dazu brauchen wir erstmal eine Grafik von Sand. zB die hier: http://commons.wikimedia.org/wiki/File: Sand.jpg
Die Grafik würd ich allerdings noch verkleinern, zB auf 500x750 pixel

Jetzt zum Script. Ich hab das ganze schön als Klasse mit Scleifchen und Konfetti verpackt..
Daneben stehen Kommentare, das ganze sollte selbsterklärend sein. Falls ihr doch noch Fragen habt, könnt ihr sie mir natürlich gerne stellen, ich reis euch nich den Kopf ab.. Vielleicht :P

Hier das Script:

PHP

<?php	class Schatzsuche {		public $x = null;		public $y = null;		public $found = false;		protected $schatzWidth = 0; // Breite des Schatzes in Pixeln		protected $schatzHeight = 0; // Hoehe des Schatzes in Pixeln		protected $schatzX = 0; // Koordinaten, wo der Schatz versteckt ist		protected $schatzY = 0; // genauer gesagt die linke obere Ecke des Schatzes		public function __construct ($schatzX, $schatzY, $schatzWidth, $schatzHeight) {			$this->schatzX = $schatzX;			$this->schatzY = $schatzY;			$this->schatzWidth = $schatzWidth;			$this->schatzHeight = $schatzHeight;		}		public function search ($x = null, $y = null) {			if (($x === null or $y === null) and !empty($_POST['sand_x']) and !empty($_POST['sand_y'])) {				$x = intval($_POST['sand_x']);				$y = intval($_POST['sand_y']);			}			if ($x === null or $y === null) return false; // abbrechen, wenn keine koordinaten uebergeben			$this->x = $x;			$this->y = $y;			if ($this->x >= $this->schatzX and $this->x <= ($this->schatzX + $this->schatzWidth)) {				if ($this->y >= $this->schatzY and $this->y <= ($this->schatzY + $this->schatzHeight)) {					$this->found = true;				}			}		}	}	// Parameter: Koordinaten wo der Schatz versteckt ist, Breite des Schatzes in Pixeln, Hoehe des Schatzes in Pixeln	$schatzsuche = new Schatzsuche(50, 200, 20, 20);	$schatzsuche->search();?>

HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Schatzsuche</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	</head>

	<body>
		<h1>Schatzsuche</h1>
		<p>Klick einfach in den Sand um nachzuschaun, ob der Schatz sich da befindet..</p>

		<?php if ($schatzsuche->x !== null and $schatzsuche->y !== null and $schatzsuche->found) { ?>
		<p>Du hast den Schatz gefunden!</p>
		<?php } else if ($schatzsuche->x !== null and $schatzsuche->y !== null) { ?>
		<p>Leider war er da nich.. Nich aufgeben ;)</p>
		<?php } ?>

		<div class="schatzsuche">
			<form method="post" action="index.php">
				<input type="image" name="sand" src="sand.png" alt="Sand" />
			</form>
		</div>
	</body>
</html>

Alles anzeigen

Das ganze kommt am besten untereinander in eine Datei. Ich habs hier nur in 2 Blöcke aufgeteilt, damits besser gehighlightet wird..
Ihr müsst das ganze natürlich noch anpassen.. also das Ziel der Form, den Grafiknamen, etc..
Nicht zu vergessen auch die Position und Größe des Schatzes

Ich hoff euch gefällt die Schatzsuche ;)

**TimWolla** · 12. Oktober 2009

So etwas ähnliches hatte ich schonmal mit einer Serverseitige Imagemap gemacht. Da war die zu findende Stelle aber nur 1*1px groß und ich hatte nen 1000*600 Bild oder so ;D

Dein Skript könnte man aber sicher auch gut für Captchas nutzen ;)

Chris! · 12. Oktober 2009

Zitat von eeZy

Dein Skript könnte man aber sicher auch gut für Captchas nutzen ;)

du meinst sowas wie "klicken sie auf den großen stein"? ^^
und dann wird serverseitig die große sandgrafik immer so beschnitten, dass der Stein mit drauf is, der Ausschnitt aber anders..

könnt ich mir richtig gut als Captcha vorstellen.. besser als abtippen..

übrigens werd ich heut noch das script abändern, so dass es mehr OOP entspricht ;)

Chris! · 12. Oktober 2009

So, ich hab die Version geupdatet. Wichtig bei der Version is, dass ihr die Position und Größe des Schatzes nicht in der Klasse verändert,
sondern unten wo eine Instanz der Klasse Schatzsuche erstellt wird..

eeZy, mit der Captcha hast du mich echt auf was gebracht ;) Ich bin am werkeln xD

**TimWolla** · 12. Oktober 2009

So Captcha ist fertig:

PHP

<?php
    class Captcha {
		protected $width;
		protected $height;
        protected $res = 0; 
        protected $left = 0;
        protected $top = 0;
		protected $rad = 0;
        protected $im = null;
		protected $arcs;
		protected $lines;
        public function __construct ($width = 300, $height = 120, $arcs = 15, $lines = 15, $fuzzbg = false) {
			$this->width = $width;
			$this->height = $height;
			$this->arcs = $arcs;
			$this->lines = $lines;
			$this->fuzzbg = $fuzzbg;
        }
		public function render() {
			Header("Content-Type: image/png");
			header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
			header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
			header("Cache-Control: no-store, no-cache, must-revalidate");
			header("Cache-Control: post-check=0, pre-check=0", false);
			header("Pragma: no-cache");
			$this->im = imagecreate($this->width, $this->height);
			$black = ImageColorAllocate ($this->im, 0, 0, 0);
			$white = ImageColorAllocate ($this->im, 255, 255, 255);
			imagefill($this->im, 0, 0, $white);
			if($this->fuzzbg) {
			for($i = 0; $i < $this->width; $i = $i + rand(10,20)) imageline($this->im, $i, 0,$i,$this->height, ImageColorAllocate ($this->im, rand(0, 255), rand(0, 255), rand(0, 255)));
			for($i = 0; $i < $this->height; $i = $i + rand(10,20)) imageline($this->im, 0, $i,$this->width,$i, ImageColorAllocate ($this->im, rand(0, 255), rand(0, 255), rand(0, 255)));
			}
			if(file_exists('pos')) {
				$pos = explode(' ', file_get_contents('pos'));
				$this->left = $pos[0];
				$this->top = $pos[1];
				$this->rad = $pos[2];
			}
			else {
				$this->rad = rand(20,30);
				$this->left = rand((5 + $this->rad/2), (($this->width - 5) - $this->rad/2));
				$this->top = rand((5 + $this->rad/2), (($this->height - 5) - $this->rad/2));
			}
			for($i = 0; $i < $this->arcs; $i++) imagearc($this->im, rand(0,$this->width), rand(0, $this->height),rand(5,30),rand(5,30), 0, 360, ImageColorAllocate ($this->im, rand(00, 255), rand(0, 255), rand(0, 255)));
			for($i = 0; $i < $this->lines; $i++) imageline($this->im, rand(0,$this->width), rand(0, $this->height),rand(0,$this->width),rand(0, $this->height), ImageColorAllocate ($this->im, rand(0, 255), rand(0, 255), rand(0, 255)));
			$size = rand(0, 360);
			imagearc($this->im, $this->left, $this->top ,$this->rad,$this->rad, $size, $size + 270, $black);
			imagepng($this->im);
			file_put_contents('pos', $this->left.' '.$this->top.' '.$this->rad);
		}
        public function check($x = null, $y = null) {
			if(file_exists('pos')) {
				$pos = explode(' ', file_get_contents('pos'));
				$this->left = $pos[0];
				$this->top = $pos[1];
				$this->rad = $pos[2];
			}
            if ($x === null or $y === null) return false; // abbrechen, wenn keine koordinaten uebergeben  
            if ($x >= $this->left - $this->rad/2 && $x <= ($this->left + $this->rad/2)) {
                if ($y >= $this->top - $this->rad/2 && $y <= ($this->top + $this->rad/2)) {
					unlink('pos');
                    return true;
                }
            }
			return false;
        }
    }
?>

Alles anzeigen

Die die würdig sind es zu benutzen brauchen keine Anleitung. ;D

Der offene schwarze Ring ist zu klicken.

Chris! · 12. Oktober 2009

Ich probiers nachher aus ;)

wobei ich halt stein und sand schöner fänd wie nen kreis xD
aber das is ja ne anpassung von zwei minuten..

achja, ich würd die position in der session und nich in ner datei speichern..
setzt aber auch ne session vorraus ;)

**TimWolla** · 13. Oktober 2009

Zitat von Chris!

achja, ich würd die position in der session und nich in ner datei speichern..
setzt aber auch ne session vorraus ;)

Das muss man dann eh anpassen wie man es haben will, Datei fand ich für meinen lokalen Tests am einfachsten.

Benutzer online in diesem Thema