☰

Moo ICT – Project Based Tutorials

Make a Character Selection Project using HTML CSS and JavaScript

Hi, in this tutorial we will make a character selection tutorial using HTML CSS and JavaScript. In this tutorial we will cover some of the fun elements of using HTML and CSS. We will be doing an infinite animation using a seamless background image back of the DIV’s used in HTML. Each of the characters displayed on the screen will have a animated RGB slow breathing animation in the background to make it more interactive. There are 4 buttons in this tutorial and each of them will load up a different character. The purpose of this tutorial is to give you an insight into how to change values of images and headers using JavaScript and create something fun and quick using JavaScript. You can add more characters, back stories and their controls for your favorite game, this tutorial should give you a good starting point on creating one on your own.

C# Flappy Bird Game Course

  • Create a Fully Customised Flappy Bird Game
  • Fully commented source code
  • Step by Step Full Instructions
  • Build the EXE file
  • Join the Course Now

Lesson Objectives –

  1. Make a character selection screen using HTML CSS and JavaScript
  2. use CSS to animate background of the DIVs used in the project
  3. Use CSS to create a RGB breathing animation on the characters loaded on screen
  4. Create glossy style buttons per character
  5. Add a JavaScript function to change character and their name on the screen
  6. Use SWITCH statement in JavaScript to change characters based on the argument passed in the function.

Video Tutorial

Download the images used in this tutorial here

Source Code

<html>
    <head>
        <title>Character Selection MOO ICT</title>

<style>

#container, #info {
  width: 700px;
  height: 600px;
  margin: 10px auto;
  background-color: red;
  background: url("images/background.jpg");
  background-size: 150px 150px;
  animation: scroll 5s linear infinite;
  border: 10px solid orange;
  border-radius: 20px;
  text-align: center;
}

#info
{
    height: 100px;
}

@keyframes scroll
{
    to {
        background-position: -150px -150px;
    }
}

#image
{
    height: 88%;
    width: 100%;
    overflow: hidden;
    position: relative;
}

img
{
    margin-top: 10px;
    height: auto;
    max-width: 650px;
    animation: gloweffect 2s infinite;
}
@keyframes gloweffect
{
    0%, 100% {filter: drop-shadow(0 0 0.35rem rgb(0, 174, 255));}
    25% {filter: drop-shadow(0 0 0.65rem rgb(0, 255, 4));}
    50% {filter: drop-shadow(0 0 0.85rem rgb(255, 0, 0));}
}

#name
{
    position: absolute;
    z-index: 99999;
    font-size: 60pt;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    filter: drop-shadow(0 0 0.90rem rgb(0, 0, 0));
    left: 25%;
    bottom: 0%;
    color: white;
    font-weight:bold;
    -webkit-text-stroke: 3px black;
}

button{
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    color: #fff;
    font-size: 25px;
    font-family: sans-serif;
    font-weight: bold;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    border-radius: 10px;
}
button:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
    border-radius: 10px;
}

button:hover{
    color: black;
    font-size: 28px;
}

#jin
{
    background-image: linear-gradient(blue,skyblue);
}

#paul
{
    background-image: linear-gradient(red,salmon);
}


#hwoarang
{
    background-image: linear-gradient(rgb(255, 145, 0),rgb(235, 232, 135));
}


#bryan
{
    background-image: linear-gradient(rgb(195, 0, 255),rgb(230, 135, 235));
}



</style>
    </head>

    <body>
        
        <div id="container">

            <div id="image">
                <h1 id="name">Jin Kazama</h1>
                <img id="img" src="images/jin.png" alt="">
            </div>

            <div id="controls">
                <button id="jin" onclick="ChangeCharacter('jin')">Jin</button>
                <button id="paul" onclick="ChangeCharacter('paul')">Paul</button>
                <button id="hwoarang" onclick="ChangeCharacter('hwoarang')">Hwoarang</button>
                <button id="bryan" onclick="ChangeCharacter('bryan')">Bryan</button>
            </div>

        </div>

        <div id="info">
            <h2>Character Selection Tutorial by MOO ICT</h2>
            <p>Select a character by using the buttons above</p>
        </div>


    </body>

    <script>

function ChangeCharacter(character)
{

switch(character)
{
    case "bryan":
        document.getElementById("img").src = "images/bryan.png";
        document.getElementById("name").innerHTML = "Bryan Fury";
        break;
    case "jin":
        document.getElementById("img").src = "images/jin.png";
        document.getElementById("name").innerHTML = "Jin Kazama";
        break;
    case "paul":
        document.getElementById("img").src = "images/paul.png";
        document.getElementById("name").innerHTML = "Paul Pheonix";
        break;
    case "hwoarang":
        document.getElementById("img").src = "images/hwoarang.png";
        document.getElementById("name").innerHTML = "Hwoarang";
        break;
}


}



    </script>

</html>

 

Tags:



Comment on this tutorial and let us know how you got on -