2016-05-21 4 views
2

Вот моя игра https://play.google.com/store/apps/details?id=com.apurv_studio.appMy Javascript построен игра лагов touchevents (Cordova)

Я проверил это приложение на KitKat, леденец и Зефир. Игра отстает от сенсорных событий в Lollipop и Marshmallow, но отлично работает в KitKat. Я обнаружил, что звук отлично работает в Lollipop и Marshmallow, но не работает в KitKat.

По лагом я имею в виду, что он останавливается примерно на полсекунды. Я искал эту проблему. Я обнаружил, что в браузерах есть задержка в 300 мс. Поэтому я использовал Fast-Click.js ... но проблема все еще сохраняется.

var app = { 
 
    // Application Constructor 
 
    initialize: function() { 
 
     this.bindEvents(); 
 
    }, 
 
    // Bind Event Listeners 
 
    // 
 
    // Bind any events that are required on startup. Common events are: 
 
    // 'load', 'deviceready', 'offline', and 'online'. 
 
    bindEvents: function() { 
 
     document.addEventListener('deviceready', this.onDeviceReady, false); 
 
    }, 
 
    // deviceready Event Handler 
 
    // 
 
    // The scope of 'this' is the event. In order to call the 'receivedEvent' 
 
    // function, we must explicitly call 'app.receivedEvent(...);' 
 
    onDeviceReady: function() { 
 
     app.receivedEvent('deviceready'); 
 
    }, 
 
    // Update DOM on a Received Event 
 
    receivedEvent: function(id) { 
 
     var parentElement = document.getElementById(id); 
 
     var listeningElement = parentElement.querySelector('.listening'); 
 
     var receivedElement = parentElement.querySelector('.received'); 
 

 
     listeningElement.setAttribute('style', 'display:none;'); 
 
     receivedElement.setAttribute('style', 'display:block;'); 
 

 
     console.log('Received Event: ' + id); 
 
    } 
 
}; 
 

 
app.initialize(); 
 

 

 

 

 
/* MY CODE HERE */var stp=0;var gameover,playagain,taptoplay; 
 
localStorage.highscore=0; 
 

 

 
var level=-1.5; 
 

 

 
var myGamePiece; 
 
var myObstacle=[]; 
 
var myBackground; 
 
var myScore; 
 
var score=0; 
 
var scoreUpdater=[]; 
 
var myLevel; 
 
var rocket=[]; 
 

 
var X=$(window).width(); 
 
var Y=$(window).height(); 
 

 

 
var myGameArea={    // Its the game area consistin of a canvas element and start function..... 
 
    canvas: document.createElement("canvas"), 
 

 
    start: function(){ 
 
     this.canvas.width=$(window).width();//100%;//window.innerwidth; 
 
     this.canvas.height=$(window).height();//100%;//window.innerheight; 
 
     this.context=this.canvas.getContext("2d"); 
 

 
     document.body.insertBefore(this.canvas,document.body.childNodes[0]);  // ????????????????????????????? 
 

 
     this.frameno=0; 
 

 
     this.interval=setInterval(updateGameArea,20); 
 

 

 
    }, 
 

 
    clear: function(){ 
 
     this.context.clearRect(0,0,this.canvas.width,this.canvas.height); 
 
    }, 
 
    stop: function(){ 
 
     clearInterval(this.interval); 
 

 

 
    } 
 
} 
 

 
function calx(a){ 
 
    return (a*360)/480; 
 
} 
 

 
function caly(b){ 
 
    return (b*600)/270; 
 
} 
 
// Play audio 
 
// 
 
