-
Notifications
You must be signed in to change notification settings - Fork 177
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
f4453e9
commit 3b540ce
Showing
8 changed files
with
621 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
Truck Game | ||
========== | ||
|
||
http://dev.yilmazhuseyin.com/truck/ (Firefox only) | ||
|
||
This is a simple tool that can be use to teach children about colors as well as how to use mouse properly. | ||
|
||
It is written in ecmascript5. Because of some mozilla spesific api is used, It will only work in firefox for now. After the development process, I will add chrome support. Game is drawn using SVG. | ||
|
||
Tool is very easy to use. Where will be number of balls on the screen. When child chooses the right ball. ball will be fall into a truck and truck will be move out of screen. If child chooses a ball with wrong color. Truck will stay where it is and child will be able to try it again. There will also be a configuration link, from config menu you will be able to choose a spesific color to teach and number of balls that child will choose from. | ||
|
||
This tool is still in development. When I have a woking version I will put a link for it to use. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
div.main | ||
{ | ||
border-style:solid; | ||
border-width:2px; | ||
text-align:center; | ||
}; | ||
.right_align | ||
{ | ||
text-align:right; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,133 @@ | ||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | ||
<head> | ||
<script src="js/logger.js" type="text/javascript"></script> | ||
<script src="js/main.js" type="text/javascript"></script> | ||
<script src="js/ball.js" type="text/javascript"></script> | ||
<script src="js/truck.js" type="text/javascript"></script> | ||
<script type="text/javascript"> | ||
logger.enableLog = true; | ||
logger.showTiming = true; | ||
</script> | ||
|
||
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" rel="stylesheet" /> | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> | ||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> | ||
|
||
<style type="text/css" media="screen" src="css/main.css"> | ||
div.main | ||
{ | ||
border-style:solid; | ||
border-width:2px; | ||
text-align:center; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div class="main"> | ||
<svg | ||
xmlns:dc="http://purl.org/dc/elements/1.1/" | ||
xmlns:cc="http://creativecommons.org/ns#" | ||
xmlns:rdf="htntp://www.w3.org/1999/02/22-rdf-syntax-ns#" | ||
xmlns:svg="http://www.w3.org/2000/svg" | ||
xmlns="http://www.w3.org/2000/svg" | ||
version="1.1" | ||
width="1000" | ||
height="650" | ||
id="svgContainer"> | ||
<rect x="0" y="0" width="5000" height="5000" fill="gray"/> | ||
<text x="220" y="220" style="font-size:24px" id="svgText">Start game</text> | ||
<g | ||
transform="scale(0.8)" | ||
id="truck"> | ||
<path | ||
d="m 655.589,484.36218 -6.18561,-128.61524 -110.99241,-15.79583 -34.55321,-87.58893 -94.74579,0 3.03024,178.75619 -322.238663,2.0203 0.145305,51.22351 z" | ||
id="body" | ||
fill="#000000" | ||
stroke="#000000" | ||
stroke-width="1px" | ||
stroke-linecap="butt" | ||
stroke-linejoin="miter" | ||
stroke-opacity="1" /> | ||
<path | ||
d="m 419.16667,260.69552 1.66666,70 101.66667,0.83333 -27.5,-70 z" | ||
id="window" | ||
fill="#ffffff" | ||
stroke="#000000" | ||
stroke-width="1px" | ||
stroke-linecap="butt" | ||
stroke-linejoin="miter" | ||
stroke-opacity="1"> | ||
</path> | ||
<path | ||
d="m 502.41797,245.14397 -1.11648,-14.5143 -120.58031,0 -30.14508,58.05719 -312.615631,-3.34945 52.474766,136.21109 312.615625,-3.34945 -1.11648,-177.52102 z" | ||
id="trunk" | ||
fill="#803300" | ||
stroke="#000000" | ||
stroke-width="1px" | ||
stroke-linecap="butt" | ||
stroke-linejoin="miter" | ||
stroke-opacity="1"/> | ||
|
||
<circle | ||
cx="190" | ||
cy="500" | ||
r="65" | ||
fill="#333333" | ||
id="rear_wheel" | ||
stroke="#000000" | ||
stroke-width="1px" | ||
stroke-linecap="butt" | ||
stroke-linejoin="miter" | ||
stroke-opacity="1"/> | ||
|
||
<circle | ||
cx="550" | ||
cy="500" | ||
r="65" | ||
fill="#333333" | ||
id="front_wheel" | ||
stroke="#000000" | ||
stroke-width="1px" | ||
stroke-linecap="butt" | ||
stroke-linejoin="miter" | ||
stroke-opacity="1"/> | ||
|
||
<animateMotion | ||
id="truckAnimation" | ||
begin="indefinite" fill="freeze"/> | ||
|
||
</g> | ||
</svg> | ||
</div> | ||
<a href="#" id="configLink">setup</a> | ||
<div id="configDialog"> | ||
<table id="configTable"> | ||
<tr> | ||
<th>Color</th> | ||
<th>Count</th> | ||
</tr> | ||
<tr> | ||
<td><input type="radio" name="color" value="random" id="color_random"/><label for="color_random">Random</label></td> | ||
<td><input type="radio" name="count" value="random" id="count_random"/><label for="count_random">Random</label></td> | ||
|
||
</tr> | ||
<tr> | ||
<td><input type="radio" name="color" value="red" id="color_red"/><label for="color_red">Red</label></td> | ||
<td><input type="radio" name="count" value="1" id="count1"/><label for="count1">1</label></td> | ||
</tr> | ||
<tr> | ||
<td><input type="radio" name="color" value="green" id="color_green"/><label for="color_green">Green</label></td> | ||
<td><input type="radio" name="count" value="2" id="count2"/><label for="count2">2</label></td> | ||
</tr> | ||
<tr> | ||
<td><input type="radio" name="color" value="blue" id="color_blue"/><label for="color_blue">Blue</label></td> | ||
<td><input type="radio" name="count" value="3" id="count3"/><label for="count3">3</label></td> | ||
</tr> | ||
<tr> | ||
<td><input type="radio" name="color" value="yellow" id="color_yellow"/><label for="color_yellow">Yellow</label></td> | ||
<td><input type="radio" name="count" value="4" id="count4"/><label for="count4">4</label></td> | ||
</tr> | ||
</table> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,176 @@ | ||
"strict mode"; | ||
game.createBall = (function(){ | ||
//creates a circle and animations elements | ||
var createCircle = function(x,y,color){ | ||
logger.startLog('createCircle'); | ||
logger.log('cx',x); | ||
logger.log('cy',y); | ||
logger.log('color',color); | ||
|
||
logger.endLog(); | ||
return { | ||
'circle':circle, | ||
'xanimation':xanimation, | ||
'yanimation':yanimation | ||
}; | ||
}; | ||
|
||
|
||
|
||
var ballProto={ | ||
move:function(x,y,duration){ | ||
logger.startLog('ballProto.move'); | ||
var xanimation = this.animations.xanimation, | ||
yanimation = this.animations.yanimation; | ||
if(typeof duration === 'undefined'){ | ||
xanimation.removeAttributeNS(null,'to'); | ||
xanimation.removeAttributeNS(null,'dur'); | ||
yanimation.removeAttributeNS(null,'to'); | ||
yanimation.removeAttributeNS(null,'dur'); | ||
this.DOM.setAttributeNS(null,'cx',x); | ||
this.DOM.setAttributeNS(null,'cy',y); | ||
logger.log('ball moved to ' + x +','+y); | ||
}else{ | ||
xanimation.setAttributeNS(null,'to',x); | ||
xanimation.setAttributeNS(null,'dur',duration); | ||
yanimation.setAttributeNS(null,'to',y); | ||
yanimation.setAttributeNS(null,'dur',duration); | ||
xanimation.beginElement(); | ||
yanimation.beginElement(); | ||
logger.log('start animation with ' + x +','+y+' in ' + duration); | ||
}; | ||
this.x = x; | ||
this.y = y; | ||
logger.endLog(); | ||
}, | ||
setVisible:function(isVisible){ | ||
logger.startLog('ballProto.setVisible'); | ||
logger.log('isVisible',isVisible); | ||
this.isVisible = isVisible; | ||
this.DOM.setAttributeNS(null,'opacity',isVisible?'1':'0'); | ||
logger.endLog(); | ||
}, | ||
addClickHandler:function(){ | ||
this.DOM.addEventListener('click',this.clickHandler,false); | ||
}, | ||
removeClickHandler:function(){ | ||
this.DOM.removeEventListener('click',this.clickHandler,false); | ||
}, | ||
defaultBallLocation:{x:440,y:485} | ||
}; | ||
|
||
return function(x,y,color){ | ||
var circle = document.createElementNS(this.svgns,'circle'); | ||
circle.setAttributeNS(null,'cx',x); | ||
circle.setAttributeNS(null,'cy',y); | ||
circle.setAttributeNS(null,'r',50); | ||
circle.setAttributeNS(null,'fill',color); | ||
circle.setAttributeNS(null,'stroke','black'); | ||
circle.setAttributeNS(null,'stroke-with','1px'); | ||
circle.setAttributeNS(null,'stroke-linecap','butt'); | ||
circle.setAttributeNS(null,'stroke-linejoint','miter'); | ||
circle.setAttributeNS(null,'stroke-opacity','1'); | ||
circle.setAttributeNS(null,'opacity','1'); | ||
|
||
//animation for x | ||
var xanimation = document.createElementNS(this.svgns,'animate'); | ||
xanimation.setAttributeNS(null,'attributeType','XML'); | ||
xanimation.setAttributeNS(null,'attributeName','cx'); | ||
xanimation.setAttributeNS(null,'to',x); | ||
xanimation.setAttributeNS(null, 'begin', 'indefinite'); | ||
xanimation.setAttributeNS(null,'dur','1s'); | ||
xanimation.setAttributeNS(null,'fill','freeze'); | ||
|
||
// animation for y | ||
var yanimation = document.createElementNS(this.svgns,'animate'); | ||
yanimation.setAttributeNS(null,'attributeType','XML'); | ||
yanimation.setAttributeNS(null,'attributeName','cy'); | ||
yanimation.setAttributeNS(null,'to',y); | ||
yanimation.setAttributeNS(null, 'begin', 'indefinite'); | ||
yanimation.setAttributeNS(null,'dur','1s'); | ||
yanimation.setAttributeNS(null,'fill','freeze'); | ||
circle.appendChild(xanimation); | ||
circle.appendChild(yanimation); | ||
|
||
var ball = Object.create( | ||
ballProto, | ||
{ | ||
DOM:{value:circle}, | ||
animations:{value:{xanimation:xanimation,yanimation:yanimation}}, | ||
x:{value:x}, | ||
y:{value:y}, | ||
isVisible:{value:true}, | ||
color:{value:color} | ||
} | ||
); | ||
var game = this; | ||
//add endEvent to Y animation | ||
yanimation.addEventListener('endEvent',function(){game.ballClicked(this);}.bind(ball),false); | ||
|
||
return ball; | ||
}; | ||
|
||
}()); | ||
|
||
game.initBalls = function(colors){ | ||
logger.startLog('game.initBalls'); | ||
var balls = []; | ||
colors.forEach(function(item){ | ||
//create a new Ball | ||
var ball = this.createBall(-100,-100,item), | ||
game = this; | ||
balls.push(ball); | ||
this.svg.insertBefore(ball.DOM,this.truck.DOM); | ||
|
||
ball.clickHandler = function(){ | ||
this.removeClickHandler(); | ||
this.move(440,485,'1s'); | ||
game.removeAllEvents(); | ||
}.bind(ball); | ||
}.bind(this)); | ||
|
||
logger.endLog(); | ||
return balls; | ||
}; | ||
|
||
game.startBalls = function(){ | ||
logger.startLog('startBalls'); | ||
var balls = this.instance.currentBalls, | ||
length = balls.length; | ||
|
||
if(length.isEven()){ | ||
var startPoint = this.ballMiddle-(this.balldifference/2)-((length/2)-1)*this.balldifference; | ||
}else{ | ||
var startPoint = this.ballMiddle - Math.floor(length/2)*this.balldifference; | ||
} | ||
|
||
logger.log('startPoint',startPoint); | ||
balls.forEach(function(item,index){ | ||
logger.log(index); | ||
item.move(startPoint+index*this.balldifference,70); | ||
item.addClickHandler(); | ||
}.bind(this)); | ||
|
||
logger.endLog(); | ||
}; | ||
|
||
game.ballClicked = function(ball){ | ||
ball.setVisible(false); | ||
if(ball.color === this.instance.color){ | ||
this.setMiddleText(this.rightBallMessage); | ||
this.finalBall = ball; | ||
this.truck.moveToEnd(); | ||
setTimeout('game.restartGame()',2000); | ||
}else{ | ||
this.setMiddleText(this.wrongBallMessage); | ||
setTimeout('game.askQuestion()',2000); | ||
this.startBalls(); | ||
} | ||
}; | ||
|
||
game.restartGame = function(){ | ||
var ball = this.finalBall; | ||
this.finalBall = undefined; | ||
ball.setVisible(true); | ||
this.startGame(); | ||
}; |
Oops, something went wrong.