Benötigen Sie Hilfe Bild in Indienststellung Javascript Schlange

Question

im neu Schreiben von Skripts, in Herstellung Informatik-Projekt, und ich brauche Hilfe Bild in den Hintergrund dieses mit Putting:

<canvas id="gc" width="2137" height="2137"></canvas> 

<script> 
window.onload=function() { 
    canv=document.getElementById("gc"); 
    ctx=canv.getContext("2d"); 
    document.addEventListener("keydown",keyPush); 
    setInterval(game,1000/15); 
} 
px=py=5; 
gs=tc=47; 
ax=ay=25; 
xv=yv=0; 
trail=[]; 
tail = 5; 
function game() { 
    px+=xv; 
    py+=yv; 
    if(px<0) { 
     px= tc-1; 
    } 
    if(px>tc-1) { 
     px= 0; 
    } 
    if(py<0) { 
     py= tc-1; 
    } 
    if(py>tc-1) { 
     py= 0; 
    } 
    ctx.fillStyle="black"; 
    ctx.fillRect(0,0,canv.width,canv.height); 

    ctx.fillStyle="lime"; 
    for(var i=0;i<trail.length;i++) { 
     ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2); 
     if(trail[i].x==px && trail[i].y==py) { 
      tail = 5; 
     } 
    } 
    trail.push({x:px,y:py}); 
    while(trail.length>tail) { 
    trail.shift(); 
    } 

    if(ax==px && ay==py) { 
     tail++; 
     ax=Math.floor(Math.random()*tc); 
     ay=Math.floor(Math.random()*tc); 
    } 
    ctx.fillStyle="red"; 
    ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2); 
} 
function keyPush(evt) { 
    switch(evt.keyCode) { 
     case 37: 
      xv=-1;yv=0; 
      break; 
     case 38: 
      xv=0;yv=-1; 
      break; 
     case 39: 
      xv=1;yv=0; 
      break; 
     case 40: 
      xv=0;yv=1; 
      break; 
    } 
} 
</script> 

dies ist der Hintergrund und das einzige, was Ich kann damit umgehen, Farben ändern.

ctx.fillStyle="black"; 
    ctx.fillRect(0,0,canv.width,canv.height); 

Ich habe versucht, alles zu verwenden, aber nichts hat funktioniert.

Answer 1

Wenn Sie Bild in Leinwand Spiel müssen setzen, setzen vorbelasteten Bildelement in jeder Schleife, innerhalb von/nach Hintergrund Clearing:

var img; 
 
window.onload=function() { 
 
    canv=document.getElementById("gc"); 
 
    ctx=canv.getContext("2d"); 
 
    document.addEventListener("keydown",keyPush); 
 
    
 
    img = new Image(); 
 
    img.onload = function(){ 
 
    
 
    
 
    setInterval(game,1000/15); 
 
    }; 
 
    img.src = 'http://loremflickr.com/g/2137/2137/cat'; 
 
    
 
    
 
} 
 
px=py=5; 
 
gs=tc=47; 
 
ax=ay=25; 
 
xv=yv=0; 
 
trail=[]; 
 
tail = 5; 
 
function game() { 
 
    px+=xv; 
 
    py+=yv; 
 
    if(px<0) { 
 
     px= tc-1; 
 
    } 
 
    if(px>tc-1) { 
 
     px= 0; 
 
    } 
 
    if(py<0) { 
 
     py= tc-1; 
 
    } 
 
    if(py>tc-1) { 
 
     py= 0; 
 
    } 
 
    ctx.fillStyle="black"; 
 
    ctx.fillRect(0,0,canv.width,canv.height); 
 
    ctx.drawImage(img,0,0,canv.width,canv.height); 
 

 
    ctx.fillStyle="lime"; 
 
    for(var i=0;i<trail.length;i++) { 
 
     ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2); 
 
     if(trail[i].x==px && trail[i].y==py) { 
 
      tail = 5; 
 
     } 
 
    } 
 
    trail.push({x:px,y:py}); 
 
    while(trail.length>tail) { 
 
    trail.shift(); 
 
    } 
 

 
    if(ax==px && ay==py) { 
 
     tail++; 
 
     ax=Math.floor(Math.random()*tc); 
 
     ay=Math.floor(Math.random()*tc); 
 
    } 
 
    ctx.fillStyle="red"; 
 
    ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2); 
 
} 
 
function keyPush(evt) { 
 
    switch(evt.keyCode) { 
 
     case 37: 
 
      xv=-1;yv=0; 
 
      break; 
 
     case 38: 
 
      xv=0;yv=-1; 
 
      break; 
 
     case 39: 
 
      xv=1;yv=0; 
 
      break; 
 
     case 40: 
 
      xv=0;yv=1; 
 
      break; 
 
    } 
 
}

<canvas id="gc" width="2137" height="2137"></canvas>

Answer 2

Warum legen Sie nicht einfach Hintergrundbild mit css auf die Leinwand? Hier ist ein funktionierendes Beispiel.

#gc{ 
 
    background-image: url('http://placehold.it/300x300?text=snake+backgroun'); 
 
}

<canvas id="gc" width="300" height="300"></canvas>