RPG Tool
How do I make an rpg tool?
What is a rpg tool? How do you make a rpg tool? This script and codes were developed by Jarad Light on 09 October 2022, Sunday.
RPG Tool - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RPG Tool</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { user-select: none;
}
#container { margin: 10px auto; width: 100%; max-width: 440px;
}
#container#mana { color: blue;
}
#new-turn { float: right; padding: 10px; background: green; cursor: pointer;
}
#mana { float: left; padding: 10px; background-color: #333; font-weight: bold; color: white;
}
#mana:before { content: "Current Mana: ";
}
#menu { overflow: hidden; margin: 0 0 10px 0;
}
ul { color: #fff;
}
ul li { cursor: pointer; opacity: 0.8; margin: 0 0 10px 0; border-radius: 6px; background-color: #333;
}
ul li .header { font-weight: bold; border-radius: 6px 6px 0 0; background-color: #111; padding: 10px;
}
ul li .header span { float: right; color: white;
}
ul li .header span:before { content: "Cost: ";
}
ul li .flavour { padding: 10px;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="container">
<div id="menu"> <div id="mana" data-regen="3">10</div> <div id="new-turn">New Turn</div>
</div>
<ul> <li data-cost="3"> <h3 class="header">Swift Strike<span class="cost">3</span></h3> <p class="flavour">Attack your enemy with your weapon.</p> </li> <li data-cost="5"> <h3 class="header">Bandage <span class="cost">5</span></h3> <p class="flavour">Cleanse your wounds.</p> </li> <li data-cost="2"> <h3 class="header">Rally<span class="cost">2</span></h3> <p class="flavour">Boost morale of nearby allies.</p> </li>
</ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
RPG Tool - Script Codes CSS Codes
* { user-select: none;
}
#container { margin: 10px auto; width: 100%; max-width: 440px;
}
#container#mana { color: blue;
}
#new-turn { float: right; padding: 10px; background: green; cursor: pointer;
}
#mana { float: left; padding: 10px; background-color: #333; font-weight: bold; color: white;
}
#mana:before { content: "Current Mana: ";
}
#menu { overflow: hidden; margin: 0 0 10px 0;
}
ul { color: #fff;
}
ul li { cursor: pointer; opacity: 0.8; margin: 0 0 10px 0; border-radius: 6px; background-color: #333;
}
ul li .header { font-weight: bold; border-radius: 6px 6px 0 0; background-color: #111; padding: 10px;
}
ul li .header span { float: right; color: white;
}
ul li .header span:before { content: "Cost: ";
}
ul li .flavour { padding: 10px;
}
RPG Tool - Script Codes JS Codes
$('li').hover( function() { $(this).animate({opacity:1},100); }, function() { $(this).animate({opacity:0.8},100); }
);
$('li').click(function(){ var mana = parseInt($("#mana").html()); var cost = $(this).attr("data-cost"); if(mana >= cost){ mana -= cost; $('#mana').html(mana); } else { alert("You don't have enough mana!"); //$('#mana').css("color","#d22"); //$('span').animate({opacity: 0.0},100); } refreshCounts();
});
$("#new-turn").click(function(){ var mana = parseInt($("#mana").html()); var regen = parseInt($("#mana").attr("data-regen")); $("#mana").html( mana+regen ); refreshCounts();
});
function refreshCounts(){ var mana = parseInt($("#mana").html()); $(".cost").each(function(){ var cost = parseInt($(this).html()); if ( cost > mana ){ $(this).parent().css("background-color","#dd2222"); } else { $(this).parent().css("background-color","#111"); } });
}
Developer | Jarad Light |
Username | jaradlight |
Uploaded | October 09, 2022 |
Rating | 3 |
Size | 3,422 Kb |
Views | 18,216 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simple Menu | 2,790 Kb |
Animated Checkboxes | 2,911 Kb |
Map Location Hover demo | 3,439 Kb |
Sass Placeholder Stuff | 1,751 Kb |
Dropdown styles | 2,097 Kb |
Input File behaviours | 2,550 Kb |
Loading Bar | 2,333 Kb |
A Pen by Jarad Light | 2,453 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Pomodoro Timer | Sdas13 | 2,900 Kb |
A Pen by Michael Parenteau | Michaelparenteau | 2,133 Kb |
Toolbar | Onsen | 5,414 Kb |
Out of the blue | Giaco | 2,537 Kb |
Michelle, submit your photography to Unsplash. | Zaneriley | 3,368 Kb |
LeMandinque | Aadesida | 9,046 Kb |
Sexy Social Buttons | Ipiyale | 2,226 Kb |
Ionic - Wordpress REST API starter | Superpikar | 2,961 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!