Merge pull request #2372 from TheNikhilRaj/Truck-Game

ADDED TRUCK GAME
Sulagna-Dutta-Roy · Jul 13, 2024 · dbd1630 · dbd1630
2 parents 6842c4b + 3b540ce
commit dbd1630
Show file tree

Hide file tree

Showing 8 changed files with 621 additions and 0 deletions.
diff --git a/Truck Game/README.md 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.
diff --git a/Truck Game/css/main.css 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;
+}
diff --git a/Truck Game/index.html b/Truck Game/index.html
@@ -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>
diff --git a/Truck Game/js/ball.js 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();
+};