fricze/dratewka.html

## dratewka.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
         .location{
             border:solid 1px;
             width: 50px;
             height:50px;
             margin: 5px;
             float:left;
         }
         .location:nth-child(2n+1){
             clear:both;
         }
        </style>
        <script>
         function Location(who, height) {
             this.who = who;
             this.height = height;
             this.element = null;
             this.init = function() {
                 var div = document.createElement("div");
                 div.className = "location";
                 //var that=this;
                 div.onclick = function(e) {
                     //console.log(this,that);
                     //alert("Hi! I'm "+that.who+" ("+that.height+")")
                     console.log(e.target)
                     alert("Hi! I'm " + this.who + " (" + this.height + ")")
                 }.bind(this);

                 this.element = div;

                 document.querySelector('#board').appendChild(div);
             }
             this.init();
         }

         document.addEventListener("DOMContentLoaded", function(event) {
             game = {
                 board: [
                     [new Location("brunette", 176), new Location("brown hair", 148)],
                     [new Location("redhead", 186), new Location("blonde", 162)]
                 ],
                 player: {
                     pos_x: 0,
                     pos_y: 0,
                     report: function(p) {
                         console.log(p.who, p.height);
                     },
                     go: function(direction) {
                         if (direction == "up") this.pos_y--;
                         if (direction == "down") this.pos_y++;
                         if (direction == "left") this.pos_x--;
                         if (direction == "right") this.pos_x++;
                         this.highlight();
                     },
                     highlight: function() {
                         var person = game.board[this.pos_y][this.pos_x];
                         for (var i = 0; i < game.board.length; i++) {
                             for (var j = 0; j < game.board[i].length; j++) {
                                 game.board[i][j].element.style.backgroundColor = "white";
                             }
                         }
                         person.element.style.backgroundColor = "pink";
                         this.report(person);
                     }
                 }
             }

             game.player.highlight();
         });

         function keyboardEvent(e) {
             if (e.code === "KeyS") {
                 game.player.go("down");
             }

             if (e.code === "KeyE") {
                 game.player.go("right");
             }

             if (e.code === "KeyW") {
                 game.player.go("left");
             }

             if (e.code === "KeyN") {
                 game.player.go("up");
             }

             setTimeout(function () {
                 e.target.value = "";
             });
         }
        </script>
    </head>
    <body>
        <input onkeydown="keyboardEvent(event)" autofocus/>
        <div id="board"></div>
    </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
	.location{
	border:solid 1px;
	width: 50px;
	height:50px;
	margin: 5px;
	float:left;
	}
	.location:nth-child(2n+1){
	clear:both;
	}
	</style>
	<script>
	function Location(who, height) {
	this.who = who;
	this.height = height;
	this.element = null;
	this.init = function() {
	var div = document.createElement("div");
	div.className = "location";
	//var that=this;
	div.onclick = function(e) {
	//console.log(this,that);
	//alert("Hi! I'm "+that.who+" ("+that.height+")")
	console.log(e.target)
	alert("Hi! I'm " + this.who + " (" + this.height + ")")
	}.bind(this);

	this.element = div;

	document.querySelector('#board').appendChild(div);
	}
	this.init();
	}

	document.addEventListener("DOMContentLoaded", function(event) {
	game = {
	board: [
	[new Location("brunette", 176), new Location("brown hair", 148)],
	[new Location("redhead", 186), new Location("blonde", 162)]
	],
	player: {
	pos_x: 0,
	pos_y: 0,
	report: function(p) {
	console.log(p.who, p.height);
	},
	go: function(direction) {
	if (direction == "up") this.pos_y--;
	if (direction == "down") this.pos_y++;
	if (direction == "left") this.pos_x--;
	if (direction == "right") this.pos_x++;
	this.highlight();
	},
	highlight: function() {
	var person = game.board[this.pos_y][this.pos_x];
	for (var i = 0; i < game.board.length; i++) {
	for (var j = 0; j < game.board[i].length; j++) {
	game.board[i][j].element.style.backgroundColor = "white";
	}
	}
	person.element.style.backgroundColor = "pink";
	this.report(person);
	}
	}
	}

	game.player.highlight();
	});

	function keyboardEvent(e) {
	if (e.code === "KeyS") {
	game.player.go("down");
	}

	if (e.code === "KeyE") {
	game.player.go("right");
	}

	if (e.code === "KeyW") {
	game.player.go("left");
	}

	if (e.code === "KeyN") {
	game.player.go("up");
	}

	setTimeout(function () {
	e.target.value = "";
	});
	}
	</script>
	</head>
	<body>
	<input onkeydown="keyboardEvent(event)" autofocus/>
	<div id="board"></div>
	</body>
	</html>