Javascript蛇游戏苹果重生

我用JavaScript制作了一个蛇游戏，效果非常好。我想在这个游戏中实现的是，如果蛇在5秒或10秒的间隔内没有吃掉苹果，苹果会在另一个地方重新繁殖。虽然很明显我应该使用

setInterval

，但它不起作用，因为我已经有了一个在一秒钟内调用游戏函数15次的设置间隔。我找不到一种方法来延迟这个按需移动苹果的功能。任何帮助都将不胜感激

以下是我的游戏代码：

window.onload=function（）{
canv=document.getElementById（“gc”）；
ctx=canv.getContext（“2d”）；
文件。添加了文本列表（“按键向下”，按键推动）；
设定间隔（游戏，1000/15）；
}
px=py=10；
gs=tc=20；
ax=ay=15；
xv=yv=0；
trail=[]；
尾=5；
函数游戏（）{
px+=xv；
py+=yv；
if（px<0）{
px=tc-1；
}
如果（px>tc-1）{
px=0；
}
if（py<0）{
py=tc-1；
}
如果（py>tc-1）{
py=0；
}
ctx.fillStyle=“黑色”；
ctx.fillRect（0，0，canv.width，canv.height）；
ctx.fillStyle=“石灰”；
对于（变量i=0；itail）{
trail.shift（）；
}
如果（ax==px&&ay==py）{
tail++；
ax=数学地板（数学随机（）*tc）；
ay=Math.floor（Math.random（）*tc）；
}
ctx.fillStyle=“红色”；
ctx.fillRect（ax*gs，ay*gs，gs-2，gs-2）；
}
功能键推送（evt）{
开关（evt.keyCode）{
案例37：
xv=-1；
yv=0；
打破
案例38：
xv=0；
yv=-1；
打破
案例39：
xv=1；
yv=0；
打破
案例40：
xv=0；
yv=1；
打破
}
}

---

您可以在javascript中使用多个时间间隔，并且可以正常工作，例如，请参见下面的代码片段。。 因此，在您的案例中，您可以这样放置：

let gameInterval = setInterval(game, 1000/15);
let appleInterval = setInterval(() => { /* your apple function goes here */}, 1000/5);

let a=setInterval（（）=>{console.log（“每2秒”）}，2000）；
设b=setInterval（（）=>{console.log（“每3秒”）}，3000）另一种方法（已经在评论中提到）是用帧而不是秒来表达你的“最大苹果时代”

因为你已经有了一个15 fps的主游戏循环，你可以使用这个帧速率来构建你的苹果逻辑：

在游戏状态下（在您的情况下为全局范围）：

在
游戏
功能中：

if (/* hits apple */) {
  tail++;
  /* make new apple */
  appleAge = 0;
} else {
  appleAge++;

  if (appleAge > maxAppleAgeFrames) {
    /* make new apple */
    appleAge = 0;
  }
}

一些一般性建议：


使用
var
声明变量（或者，如果您使用的是更现代的语言功能，
let
和
const
）
使用更多函数使代码更易于阅读、理解和维护。例如：

// Hard to understand what this does...
ax = Math.floor(Math.random() * tc);
ay = Math.floor(Math.random() * tc);

// Easier to understand:
function moveAppleToRandomLocation() {
  ax = Math.floor(Math.random() * tc);
  ay = Math.floor(Math.random() * tc);
}

// elsewhere:
moveAppleToRandomLocation();



代码段中的更改：


//TODO:修复变量声明
window.onload=函数（）{
canv=document.getElementById（“gc”）；
ctx=canv.getContext（“2d”）；
文件。添加了文本列表（“按键向下”，按键推动）；
设定间隔（游戏，1000/15）；
}
px=py=10；
gs=tc=20；
ax=ay=15；
xv=yv=0；
trail=[]；
尾=5；
//新的：
var fps=15；
var maxAppleAgeSeconds=5；
var-appleAge=0；
var maxAppleAgeFrames=fps*maxAppleAgeSeconds；
函数游戏（）{
px+=xv；
py+=yv；
if（px<0）{
px=tc-1；
}
如果（px>tc-1）{
px=0；
}
if（py<0）{
py=tc-1；
}
如果（py>tc-1）{
py=0；
}
ctx.fillStyle=“黑色”；
ctx.fillRect（0，0，canv.width，canv.height）；
ctx.fillStyle=“石灰”；
对于（变量i=0；itail）{
trail.shift（）；
}
appleAge++；
如果（ax==px&&ay==py）{
tail++；
ax=数学地板（数学随机（）*tc）；
ay=Math.floor（Math.random（）*tc）；
appleAge=0；
}else if（appleAge>maxAppleAgeFrames）{
ax=数学地板（数学随机（）*tc）；
ay=Math.floor（Math.random（）*tc）；
appleAge=0；
}
ctx.fillStyle=“红色”；
ctx.fillRect（ax*gs，ay*gs，gs-2，gs-2）；
}
功能键推送（evt）{
开关（evt.keyCode）{
案例37：
xv=-1；
yv=0；
打破
案例38：
xv=0；
yv=-1；
打破
案例39：
xv=1；
yv=0；
打破
案例40：
xv=0；
yv=1；
打破
}
}




分数
记录
window.onload=函数（）{
var-vel=15；
var速度=1000/15；
canv=document.getElementById（“gc”）；
ctx=canv.getContext（“2d”）；
文件。添加了文本列表（“按键向下”，按键推动）；
设置间隔（游戏，1000/级）；
}
设px=10；
设py=10；
设gs=20；
设tc=20；
设ax=ay=15；
设xv=yv=0；
让trail=[]；
设tail=5；
设sc=0；
设rec=0；
var-vel=5；
var fps=15；
var maxAppleAgeSeconds=5；
var-appleAge=0；
var maxAppleAgeFrames=fps*maxAppleAgeSeconds；
函数游戏（）{
px+=xv；
py+=yv；
如果（pxtc-1）{
px=0；
}
if（pytc-1）{
py=0；
}
ctx.fillStyle=“黑色”；
ctx.fillRect（0,0，扫描宽度，扫描高度）；
ctx.fillStyle=“石灰”；
对于（var i=0；i rec）{
rec=sc；
record.innerText=rec；
}
sc=0；
}
}
trail.push（{x:px，y:py}）；
while（轨迹长度>尾部）{
trail.shift（）；
}
appleAge++；
如果（ax==px&&ay==py）{
尾+=3；
sc++
score.innerText=sc；
vel+=50；
ax=数学地板（数学随机（）*tc）；
ay=Math.floor（Math.random（）*tc）；
appleAge=0；
}else if（appleAge>maxAppleAgeFrames）{
ax=数学地板（数学随机（）*tc）；
ay=Math.floor（Math.random（）*tc）；
appleAge=0；
}    
ctx.fillStyle=“橙色”；
ctx.fillRect（ax*gs、ay*gs、gs-2、gs-2）；
}
乐趣
// Hard to understand what this does...
ax = Math.floor(Math.random() * tc);
ay = Math.floor(Math.random() * tc);

// Easier to understand:
function moveAppleToRandomLocation() {
  ax = Math.floor(Math.random() * tc);
  ay = Math.floor(Math.random() * tc);
}

// elsewhere:
moveAppleToRandomLocation();