function playAudio(url) { 
 
    // Play the audio file at url 
 
    var my_media = new Media(url, 
 
     // success callback 
 
     function() { 
 
      console.log("playAudio():Audio Success"); 
 
     }, 
 
     // error callback 
 
     function (err) { 
 
      console.log("playAudio():Audio Error: " + err); 
 
     } 
 
    ); 
 
    // Play audio 
 
    my_media.play(); 
 
} 
 

 
function startGame(){ 
 
    myGamePiece = new component(193*0.25,161*0.25,"img/superman.png",10,120,"imagec"); /*67*1.6*/ /*14*1.6*/ // width,height,color,position.....super3.png...50/20 
 
    myBackground = new component(1500,800,"img/backspace.png",0,0,"background"); 
 
    myScore = new component("30px","Consolas","purple",5,25,"text"); //X-170,25 
 
    myLevel = new component("30px","Consolas","purple",X-140,25,"text"); 
 
    mySound = new sound("sounds/burst.mp3"); 
 
    mysnd = new sound("sounds/score.wav"); 
 
    //var media = new Media("sounds/burst.mp3", onSuccess, onError);// [mediaStatus]); 
 

 
    //scoreUpdater[0] = new component(62.7*0.8,36.8*0.8,"img/scoreupdater.png",90,153,"image"); 
 
    //rocket[0] = new component(52,76,"img/rocket.png",50,50,"image"); 
 

 
    //myObstacle[0] = new component(10,400,"red",calx(300),caly(120),"n"); 
 
    myGameArea.start(); // adds canvas element and inserts it as first childnode of <body> element..... 
 
} 
 

 

 

 

 
function component(width,height,color,x,y,type) 
 
{ 
 
    this.type=type; 
 

 
    if(type=="image" || type=="background" || type=="imagec") 
 
    { 
 
     this.image = new Image(); 
 
     this.image.src=color; 
 
    } 
 

 
    this.width=width; 
 
    this.height=height; 
 
    this.x=x; 
 
    this.y=y; 
 
    this.speedY=0; 
 
    this.speedX=0; 
 
    
 
    this.update=function() 
 
    { 
 
     ctx=myGameArea.context; 
 
     
 
     if(this.type=="text") 
 
     { 
 
     ctx.font=this.width+" "+this.height; 
 
     ctx.fillStyle=color; 
 
     ctx.fillText(this.text,this.x,this.y); 
 
     } 
 
    
 

 
     if(this.type=="image" || this.type=="background" || this.type=="imagec") 
 
     { 
 
      /* if(this.image.src=="img/rocket.png")    //????????????????????????????????????????????????? 
 
      { 
 
       this.image.src="img/rocketflip.png"; 
 
      }*/ 
 

 
      
 

 
      ctx.drawImage(this.image,this.x,this.y,this.width,this.height); 
 
      if(this.type=="background") 
 
      { //ctx.scale(-1,1); 
 
      ctx.drawImage(this.image,this.x+this.width,this.y,this.width,this.height); 
 
       // ctx.scale(-1,1); 
 
      } 
 
     } 
 
     else 
 
     { ctx.fillStyle=color; 
 
      ctx.fillRect(this.x,this.y,this.width,this.height); 
 
     } 
 
    } 
 

 
    this.newPos=function() 
 
    { 
 
     if(this.type=="imagec")// && this.image.src=="super3.png") 
 
     { 
 
      if(this.x<0 || this.y<0 || this.x>X-this.width || this.y>Y-this.height) 
 
      { 
 
       if(this.x<0) 
 
        this.x=this.x+1; 
 
       else if(this.y<0) 
 
        this.y=this.y+1; 
 
       else if(this.x>X-this.width) 
 
        this.x-=1; 
 
       else 
 
        this.y-=1; 
 
       return; 
 
      } 
 
     } 
 
     this.x+=this.speedX; 
 
     this.y+=this.speedY; 
 

 

 

 
     if(this.type=="background") 
 
     { 
 
      if(this.x==-(this.width)) 
 
      { 
 
       this.x=0; 
 

 

 
      } 
 
     } 
 

 

 
    } 
 

 
    this.crashwith=function(otherobj) 
 
    { 
 
     var crash=true; 
 
     if((this.x+this.width<otherobj.x)||(this.y+this.height<otherobj.y)||(this.x>otherobj.x+otherobj.width)||(this.y>otherobj.y+otherobj.height)) 
 
      crash=false; 
 
     return crash; 
 
    } 
 
    
 
} 
 

 
function everyinterval(n){ 
 
    if((myGameArea.frameno/n)%1==0) return true; 
 
    return false; 
 
} 
 

 

 

 
function updateGameArea() 
 
{ var minheight,maxheight,gap,height,mingap,maxgap; 
 

 
    /* for(k=0;k<scoreUpdater.length;k++) 
 
    { 
 
     if(myGamePiece.crashwith(scoreUpdater[k])) 
 
     { 
 
      score+=5; 
 
      scoreUpdater.pop(); 
 

 
      if(score%10==0) 
 
      { 
 
       level-=0.5;      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
 
      
 
      } 
 
     } 
 
     
 
    }*/ 
 

 

 

 
    if(scoreUpdater.length!=0 && myGamePiece.crashwith(scoreUpdater[scoreUpdater.length-1])) 
 
     { 
 
      //playAudio("sounds/score.wav"); 
 
      mysnd.play();   
 
      score+=5; 
 
      scoreUpdater.pop(); 
 
      if(score!=0 && score%20==0) 
 
      { 
 
       level-=0.5;      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
 
      
 
      } 
 
      
 
     } 
 

 

 
    if(rocket.length!=0) 
 
    { 
 
    var f=rocket.length-1; 
 
    if(myGamePiece.crashwith(rocket[f])) 
 
    { 
 

 
     if(rocket[f].width!=74.5){ 
 
      score+=5; 
 
      mySound.play(); 
 
      //media.play(); 
 
      //playAudio("sounds/burst.mp3"); 
 
      if(score!=0 && score%20==0) 
 
      { 
 
       level-=0.5;      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
 
      
 
      } 
 
     } 
 
     rocket[f].width=74.5;//298*0.25; 
 
      rocket[f].height=71.25;//285*0.25; 
 
      rocket[f].y-=0; 
 
      rocket[f].image.src="img/splash_sh.png"; 
 

 

 
    } 
 
    } 
 

 
    
 

 
    /* for(i=0;i<myObstacle.length;i++) 
 
    { 
 
     if(myGamePiece.crashwith(myObstacle[i])) 
 
     { document.getElementById("a").style.visibility='hidden'; 
 

 
      document.getElementById("b").style.visibility='hidden'; 
 
      document.getElementById("c").style.visibility='hidden'; 
 
      document.getElementById("d").style.visibility='hidden'; 
 
      document.getElementById("swipe").style.visibility='hidden'; 
 

 

 
      stp=1; 
 
      gameover = new component(320*0.9,343*0.9,"img/gover.png",(X-320*0.9)/2,20,"image"); //10,40 2x+wid=X 
 
      gameover.update(); 
 
      playagain = new component(51.2*2,51.2*2,"img/play.png",(X-51.2*2)/2,Y-51.2*2-30,"image"); //118,453 2x+wid=X 
 
      playagain.update(); 
 
      taptoplay = new component("30px","Consolas","purple",(X-170)/2,Y-10,"text"); // 88,577 
 
      taptoplay.text="Play again"; 
 
      taptoplay.update(); 
 
      exit = new component(51.2*1.3,51.2*1.3,"img/exit.png",X-51.2*1.3-20,70*Y/100,"image"); //268,423 
 
      exit.update(); 
 

 
      menupic = new component(51.2*1.3,51.2*1.3,"img/menu.png",20,70*Y/100,"image"); //12,423 
 
      menupic.update(); 
 
      menu = new component("30px","Consolas","purple",20,85*Y/100,"text"); //12,517 
 
      menu.text="Menu"; 
 
      menu.update(); 
 

 

 
      
 

 

 
      // myGameArea.stop(); 
 

 
      // gameover.update(); 
 
      /* var canv=document.createElement("canvas"); 
 
      var cont=canv.getContext("2d"); 
 
      canv.width=320; 
 
      canv.height=343; 
 
      var img = new Image(); 
 
      cont.img.src="img/gover.png"; 
 
      cont.drawImage(cont.img,0,0,320,343);*/ 
 
      /*return; 
 
     } 
 
    }*/ 
 

 
    if(myObstacle.length!=0 && (myGamePiece.crashwith(myObstacle[myObstacle.length-1]) || myGamePiece.crashwith(myObstacle[myObstacle.length-2]))) 
 
     { document.getElementById("a").style.visibility='hidden'; 
 

 
      document.getElementById("b").style.visibility='hidden'; 
 
      document.getElementById("c").style.visibility='hidden'; 
 
      document.getElementById("d").style.visibility='hidden'; 
 
      document.getElementById("swipe").style.visibility='hidden'; 
 

 

 
      stp=1; 
 
      gameover = new component(320*0.9,343*0.9,"img/gover.png",(X-320*0.9)/2,20,"image"); //10,40 2x+wid=X 
 
      gameover.update(); 
 
      playagain = new component(51.2*2,51.2*2,"img/play.png",(X-51.2*2)/2,Y-51.2*2-30,"image"); //118,453 2x+wid=X 
 
      playagain.update(); 
 
      taptoplay = new component("30px","Consolas","purple",(X-170)/2,Y-10,"text"); // 88,577 
 
      taptoplay.text="Play again"; 
 
      taptoplay.update(); 
 
      exit = new component(51.2*1.3,51.2*1.3,"img/exit.png",X-51.2*1.3-20,70*Y/100,"image"); //268,423 
 
      exit.update(); 
 

 
      menupic = new component(51.2*1.3,51.2*1.3,"img/menu.png",20,70*Y/100,"image"); //12,423 
 
      menupic.update(); 
 
      menu = new component("30px","Consolas","purple",20,85*Y/100,"text"); //12,517 
 
      menu.text="Menu"; 
 
      menu.update(); 
 
      return; 
 
     } 
 

 
    myGameArea.clear(); 
 

 
    myBackground.speedX=-0.5; 
 
    myBackground.newPos(); 
 
    myBackground.update(); 
 
    
 
    myGameArea.frameno+=1; 
 

 
    if(myGameArea.frameno==1 || myObstacle[myObstacle.length-1].x<-10)//everyinterval(150)) //150 
 
    { 
 
    \t var clrs=['red','blue','yellow','green','pink','orange']; 
 

 
    \t var n = ["AliceBlue","AntiqueWhite","Aqua","Aquamarine","Azure","Beige","Bisque","BlanchedAlmond","Blue","BlueViolet","Brown","BurlyWood","CadetBlue","Chartreuse","Chocolate","Coral","CornflowerBlue","Cornsilk","Crimson","Cyan","DarkBlue","DarkCyan","DarkGoldenRod","DarkGray","DarkGrey","DarkGreen","DarkKhaki","DarkMagenta","DarkOliveGreen","Darkorange","DarkOrchid","DarkRed","DarkSalmon","DarkSeaGreen","DarkSlateBlue","DarkSlateGray","DarkSlateGrey","DarkTurquoise","DarkViolet","DeepPink","DeepSkyBlue","DimGray","DimGrey","DodgerBlue","FireBrick","FloralWhite","ForestGreen","Fuchsia","Gainsboro","GhostWhite","Gold","GoldenRod","Gray","Grey","Green","GreenYellow","HoneyDew","HotPink","IndianRed","Indigo","Ivory","Khaki","Lavender","LavenderBlush","LawnGreen","LemonChiffon","LightBlue","LightCoral","LightCyan","LightGoldenRodYellow","LightGray","LightGrey","LightGreen","LightPink","LightSalmon","LightSeaGreen","LightSkyBlue","LightSlateGray","LightSlateGrey","LightSteelBlue","LightYellow","Lime","LimeGreen","Linen","Magenta","Maroon","MediumAquaMarine","MediumBlue","MediumOrchid","MediumPurple","MediumSeaGreen","MediumSlateBlue","MediumSpringGreen","MediumTurquoise","MediumVioletRed","MidnightBlue","MintCream","MistyRose","Moccasin","NavajoWhite","Navy","OldLace","Olive","OliveDrab","Orange","OrangeRed","Orchid","PaleGoldenRod","PaleGreen","PaleTurquoise","PaleVioletRed","PapayaWhip","PeachPuff","Peru","Pink","Plum","PowderBlue","Purple","Red","RosyBrown","RoyalBlue","SaddleBrown","Salmon","SandyBrown","SeaGreen","SeaShell","Sienna","Silver","SkyBlue","SlateBlue","SlateGray","SlateGrey","Snow","SpringGreen","SteelBlue","Tan","Teal","Thistle","Tomato","Turquoise","Violet","Wheat","White","WhiteSmoke","Yellow","YellowGreen"]; 
 

 

 

 
     x=myGameArea.canvas.width; 
 
     y=myGameArea.canvas.height; 
 
     minheight=70;maxheight=400; 
 
     height=Math.floor(Math.random()*(maxheight-minheight+1)+minheight);   /* +1 is added to acheive max height in case of max. output from random() 
 
                         +minheight is added to acheive minheight in case of min. output i.e. 0 from random() */ 
 
     mingap=80;maxgap=200; 
 
     gap=Math.floor(Math.random()*(maxgap-mingap+1)+mingap); 
 
     myObstacle.push(new component(10,height,n[Math.floor(Math.random()*n.length)],x,0)); 
 
     myObstacle.push(new component(10,y-height-gap,n[Math.floor(Math.random()*n.length)],x,height+gap)); //320 
 

 
     scoreUpdater.push(new component(62.7*0.8,36.8*0.8,"img/scoreupdater.png",225,Math.floor(Math.random()*Y/2) + Y/4+1,"image"));//cla..300....cal...200 
 
     //rposy=[0,616-76]; 
 
     //rocket.push(new component(52,76,"img/rocket.png",360/2+52/2,rposy[Math.floor(Math.random()*rposy.length)],"image")); 
 
     if(myGameArea.frameno==1) 
 
     {rocket.push(new component(76,52,"img/rocket_01.png",X-20,Math.floor(Math.random()*(Y-2*52) + 52),"image"));} 
 
     else 
 
     { 
 

 
      rocket.push(new component(76,52,"img/rocket_h.png",X-40,Math.floor(Math.random()*(Y-2*52) + 52),"image")); // X/2+52/2,0 
 
     } 
 
     
 
     //rocket.push(new component(52,76,"img/rocket.png",myObstacle[myObstacle.length-2].x-(myObstacle[myObstacle.length-4].x+10)-52/2,76,"image")); 
 
    } 
 
    /*if(everyinterval(200)) 
 
    { 
 
      
 
    }*/ 
 

 
    /*for(i=0;i<myObstacle.length;i++) 
 
    { 
 
     myObstacle[i].x+=level;     // LEVEL !!!! !!!! !!!! !!!! !!!! !!!! 
 
     myObstacle[i].update(); 
 
    }*/ 
 

 
    myObstacle[myObstacle.length-1].x+=level;     // LEVEL !!!! !!!! !!!! !!!! !!!! !!!! 
 
    myObstacle[myObstacle.length-1].update(); 
 
    myObstacle[myObstacle.length-2].x+=level;     // LEVEL !!!! !!!! !!!! !!!! !!!! !!!! 
 
    myObstacle[myObstacle.length-2].update(); 
 
    
 
    /*for(i=0;i<scoreUpdater.length;i++) 
 
    { 
 
     scoreUpdater[i].x+=level; 
 
     scoreUpdater[i].update(); 
 
    }*/ 
 
    if(scoreUpdater.length!=0){ 
 
    scoreUpdater[scoreUpdater.length-1].x+=level; 
 
    scoreUpdater[scoreUpdater.length-1].update();} 
 

 

 
    
 

 
    rocket[rocket.length-1].x-=-level+1;//2.4; 
 
    rocket[rocket.length-1].update(); 
 

 

 
    myScore.text="Score:"+score; 
 
    myLevel.text="Level:"+((-1.5-level)/0.5+1);     // -1-0.5x=level.......where x+1 is actual level......x+1=(1-level)/0.2+1 
 
    myScore.update(); 
 
    myLevel.update(); 
 

 
    myGamePiece.newPos(); 
 
    myGamePiece.update(); 
 

 
    
 

 
    
 
     
 
} 
 

 

 

 

 
function sound(src) { 
 
    this.sound = document.createElement("audio"); 
 
    this.sound.src = src; 
 
    this.sound.setAttribute("preload", "auto"); 
 
    this.sound.setAttribute("controls", "none"); 
 
    this.sound.style.display = "none"; 
 
    document.body.appendChild(this.sound); 
 
    this.play = function(){ 
 
     this.sound.play(); 
 
    } 
 
    this.stop = function(){ 
 
     this.sound.pause(); 
 
    }  
 
} 
 

 
function place_in_gap(){ 
 
    //if(!stop){ 
 
     var y=(myObstacle[myObstacle.length-2].y+myObstacle[myObstacle.length-2].height-myObstacle[myObstacle.length-1].y)/-2+(myObstacle[myObstacle.length-2].height)-myGamePiece.height/2; 
 
           //myGamePiece.x=x; 
 
           myGamePiece.y=y; 
 
              //document.getElementById("p").innerHTML=y; 
 

 
           myGamePiece.update(); 
 
    //} 
 
} 
 

 

 
function hitRocket(event) 
 
