JSFiddle - React, Tailwind, and code Playground

HTML

<div id="courtyard"></div>

<div id="controls">	
	<div id="controller">
		<img id="up" src="http://public.harmonicnw.com/runfromdragon/images/up.png" />
		<img id="right" src="http://public.harmonicnw.com/runfromdragon/images/right.png" />
		<img id="down" src="http://public.harmonicnw.com/runfromdragon/images/down.png" />
		<img id="left" src="http://public.harmonicnw.com/runfromdragon/images/left.png" />
	</div>
	
	<fieldset>
		<label>Number of knights</label>
		<input id="numKnights" type="text" maxlength="3" />
		
		<label>Formation</label>
		<select id="formation">
			<option>Random</option>
			<option>Parade</option>
			<option>Wall</option>
		</select>
		<br />
		
		<input id="go" type="submit" value="Go!" />
		
		<p class="score">Score: <span id="score"></span></p>
		
		<p class="timer">Time: <span id="timer"></span></p>

	</fieldset>
</div>	

<!-- 
	
	This page was coded by Harmonic Northwest as an educational activity for the Tech Start division of the Technology Association of Oregon.
	
	Beginning of Exercise: http://jsfiddle.net/8bmZ7/15/
	End of Exercise: http://jsfiddle.net/8bmZ7/14/
	
	Image credits:
	http://community.digitalmediaacademy.org/wp-content/uploads/2010/10/Zelda.jpg
	http://www.angrypxl.com/blog/wp-content/uploads/2012/01/final8bit.jpg
	http://www.freewebs.com/evilmario/8-bit%20dragon.bmp
	http://www.makeme8bit.com/files/Brick%20Wall%20-%20Blue.jpg
	http://images.all-free-download.com/images/graphiclarge/arrow_button_set_clip_art_9029.jpg
	http://www.bombe.tv/geek/wp-content/uploads/2012/06/zelda_fire_render.gif
	
-->

CSS

* {
	margin: 0;
	padding: 0;
	}
	
body {
	background: #00aa00 url('http://public.harmonicnw.com/runfromdragon/images/forest.png') repeat;
	font-family: 'Lucida Grande', tahoma, sans-serif;
	font-size: 14px;
	}
	
fieldset {
	background: #000;
	border: none;
	clear: none;
	color: #fff;
	float: left;
	margin: 10px 0 0 20px;
	min-height: 50px;
	padding: 10px;
	width: 400px;
	}
fieldset input {
	margin-right: 20px;
	}
fieldset input[type=text] {
	box-sizing: border-box;
	width: 50px;
	}
fieldset p.note {
	clear: both;
	color: #555;
	font-size: 0.8em;
	margin-top: 0.5em;
	}
fieldset p.note a {
	color: #555;
	text-decoration: none;
	}
fieldset p.note a:hover {
	color: #999;
	text-decoration: none;
	}
fieldset p.score {
	display: inline;
	}
fieldset p.timer {
	display: inline;
	margin-left: 20px;
	}
	
.character {
	cursor: pointer;
	position: absolute;
	width: auto;
	}
.character.selected {
	background: #aff;
	z-index: 2;
	}
	
#controls {
	min-width: 600px;
	}
	
#controller {
	clear: none;
	float: left;
	height: 70px;
	margin: 10px 0 0 20px;
	position: relative;
	width: 100px;
	}
#controller img {
	cursor: pointer;
	height: auto;
	position: absolute;
	width: 30px;
	}
#up {
	top: 0;
	left: 35px;
	}
#right {
	right: 0;
	top: 20px;
	}
#down {
	bottom: 0;
	left: 35px;
	}
#left {
	left: 0;
	top: 20px;
	}
	
#courtyard {
	background: #ddd url('http://public.harmonicnw.com/runfromdragon/images/bricks.png') repeat;
	border: 3px solid #000000;
	height: 450px;
	margin: 20px 0 0 20px;
	position: relative;
	width: 600px;
	}

JavaScript

(function($){
	
	// game settings
	var dragonImgSrc = 'http://public.harmonicnw.com/runfromdragon/images/dragon.png';
	var knightRightImgSrc = 'http://public.harmonicnw.com/runfromdragon/images/knight-r.png';
	var knightLeftImgSrc = 'http://public.harmonicnw.com/runfromdragon/images/knight-l.png';
	var fireImgSrc = 'http://public.harmonicnw.com/runfromdragon/images/fire.png';
	var courtyard;
	var courtyardWidth = 600;
	var courtyardHeight = 450;

	$(document).ready( function() {
		
		courtyard = $('#courtyard');
		courtyard.width( courtyardWidth );
		courtyard.height( courtyardHeight );
		
		/*var dragon = createCharacter({
			'imgSrc' : 'http://public.harmonicnw.com/runfromdragon/images/dragon.png',
			'height' : 50,
			'initX' : 420,
			'initY' : 200
		});*/
		//var knight1 = createCharacter();
		//var knight2 = createCharacter();
		//var knight3 = createCharacter();
		
		$("#go").click( start ); 
		
	});
	
	function start(e) {
	
		removeCharacters();
	
		/*** EDIT CODE HERE ****************************************/
		
		/* 
		TASK #1: paste in code to start game on button click (using OBJECTS, OBJECT PROPERTIES, and FUNCTIONS)
		*/
	
		var dragon = createCharacter({
			'imgSrc' : 'http://public.harmonicnw.com/runfromdragon/images/dragon.png',
			'height' : 50,
			'initX' : 420,
			'initY' : 200,
			'type' : 'dragon'
		});
		//var knight1 = createCharacter();
		//var knight2 = createCharacter();
		//var knight3 = createCharacter();
	
		
		/*
		TASK #2: create variable number of knights (using FOR LOOP)
		*/
		var numNights = parseInt( $('#numKnights').val() );
		/*for ( var i = 0; i < numNights; i++ ) {
			createCharacter();
		}*/
		
		
		/*
		TASK #3: create formations (using CONDITIONAL STATEMENTS)
		*/
		var formation = $('#formation').val();
		
		if ( formation == "Wall" ) {
			
			var options = {
				'initX' : 200
			};
			for ( var i = 0; i < numNights; i++ ) {
				createCharacter( options );
			}
			
		} else if ( formation == "Parade" ) {
			
			var myX...