在画布上多次绘制图像

drawimage multiple times on canvas

本文关键字：绘制 图像      更新时间：2023-09-26

一旦当前敌人达到900的x位置，我该如何在敌人中产卵？

它必须像一样

if(enemy.x<=900){    
    //spawn enemies
}

这里有一个jsfiddle向你展示我的意思，向左移动的块，我想要它们的倍数http://jsfiddle.net/h8u1n3fj/我需要当前的敌人留在棋盘上，同时这些敌人也被繁殖，只要有它，每次一个人达到900后，就会有多组敌人留在棋盘。

var requestAnimFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||   window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimFrame
var place = [74,111,148,185,222,259,296,333,370];
var rand = place[Math.floor(Math.random()*place.length)];
var rand2 = place[Math.floor(Math.random()*place.length)];
var rand3 = place[Math.floor(Math.random()*place.length)];
var rand4 = place[Math.floor(Math.random()*place.length)];
var rand5 = place[Math.floor(Math.random()*place.length)];
var rand6 = place[Math.floor(Math.random()*place.length)];
var rand7 = place[Math.floor(Math.random()*place.length)];
var rand8 = place[Math.floor(Math.random()*place.length)];
var rand9 = place[Math.floor(Math.random()*place.length)];
console.log(rand);
var move = setInterval(function () {
    enemy.x -= 45;
}, 500);
//drawing the character
function drawChar(x,y){
    enemy.y = rand;
    enemy.y2 = rand2;
    enemy.y3 = rand3;
    enemy.y4 = rand4;
    enemy.y5 = rand5;
    enemy.y6 = rand6;
    enemy.y7 = rand7;
    enemy.y8 = rand8;
    enemy.y9 = rand9;
    context.drawImage(tile3,enemy.x,enemy.y,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y2,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y3,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y4,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y5,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y6,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y7,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y8,tileWidth,tileHeight);
    context.drawImage(tile3,enemy.x,enemy.y9,tileWidth,tileHeight);
    requestAnimFrame(drawChar);
    if(enemy.x<=0){
        enemy.x=990;
        rand = place[Math.floor(Math.random()*place.length)];
    }
    else {
        return true;
    }
}

此外，如果你对如何使代码更干净有任何建议，请随意，但我主要希望每次x等于900时都能产生这些敌人，并将当前的敌人保留在棋盘上。

当前，您的敌人列表（rand到rand9）一直在使用，直到它到达敌人.x等于零的位置。现在，与其使用一个敌人列表，不如我们可以一个接一个地生成敌人列表，而不覆盖变量，然后在敌人列表为零时丢弃它们，这不是很好吗您需要使用对象编程来解决问题可以在这里找到一个文档齐全的教程：http://eloquentjavascript.net/1st_edition/chapter8.html.在学习了一点面向对象编程（OOP）之后，你将能够为你的敌人列表制定一个"蓝图"，允许你创建它们并定位它们，同时保持它们彼此独立。

相关文章：