diff --git a/Truck Game/README.md b/Truck Game/README.md new file mode 100644 index 00000000..f9f59b9e --- /dev/null +++ b/Truck Game/README.md @@ -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. \ No newline at end of file diff --git a/Truck Game/css/main.css b/Truck Game/css/main.css new file mode 100644 index 00000000..bf598f03 --- /dev/null +++ b/Truck Game/css/main.css @@ -0,0 +1,10 @@ +div.main +{ + border-style:solid; + border-width:2px; + text-align:center; +}; +.right_align +{ + text-align:right; +} \ No newline at end of file diff --git a/Truck Game/index.html b/Truck Game/index.html new file mode 100644 index 00000000..77f8ef52 --- /dev/null +++ b/Truck Game/index.html @@ -0,0 +1,133 @@ + + + + + + + + + + + + + + + +
+ + + Start game + + + + + + + + + + + + + + +
+setup +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
ColorCount
+
+ + diff --git a/Truck Game/js/ball.js b/Truck Game/js/ball.js new file mode 100644 index 00000000..e516ef91 --- /dev/null +++ b/Truck Game/js/ball.js @@ -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(); +}; diff --git a/Truck Game/js/logger.js b/Truck Game/js/logger.js new file mode 100644 index 00000000..d6c71ee4 --- /dev/null +++ b/Truck Game/js/logger.js @@ -0,0 +1,76 @@ +var logger = function(){ + var loggedFunctionArray = []; + var loggerObj = { + enableLog:false, + showTiming :false, + log: function(){ + var prefix = ""; + for (var i = 1; i < loggedFunctionArray.length; i++) + prefix += "\t"; + var args = [prefix + loggedFunctionArray[loggedFunctionArray.length - 1] + " : "]; + Array.prototype.push.apply(args,arguments); + console.log.apply(console,args); + },//log + warn: function(){ + var prefix = ""; + for (var i = 1; i < loggedFunctionArray.length; i++) + prefix += "\t"; + var args = [prefix + loggedFunctionArray[loggedFunctionArray.length - 1] + " : "]; + Array.prototype.push.apply(args,arguments); + console.warn.apply(console,args); + },//warn + error: function(){ + var prefix = ""; + for (var i = 1; i < loggedFunctionArray.length; i++) + prefix += "\t"; + var args = [prefix + loggedFunctionArray[loggedFunctionArray.length - 1] + " : "]; + Array.prototype.push.apply(args,arguments); + console.warn.apply(console,args); + },//error + trace: function(){ + console.trace(); + },//trace + dir: function(obj){ + console.dir(obj); + },//dir + assert:function(){ + console.assert.apply(console,arguments); + },//assert + count:function(){ + console.count.apply(console,arguments); + },//assert + + profile:function(){ + console.profile.apply(console,arguments); + },//profile + profileEnd:function(){ + console.profileEnd(); + },//profileEnd + startLog: function(functionName){ + loggedFunctionArray.push(functionName); + console.group(functionName); + this.log("Start"); + if(this.showTiming === true && console.time) + console.time(functionName); + },//startLog + endLog: function(){ + this.log("End"); + if(this.showTiming === true && console.time) + console.timeEnd(loggedFunctionArray.pop()); + else + loggedFunctionArray.pop(); + console.groupEnd(); + }//endLog + };//loggerObj + //add a switch to all logger functions. + for(attr in loggerObj) + if(loggerObj.hasOwnProperty(attr) && typeof loggerObj[attr] == 'function'){ + loggerObj[attr] = function(func){ + return function(){ + if (this.enableLog === true && window.console != undefined) + func.apply(this,arguments); + }; + }(loggerObj[attr]); + }; + return loggerObj; +}(); \ No newline at end of file diff --git a/Truck Game/js/main.js b/Truck Game/js/main.js new file mode 100644 index 00000000..af40b3ba --- /dev/null +++ b/Truck Game/js/main.js @@ -0,0 +1,141 @@ + "strict mode"; +// check if a number is even +Number.prototype.isEven=function(){ + return this%2===0; +}; + +Array.prototype.contains = function(item){ + return this.some(function(i){return i === item;}); +}; + +Array.prototype.shuffle = function(){ + for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x); + return this; +}; + +window.game = { + svgns : "http://www.w3.org/2000/svg", + ballMiddle : 375, + balldifference : 150, + balls:[], + + colors:['red','green','blue','yellow'], + questions:{'red':'Which one is red?', + 'green':'Which one is green?', + 'blue':'Which one is blue?', + 'yellow':'Which one is yellow?'}, + wrongBallMessage:'You chose the wrong ball, try again.', + rightBallMessage:'You chose the right ball, well done!', + + applyConfig:function(color,count){ + this.currentColor = color; + this.ballCount=count; + this.startGame(); + }, + initConfig:function(element){ + var that = this;//for dialog onClick event + this.configDialog = $(element).dialog({ autoOpen: false, + title: 'Game Configuration', + buttons:{save:function(){ + var color =$('input[name=color]:checked:radio').val(); + var count =$('input[name=count]:checked:radio').val(); + that.applyConfig(color,count); + game.configDialog.dialog('close');}}, + closeOnEscape:true, + modal:true + }); + }, + openConfig:function(){ + $('#color_'+this.currentColor).attr('checked','checked'); + $('#count'+this.ballCount).attr('checked','checked'); + game.configDialog.dialog('open'); + }, + init:function(svg,dialog,configLink,middleText){ + this.svg = svg; + this.initConfig(dialog); + this.initTruck(); + this.middleText = middleText; + this.applyConfig('random',"4"); + this.initBalls(this.colors); + // Add config link event. + $(configLink).click(function(){this.openConfig();}.bind(this)); + }, + startGame:function(){ + logger.startLog('game.startGame'); + //clear old game data + this.clearGame(); + // Initialize current variables + var colors = this.colors; + var currentColor = this.currentColor; + var ballCount = this.ballCount; + if(ballCount === "random"){ + ballCount = Math.floor(Math.random()*4)+1; + }else{ + ballCount = parseInt(ballCount); + } + var currentColors = []; + //if currentColor is not random, add chosen color to list + if(currentColor!== 'random'){ + logger.log('Color is preset. ' + currentColor + ' was added to array.'); + currentColors.push(currentColor); + } + //fill rest of the ball list with random colors + while(currentColors.length"], + "js": [ + "js/logger.js", + "js/main.js", + "js/ball.js", + "js/truck.js" + ], + "css": ["css/main.css"] + } + ], + "web_accessible_resources": [ + "http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js", + "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js", + "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/black-tie/jquery-ui.css" + ] + } + \ No newline at end of file