Skip to content

Instantly share code, notes, and snippets.

@sophiathekitty

sophiathekitty/encounter.css

Created June 22, 2013 07:23
Show Gist options
  • Save sophiathekitty/5836195 to your computer and use it in GitHub Desktop.
Save sophiathekitty/5836195 to your computer and use it in GitHub Desktop.
Download ZIP
this is a simple monster encounter system. it's inspired by the original dragon guest battle system.
Raw
encounter.css
@charset "utf-8";
.encounter {
position:absolute;
top:auto;
left:auto;
right:auto;
bottom:auto;
height: 600px;
width: 800px;
transition:all 100ms linear;
margin-right:-200px;
margin-top:-200px;
margin-bottom:-100px;
margin-left:0px;
display:inline-block;
float:center;
}
.encounter nav {
height:auto !important;
background-image:none !important;
}
.encounter.hidden .dialog, .encounter.hidden .area {
-moz-transform: scale(0) rotate(5deg) translateX(0px) translateY(0px) skewX(15deg) skewY(15deg);
-webkit-transform: scale(0) rotate(5deg) translateX(0px) translateY(0px) skewX(15deg) skewY(15deg);
-o-transform: scale(0) rotate(5deg) translateX(0px) translateY(0px) skewX(15deg) skewY(15deg);
-ms-transform: scale(0) rotate(5deg) translateX(0px) translateY(0px) skewX(15deg) skewY(15deg);
transform: scale(0) rotate(5deg) translateX(0px) translateY(0px) skewX(15deg) skewY(15deg);
}
.encounter.hidden {
width:0px;
height:0px;
}
.encounter .dialog {
font-family: Arial, Helvetica, sans-serif;
border: 3px solid rgba(255,255,255,1);
border-radius: 5px;
padding: 10px;
position: absolute;
color: rgba(255,255,255,1);
background-color: rgba(0,0,0,0.75);
display: block;
-webkit-box-shadow: 2px 2px 15px 3px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 15px 3px rgba(0, 0, 0, 0.5);
transition: all 300ms ease-out;
}
.encounter.hit .dialog {
-moz-transform: scale(0.95) rotate(-1deg) translateX(5px) translateY(5px) skewX(1deg) skewY(1deg);
-webkit-transform: scale(0.95) rotate(-1deg) translateX(5px) translateY(5px) skewX(1deg) skewY(1deg);
-o-transform: scale(0.95) rotate(-1deg) translateX(5px) translateY(5px) skewX(1deg) skewY(1deg);
-ms-transform: scale(0.95) rotate(-1deg) translateX(5px) translateY(5px) skewX(1deg) skewY(1deg);
transform: scale(0.95) rotate(-1deg) translateX(5px) translateY(5px) skewX(1deg) skewY(1deg);
border-top-color: rgba(255,0,0,1);
border-right-color: rgba(255,0,0,1);
border-bottom-color: rgba(255,0,0,1);
border-left-color: rgba(255,0,0,1);
}
.encounter.hurt .player.actions a {
color: rgba(255,0,0,1);
}
.encounter .log.dialog .battle .monster {
text-shadow: 1px 1px 2px #669;
filter: dropshadow(color=#669, offx=1, offy=1);
}
.encounter .log.dialog .battle .damage {
text-shadow: 1px 1px 2px #f69;
filter: dropshadow(color=#f69, offx=1, offy=1);
}
.encounter .log.dialog .battle .heal {
text-shadow: 1px 1px 2px #0f9;
filter: dropshadow(color=#0f9, offx=1, offy=1);
}
.encounter .log.dialog .battle .action {
text-shadow: 1px 1px 2px #03F;
filter: dropshadow(color=#03F, offx=1, offy=1);
}
.encounter .log.dialog .battle .spell {
text-shadow: 1px 1px 2px #96C;
filter: dropshadow(color=#96C, offx=1, offy=1);
}
.encounter.hurt .dialog {
border-top-color: rgba(255,0,0,1);
border-right-color: rgba(255,0,0,1);
border-bottom-color: rgba(255,0,0,1);
border-left-color: rgba(255,0,0,1);
color: rgba(255,0,0,1);
}
.encounter .player.actions {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
z-index: 1;
top: 10px;
right: 10px;
display:block;
max-width: 200px;
}
.encounter .log {
font-size: 18px;
list-style-type: none;
z-index: 1;
bottom: 10px;
right: 60px;
left: 60px;
display: block;
max-height: 100px;
overflow: hidden;
height: 100px;
}
.encounter .log .battle {
display: block;
position: absolute;
bottom: 5px;
list-style-type: none;
margin: 0px;
padding: 0px;
}
.encounter .player.actions a {
color: rgba(255,255,255,1);
text-decoration: none;
display: inline-block;
margin: 7px;
padding: 8px;
}
.encounter .player.stats {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
width: 100px;
z-index: 2;
top:10px;
left:10px;
}
.encounter .monster.stats {
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
list-style-type: none;
width: 100px;
z-index: 2;
top:10px;
right:10px;
display: none;
}
.encounter .stats li {
width: 100%;
display: block;
}
.encounter .stats li img {
height:24px;
}
.encounter .stats li.name {
white-space:nowrap;
overflow:hidden;
}
.encounter .stats li b {
position: absolute;
right: 10px;
text-align: right;
display: inline-block;
}
.encounter .area {
border: 2px solid rgba(0,0,0,1);
position: absolute;
left: 50px;
top: 20px;
right: 50px;
bottom: 100px;
z-index: 0;
display: table-cell;
vertical-align: bottom;
text-align:center;
transition:all 200ms ease-out;
-webkit-box-shadow: 2px 2px 15px 3px rgba(0, 0, 0, 0.5);
box-shadow: 2px 2px 15px 3px rgba(0, 0, 0, 0.5);
border-radius: 10px;
}
.encounter .area.grass {
background-image: url(../../../images/games/pixels/jpgs/med/grass.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.encounter .area .ground {
position: absolute;
bottom: 50px;
left:0px;
right:0px;
}
.encounter .area .monster {
margin-right: auto;
margin-left: auto;
transition: all 200ms ease-out;
transform:skew(0,0);
}
.encounter .player.actions .spell {
display: none;
}
.encounter.monster .player.actions,
.encounter.over .player.actions {
display: none;
}
.encounter.monster .monster.stats {
display: block;
}
.encounter .area .monster.hit {
-moz-transform: scale(0.75) rotate(15deg) translateX(15px) translateY(15px) skewX(5deg) skewY(5deg);
-webkit-transform: scale(0.75) rotate(15deg) translateX(15px) translateY(15px) skewX(5deg) skewY(5deg);
-o-transform: scale(0.75) rotate(15deg) translateX(15px) translateY(15px) skewX(5deg) skewY(5deg);
-ms-transform: scale(0.75) rotate(15deg) translateX(15px) translateY(15px) skewX(5deg) skewY(5deg);
transform: scale(0.75) rotate(15deg) translateX(15px) translateY(15px) skewX(5deg) skewY(5deg);
}
.encounter_block {
background-color: rgba(0,0,0,0.5);
position: fixed;
z-index: 1000;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
display: none;
text-align: left;
}
.encounter_block .encounter_pos1 {
position: absolute;
left: 50%;
top: 50%;
}
.encounter_block .encounter_pos1 .encounter_pos2 {
position: absolute;
left: -400px;
top: -100px;
}
Raw
encounter.html
<div class="encounter_block">
<div class="encounter_pos1">
<div class="encounter_pos2">
<!--encounter-->
<div class="encounter hidden">
<div class="area grass">
<div class="ground">
<img class="monster" src="/images/games/pixels/gifs/small/worm.gif">
</div>
</div>
<nav class="player actions dialog">
<a href="#" class="action fight">fight</a>
<a href="#" class="action spells">spell</a>
<a href="#" class="spell hurt">hurt</a>
<a href="#" class="spell heal">heal</a>
<a href="#" class="action flee">flee</a>
<!--<a href="#" class="action item">item</a>-->
</nav>
<ul class="player stats dialog">
<li class="name"><img src="https://graph.facebook.com/764343779/picture" class="user">Sophi</li>
<li>hp: <b class="hp">74</b></li>
<li>mp: <b class="mp">44</b></li>
<li>atk: <b class="atk">71</b></li>
<li>def: <b class="def">70</b></li>
<li>g: <b class="gold">9765</b></li>
<li>xp: <b class="xp">4277</b></li>
</ul>
<ul class="monster stats dialog">
<li class="name">a worm</li>
<li>hp: <b class="hp">8</b></li>
<li>mp: <b class="mp">6</b></li>
<li>atk: <b class="atk">4</b></li>
<li>def: <b class="def">4</b></li>
<li>gp: <b class="gold">3</b></li>
<li>xp: <b class="xp">5</b></li>
</ul>
<ul class="monster actions" style="display:none">
<li class="attacks">whips</li>
<li class="casts">casts</li>
<li class="hurt">borrow</li>
<li class="heal">heal</li>
</ul>
<div class="log dialog">
<ul class="battle">
<li><b class="monster">a worm</b> <i class="action">pops up</i>.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Raw
encounter.js
// encounter
$(document).ready(function(e) {
// ok now lets do this encounter handling stuffs.
$(".fight").click(function(e) {
e.preventDefault();
// do a fight command
var lg = "You <i class='action'>attack</i> <b class='monster'>"+$(".monster .name").text()+"</b>";
// now lets calculate how it went....
var atk = Number($(".player.stats .atk").text());
var def = Number($(".monster.stats .def").text());
var dam = Math.round(Math.random() * atk - Math.random() * def);
console.log(atk);
console.log(def);
console.log(dam);
console.log("--");
if(dam > 0){
lg += " and do <b class='damage'>"+dam+"</b> damage.";
var hp = Number($(".monster.stats .hp").text());
hp -= dam;
if(hp < 0){
hp = 0;
}
$(".monster.stats .hp").text(hp);
$(".area .monster").addClass("hit");
} else {
lg += " but miss....";
}
battleLog(lg);
monsterTurn();
});
$(".spells").click(function(e) {
e.preventDefault();
// show spells
if(Number($(".player.stats .mp").text()) > 0){
$(".actions .spell").show();
$(".actions .action").hide();
}
});
$(".hurt").click(function(e) {
e.preventDefault();
$(".actions .spell").hide();
$(".actions .action").show();
var lg = "You <i class='action'>cast</i> <i class='spell'>hurt</i> on <b class='monster'>"+$(".monster .name").text()+"</b>";
// now lets calculate how it went....
var atk = Number($(".player.stats .atk").text())+Number($(".player.stats .mp").text());
var def = Number($(".monster.stats .def").text());
var dam = Math.round(Math.random() * atk - Math.random() * def);
if(dam > 0){
lg += " and do <b class='damage'>"+dam+"</b> damage.";
var hp = Number($(".monster.stats .hp").text());
hp -= dam;
if(hp < 0){
hp = 0;
}
$(".monster.stats .hp").text(hp);
$(".area .monster").addClass("hit");
} else {
lg += " but miss....";
}
battleLog(lg);
monsterTurn();
var mp = Number($(".player.stats .mp").text()) - 5;
if(mp < 0)
mp = 0;
$(".player.stats .mp").text(mp);
});
$(".heal").click(function(e) {
e.preventDefault();
$(".actions .spell").hide();
$(".actions .action").show();
var lg = "You <i class='action'>cast</i> <i class='spell'>heal</i>";
// now lets calculate how it went....
var heal = Math.round((Number($(".player.stats .def").text())+Number($(".player.stats .mp").text())) * Math.random());
lg += " and restore <b class='heal'>"+heal+"</b> hit points.";
var hp = Number($(".player.stats .hp").text());
hp += heal;
if(hp > 5){
$(".encounter").removeClass("hurt");
}
$(".player.stats .hp").text(hp);
battleLog(lg);
monsterTurn();
var mp = Number($(".player.stats .mp").text()) - 5;
if(mp < 0)
mp = 0;
$(".player.stats .mp").text(mp);
});
$(".flee").click(function(e) {
e.preventDefault();
// flee the fight
var fle = Number($(".player.stats .atk").text())+Number($(".player.stats .def").text());
var stp = Number($(".monster.stats .atk").text());
if(Math.random() * fle > Math.random() * stp){
battleLog("You flee in terror!");
$(".encounter").addClass("over");
window.pt = window.setTimeout(closeEncounter,2000);
} else {
battleLog("You are unable to escape....");
monsterTurn();
}
});
$(".item").click(function(e) {
e.preventDefault();
// show items
});
function battleLog(lg){
$(".log .battle").append("<li>"+lg+"</li>");
}
// this one actually just does the waiting... and stuff...
function monsterTurn(){
$(".encounter").addClass("monster");
if(Number($(".monster.stats .hp").text()) > 0){
window.pt = window.setTimeout(playerTurn,Math.round(Math.random() * 800 + 800));
} else {
youWin();
}
}
// ok... his is actually where i'm putting monster turn logics...
function playerTurn(){
console.log("do monster turn");
$(".area .monster").removeClass("hit");
// does the monster has mp?
var mp = Number($(".monster.stats .mp").text());
// if monster has magics
if(mp > 0){
console.log("has mp");
var hp = Number($(".monster.stats .hp").text());
if(hp < 5){
console.log("heal");
healMonster();
return true;
} else {
if(Math.random() > 0.5){
console.log("do a hurt spell");
hurtPlayer();
return true;
}
}
}
console.log("ok lets attack");
attackPlayer();
}
function attackPlayer(){
var lg = "<b class='monster'>"+$(".monster.stats .name").text()+"</b> <i class='action'>"+$(".monster.actions .attacks").text()+"</i> you";
// now lets calculate how it went....
var atk = Number($(".monster.stats .atk").text());
var def = Number($(".player.stats .def").text());
var dam = Math.round(Math.random() * atk - Math.random() * def);
if(dam > 0){
lg += " and does <b class='damage'>"+dam+"</b> damage.";
var hp = Number($(".player.stats .hp").text());
hp -= dam;
if(hp <= 0){
hp = 0;
}
if(hp < 5){
$(".encounter").addClass("hurt");
}
$(".player.stats .hp").text(hp);
$(".encounter").addClass("hit");
window.pt = window.setTimeout(playerHit,Math.round(Math.random() * 800 + 100));
} else {
lg += " but misses....";
}
battleLog(lg);
if(Number($(".player.stats .hp").text()) <= 0){
youLost();
}
$(".encounter").removeClass("monster");
}
function hurtPlayer(){
var lg = "<b class='monster'>"+$(".monster.stats .name").text()+"</b> <i class='action'>"+$(".monster.actions .casts").text()+"</i> <i class='spell'>"+$(".monster.actions .hurt").text()+"</i> on you";
// now lets calculate how it went....
var atk = Number($(".monster.stats .atk").text());
var mp = Number($(".monster.stats .mp").text());
var def = Number($(".player.stats .def").text());
var dam = Math.round(Math.random() * (atk+mp) - Math.random() * def);
mp -= 5;
if(mp < 0)
mp = 0;
$(".monster.stats .mp").text(mp);
if(dam > 0){
lg += " and does <b class='damage'>"+dam+"</b> damage.";
var hp = Number($(".player.stats .hp").text());
hp -= dam;
if(hp <= 0){
hp = 0;
}
if(hp < 5){
$(".encounter").addClass("hurt");
}
$(".player.stats .hp").text(hp);
$(".encounter").addClass("hit");
window.pt = window.setTimeout(playerHit,Math.round(Math.random() * 800 + 100));
} else {
lg += " but misses....";
}
battleLog(lg);
if(Number($(".player.stats .hp").text()) <= 0){
youLost();
}
$(".encounter").removeClass("monster");
}
function healMonster(){
var lg = "<b class='monster'>"+$(".monster.stats .name").text()+"</b> <i class='action'>"+$(".monster.actions .casts").text()+"</i> <i class='spell'>"+$(".monster.actions .heal").text()+"</i>";
// now lets calculate how it went....
var mp = Number($(".monster.stats .mp").text());
var def = Number($(".monster.stats .def").text());
var dam = Math.round(Math.random()*(mp+def));
mp -= 5;
if(mp < 0)
mp = 0;
$(".monster.stats .mp").text(mp);
lg += " and restores <b class='damage'>"+dam+"</b> hit points.";
var hp = Number($(".player.stats .hp").text());
hp += dam;
if(hp <= 0){
hp = 0;
}
$(".monster.stats .hp").text(hp);
window.pt = window.setTimeout(playerHit,Math.round(Math.random() * 800 + 100));
battleLog(lg);
if(Number($(".player.stats .hp").text()) <= 0){
youLost();
}
$(".encounter").removeClass("monster");
}
function playerHit(){
$(".encounter").removeClass("hit");
}
function youWin(){
//$("#battle_music").get(0).pause();
//$("#victory_music").get(0).play();
$(".encounter").addClass("over");
$(".encounter").removeClass("monster");
$(".area .monster").hide();
var g = Math.round(Math.random()*Number($(".monster.stats .gold").text()));
var xp = Math.round(Math.random()*Number($(".monster.stats .xp").text()))+1;
$(".player.stats .gold").text(Number($(".player.stats .gold").text())+g);
$(".player.stats .xp").text(Number($(".player.stats .xp").text())+xp);
battleLog("You have defeated <b class='monster'>"+$(".monster.stats .name").text()+"</b>! You recieved <i class='gold'>"+g+"</i> gold and earned <i class='xp'>"+xp+"</i> xp.");
window.pt = window.setTimeout(closeEncounter,3000);
$.post("/games/pixels/savexp.php",{"xp":xp,"g":g});
$(".player_xp").text($(".player.stats .xp").text());
if(Number($(".player_xp").text()) > Number($(".player_next").text())){
$(".player_level").text(Number($(".player_level").text())+1);
$(".player_next").text(Number($(".player_next").text())+Number($(".player_next").text())*Number($(".player_level").text()))
}
}
function youLost(){
//$("#battle_music").get(0).pause();
//$("#lost_music").get(0).play();
$(".player.stats .hp").text("0");
$(".encounter").addClass("over");
$(".encounter").addClass("hurt");
$(".encounter").addClass("monster");
battleLog("You were defeated by <b class='monster'>"+$(".monster.stats .name").text()+"</b>....");
window.pt = window.setTimeout(closeEncounter,6000);
}
function openEncounter(){
$(".encounter_block").fadeIn(1400);
$(".encounter").removeClass("hidden");
/*
$("#battle_music").get(0).volume = 0.15;
$("#battle_music").get(0).loop = true;
$("#lost_music").get(0).volume = 0.15;
$("#victory_music").get(0).volume = 0.15;
$("#battle_music").get(0).play();
*/
}
function closeEncounter(){
$(".encounter_block").fadeOut(1400);
$(".encounter").addClass("hidden");
// $("#battle_music").get(0).pause();
// $("#lost_music").get(0).pause();
// $("#victory_music").get(0).pause();
}
window.pt = window.setTimeout(openEncounter,2000 + Math.random()*50000);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment