MMORPG UI

Developer
Charlie Walter
Size
7,869 Kb
Views
8,096
  1. MMORPG UI Previews
  2. MMORPG UI HTML Codes
  3. MMORPG UI CSS Codes
  4. MMORPG UI JS Codes

How do I make an mmorpg ui?

Follow my progress on twitterBearing in mind the background could be any color.. What is a mmorpg ui? How do you make a mmorpg ui? This script and codes were developed by Charlie Walter on 11 January 2023, Wednesday.

MMORPG UI Previews
IQ Test

MMORPG UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>MMORPG UI</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Link model: http://www.vg-resource.com/thread-19690.html -->
<span class="bigger-height">Please view in Full Screen mode</span>
<div id="messaging"> <header>Messaging</header> <div> <ul> <li class="server"> <span class='message'>Jon Snow has come online</span> </li> <li> <span class='author me'> [cjonasw]: </span> <span class='message'>Hello</span> </li> <li class="server"> <span class='message'>Tyrian has come online</span> </li> <li> <span class='author'> [Jon Snow]: </span> <span class='message'>Hey</span> </li> <li> <span class='author'> [Tyrian]: </span> <span class='message'>Evening</span> </li> <li class="personal award"> <span class='message'>Congratulations you have reached level 2!</span> </li> <li class="personal collect"> <span class='message'> You picked up <span class='item'>[Wooden Sword]</span> </span> </li> <li class="server"> <span class='message'>Tyrian has gone offline</span> </li> <li class="personal collect"> <span class='message'> You loot 213 copper </span> </li> <li> <span class='author'> [Jon Snow]: </span> <span class='message'>Grats!</span> </li> </ul> </div> <form id="message"> <input type="text" placeholder="Start chat..."></input> </form>
</div>
<div id="holding"></div>
<div id="inventory"> <header>Inventory (i)<button class="close">&#x2716;</button></header> <ul> <li><div class="item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/deku-shield.png" /></div></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
</div>
<div id="character"> <header>Character (c)<button class="close">&#x2716;</button></header> <!--img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/link.png" /--> <img class="preview" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/adultlink.png" /> <ul class="armor"> <li id="head"></li> <li id="shoulders"></li> <li id="torso"></li> <li id="gloves"></li> <!--li id="waist"></li--> <li id="legs"></li> <li id="boots"></li> </ul> <footer> <ul class="weapons"> <li id="left_hand"></li> <li id="right_hand"><div class="item"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/deku-shield.png" /></div></li> <!--li id="range_weapon"></li--> </ul>
</div>
<footer id="xp"> <div></div>
</footer> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

MMORPG UI - Script Codes CSS Codes

body { background: #333; background-repeat: no-repeat; font-family: Open sans, Arial; font-size: 14px;
}
html, body, div, span, object,
form, input, h1, h2, button, label, a, img { -moz-user-select: none; -webkit-user-select: none; /* this will work for QtWebKit in future */ -webkit-user-drag: none;
}
input[type=text] { -moz-user-select: text; -webkit-user-select: text; pointer-events: auto;
}
::selection { background: transparent; /* Safari */
}
::-moz-selection { background: transparent; /* Firefox */
}
#messaging { position: absolute; left: 1em; bottom: 1em; width: 300px; height: 200px; color: white; line-height: 1.5; background: none !important; opacity: 1 !important;
}
#messaging ::selection { background: rgba(255, 255, 255, 0.5);
}
#messaging ::-moz-selection { background: rgba(255, 255, 255, 0.5);
}
#messaging header { cursor: default !important; opacity: 0; -webkit-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -o-transition: opacity 0.5s; transition: opacity 0.5s;
}
#messaging.focused header { opacity: 1;
}
#messaging > div { position: relative; width: 300px; height: 200px; overflow: hidden;
}
#messaging input[type=text] { font-family: inherit; position: absolute; width: 300px; bottom: 0; border: 0; padding: 5px; color: #222; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 10px; background-color: rgba(255, 255, 255, 0.6);
}
::-webkit-input-placeholder { color: #666;
}
:-moz-placeholder { /* Firefox 18- */ color: #666;
}
::-moz-placeholder { /* Firefox 19+ */ color: #666;
}
:-ms-input-placeholder { color: #666;
}
.focused ::-webkit-input-placeholder { color: #999;
}
.focused :-moz-placeholder { /* Firefox 18- */ color: #999;
}
.focused ::-moz-placeholder { /* Firefox 19+ */ color: #999;
}
.focused :-ms-input-placeholder { color: #999;
}
#messaging ul { position: absolute; top: 0; left: 0; margin: 0; width: 317px; height: 165px; overflow: auto; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: background-color 0.5s; -moz-transition: background-color 0.5s; -ms-transition: background-color 0.5s; -o-transition: background-color 0.5s; transition: background-color 0.5s;
}
#messaging li { list-style: none; margin: 2px 0; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}
#messaging li:last-child { margin-bottom: 10px;
}
#messaging time { color: rgba(255, 255, 255, 0.2); margin-right: 0.25em; font-size: .75em;
}
.author { font-size: 11px; text-transform: uppercase; margin-right: 5px; color: LightGoldenRodYellow; cursor: pointer;
}
.author.me { color: orange;
}
#messaging .message { color: white;
}
#messaging .server .message { color: rgba(255, 255, 255, 0.5);
}
#messaging .award .message { color: gold;
}
#messaging .collect .message { color: rgba(0, 255, 0, 0.75);
}
#messaging .collect .message .item { color: white; cursor: help;
}
#messaging { pointer-events: none;
}
#messaging.focused { pointer-events: all;
}
#messaging.focused ul { background: rgba(0, 0, 0, 0.4);
}
#messaging.focused input[type=text] { background-color: white;
}
.personal-message, #messaging .award .message, #messaging .collect .message { border: 0;
}
#inventory { bottom: 10px; right: 10px; width: 280px; height: 280px;
}
#inventory .resize { position: absolute; bottom: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 0 20px 20px; border-color: transparent transparent rgba(0, 0, 0, 0.25) transparent;
}
#character { width: 260px; height: 395px; left: 10px; top: 50px;
}
#character .preview { position: absolute; width: 200px; height: auto; right: 0;
}
#character ul.armor { width: 50px; position: absolute; left: 0; top: 0;
}
#character footer { position: absolute; bottom: 0; width: 100%; margin-bottom: 5px;
}
#character ul.weapons { height: 50px; bottom: 10px; width: 175px; margin: 0 auto;
}
#character ul.weapons li:last-child { margin-left: 10px;
}
.window, #messaging, #inventory, #character { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: absolute; background-color: rgba(0, 0, 0, 0.75); -webkit-transition: background 0.5s; -moz-transition: background 0.5s; -ms-transition: background 0.5s; -o-transition: background 0.5s; transition: background 0.5s;
}
.window.focused, .focused#messaging, .focused#inventory, .focused#character { z-index: 1500;
}
.window.closed, .closed#messaging, .closed#inventory, .closed#character { display: none;
}
.window header, #messaging header, #inventory header, #character header { background-color: rgba(0, 0, 0, 0.9); line-height: 25px; color: white; text-transform: uppercase; font-size: 0.75em; text-align: center; position: absolute; width: 100%; top: -25px; cursor: move;
}
.window header button.close, #messaging header button.close, #inventory header button.close, #character header button.close { background: maroon; width: 15px; height: 15px; position: absolute; right: 5px; top: 5px; border: 0; border-radius: 2px; cursor: pointer; color: white; font-size: 9px; font-family: arial;
}
.window header button.close:hover, #messaging header button.close:hover, #inventory header button.close:hover, #character header button.close:hover { -webkit-box-shadow: inset 0 0 2px white; -moz-box-shadow: inset 0 0 2px white; box-shadow: inset 0 0 2px white; color: gold;
}
.window header button.close:active, #messaging header button.close:active, #inventory header button.close:active, #character header button.close:active { padding: 0;
}
.slot, #inventory li, #character li, #holding { position: relative; width: 50px; height: 50px; margin: 5px 0 0 5px; float: left; background-color: rgba(255, 255, 255, 0.25); border-radius: 2px; /* not needed */ text-overflow: ellipsis; overflow: hidden; text-indent: 2px;
}
.slot:not(:empty), #inventory li:not(:empty), #character li:not(:empty), #holding:not(:empty) { background: rgba(255, 255, 255, 0.5);
}
.slot.highlight, #inventory li.highlight, #character li.highlight, .highlight#holding { -webkit-box-shadow: inset 0 0 10px white; -moz-box-shadow: inset 0 0 10px white; box-shadow: inset 0 0 10px white;
}
.slot.highlight.invalid, #inventory li.highlight.invalid, #character li.highlight.invalid, .highlight.invalid#holding { -webkit-box-shadow: inset 0 0 10px red; -moz-box-shadow: inset 0 0 10px red; box-shadow: inset 0 0 10px red;
}
.slot .item, #inventory li .item, #character li .item, #holding .item { opacity: 1; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; -ms-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; position: absolute; height: 100%; width: 100%; border: 1px solid transparent;
}
.slot .item img, #inventory li .item img, #character li .item img, #holding .item img { pointer-events: none;
}
.slot .item.held, #inventory li .item.held, #character li .item.held, #holding .item.held { opacity: 0.5;
}
.slot .item.highlight, #inventory li .item.highlight, #character li .item.highlight, #holding .item.highlight { -webkit-box-shadow: inset 0 0 10px grey; -moz-box-shadow: inset 0 0 10px grey; box-shadow: inset 0 0 10px grey;
}
#holding { opacity: 0; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; -ms-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s; background: #444; border: 1px solid #111; position: absolute; z-index: 2000; pointer-events: none; -webkit-box-shadow: 0 0 10px black; -moz-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black; -webkit-transform: scale(1.1); transform: scale(1.1);
}
#holding.show { opacity: 1;
}
#xp { height: 5px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) 10%, white 10.1%);
}
#xp div { width: 25%; height: 100%; background: dodgerblue;
}
.bigger-height { color: white; text-transform: uppercase; font-size: 5em; position: absolute; width: 25%; right: 0; text-align: right;
}
@media screen and (min-height: 450px) { .bigger-height { display: none; }
}

MMORPG UI - Script Codes JS Codes

var messaging = { scroll_to_bottom : function(){ // Scrolls right to bottom of messages if($('#messaging ul').length > 0) $('#messaging ul').get(0).scrollTop = $('#messaging ul').get(0).scrollHeight; }
};
$('#messaging input').bind('focus', function(e){ e.stopPropagation(); $('#messaging').addClass('focused'); $('#inventory,#character').removeClass('focused'); $('.preview').attr('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/adultlink.png');
});
$('#messaging').bind('mousedown', function(e){ if($(this).hasClass('focused')){ e.stopPropagation(); }
});
messaging.scroll_to_bottom();
$('#inventory,#character').mousedown(function(e){ e.stopPropagation(); if($(this).attr('id') == "character" && !$(this).hasClass('focused')){ $('.preview').attr('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/adultlink.gif'); } if($(this).attr('id') == "inventory"){ $('.preview').attr('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/adultlink.png'); } $('#inventory,#character').removeClass('focused'); $('#messaging').removeClass('focused'); $(this).addClass('focused');
});
var grabbed = null;
$('#inventory,#character').click(function(e){ e.stopPropagation();
})
$('#inventory header,#character header').mousedown(function(e){ if(!holding){ var closest_div = $(this).closest('div'); grabbed = { element : closest_div, clientX : e.clientX - closest_div.offset().left, clientY : e.clientY - closest_div.offset().top } }
});
$('html').mouseup(function(e){ if(grabbed) grabbed = null;
});
$('html').mousemove(function(e){ if(grabbed){ grabbed.element.css({ left : e.clientX - grabbed.clientX, top : e.clientY - grabbed.clientY }); }
});
$('html').bind('mousedown', function(e){ $('#messaging').removeClass('focused'); messaging.scroll_to_bottom(); $('#inventory,#character').removeClass('focused'); $('.preview').attr('src', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/109682/adultlink.png');
});
$('button.close').mousedown(function(){ $(this).closest('div').addClass('closed');
})
messaging.scroll_to_bottom();
// Great model rip... shame downloads gone...
// http://www.vg-resource.com/thread-19690.html
// I am looking for a modeler by the way.
// Interface from OOT
// http://i53.photobucket.com/albums/g74/rikku300/Uni/FYP/N64Ocarinaoftime4menuscreens.png:original
$('html').keydown(function(e){ //c 67 if(e.keyCode == 67) $('#character').toggleClass('closed'); if(e.keyCode == 73) //i 73 $('#inventory').toggleClass('closed');
});
var holding = null, dropInto = undefined;
$('#inventory .item, #character .item').mousedown(function(e){ var from = ""; if($(this).parents('#inventory').length > 0) from = "inventory"; if($(this).parents('#character').length > 0) from = "character"; holding = { element: $(this), from: from, offsetInElementX: (e.clientX - $(this).offset().left) * 1.1, offsetInElementY: (e.clientY - $(this).offset().top) * 1.1, clientX: e.clientX, clientY: e.clientY }
})
$(window).bind('mousemove', function(e){ if(holding && !grabbed && (Math.abs(e.clientX - holding.clientX) > 10 || Math.abs(e.clientY - holding.clientY) > 10)){ holding.element.addClass('held'); $('#holding').html(holding.element.clone().removeClass('held')) $('#holding').addClass('show'); $('#holding').css({ //position: "fixed", left : e.clientX - holding.offsetInElementX, top : e.clientY - holding.offsetInElementY }) }
})
$(window).bind('mouseup', function(){ if(holding){ if(dropInto) alert(JSON.stringify(dropInto)) dropInto = null; holding.element.removeClass('held'); holding.element.parents('li').removeClass('highlight'); $('#holding').html(""); $('#holding').removeClass('show'); holding = null; }
})
$('#inventory .item, #character .item').mouseenter(function(){ if(!holding){ $(this).addClass('highlight'); }
})
$('#inventory .item, #character .item').mouseleave(function(){ $(this).removeClass('highlight');
})
$('#inventory li, #character li').mouseenter(function(){ if(holding){ var to = ""; if($(this).parents('#inventory').length > 0) to = "inventory"; if($(this).parents('#character').length > 0) to = "character"; dropInto = { to: to, from: holding.from, slot: to == "character" ? $(this).attr('id') : $(this).index() } console.log(dropInto) $(this).addClass('highlight'); }
})
$('#inventory li, #character li').mouseleave(function(){ $(this).removeClass('highlight'); dropInto = null;
})
MMORPG UI - Script Codes
MMORPG UI - Script Codes
Home Page Home
Developer Charlie Walter
Username cjonasw
Uploaded January 11, 2023
Rating 3
Size 7,869 Kb
Views 8,096
Do you need developer help for MMORPG UI?

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!

Charlie Walter (cjonasw) Script Codes
Name
Login form
Facebook tabs with AngularJS
Pointer Lock and First Person Mechanics
Charliejwalter.net
JQuery countdown
Ninja Flash CC Animation Canvas
Three.js half circle health bar
CSS3 Carousel
Gamepad API - DOM Element Demo
Growing Root - Scroll control - CANVAS
Create amazing art & images with AI!

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!