dragons hole

dragons hole

by Steven Martin

HTML

<body class="headimg">
<div class="main">
	<div id="q">
		<h1 class="drin">Dragons Hole</h1>
		<b>Choose a character</b>
		<p id="info"></p>
	</div>
	<div id="w">
	</div>
	<div id="e">
		
	</div>
</div>
</body>

CSS

body{
	margin: 0 auto;
	background-color: #999888;
}
p{
	color: #000000;
	font-size: 22px;
	text-shadow: 1px 1px 1px rgba(120, 120, 120, 1);
}
.main{
	margin: 4% 35%;
	padding: 30px;
	width: 30%;
	text-align: center;
	background: rgba(250, 250, 250, 0.7);
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:5px;
	-khtml-border-radius:10px;
}
.headimg{
	background-image: url(http://3runbrothers.ru/im/bg1920.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
.drin{
	color: white;
	background-color: #333;
	text-align: center;
	padding: 10px;
}
#q #w #e{
	padding: 10px;
}
#q{
	margin-top: 2%;
}
#w{
	margin-top: 4%;
}
#e{
	margin-top: 6%;
}
small{
	color: #999;
	padding: 0;
	margin: 0;
	font-size: 16px;
}
/* Characters */

#imgWarrior{
	padding: 0 2%;
}
#imgHunter{
	padding: 0 2%;
}
#imgMage{
	padding: 0 2%;
}
.button {
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #f6f6f6));
	background:-moz-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-webkit-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-o-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:-ms-linear-gradient(top, #ffffff 5%, #f6f6f6 100%);
	background:linear-gradient(to bottom, #ffffff 5%, #f6f6f6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f6f6f6',GradientType=0);
	background-color:#ffffff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #dcdcdc;
	display:inline-block;
	cursor:pointer;
	color:#666666;
	font-family:arial;
	font-size:15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
}
.button:hover {
	background:-webkit-gradient(linear, left top, left bottom,...

JavaScript

// Characters
var warrior = {
	name: "Warrior",
	health: 100,	// Live
	attack: 8,		// Attack
	expWar: 50,		// Warrior special experience after kill
	expFight: 10,	// Experience after kill
	exp: 10,		// Experience for any action
	hungry: 0		// The need for food
}
var hunter = {
	name: "Hunter",
	health: 100,	// Live
	attack: 6,		// Attack
	expHun: 50,		// Hunter special experience after hunting
	expFight: 12,	// Experience after kill
	exp: 10,		// Experience for any action
	hungry: 0		// The need for food
}
var mage = {
	name: "Mage",
	health: 100,	// Live
	attack: 5,		// Attack
	expMag: 50,		// Mage special experience after conviction
	expFight: 15,	// Experience after kill
	exp: 10,		// Experience for any action
	hungry: 0		// The need for food
}

// Characters pictures
	// Warrior
var imgW = document.createElement ('img');
	imgW.src = 'http://3runbrothers.ru/im/warrior.png';
	imgW.id = 'imgWarrior';
	imgW.name = 'imgWarrior';
    imgW.onclick = function(){imgClick('w')};
    imgW.onmouseover = function(){imgOver('w')};
    imgW.onmouseout = function(){imgOut('w')};

    // Hunter
    var imgH = document.createElement ('img');
	imgH.src = 'http://3runbrothers.ru/im/hunter.png';
	imgH.id = 'imgHunter';
	imgH.name = 'imgHunter';
    imgH.onclick = function(){imgClick('h')};
    imgH.onmouseover = function(){imgOver('h')};
    imgH.onmouseout = function(){imgOut('h')};

    // Mage
    var imgM = document.createElement ('img');
	imgM.src = 'http://3runbrothers.ru/im/mage.png';
	imgM.id = 'imgMage';
	imgM.name = 'imgMage';
    imgM.onclick = function(){imgClick('m')};
    imgM.onmouseover = function(){imgOver('m')};
    imgM.onmouseout = function(){imgOut('m')};

	document.getElementById('q').appendChild(imgW);
	document.getElementById('q').appendChild(imgH);
	document.getElementById('q').appendChild(imgM);


// Characters Mouse Interactions
function imgOver (character) {    
	if (character === 'w') {
		document.getElementById('w').innerHTML =...