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 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) {
/*** EDIT CODE HERE ****************************************/
/*
TASK #1: paste in code to start game on button click (using OBJECTS, OBJECT PROPERTIES, and FUNCTIONS)
*/
/*
TASK #2: create variable number of knights (using FOR LOOP)
*/
/*
TASK #3: create formations (using CONDITIONAL STATEMENTS)
*/
/*
TASK #4: animate dragon (using setInterval timer)
*/
/*
TASK #5:remove knights when hit by dragon
*/
/*
TASK #6: make knights moveable (apply class and assign click handler)
*/
/*
TASK #7: gamify it with a score
*/
/*
TASK #8: set time limit, game over
*/
/*** END OF EDITING AREA ***********************************/
e.preventDefault();
}
function createCharacter( options ) {
// set default options
var myOptions = {
'imgSrc' : 'http://public.harmonicnw.com/runfromdragon/images/knight-r.png',
'height' : 30,
'initX' : Math.round( Math.random() * courtyardWidth * 0.5 ),
'initY' : Math.round( Math.random() * (courtyardHeight - 30) ),
'type' :...