Catch The Square
Posted: Thu Oct 02, 2014 5:52 pm
Weave: http://kodeweave.sourceforge.net/editor ... 9e581f2626
Here's a simple & basic game I made for my nephew.
Screenshot: The goal is simply just to catch the square. I did not incorporate a timer or anything like that. (We do that ourselves, makes it a little more fun)
I made this in just a few minutes last week and before I remove it completely I thought I'd release the source on here and see if any of you may want to mod it and use it for your own game.
Anyway here you go enjoy!
Requires JQuery and Normalize.
HTML:
Here's a simple & basic game I made for my nephew.
Screenshot: The goal is simply just to catch the square. I did not incorporate a timer or anything like that. (We do that ourselves, makes it a little more fun)
I made this in just a few minutes last week and before I remove it completely I thought I'd release the source on here and see if any of you may want to mod it and use it for your own game.
Anyway here you go enjoy!
Requires JQuery and Normalize.
HTML:
Code: Select all
CSS:
<div class="catch"></div>Code: Select all
JQuery:
body {
background: #000e28;
font: 600 23px courier;
color: #bcffc1;
padding: 0;
margin: 0;
}
.catch {
top: 0;
left: 1px;
padding: 1em;
}Code: Select all
var count = 0;
$(".catch").html("");
(function makeDiv(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div class="grab" />').css({
'width':divsize+'px',
'height':divsize+'px',
'background-color': color
});
var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();
$newdiv.css({
'position':'absolute',
'left':posx+'px',
'top':posy+'px',
'display':'none'
}).appendTo( 'body' ).fadeIn(100).delay(300).fadeOut(200, function(){
$(this).remove();
makeDiv();
$('.grab').bind("click", function() {
count++;
$('.catch').html(count);
});
});
})();