{ 
 
    var x=event.clientX; 
 
    var y=event.clientY; 
 
    //document.getElementById("p").innerHTML="called!!!..."+x+" "+y; 
 
    var i = rocket.length-1; 
 
    
 
     if(!(x<rocket[i].x || x>rocket[i].x+rocket[i].width || y<rocket[i].y || y>rocket[i].y+rocket[i].height) && rocket[i].width!=74.5) 
 
     { 
 
      score+=5; 
 
      if(score!=0 && score%20==0) 
 
      { 
 
       level-=0.5;      // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 
 
      
 
      } 
 
      rocket[i].width=74.5;//298*0.25; 
 
      rocket[i].height=71.25;//285*0.25; 
 
      rocket[i].y-=5; 
 
      rocket[i].image.src="img/splash_sh.png"; 
 
      mySound.play(); 
 
      //media.play(); 
 
      //playAudio("sounds/burst.mp3"); 
 
      //document.getElementById("p").innerHTML="hit"; 
 
      // $(rocket[i]).animate({top:'600px'}); 
 
     } 
 

 
     if(stp) 
 
     { 
 
     \t if(!(x<playagain.x || x>playagain.x+playagain.width || y<playagain.y || y>playagain.y+playagain.height)) 
 
      location.reload(); 
 

 
      if(!(x<exit.x || x>exit.x+exit.width || y<exit.y || y>exit.y+exit.height)) 
 
\t \t \t { 
 
\t \t \t \t //if(score>localStorage.highscore || 1)localStorage.highscore=score; 
 
\t \t \t \t navigator.app.exitApp(); 
 
\t \t \t }  
 

 
\t \t \t if(!(x<menupic.x || x>menupic.x+menupic.width || y<menupic.y || y>menupic.y+menupic.height)) 
 
\t \t \t { 
 
\t \t \t \t window.location.assign("index.html"); 
 
\t \t \t }  
 
\t \t } 
 

 
    
 
};
@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { 
 
    .app { 
 
     background-position:left center; 
 
     padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ 
 
     margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ 
 
             /* offset horizontal: half of image width and text area width */ 
 
    } 
 
} 
 

 
h1 { 
 
    font-size:24px; 
 
    font-weight:normal; 
 
    margin:0px; 
 
    overflow:visible; 
 
    padding:0px; 
 
    text-align:center; 
 
} 
 

 
.event { 
 
    border-radius:4px; 
 
    -webkit-border-radius:4px; 
 
    color:#FFFFFF; 
 
    font-size:12px; 
 
    margin:0px 30px; 
 
    padding:2px 0px; 
 
} 
 

 
.event.listening { 
 
    background-color:#333333; 
 
    display:block; 
 
} 
 

 
.event.received { 
 
    background-color:#4B946A; 
 
    display:none; 
 
} 
 

 
@keyframes fade { 
 
    from { opacity: 1.0; } 
 
    50% { opacity: 0.4; } 
 
    to { opacity: 1.0; } 
 
} 
 
    
 
@-webkit-keyframes fade { 
 
    from { opacity: 1.0; } 
 
    50% { opacity: 0.4; } 
 
    to { opacity: 1.0; } 
 
} 
 
    
 
.blink { 
 
    animation:fade 3000ms infinite; 
 
    -webkit-animation:fade 3000ms infinite; 
 
} 
 

 

 

 

 

 

 

 

 

 
canvas{ 
 
     margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
    display: block; 
 
} 
 

 
body{ 
 
    margin-right: 0px; 
 
    margin-bottom: 0px; 
 
    margin-left: 0px; 
 
    margin-top: 0px; 
 
} 
 

 
.left{ 
 
    position: absolute; 
 
    /*left: 50px; 
 
    top: 525px;*/ 
 
    left: 12%; 
 
    top: 78.5%; 
 
    padding: 28px; 
 
    border-radius: 20px; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    background-color: red; 
 
    opacity: 0.3; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    outline:none; 
 
} 
 
.up{ 
 
    position: absolute; 
 
    /*left: 150px; 
 
    top: 465px;*/ 
 
    left: 42%; 
 
    top: 70%; 
 
    padding: 28px; 
 
    border-radius: 20px; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    background-color: red; 
 
    opacity: 0.3; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    outline:none; 
 
} 
 
.right{ 
 
    position: absolute; 
 
    /*left: 250px; 
 
    top: 525px;*/ 
 
    right: 12%; 
 
    top: 78.5%; 
 
    padding: 28px; 
 
    border-radius: 20px; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    background-color: red; 
 
    opacity: 0.3; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    outline:none; 
 
} 
 
.down{ 
 
    position: absolute; 
 
    /*left: 150px; 
 
    top: 552px; /*575*/ 
 
    left: 42%; 
 
    top: 87%; 
 
    padding: 28px; 
 
    border-radius: 20px; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    background-color: red; 
 
    opacity: 0.3; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    outline:none; 
 
} 
 

 
@-webkit-keyframes move{ 
 
    from{opacity: 1;} 
 
    to{opacity:0;} 
 
} 
 
@keyframes move{ 
 
    from{opacity: 1;} 
 
    to{opacity:0;} 
 
} 
 

 
#swipe{ 
 
    /*position: absolute; 
 
    left: 280px; 
 
    top: 200px; /*575*/ 
 

 
    position:absolute; 
 
    /*left: 80%;*/ 
 
    right: 5%; 
 
    top: 30%; 
 
    padding-left: 28px; 
 
    padding-right: 28px; 
 
    padding-top: 100px; 
 
    padding-bottom: 100px; 
 
    border-radius: 20px; 
 
    border-color: blue; 
 
    border-style: solid; 
 
    background-color: red; 
 
    opacity: 0.3; 
 

 

 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
     
 
       <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *"> 
 

 
     <meta name="format-detection" content="telephone=no"> 
 
     <meta name="msapplication-tap-highlight" content="no"> 
 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"> 
 
     <link rel="stylesheet" type="text/css" href="css/index.css"> 
 
     <script type="text/javascript"> 
 
      document.addEventListener("deviceready", onDeviceReady, false); 
 
