Jump to content

kadi

Members
  • Posts

    17
  • Joined

  • Last visited

Everything posted by kadi

  1. Sorry, Its working fine now. thanks
  2. My Code Is about +1 score for every correct answer. Only a score of one is achieving for first question1 and when i type the correct answer for question2 score is not incrementing. My final score should be 2 since i have only two questions but whats happening in my code is that if i delete first answer 'yes' score is going to 4 and so on. Dont know where the error in my code is... <div id="score" style="font: bolder 20px courier">score: 0</div><input type="text" id="question" /><input type="text" id="question1" /> <script>var answers = { 'question': 'yes', 'question1': 'no', }; var score = 0; function checkResults() { var $this = $(this), val = $this.val().toLowerCase(); for (var k in answers) { if (answers.hasOwnProperty(k)) { if (k == $this.attr('id') && answers[k] === val) { $this.css('background-color', 'green'); score += 1; break; } else { $this.css('background-color', 'red'); } } } if (score == 2) { alert('Hi Ur Score is 2'); } $('#score').text('score: ' + score); } $('input').on('keyup', checkResults);</script>
  3. i am trying to move button like this in the link http://www.gamesforthebrain.com/game/twincol/ but i cant move it. here is what i have done. <div id="box" style='width:200px;height:200px;border:1px solid black;'/> <button id="one" type="button" >Button1</button> <button id="two" type="button" >Button2</button><button id="three" type="button">Button3</button> <style> button{-webkit-appearance:none;width:40px;height:40px;padding: 0;text-align: center;vertical-align: middle;border: 1px solid red;font-size:10px;font-weight:bold;} #one, #two, #three{position:relative; }#one{-webkit-animation:levelseven 16s infinite; -webkit-animation-direction:alternate; } #two{ animation-direction:alternate; /* Safari and Chrome */-webkit-animation:levelseven_1 8s infinite; } #three{ animation-direction:alternate; /* Safari and Chrome */-webkit-animation:levelseven_2 10s infinite; } @-webkit-keyframes levelseven /* Safari and Chrome */{0% { left:0px; top:0px;}25% { left:200px; top:0px;}50% { left:100px; top:200px;}75% { left:150px; top:50px;}100% {background:cyan; left:0px; top:0px;}} @-webkit-keyframes levelseven_1 /* Safari and Chrome */{0% { left:0px; top:0px;}50% {background:darkgoldenrod; left:0px; top:200px;}100% { left:0px; top:0px;} } @-webkit-keyframes levelseven_2 /* Safari and Chrome */{0% { left:0px; top:0px;}50% {left:200px; top:0px;}100% {left:0px; top:0px;}} </style>
  4. kadi

    Move like in the link

    i am trying to move button like this in the link http://www.gamesforthebrain.com/game/twincol/ but i cant move it. here is what i have done. <div id="box" style='width:200px;height:200px;border:1px solid black;'/> <button id="one" type="button" >Button1</button> <button id="two" type="button" >Button2</button><button id="three" type="button">Button3</button> <style> button{-webkit-appearance:none;width:40px;height:40px;padding: 0;text-align: center;vertical-align: middle;border: 1px solid red;font-size:10px;font-weight:bold;} #one, #two, #three{position:relative; }#one{-webkit-animation:levelseven 16s infinite; -webkit-animation-direction:alternate; } #two{ animation-direction:alternate; /* Safari and Chrome */-webkit-animation:levelseven_1 8s infinite; } #three{ animation-direction:alternate; /* Safari and Chrome */-webkit-animation:levelseven_2 10s infinite; } @-webkit-keyframes levelseven /* Safari and Chrome */{0% { left:0px; top:0px;}25% { left:200px; top:0px;}50% { left:100px; top:200px;}75% { left:150px; top:50px;}100% {background:cyan; left:0px; top:0px;}} @-webkit-keyframes levelseven_1 /* Safari and Chrome */{0% { left:0px; top:0px;}50% {background:darkgoldenrod; left:0px; top:200px;}100% { left:0px; top:0px;} } @-webkit-keyframes levelseven_2 /* Safari and Chrome */{0% { left:0px; top:0px;}50% {left:200px; top:0px;}100% {left:0px; top:0px;}} </style>
  5. No not like what u said. its just like a matching pair game i am designing. if two are identical then it should vanish. as from my code there are two button1 and button3 that are identical. so if i click button1 and button1, both should vanish since they are identical and same is the case with button3 as well. score increment of 1 is given for every succesful identical pair. hope u understood what i am trying to say. i can give more info if needed.
  6. I am trying to remove same button matching pairs using the code below but i am not not successful. As they are two button1 and button3 so if i click the matching pair button 1 and button 1 both should remove with score as 1. i.e., for every succesful pair score is incremented by 1. <div id="score">Score: 0</div><button id="one" type="button" data-index="0">Button1</button><button id="two" type="button" data-index="0">Button1</button><button id="three" type="button" data-index="1">Button3</button><button id="four" type="button" data-index="1">Button3</button> <script> var Score = 0; index = 0; $("#one, #two, #three, #four").click(function () { var dataIndex = $(this).data('index'); if (index == dataIndex) { Score++; $(this).hide(); if(dataIndex == 1) { index = 0; } else { index++; } } $("#score").html("Score: " + Score);});</script>
  7. so how can i assign a button to move red ball back and forth to avoid collision from blue ball. if collided then the blue ball should stop rotating. [CODE]<div class="circle"> <div class="ball_blue"></div> <div class="ball_red"></div></div>* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}@keyframes rot { from { transform: rotate(0deg) translate(-150px) rotate(0deg); } to { transform: rotate(360deg) translate(-150px) rotate(-360deg); }}.circle { border:1px solid grey; position: relative; width:300px; height:300px; margin:25px auto; border-radius:50%;}.ball_blue { width: 40px; height: 40px; position: absolute; top:50%; left:50%; margin-top: -20px; ; background:blue; border-radius:50%; font-size: 100px; animation: rot 3s infinite linear;}.ball_red { width: 20px; height: 20px; position: absolute; background:red; border-radius:50%; /* INITIALLY CENTERED */ top:50%; left:50%; margin-top: -10px; ; /* PUSH TO CIRCLE */ transform: translate(-150px); /* PUSH OUT OF CIRCLE */ ;}[/CODE]
  8. http://jsfiddle.net/mF7H5/ here is the fiddle on what i am trying to do. i want to make one ball on the circle that is constant in position i.e., not spinning. the main aim is to escape constant ball(by assigning a button to jump) from the main ball. if the main ball which is rotating from my fiddle touches any of the constant ball then it should end. one point for each ball escape. i cant position a constant ball on the circle. here is an example of what i like 2 do. http://www.lessmilk.com/9/
  9. i just used jquery replaceWith but its seems not working after score=3. the fiddle shows what is going on. please click in this order like button1, button3, button2 then the score increase by point 1 for each button but after score=3 i.e., after clicking all three buttons the score stops and does not respond. i even tried with other button ids but its not working.below is the replace id that i assigned and as the text of the button changes but not responding to score and click. http://jsfiddle.net/Bwdfw/110/ $("#three").click(function () {$("#three").replaceWith("<button id="three" type="button" data-index="0" >cat</button>"); });
  10. Hi, i got a button with a click doing some function. The click is working fine on web browser but when i tested on my ios touch device its working but with delay. how to avoid the click delay in touch enable browsers so that i can touch button continuosly without any delay ....i know the events like mouseup,down equivalent to touchstart,down,etc.. i need for click... $("#button").click(function() {)};
  11. kadi

    timer for game

    so can u please do a sample test case code. i'm testing on ios device. i'm using phonegap ...
  12. kadi

    timer for game

    i'm using the code below but its going below 0 when it is in use or running in background. Everything else is perfect. i am testing on an ios mobile device and when i minimise and then resume, the timer is still running in background. when it is not in use or minimised, the timer needs to stop and when resumed it needs to start again. most probably like a game timer should stop at 0.Hope someone can help me on this <span id="count" ></span><script type="text/javascript">/*<![CDATA[*/var zxcMatch={ Reset:function(id){ var o=this[id],z0=0; if (o){ clearTimeout(o.to); o.time[1]=null; for (;z0<o.imgs.length;z0++){ o.imgs[z0].style.visibility='visible'; } o.cnt=z0/2; o.lst=null; } }, init:function(o){ var id=o.ParentID,imgs=document.getElementById(id).getElementsByTagName('IMG'),z0=0; o.imgs=imgs; for (;z0<imgs.length;z0++){ this.addevt(imgs[z0],'mouseup','match',o,imgs[z0]); } o.time=[typeof(o.Timer)=='function'?o.Timer:null]; o.cnt=z0/2; this[id]=o; }, match:function(o,img){ if (o.time[0]&&!o.time[1]){ o.time[1]=new Date(); o.to=setInterval(function(){ o.time[0](o,Math.floor((new Date()-o.time[1])/1000)); },1000); } if (!o.lst){ o.lst=img; } else { if (o.lst.className==img.className&&o.lst!=img){ img.style.visibility=o.lst.style.visibility='hidden'; o.cnt--; if (o.cnt==0){ clearTimeout(o.to); o.time[1]=null; o.Complete(); } } else { alert('try again'); } o.lst=null; } }, addevt:function(o,t,f,p,p1){ var oop=this; o.addEventListener?o.addEventListener(t,function(e){ return oop[f](p,p1);},false).attachEvent?o.attachEvent('on'+t,function(e){ return oop[f](p,p1); }):null; }}zxcMatch.init({ ParentID:'match-holder', Timer:function(o,sec){ document.getElementById('count').innerHTML=30-sec; if (sec>29){ alert('Time Out'); zxcMatch.Reset('match-holder'); } }, Complete:function(){// window.top.location='http://www.vicsjavascripts.org.uk/'; }});/*]]>*/</script>
  13. how can i add a coundown timer of say 30 sec . since i am using a coundown timer which is not working as i require. i got two pages and when i run the code, the timer already started and running in background on page 1 and in page 2 there is no countdown timer showing. i dont know how to achieve my task of showing countdown timers like a game timer for my 2 pages...
  14. kadi

    Game timer

    how a game timer is designed for many levels with different times i.e., for Level1 10 sec, Level 2 20 sec, etc. i got a code but its not working for Levels individually as its overlapping and not working. script> var CCOUNT = 8; var t, count; function cddisplay() { // displays time in span document.getElementById('timespan').innerHTML = "Time Left:" + count; }; function countdown() { // starts countdown cddisplay(); if (count == 0) { alert('time is up'); location.reload(); } else { count--; t = setTimeout("countdown()", 1000); } }; function cdpause() { // pauses countdown clearTimeout(t); }; function cdreset() { // resets countdown cdpause(); count = CCOUNT; cddisplay(); }; </script> <body onload="cdreset()"><span id="timespan"></span><input type="button" value="Start" onclick="countdown()"><input type="button" value="Stop" onclick="cdpause()"><input type="button" value="Reset" onclick="cdreset()"></body>
  15. kadi

    match pictures

    hi, anyone can help me on how to match pictures using javascript bird-------------> seeds cat-------------> milk so if we consider above there are four images(bird, seeds, cat, milk, for sake of convenience i am just writing names as it wil b easy to understand what i am trying to say), As birds feed on seeds and cat on milk. we need to match those pictures in javascript like this if we click on bird and then on seeds it should say "correct match" and both images needs to vanish else "not correct match and try again" if we click on cat and then on milk it should say "correct match" and both images needs to vanish else "not correct match and try again" after all are matched correctly we need to redirect to homepage... any help regards
×
×
  • Create New...