Убрать кнопку старт в html5-игре.

serke7771 · 21 августа 2020, 10:27:33

Что удалить в исходнике https://github.com/mohitgupta07/FLYINGBIRD файла index.html?

Открыть содержимое (спойлер)

<!DOCTYPE html>
<html lang="en">
<head>

   <meta charset="UTF-8" >
   <meta name="viewport" content=" initial-scale=0.610, maximum-scale=1.01, user-scalable=no">
<title>game</title>
</head>
<body style="background-color: lightgreen; position:fixed" onmousemove="mousemove(event)" >

<canvas id="canvas" height="500" width="500" style="border: 5px solid brown;">

</canvas>
<script src="virtualjoystick.js"></script>

<script>
joystick = new VirtualJoystick({
mouseSupport: false,
        stationaryBase: true,
baseX: 300,
baseY: 560,
        limitStickTravel: true,
        stickRadius: 70
});

function animate(){

requestAnimationFrame(animate);


   if( joystick.down() && myobject.y<myscreen.height-30 )

myobject.y++;
if( joystick.up() && myobject.y>10)

myobject.y--;
if( joystick.right() && myobject.x<myscreen.width-100 )
myobject.x++;

      if(( joystick.left()) && myobject.x>10)
myobject.x--;

}
function mousemove(event)
{
   if(event.pageX<myscreen.width-100 && event.pageX>10 && event.pageY<myscreen.height-30 && event.pageY>10)
{myobject.x=event.pageX;

myobject.y=event.pageY;
      }
   }