function onDeviceReady() { 
 
    console.log(Media); 
 
} 
 
     </script> 
 
     <script type="text/javascript" src="js/fastclick.js"></script> 
 
     <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> 
 
          <!--<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>--> 
 
          <script type="text/javascript"> 
 
           $(function() { 
 
    FastClick.attach(document.body); 
 
}); 
 

 
      function moveUp(){ 
 
    myGamePiece.speedY=-4; 
 
} 
 

 
function moveLeft(){ 
 
    myGamePiece.speedX=-4; 
 
} 
 

 
function moveRight(){ 
 
    myGamePiece.speedX=4; 
 
} 
 

 
function moveDown(){ 
 
    myGamePiece.speedY=4; 
 
} 
 

 
function stop(){ 
 
    myGamePiece.speedX=0; 
 
    myGamePiece.speedY=0; 
 
} 
 
          </script> 
 
     <title>Hello World</title> 
 
    </head> 
 
    <body onload="startGame()" onclick="hitRocket(event)"> 
 

 

 
        <script type="text/javascript"> 
 
         /* $("#a").live('click', function(e) { 
 
          e.preventDefault() 
 
          return false 
 
         }) 
 
         $("#b").live('click', function(e) { 
 
          e.preventDefault() 
 
          return false 
 
         }) 
 
         $("#c").live('click', function(e) { 
 
          e.preventDefault() 
 
          return false 
 
         }) 
 
         $("#d").live('click', function(e) { 
 
          e.preventDefault() 
 
          return false 
 
         })*/ 
 

 
         /*$("#a").off('click'); 
 
         $("#b").off('click'); 
 
         $("#c").off('click'); 
 
         $("#d").off('click'); 
 
         $("#swipe").off('click');*/ 
 
        </script> 
 
    \t 
 

 

 

 
        <div id="swipe" ontouchmove="place_in_gap()"></div> 
 
    
 
    <!--<button ontouchstart="moveUp()" onmousedown="moveUp()" onmouseup="stop()" ontouchend="stop()" id="a" class="up"></button>--> 
 
    <button ontouchstart="moveUp()" ontouchend="stop()" ontouchmove="stop()" id="a" class="up"></button> 
 

 
    <!--<button ontouchstart="moveLeft()" onmousedown="moveLeft()" onmouseup="stop()" ontouchend="stop()" id="b" class="left"></button>--> 
 
    <button ontouchstart="moveLeft()" ontouchend="stop()" ontouchmove="stop()" id="b" class="left"></button> 
 
    \t 
 
    <!--<button ontouchstart="moveRight()" onmousedown="moveRight()" onmouseup="stop()" ontouchend="stop()" id="c" class="right"></button>--> 
 
    <button ontouchstart="moveRight()" ontouchend="stop()" ontouchmove="stop()" id="c" class="right"></button> 
 

 
    <!--<button ontouchstart="moveDown()" onmousedown="moveDown()" onmouseup="stop()" ontouchend="stop()" id="d" class="down"></button>--> 
 
    <button ontouchstart="moveDown()" ontouchend="stop()" ontouchmove="stop()" id="d" class="down"></button> 
 

 
