Add character creation

6 - Select your Character !/Will/css/index.css

@@ -0,0 +1,29 @@
+html, body {
+    overflow: hidden;
+    margin: auto;
+}
+
+canvas {
+    padding: 0;
+    margin: auto;
+    display: block;
+}
+
+
+.vertical-center {
+    margin: auto;
+    display: block;
+    position: absolute;
+    top: 50%;
+    -ms-transform: translate(10%, -50%);
+    transform: translate(10%, -50%);
+}
+
+@font-face {
+    font-family: 'Cocogoose';
+    src: url('../fonts/Cocogoose.ttf');
+}
+
+canvas {
+    cursor: url(../cur/cursor.cur), none;
+}

6 - Select your Character !/Will/data/characters.js

@@ -0,0 +1,543 @@
+characterData =
+[
+	{
+		name: "Mario",
+		image: "img/Mario_full.png",
+		thumbnail: "img/Mario_thumb.png",
+		color: "#DF220F"
+	},
+	{
+		name: "Luigi",
+		image: "img/Luigi_full.png",
+		thumbnail: "img/Luigi_thumb.png",
+		color: "#44B119"
+	},
+	{
+		name: "Bowser",
+		image: "img/Bowser_full.png",
+		thumbnail: "img/Bowser_thumb.png",
+		color: "#23700A"
+	},
+	{
+		name: "Waluigi",
+		image: "img/Waluigi_full.png",
+		thumbnail: "img/Waluigi_thumb.png",
+		color: "#7F36D0"
+	},
+	{
+		name: "Donkey\nKong",
+		image: "img/DK_full.png",
+		thumbnail: "img/DK_thumb.png",
+		color: "#874836"
+	},
+    {
+        name: "Chunky\nKong",
+        image: "img/CK_full.png",
+        thumbnail: "img/CK_thumb.png",
+        color: "#6E452C"
+    },
+	{
+		name: "Kiddy\nKong",
+		image: "img/KK_full.png",
+		thumbnail: "img/KK_thumb.png",
+		color: "#5D2909"
+	},
+	{
+		name: "King K.\nRool",
+		image: "img/KKR_full.png",
+		thumbnail: "img/KKR_thumb.png",
+		color: "#8FB47B"
+	},
+	{
+		name: "Samus",
+		image: "img/Samus_full.png",
+		thumbnail: "img/Samus_thumb.png",
+		color: "#E68235"
+	},
+	{
+		name: "Ridley",
+		image: "img/Ridley_full.png",
+		thumbnail: "img/Ridley_thumb.png",
+		color: "#6B6588"
+	},
+	{
+		name: "Link",
+		image: "img/Link1_full.png",
+		thumbnail: "img/Link1_thumb.png",
+		color: "#009FD2"
+	},
+	{
+		name: "Link",
+		image: "img/Link2_full.png",
+		thumbnail: "img/Link2_thumb.png",
+		color: "#5DD443"
+	},
+	{
+		name: "Link",
+		image: "img/Link3_full.png",
+		thumbnail: "img/Link3_thumb.png",
+		color: "#5BA057"
+	},
+	{
+		name: "Link",
+		image: "img/Link4_full.png",
+		thumbnail: "img/Link4_thumb.png",
+		color: "#3D3B35"
+	},
+	{
+		name: "Lonk",
+		image: "img/Link5_full.png",
+		thumbnail: "img/Link5_thumb.png",
+		color: "#008332"
+	},
+	{
+		name: "Link\nLink\nand Link",
+		image: "img/Link6_full.png",
+		thumbnail: "img/Link6_thumb.png",
+		color: "#F1C006"
+	},
+	{
+		name: "Zelda",
+		image: "img/Zelda_full.png",
+		thumbnail: "img/Zelda_thumb.png",
+		color: "#34A0E0"
+	},
+	{
+		name: "Kirby",
+		image: "img/Kirby_full.png",
+		thumbnail: "img/Kirby_thumb.png",
+		color: "#F996BA"
+	},
+	{
+		name: "King\nDedede",
+		image: "img/DDD_full.png",
+		thumbnail: "img/DDD_thumb.png",
+		color: "#E1B739"
+	},
+	{
+		name: "Pichu",
+		image: "img/Pichu_full.png",
+		thumbnail: "img/Pichu_thumb.png",
+		color: "#F6E156"
+	},
+	{
+		name: "Pikachu",
+		image: "img/Pikachu_full.png",
+		thumbnail: "img/Pikachu_thumb.png",
+		color: "#F7CF3C"
+	},
+	{
+		name: "Raichu",
+		image: "img/Raichu_full.png",
+		thumbnail: "img/Raichu_thumb.png",
+		color: "#EEA838"
+	},
+	{
+		name: "Alolan\nRaichu",
+		image: "img/ARaichu_full.png",
+		thumbnail: "img/ARaichu_thumb.png",
+		color: "#C38F4D"
+	},
+	{
+		name: "Big\nChunky\nPikachu",
+		image: "img/GPikachu_full.png",
+		thumbnail: "img/GPikachu_thumb.png",
+		color: "#E2C454"
+	},
+	{
+		name: "Sonic",
+		image: "img/Sonic_full.png",
+		thumbnail: "img/Sonic_thumb.png",
+		color: "#2D51D0"
+	},
+	{
+		name: "Tails",
+		image: "img/Tails_full.png",
+		thumbnail: "img/Tails_thumb.png",
+		color: "#F3C043"
+	},
+	{
+		name: "Knuckles",
+		image: "img/Knuckles_full.png",
+		thumbnail: "img/Knuckles_thumb.png",
+		color: "#F40F00"
+	},
+	{
+		name: "Dr.\nEggman",
+		image: "img/Eggman_full.png",
+		thumbnail: "img/Eggman_thumb.png",
+		color: "#ED4547"
+	},
+	{
+		name: "Your\nOC",
+		image: "img/OC_full.png",
+		thumbnail: "img/OC_thumb.png",
+		color: "#6193D6"
+	},
+	{
+		name: "Monkey\nBall",
+		image: "img/Monkeyball_full.png",
+		thumbnail: "img/Monkeyball_thumb.png",
+		color: "#FB6400"
+	},
+	{
+		name: "Kazuma\nKiryu",
+		image: "img/Kiryu_full.png",
+		thumbnail: "img/Kiryu_thumb.png",
+		color: "#602228"
+	},
+	{
+		name: "Joker",
+		image: "img/Joker_full.png",
+		thumbnail: "img/Joker_thumb.png",
+		color: "#0C0C0C"
+	},
+	{
+		name: "Megaman",
+		image: "img/Megaman_full.png",
+		thumbnail: "img/Megaman_thumb.png",
+		color: "#4D78CC"
+	},
+	{
+		name: "Megaman\nX",
+		image: "img/X_full.png",
+		thumbnail: "img/X_thumb.png",
+		color: "#0073BF"
+	},
+	{
+		name: "Phoenix\nWright",
+		image: "img/Phoenix_full.png",
+		thumbnail: "img/Phoenix_thumb.png",
+		color: "#4A58AA"
+	},
+	{
+		name: "Leon S.\nKennedy",
+		image: "img/Leon_full.png",
+		thumbnail: "img/Leon_thumb.png",
+		color: "#1B1713"
+	},
+	{
+		name: "Pac-Man",
+		image: "img/Pacman_full.png",
+		thumbnail: "img/Pacman_thumb.png",
+		color: "#DFC45C"
+	},
+	{
+		name: "Solaire",
+		image: "img/Solaire_full.png",
+		thumbnail: "img/Solaire_thumb.png",
+		color: "#5E5F60"
+	},
+	{
+		name: "Ryu",
+		image: "img/Ryu_full.png",
+		thumbnail: "img/Ryu_thumb.png",
+		color: "#6B3A40"
+	},
+	{
+		name: "Ken",
+		image: "img/Ken_full.png",
+		thumbnail: "img/Ken_thumb.png",
+		color: "#C2493D"
+	},
+	{
+		name: "Chun Lee",
+		image: "img/ChunLee_full.png",
+		thumbnail: "img/ChunLee_thumb.png",
+		color: "#1448A1"
+	},
+	{
+		name: "Lara Croft",
+		image: "img/Lara_full.png",
+		thumbnail: "img/Lara_thumb.png",
+		color: "#5B5533"
+	},
+	{
+		name: "Spyro",
+		image: "img/Spyro_full.png",
+		thumbnail: "img/Spyro_thumb.png",
+		color: "#9E2E77"
+	},
+	{
+		name: "Crash",
+		image: "img/Crash_full.png",
+		thumbnail: "img/Crash_thumb.png",
+		color: "#E05300"
+	},
+	{
+		name: "Snake",
+		image: "img/Snake_full.png",
+		thumbnail: "img/Snake_thumb.png",
+		color: "#646A68"
+	},
+	{
+		name: "Banjo\n&\nKazooie",
+		image: "img/Banjo_full.png",
+		thumbnail: "img/Banjo_thumb.png",
+		color: "#6B4024"
+	},
+	{
+		name: "Konker",
+		image: "img/Konker_full.png",
+		thumbnail: "img/Konker_thumb.png",
+		color: "#F07326"
+	},
+	{
+		name: "Bomber\nman",
+		image: "img/Bomberman_full.png",
+		thumbnail: "img/Bomberman_thumb.png",
+		color: "#EA4F70"
+	},
+	{
+		name: "Simon\nBelmont",
+		image: "img/Simon_full.png",
+		thumbnail: "img/Simon_thumb.png",
+		color: "#64462A"
+	},
+	{
+		name: "Cloud",
+		image: "img/Cloud_full.png",
+		thumbnail: "img/Cloud_thumb.png",
+		color: "#383647"
+	},
+	{
+		name: "Sephiroth",
+		image: "img/Sephiroth_full.png",
+		thumbnail: "img/Sephiroth_thumb.png",
+		color: "#807C7E"
+	},
+	{
+		name: "Steve",
+		image: "img/Steve_full.png",
+		thumbnail: "img/Steve_thumb.png",
+		color: "#00C2BF"
+	},
+	{
+		name: "Creeper",
+		image: "img/Creeper_full.png",
+		thumbnail: "img/Creeper_thumb.png",
+		color: "#06A203"
+	},
+	{
+		name: "Dirt\nBlock",
+		image: "img/Dirt_full.png",
+		thumbnail: "img/Dirt_thumb.png",
+		color: "#906B4D"
+	},
+	{
+		name: "Master\nHand",
+		image: "img/MHand_full.png",
+		thumbnail: "img/MHand_thumb.png",
+		color: "#958C91"
+	},
+	{
+		name: "Crazy\nHand",
+		image: "img/CHand_full.png",
+		thumbnail: "img/CHand_thumb.png",
+		color: "#958C91"
+	},
+	{
+		name: "Shulk",
+		image: "img/Shulk_full.png",
+		thumbnail: "img/Shulk_thumb.png",
+		color: "#9D1A38"
+	},
+	{
+		name: "Pyra\n&\nMythra",
+		image: "img/PM_full.png",
+		thumbnail: "img/PM_thumb.png",
+		color: "#35E3CC"
+	},
+	{
+		name: "Captain\nFalcon",
+		image: "img/Falcon_full.png",
+		thumbnail: "img/Falcon_thumb.png",
+		color: "#4B4769"
+	},
+	{
+		name: "Tingle",
+		image: "img/Tingle_full.png",
+		thumbnail: "img/Tingle_thumb.png",
+		color: "#74CF4A"
+	},
+	{
+		name: "Bubsy",
+		image: "img/Bubsy_full.png",
+		thumbnail: "img/Bubsy_thumb.png",
+		color: "#B25D2F"
+	},
+	{
+		name: "Protoman",
+		image: "img/Protoman_full.png",
+		thumbnail: "img/Protoman_thumb.png",
+		color: "#E10112"
+	},
+	{
+		name: "Dr.\nWilly",
+		image: "img/Willy_full.png",
+		thumbnail: "img/Willy_thumb.png",
+		color: "#AFB6BF"
+	},
+	{
+		name: "Ms.\nPac-Man",
+		image: "img/FPacman_full.png",
+		thumbnail: "img/FPacman_thumb.png",
+		color: "#F7D200"
+	},
+	{
+		name: "Ganondorf",
+		image: "img/Ganondorf_full.png",
+		thumbnail: "img/Ganondorf_thumb.png",
+		color: "#BA5D41"
+	},
+	{
+		name: "Mudkip",
+		image: "img/Mudkip_full.png",
+		thumbnail: "img/Mudkip_thumb.png",
+		color: "#53ADD8"
+	},
+	{
+		name: "TwoB",
+		image: "img/2b_full.png",
+		thumbnail: "img/2b_thumb.png",
+		color: "#15141A"
+	},
+	{
+		name: "Master\nChief",
+		image: "img/Chief_full.png",
+		thumbnail: "img/Chief_thumb.png",
+		color: "#5B7258"
+	},
+	{
+		name: "Kratos",
+		image: "img/Kratos_full.png",
+		thumbnail: "img/Kratos_thumb.png",
+		color: "#985B58"
+	},
+	{
+		name: "Car",
+		image: "img/Car_full.png",
+		thumbnail: "img/Car_thumb.png",
+		color: "#BC340F"
+	},
+	{
+		name: "Sims\nCrystal",
+		image: "img/Sim_full.png",
+		thumbnail: "img/Sim_thumb.png",
+		color: "#6CAB4D"
+	},
+	{
+		name: "Yoda",
+		image: "img/Yoda_full.png",
+		thumbnail: "img/Yoda_thumb.png",
+		color: "#8C9253"
+	},
+	{
+		name: "Darth\nVader",
+		image: "img/Vader_full.png",
+		thumbnail: "img/Vader_thumb.png",
+		color: "#18191E"
+	},
+	{
+		name: "Worm",
+		image: "img/Worm_full.png",
+		thumbnail: "img/Worm_thumb.png",
+		color: "#F7886A"
+	},
+	{
+		name: "Ratalos",
+		image: "img/Ratalos_full.png",
+		thumbnail: "img/Ratalos_thumb.png",
+		color: "#71665A"
+	},
+	{
+		name: "Mai",
+		image: "img/Mai_full.png",
+		thumbnail: "img/Mai_thumb.png",
+		color: "#C44C41"
+	},
+	{
+		name: "Ezio",
+		image: "img/Ezio_full.png",
+		thumbnail: "img/Ezio_thumb.png",
+		color: "#72140F"
+	},
+	{
+		name: "Ori",
+		image: "img/Ori_full.png",
+		thumbnail: "img/Ori_thumb.png",
+		color: "#6599C0"
+	},
+	{
+		name: "Sans",
+		image: "img/Sans_full.png",
+		thumbnail: "img/Sans_thumb.png",
+		color: "#457DC4"
+	},
+	{
+		name: "The\nKnight",
+		image: "img/Hollow_full.png",
+		thumbnail: "img/Hollow_thumb.png",
+		color: "#112A35"
+	},
+	{
+		name: "Shovel\nKnight",
+		image: "img/Shovel_full.png",
+		thumbnail: "img/Shovel_thumb.png",
+		color: "#4EA4D9"
+	},
+	{
+		name: "Tetris\nL\nBlock",
+		image: "img/Tetris_full.png",
+		thumbnail: "img/Tetris_thumb.png",
+		color: "#E89B03"
+	},
+	{
+		name: "Goku",
+		image: "img/Goku_full.png",
+		thumbnail: "img/Goku_thumb.png",
+		color: "#F75802"
+	},
+	{
+		name: "Naruto",
+		image: "img/Naruto_full.png",
+		thumbnail: "img/Naruto_thumb.png",
+		color: "#E67F5F"
+	},
+	{
+		name: "Joycons",
+		image: "img/Joycon_full.png",
+		thumbnail: "img/Joycon_thumb.png",
+		color: "#6D727F"
+	},
+	{
+		name: "Wii\nSafety\nGuy",
+		image: "img/Safety_full.png",
+		thumbnail: "img/Safety_thumb.png",
+		color: "#2286F7"
+	},
+	{
+		name: "Wiimote",
+		image: "img/Wiimote_full.png",
+		thumbnail: "img/Wiimote_thumb.png",
+		color: "#716964"
+	},
+	{
+		name: "Math",
+		image: "img/Math_full.png",
+		thumbnail: "img/Math_thumb.png",
+		color: "#292D2D"
+	},
+	{
+		name: "The\nMoon",
+		image: "img/Moon_full.png",
+		thumbnail: "img/Moon_thumb.png",
+		color: "#434341"
+	},
+	{
+		name: "Ash",
+		image: "img/Ash_full.png",
+		thumbnail: "img/Ash_thumb.png",
+		color: "#43509C"
+	},
+];