function upval(event) {
if( myobject.y<myscreen.Height-30 && myobject.y>10)
{
if(event.which==65 ||event.which==40)
myobject.y++;

if(event.which==68 || event.which==38)
myobject.y--;
}
if( myobject.x<myscreen.width-100 && myobject.x>10 )
{
if(event.which==39)
myobject.x++;

if( event.which==37)
myobject.x--;
}
}
var diesound,gamemusic;
var myobject,myobject2,myscreen,myobstacle=[],myscore,mybg;
var flag=0;
   function checkStart(){
myscreenLoading=new setattr(myscreen.width/2,myscreen.height/2,"black","30px","Consolas","text");

      var everythingLoaded = setInterval(function()
      {
myscreen.clearscreen();
if (/loaded|complete/.test(document.readyState)) {
clearInterval(everythingLoaded);

   startgame();
// this is the function that gets called when everything is loaded

}
else{
myscreenLoading.text="Game is Loading.PleaseWait";
myscreenLoading.updateobject();

}
}, 10);
}
function loadgame()
{
document.getElementById('loadID').style.visibility="hidden";

      mybg=new setattr(0,0,"Gameassets/Bg.png",500,500,"background");
myobject=new setattr(10,120,"Gameassets/fb(1).png",80,80,"gifimage");
myscore=new setattr(280,40,"black","30px","Consolas","text");
// myobject2=new setattr(50,120,"red",30,30);
diesound=new soundplay("smb_mariodie.wav","sound");
gamemusic=new soundplay("superdubstep.mp3","music");
checkStart();
}
   function startgame() {
// myobstacle[0]=new setattr(100,150,"green",10,120);

      if(flag==0)
      {


              animate();
gamemusic.play();
myscreen.run();
flag=1;
      }
      // setInterval(updatescreen,20);
}
function soundplay(src,type)
{
    this.sound=document.createElement("audio");
this.type=type;
this.sound.src=src;
this.sound.setAttribute("preload","auto");
if(this.type=="sound")
this.sound.setAttribute("controls","none");
else if(this.type=="music") {
this.sound.setAttribute("controls", "loop");
this.sound.loop=true;
}
this.sound.style.display="none";
document.body.appendChild(this.sound);
this.play=function () {
this.sound.play();
}
this.stop=function () {
this.sound.pause();
}

}
/* pausegame()
{
myscreen.stopgame();
ctx.save();
}
resumegame()
{
setInterval(updatescreen,20);
}*/
myscreen={
canvas:document.getElementById("canvas"),
ctx:this.canvas.getContext("2d"),
width:this.canvas.getAttribute("width"),
height:this.canvas.getAttribute("height"),
clearscreen:function()
{
this.ctx.clearRect(0,0,this.width,this.height);
},
run:function () {
this.canvas.style.cursor="none";
this.frameNo=0;
this.interval=setInterval(updatescreen,15);
window.addEventListener("keydown", function flagup(event)
{
myscreen.arr=(myscreen.arr || []);
myscreen.arr[event.keyCode]=true;
})
window.addEventListener("keyup",
function flagdown(event) {
myscreen.arr[event.keyCode]=false;
})
},
stopgame:function () {
clearInterval(this.interval);
}
};
function checkInterval(n) {
if((myscreen.frameNo/n)%1==0)
return true;
return false;
}
function setattr(x,y,color,width,height,type) {
   this.addY=0;
this.flagY=-1;
this.x=x;
this.type=type;
      this.controls=0;
      if( type=="gifimage")
      {
      this.gifimage=["Gameassets/fb(1).png","Gameassets/fb(2).png","Gameassets/fb(3).png","Gameassets/fb(4).png","Gameassets/fb(5).png","Gameassets/fb(6).png","Gameassets/fb(7).png","Gameassets/fb(

.png","Gameassets/fb(9).png","Gameassets/fb(10).png"];
      this.pos=0;
      this.controls=1;
this.image=new Image();
this.image.src=this.gifimage[this.pos];

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

      if(type!="background")
      this.controls=1;
this.y=y;
this.color=color;
this.width=width;
this.height=height;
this.updateobject=function () {
// var xx=window.event.which;
/* if(this.x>myscreen.width)
this.x=0;
else if(this.x<0)
this.x=myscreen.width;
*/
if(this.type=="text")
{
myscreen.ctx.font=this.width+" "+this.height;
myscreen.ctx.fillStyle=this.color;
myscreen.ctx.fillText(this.text,this.x,this.y);
}
         else if(this.type=="gifimage")
         {

this.image.src=this.gifimage[this.pos];
           myscreen.ctx.drawImage(this.image,this.x,this.y,this.width,this.height);
this.pos=(this.pos+1);
           if(this.pos==10)
           this.pos=0;
         }
else if(this.type=="image" || this.type=="background" )
{
myscreen.ctx.drawImage(this.image,this.x,this.y,this.width,this.height);
if(this.type=="background")
{
myscreen.ctx.drawImage(this.image,this.x+this.width,this.y,this.width,this.height);

}
}
else {
myscreen.ctx.fillStyle = this.color;

myscreen.ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.mymovement=function () {
if (this.type == "background") {
if (this.x == -this.width)
this.x = 0;
}
else if(this.controls==0) {
if (myscreen.arr && myscreen.arr[37])
this.x--;
if (myscreen.arr && myscreen.arr[39])
this.x++;

if (myscreen.arr && myscreen.arr[38])
this.y--;
if (myscreen.arr && myscreen.arr[40])
this.y++;
}
         else if(this.controls==1)
         {
      if( this.y<myscreen.height-30 )
            if (myscreen.arr && myscreen.arr[40])
this.y++;

      if( this.y>10)
if (myscreen.arr && myscreen.arr[38])
this.y--;
      if( this.x<myscreen.width-100 )
if (myscreen.arr && myscreen.arr[39])
this.x++;

      if( this.x>10)

           if (myscreen.arr && myscreen.arr[37])
this.x--;


         }
}
this.checkcrash=function (otherobs) {
var myleft=this.x;
var myright=this.x+this.width;
var mytop=this.y;
var mybottom=this.y+this.height;
var otherleft=otherobs.x;
var otherright=otherobs.x+otherobs.width;
var othertop=otherobs.y;
var otherbottom=othertop+otherobs.height;
var status=true;//if true thn it means its crashing :/

if((mytop>(otherbottom-25)) || (mybottom<othertop+40) || (myleft+15>otherright) || (myright-10<otherleft)) {
status = false;
} return status;
/*var crash = true;
if ((mybottom < othertop) ||
(mytop > otherbottom) ||
(myright < otherleft) ||
(myleft > otherright)) {
crash = false;
}
return crash;*/
}
}
var counter=0,flagger=0;
function updatescreen() {

myscreen.clearscreen();
for (var i = 0; i < myobstacle.length; i++)
if (myobject.checkcrash(myobstacle)) {
/*myobject.image.src="Gameassets/db.png";
            myobject.type="image";
            myscreen.ctx.drawImage(myobject.image,myobject.x,myobject.y,myobject.width,myobject.height);
*/
            //myobject.image.src="Gameassets/db.png";
            //myobject.updateobject();
gamemusic.stop();
diesound.play();
myscreen.stopgame();
myscore.updateobject();
return;

}
mybg.x--;
mybg.mymovement();
mybg.updateobject();

myscreen.frameNo++;
var inter;
      if(myscreen.frameNo<300)
      {

      myscreen.stopgame();
      myscreen.interval=setInterval(updatescreen,23);
      }
if(myscreen.frameNo>300 )
      {
      myscreen.stopgame();
      myscreen.interval=setInterval(updatescreen,20);
      flagger=1;
      }
      if(myscreen.frameNo<300)
inter=150;
if(myscreen.frameNo>300 && myscreen.frameNo<=600)
inter=120;
if(myscreen.frameNo>=800)
{ inter=100;

      myscreen.stopgame();
      myscreen.interval=setInterval(updatescreen,18);
         }
if(myscreen.frameNo>=1000)
{ inter=80;

      myscreen.stopgame();
      myscreen.interval=setInterval(updatescreen,15);
        }
if(myscreen.frameNo>=1360)
{inter=75;

      myscreen.stopgame();
      myscreen.interval=setInterval(updatescreen,14);
         }
if(myscreen.frameNo>=1800)
{inter=70;

      myscreen.stopgame();
      myscreen.interval=setInterval(updatescreen,13);
         }
var arr=["red","green","purple","lightbrown","yellow"];

if (myscreen.frameNo == 1 || checkInterval(inter) ) {
var x=myscreen.width;
var height=myscreen.height+100;
var gap=110+Math.round(Math.random()*70);
var h1=Math.round(Math.random()*300);
var h2=h1+gap;
myobstacle.push(new setattr(x, 0, arr[counter], 10, h1));
myobstacle.push(new setattr(x,h2,arr[(counter++)],10,height-h2));
counter=counter%5;
}

for (var i = 0; i < myobstacle.length; i++) {

myobstacle.x--;
         if(myobstacle.flagY==-1)
         myobstacle.addY--;
         else
         myobstacle.addY++;
         if(myobstacle.addY<=-50 || myobstacle.addY>=50)
myobstacle.flagY*=-1;
      myobstacle.y+=myobstacle.flagY;

myobstacle.updateobject();
// if(myobstacle.x<-50) isse karne se screen flicker hote hue dikhrha so remove it

// myobstacle.shift();
}

myscore.text="Score :: "+myscreen.frameNo*2;
myscore.updateobject();

myobject.mymovement();
myobject.updateobject();

}

</script>

<button onclick="loadgame()" id="loadID">StartGame</button>
<button onclick="window.open('index.html','_self')">Restart</button>
<p>Use up,down,left and right or use Mouse to move the Bird or use touchpad Enjoy</p>

<img src="Gameassets/fb(1).png" style="visibility:hidden" width=0 height=0>

<img src="Gameassets/fb(2).png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(3).png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(4).png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(5).png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(6).png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(7).png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(.png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(9).png" style="visibility:hidden" width=0 height=0>
<img src="Gameassets/fb(10).png" style="visibility:hidden" width=0 height=0>

</body>
</html>

[свернуть]

Чтобы не нажимать каждый раз старт.

serke7771 · 31 октября 2020, 14:50:21

Криво сделана кнопка "Restart" в javascript-игре, ссылка которой https://github.com/mohitgupta07/FLYINGBIRD/blob/master/index.html
Смотрите строку 423.
#еёфункцилнал - это кнопочка F5(обновить страницу).
Как исправить? Чтобы игру перезапускала.

Русскоязычное сообщество Debian GNU/Linux

Убрать кнопку старт в html5-игре.

serke7771

serke7771