<script type="text/javascript" src="cordova.js"></script> 
 
        <script type="text/javascript" src="js/index.js"></script> 
 

 

 
<div id="p"></div> 
 
    </body> 
 
</html>

+0

Пожалуйста, поставите в свой вопрос следующие данные: - Происходит ли только замедление в Lollipop? - Что происходит в игре, когда вы испытываете проблемы с задержкой и звуком? - Что вы пытались решить эту проблему? – jeteon

+0

ОК, я буду pu эти детали! – Apurv

+0

Вы пытались связать событие касания с e.prevent по умолчанию и вместо этого вызвать клик? Это может быть трюк. – Medda86

ответ

0

Вы можете попробовать что-то вроде этого:

var touchmove = false; 
$(window).on("touchmove",function(){ 
    touchmove = true; 
}); 

$(window).on("touchend",function(e){ 
    if (!touchmove){ 
     e.preventDefault(); 
     e.stopPropagation(); 
     e.target.click(); 
    } 
     else{ 
      touchmove = false; 
     } 
}); 

Но вы должны уйти только делая интерактивные объекты как ссылки в приложении, те должны вызывать щелчки непосредственно в все окружения afaik.

+0

нормально, я попробую это ...... но, пожалуйста, объясните, что предотвращает дефолт и stopPropogation? – Apurv

+1

@Apurv Запрет по умолчанию заключается в том, что при щелчке по объекту, например, если это будет ссылка, это не приведет к открытию href в браузере, поскольку это поведение по умолчанию. В мобильном телефоне у вас есть touchstart - touchmove-touchhend - щелчок и предотвращение по умолчанию убивает вызов от пузыря вниз до события щелчка в этом случае. Остановите распространение, я думаю, что если вы нажмете ссылку в кликабельном родителе, она не должна пузыриться вверх или вниз, чтобы вызвать два события. Google, я не совсем уверен в этом. – Medda86