jQuery – A simple game with JQuery events

Posted on October 1, 2015 by

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

<html>

<head>

<title>Color Game</title>

<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>

$(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>

</body>

</html>

Also in GitHub

Enjoy it or try to make it smaller! 😉

Tagged with: bootstrap jQuery, jQuery, jQuery events, mouseover

jQuery – A simple game with JQuery events

Related posts: