Почему эта игра в пабнубе идет слишком медленно и как ее решить? - PullRequest
4 голосов
/ 19 марта 2020

Это мой код:

<link rel="icon" type="image/png" href="https://i.ibb.co/sHNyD0b/tecnocomunist-star.png">
<script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.27.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.9.0/firebase.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-client_id" content="464161591015-669suu0sat7n9c1lq2g6b3mn174g5sej.apps.googleusercontent.com">
<div style="position: absolute; left: 0px; top: 0px"class="g-signin2" data-onsuccess="onSignIn"></div>
<script>
k=[]
obj={}
onkeydown=onkeyup=(e)=>{k[e.keyCode]=e.type=="keydown"}
onSignIn=(googleUser)=>{
 c=document.createElement("canvas")
 document.body.style.margin=0
 document.body.appendChild(c)
 ctx=c.getContext("2d")
 profile=googleUser.getBasicProfile()
 //console.log('ID: ' + profile.getId()) // Do not send to your backend! Use an ID token instead.
 //console.log('Name: ' + profile.getName())
 //console.log('Image URL: ' + profile.getImageUrl())
 //console.log('Email: ' + profile.getEmail()) // This is null if the 'email' scope is not present.
 ID=profile.getId()
 username=profile.getName()
 imgURL=profile.getImageUrl()
 x=innerWidth/2
 y=innerHeight/2
 render=()=>{
  requestAnimationFrame(render)
  c.width=innerWidth
  c.height=innerHeight
  //console.table(obj)
  pubnub.publish({
   channel:"hello_world",
   message:{ 
    content:ID,
    username:username,
    imgURL:imgURL,
    x:x,y:y
   }
  },(status, response)=>{
   console.log(status,response)
  })
  if(k[37]){x-=5}
  if(k[38]){y-=5}
  if(k[39]){x+=5}
  if(k[40]){y+=5}
  for(x2=Math.floor(x/32)*32-x;x2<innerWidth+64;x2+=32){
   for(y2=Math.floor(y/32)*32-y;y2<innerHeight+64;y2+=32){
    ctx.lineWidth=4
    ctx.strokeStyle="rgba(200,200,200,1)"
    ctx.strokeRect(x2,y2,32,32)
   }
  }
  for(i in obj){
   img=document.createElement("img")
   img.src=obj[i].imgURL
   ctx.drawImage(img,obj[i].x-x+innerWidth/2,obj[i].y-y+innerHeight/2,32,32)
   ctx.lineWidth=4
   ctx.strokeStyle="rgba(0,0,0,1)"
   ctx.strokeRect(obj[i].x-x+innerWidth/2,obj[i].y-y+innerHeight/2,32,32)
  }
 }
 connect=()=>{
  render()
 }
 pubnub = new PubNub({
  publishKey:'demo',
  subscribeKey:'demo',
  uuid:"myUniqueUUID"
 })
 pubnub.addListener({
  status:(statusEvent)=>{
   if(statusEvent.category==="PNConnectedCategory"){
    connect()
   }
  },
  message:(msg)=>{
   obj[msg.message.content]={username:msg.message.username,imgURL:msg.message.imgURL,x:msg.message.x,y:msg.message.y}
  },
  presence:(presenceEvent)=>{}
 })

 pubnub.subscribe({
  channels:['hello_world'] 
 })
}
</script>

Объяснение:

Мне нужна игра .io, такая как agar.io, так что это только начало. Я попытался создать игру типа agar.io с API проверки Google, добавив пользователю новые свойства X и Y, и наконец создал эту игру, но ... она отрисовывается слишком медленно. Только 1 кадр за 300 мс. Пинг высокий. Как я могу решить это?

...