jQuery – A simple game with JQuery events

Working with JQuery becomes interesting, after you get some ideas what to do and you see how easy it is to build it. Although the code below can be made about 8 times less, I have really enjoyed copying and pasting to build a simple game for it.

Thus, imagine that you have to learn the colors in a new language – e.g. in Bulgarian 🙂

These are quite important to learn, thus an app for them would be quite useful. At least, if you are a person, who is interested in apps. 🙂 So, let’s start from the beginning. What do we have in the code?

8 squares, which change their color onhover, with the assistance from CSS;
The same produce result in the rectangular below, if they are clicked or rolled over.
The rectangular is also a link to my site.
That is all. With a little bootstrap, to make it a little more beautiful 🙂

Here comes the code:

<html>
<meta charset="UTF-8" />
<head>
<title>Color Game</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
    div {
        class="container-fluid";
    }
    
    div#div1{
    position:absolute;
    top:30px; left:30px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#div2{
    position:absolute;
    top:30px; left:70px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#div3{
    position:absolute;
    top:30px; left:110px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#div4{
    position:absolute;
    top:30px; left:150px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#div5{
    position:absolute;
    top:30px; left:190px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#div6{
    position:absolute;
    top:30px; left:230px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#div7{
    position:absolute;
    top:30px; left:270px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#div8{
    position:absolute;
    top:30px; left:310px;
    height: 30px; width:30px;
    border:1px solid #aaa;
    background-color:#bbb;
    cursor:pointer;	
    }
    
    div#result{
    position:absolute;
    top:80px; left:30px;
    height: 50px; width:310px;
    border:1px solid #aaa;
    background-color:#bab;
    }
 
    div#div1:hover { 
    background-color:#37a;
    }
    div#div2:hover { 
    background-color:#111;
    }
    div#div3:hover { 
    background-color:#f9a;
    }
    div#div4:hover { 
    background-color:#1ba;
    }
    div#div5:hover { 
    background-color:#c2a;
    }
    div#div6:hover { 
    background-color:#ac2;
    }
    div#div7:hover { 
    background-color:#ff2;
    }
    div#div8:hover { 
    background-color:#ca2;
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
 $("div#div1").mouseover(function() {
    $("div#result").html("Аз съм <kbd>син</kbd> цвят!");
 });
  $("div#div2").click(function () {
    $("div#result").html("Аз съм <kbd>черен</kbd> цвят!");
 });
  $("div#div3").mouseover(function () {
    $("div#result").html("Аз съм <kbd>розов</kbd> цвят!");
 });
  $("div#div4").click(function () {
    $("div#result").html("Аз съм <kbd>зелен</kbd> цвят!");
 });
  $("div#div5").mouseover(function () {
    $("div#result").html("Аз съм <kbd>лилав</kbd> цвят!");
 });
  $("div#div6").click(function () {
    $("div#result").html("Аз съм <kbd>тревно зелен</kbd> цвят!");
 });
  $("div#div7").mouseover(function () {
    $("div#result").html("Аз съм <kbd>жълт</kbd> цвят!");
 });
  $("div#div8").click(function () {
    $("div#result").html("Аз съм <kbd>кафяв</kbd> цвят!");
 });
 $("div#result").mouseover(function () {
    $("div#result").html("Powered by <kbd>vitoshacademy.com</kbd></br>Click to visit!");
 });
 $("div#result").click(function () {
    location.href = 'https://www.vitoshacademy.com';
 });
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8"></div>
<div class="container-fluid" id="result"></div>
</body>
</html>

Also in GitHub

Enjoy it or try to make it smaller! 😉

Related posts: