jooyunghan · March 30, 2015 08:40
diff --git a/flappy.html b/flappy.html
 <!DOCTYPE html>
 <html>
 <head>
 	<title>Functional Flappy</title>
 </head>
 <style type="text/css">
 	#playground {
 		width: 500px;
 		height: 500px;
 		border: 1px solid red;
 	}

 	.unselectable {
 		position: absolute;
 		-webkit-user-select: none; /* Chrome/Safari */        
 		-moz-user-select: none; /* Firefox */
 		-ms-user-select: none; /* IE10+ */

 		/* Rules below not implemented in browsers yet */
 		-o-user-select: none;
 		user-select: none;
 	}
 </style>
 <body>

 <div id="playground">

 <span id="bird" class="unselectable">Bird</span>
 </div>

 <script type="text/javascript">
 	var events = [];

 	var bird = {
 		camera: 0,
 		x: 0,
 		y: 250,
 		vx: 2,
 		vy: 0,
 		alive: true,
 		objects: []
 	};

 	var playground = document.getElementById('playground');
 	var birdImg = document.getElementById('bird');

 	function updateWorld(bird, events) {
 		var newBird = {};

 		newBird.vx = bird.vx;
 		newBird.vy = 
 			(events.indexOf('click') >= 0 && bird.alive) 
 			? -10 
 			: bird.vy + 1;
 		
 		newBird.y = bird.y + newBird.vy;
 		newBird.x = bird.x + newBird.vx;
 		newBird.alive = bird.alive;

 		newBird.camera = bird.camera + 2;

 		newBird.objects = (bird.objects.length == 0) 
 			? newObjects(bird)
 			: removePassed(bird);

 		if (newBird.alive) {
 			for (var i =0; i<newBird.objects.length; i++) {
 				var ob = newBird.objects[i];
 				if (ob.x - 10 < newBird.x  && ob.x + 10 > newBird.x
 					&& ob.y - 10 < newBird.y && ob.y + 10 > newBird.y) {
 					newBird.vy = -3;
 					newBird.vx = 0;
 					newBird.alive = false;
 					console.log("conflict" + newBird);
 				}
 			}
 		}
 		if (newBird.y >= 500) { // hit the ground
 			newBird.vy = 0;
 			newBird.vx = 0;
 			newBird.y = 500;
 			newBird.alive = false;
 		}
 		return newBird;
 	}

 	function newObjects(bird) {
 		return [
 			{
 				x: bird.camera + 300,
 				y: 300
 			},
 			{
 				x: bird.camera + 350,
 				y: 330
 			}
 		];
 	}

 	function removePassed(bird) {
 		var result = [];
 		for (var i =0; i<bird.objects.length; i++) {
 			if (bird.objects[i].x + 100 > bird.camera) {
 				result.push(bird.objects[i])
 			}
 		}
 		return result;
 	}

 	var objects = [];

 	function render() {
 		birdImg.style.top = bird.y + 'px';
 		birdImg.style.left = (bird.x - bird.camera) + 100 + 'px';

 		for (var i =0; i<bird.objects.length; i++) {
 			if (objects[i] == undefined) {
 				objects[i] = document.createElement('span');
 				objects[i].classList.add('unselectable');
 				objects[i].innerText = "OBJ";
 				objects[i].style.position = 'absolute';
 				playground.appendChild(objects[i]);
 			}
 			objects[i].style.visibility = '';
 			objects[i].style.top = bird.objects[i].y + 'px';
 			objects[i].style.left = (bird.objects[i].x - bird.camera) + 100 + 'px';
 		}
 		for (var i = bird.objects.length; i < objects.length; i++) {
 			objects[i].style.visibility = 'hidden';
 		}
 	}

 	setInterval(function() {
 		bird = updateWorld(bird, events);
 		render();
 		//world = world.next();
 		events = [];
 	}, 1000 / 30);

 	playground.addEventListener('click', function (event) {
 		events.push('click');
 	});

 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Functional Flappy</title>
	</head>
	<style type="text/css">
	#playground {
	width: 500px;
	height: 500px;
	border: 1px solid red;
	}

	.unselectable {
	position: absolute;
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;
	}
	</style>
	<body>

	<div id="playground">

	<span id="bird" class="unselectable">Bird</span>
	</div>

	<script type="text/javascript">
	var events = [];

	var bird = {
	camera: 0,
	x: 0,
	y: 250,
	vx: 2,
	vy: 0,
	alive: true,
	objects: []
	};

	var playground = document.getElementById('playground');
	var birdImg = document.getElementById('bird');

	function updateWorld(bird, events) {
	var newBird = {};

	newBird.vx = bird.vx;
	newBird.vy =
	(events.indexOf('click') >= 0 && bird.alive)
	? -10
	: bird.vy + 1;

	newBird.y = bird.y + newBird.vy;
	newBird.x = bird.x + newBird.vx;
	newBird.alive = bird.alive;

	newBird.camera = bird.camera + 2;

	newBird.objects = (bird.objects.length == 0)
	? newObjects(bird)
	: removePassed(bird);

	if (newBird.alive) {
	for (var i =0; i<newBird.objects.length; i++) {
	var ob = newBird.objects[i];
	if (ob.x - 10 < newBird.x && ob.x + 10 > newBird.x
	&& ob.y - 10 < newBird.y && ob.y + 10 > newBird.y) {
	newBird.vy = -3;
	newBird.vx = 0;
	newBird.alive = false;
	console.log("conflict" + newBird);
	}
	}
	}
	if (newBird.y >= 500) { // hit the ground
	newBird.vy = 0;
	newBird.vx = 0;
	newBird.y = 500;
	newBird.alive = false;
	}
	return newBird;
	}

	function newObjects(bird) {
	return [
	{
	x: bird.camera + 300,
	y: 300
	},
	{
	x: bird.camera + 350,
	y: 330
	}
	];
	}

	function removePassed(bird) {
	var result = [];
	for (var i =0; i<bird.objects.length; i++) {
	if (bird.objects[i].x + 100 > bird.camera) {
	result.push(bird.objects[i])
	}
	}
	return result;
	}

	var objects = [];

	function render() {
	birdImg.style.top = bird.y + 'px';
	birdImg.style.left = (bird.x - bird.camera) + 100 + 'px';

	for (var i =0; i<bird.objects.length; i++) {
	if (objects[i] == undefined) {
	objects[i] = document.createElement('span');
	objects[i].classList.add('unselectable');
	objects[i].innerText = "OBJ";
	objects[i].style.position = 'absolute';
	playground.appendChild(objects[i]);
	}
	objects[i].style.visibility = '';
	objects[i].style.top = bird.objects[i].y + 'px';
	objects[i].style.left = (bird.objects[i].x - bird.camera) + 100 + 'px';
	}
	for (var i = bird.objects.length; i < objects.length; i++) {
	objects[i].style.visibility = 'hidden';
	}
	}

	setInterval(function() {
	bird = updateWorld(bird, events);
	render();
	//world = world.next();
	events = [];
	}, 1000 / 30);

	playground.addEventListener('click', function (event) {
	events.push('click');
	});

	</script>

	</body>
	</html>