demos/tron.html

<html>
<head>
  <title>Learn Javascript!</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../lib/iokranf.js"></script>
  <style>@font-face { font-family: joystix; src: url('media/joystix_monospace.ttf'); }</style>
</head>
<body>
<h1>TRON v1.1</h1>
<pre id="iokranf_container" style="height: 650px; font-size:8pt; font-family: joystix; line-height:9px"></pre>
<script>
"use strict";
var io=new IOKranf('iokranf_container');

var grid,gridWidth,gridHeight;
function makeGrid(w,h)
{
	grid=""; gridWidth=w+2; gridHeight=h+2;
	var i=0;
	var t="#";
	for(i=0;i<w;i++) t+=".";
	t+="#\n";
	for(i=0;i<h;i++) grid+=t;
	t="";
	for(i=0;i<gridWidth;i++) t+="#";
	grid=t+"\n"+grid+t;
}
function setGrid(x,y,c)
{
	if ((x>=gridWidth)||(x<0)||(y<0)||(y>=gridHeight)) return;
	var i=Math.floor(x)+Math.floor(y)*(gridWidth+1);
	grid=grid.substr(0,i)+c+grid.substr(i+1);
}
function getGrid(x,y)
{
	var i=Math.floor(x)+Math.floor(y)*(gridWidth+1);
	return grid.charAt(i);
}
function printGrid()
{
	io.clr();
	io.print(grid.replace(/#/g,"<span style='color:blue'>&#x2588;</span>"));
}

var timeout;
var dx=0,dy=-1,playerX,playerY;
var timeDelay=50;
function start_your_code() 
{
	io.println("Ready?\n\n")
	io.click2(start_game,["Start!"]);
}

function start_game() 
{	
	makeGrid(100,70);
	playerX=50; playerY=40;
	setGrid(playerX,playerY,"#");
	printGrid();
	timeout = setTimeout(movePlayer,timeDelay);
	document.addEventListener("keydown",keyPressed);
}

function keyPressed(event)
{
	if (event.keyCode === 38) { /*up*/ dx=0; dy=-1; } 
	else if (event.keyCode === 40) { /*down*/ dx=0; dy=1; } 
	else if (event.keyCode === 39) { /*right*/ dx=1; dy=0; } 
	else if (event.keyCode === 37) { /*left*/ dx=-1; dy=0; } 
}

function movePlayer() 
{
	playerX+=dx; playerY+=dy;
	if (getGrid(playerX,playerY)=='#')
		playerIsDead();
	setGrid(playerX,playerY,"#");
	printGrid();
	timeout = setTimeout(movePlayer,timeDelay);
}

function playerIsDead()
{
	clearTimeout(timeout);
	io.clr();
	io.print("YOU ARE DEAD");
    io.close();
}
start_your_code();
</script>
</body>
</html>