html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
<title>SoloLearn Battle Royale</title>
<!--
By: Burey
Date: October 2018
Desc: Walking around using Firebase as a socket service
Usage: fun?
sprites generated using:
http://gaurav.munjal.us/Universal-LPC-Spritesheet-Character-Generator/
-->
<script src="https://www.gstatic.com/firebasejs/5.8.1/firebase.js"></script>
<script src="https://rawcdn.githack.com/bureyburey/bad-words-compact/520ca0221951c4577ab331116b931f04dd88fc1e/bad-words-compact.min.js"></script>
<script src="https://rawcdn.githack.com/bureyburey/canvas-joystick/5f999252c0d8d1ee77cab3d7e1ff980e72918e7f/joystick.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="screen-1">
<h3>Click Image To Join the Server</h3>
<div id="join-form">
<input placeholder="Player Name:" id="name" />
<div class="styled-select blue semi-square">
<select id="gender">
<option value="RANDOM">Random</option>
<option value="SKELETON">Skeleton</option>
<option value="HANK">Hank (M)</option>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently */
background: black;
}
h3{
color: white;
text-align: center;
}
#screen-1{
display: flex;
flex-direction: column;
}
#screen-1 div{
width: 95vw;
color: white;
}
#screen-1 img{
height: 30vw;
margin: 2px 0;
border-radius: 5px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
'use strict';
var filter = new Filter();
// welcome messages to be displayed upon connecting
var welcomeMessages = ["Welcome to", "SoloLearn Battle Royale", "• Tap on screen to attack", "• Use the joystick to move"];
var welcomeMessagesFrames = 50;
var WALK = "WALK", ACTION = "ACTION", SLASH = "SLASH", STAB = "STAB", MAGIC = "MAGIC", BIG_SWORD = "BIG_SWORD", SPEAR = "SPEAR" , DIE = "DIE", REVIVE = "REVIVE";
var SPRITES = {
"MALE": {
url:"https://i.imgur.com/Ohe9jMp.png",
attack: SLASH
},
"FEMALE": {
url: "https://i.imgur.com/1Ijv1OJ.png",
attack: SLASH
},
"ORC": {
url: "https://i.imgur.com/vsn0EYQ.png",
attack: SLASH
},
"KNIGHT_M":{
url: "https://i.imgur.com/fka32MZ.png",
attack: SLASH
},
"KNIGHT_F":{
url: "https://i.imgur.com/P1OOh5D.png",
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run