Question

我按照教程制作了蛇游戏，这是它的代码。 https://github.com/maxwihlborg/youtube-tutorials/blob/master/snake/index.html

我想知道当蛇的头部保持在同一位置时，如何使画布绕蛇移动。我可以通过修改已有的代码来完成这项工作，还是必须以完全不同的方式进行编码？

Answer 1

这是一个奇怪的请求，但我会咬人。

让我们说你希望你的蛇向左移动25个像素。使用固定式摄像头，您只需snake_position.x -= 25，一切都会为我们解决。

我们正在谈论移动实际的画布。这与我们上一次的情况完全相反。我们不是移动蛇并保持帆布固定，而是移动帆布并使蛇保持静止。因为我们正在谈论相反的情况，我们将把画布向右移动canvas_position.x += 25以创造我们的蛇向左移动的错觉。

这是一个奇怪的概念，但试图想象一个摄像机。向右平移会使屏幕上的对象离开屏幕右侧。他们实际上并没有移动，但他们似乎是。这里的概念相同。

Answer 2

首先，你必须将你的蛇移动到类似蛇的链条滑动中，并且＃34;

pop脱掉尾巴。
unshift添加新头。

然后使用Lee Presswood关于＆＃34;不动的想法＆＃34;所有的蛇形碎片，所以蛇头总是在画布上的相同坐标。

最后，为了给出移动的外观，你可以将画布背景偏移到蛇移动的数量。

这是一个概念验证：

＆＃13;

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var size=15;

var snake=[];
snake.push({x:10,y:10});
snake.push({x:9,y:10});
snake.push({x:8,y:10});
snake.push({x:8,y:11});
snake.push({x:8,y:12});
snake.push({x:8,y:13});
snake.push({x:7,y:13});
snake.push({x:6,y:13});
snake.push({x:5,y:13});

var offX=-100;
var offY=-100;

var img=new Image();
img.onload=function(){
  draw();
}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/snakeBackground.jpg';


function draw(){
  ctx.clearRect(0,0,cw,ch);
  ctx.drawImage(img,offX,offY);
  for(var i=0;i<snake.length;i++){
    if(i==0){
      ctx.fillStyle='skyblue';
      ctx.fillRect(snake[i].x*size,snake[i].y*size,size,size);
      ctx.strokeRect(snake[i].x*size,snake[i].y*size,size,size);
      ctx.beginPath();
      ctx.arc(snake[i].x*size+size/2,snake[i].y*size+size/2,3,0,Math.PI*2);
      ctx.fillStyle='red';
      ctx.fill();
      ctx.fillStyle='skyblue';
    }else if(i==snake.length-1){
      ctx.fillStyle='mediumBlue';
      ctx.fillRect(snake[i].x*size,snake[i].y*size,size,size);
      ctx.strokeRect(snake[i].x*size,snake[i].y*size,size,size);
    }else{
      ctx.fillStyle='skyblue';
      ctx.fillRect(snake[i].x*size,snake[i].y*size,size,size);
      ctx.strokeRect(snake[i].x*size,snake[i].y*size,size,size);
    }
  }
}


$('#left').click(function(){ move(-1,0); });
$('#right').click(function(){ move(1,0); });
$('#up').click(function(){ move(0,-1); });
$('#down').click(function(){ move(0,1); });


function move(dx,dy){
  var x=snake[0].x+dx*size;
  var y=snake[0].y+dy*size;
  offX-=dx*size;
  offY-=dy*size;

  var hit=false;
  for(var i=0;i<snake.length;i++){        
    if(snake[i].x==x && snake[i].y==y){ hit=true; }
  }

  if(!hit){
    snake.pop();
    snake.unshift({x:snake[0].x+dx,y:snake[0].y+dy});
    for(var i=0;i<snake.length;i++){
      snake[i].x-=dx;
      snake[i].y-=dy;
    }
    draw();
  }
}

＆＃13;

#canvas{border:1px solid red; margin:0 auto; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Use the buttons to move the snake on the dirt trail.</h4>
<button id='left'>Left</button>
<button id='right'>Right</button>
<button id='up'>Up</button>
<button id='down'>Down</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>

＆＃13;

如何让画布围绕位置或精灵移动？

2 个答案: