Question

我想知道如何将我的图片（绿色块）一次一块地移动到已创建的块中，我想在不使用setinterval的情况下通过for循环或if语句来增加x或什么，有什么建议吗？这是一个jsfiddle的链接 http://jsfiddle.net/ueo30Lg0/

var rows = 20;
var cols = 10;
var size = 32;
function drawBoard(){
    ctx.fillStyle="#D3D3D3";
ctx.fillRect( 0,55,320, 400);
    var colors = ['#FFFFFF','#000000'];
       var squares = colors;
var square = 0;
canvas = document.getElementById('gameCanvas');
canvas_width = canvas.width;
canvas_height = canvas.height;
for(var row=0; row<rows; row++) {
    for(var col=0; col<cols; col++) {
        var x = col*size;
        var y = row*size;

        ctx.fillStyle = squares[square++%colors.length];
        ctx.fillRect(x,y,size,size);



    }
    square += colors.length-1;
}
}

这里是我要移动的块

var logo2 = new Image();
logo2.src = 'http://hdwallphotos.com/wp-content/uploads/2014/02/Green-Background-Image-CSS-Wallpaper.png'

function blocks(){
logo2.onload = function(){
canvas = document.getElementById('gameCanvas');
ctx = canvas.getContext('2d');
for(var row=0; row<rows; row++) {
    for(var col=0; col<cols; col++) {
        var x = col;
        var y = row;

ctx.drawImage(logo2, x,y,23,13);
    }

}
};
}

Answer 1

没有足够的信誉可以发表评论，但是这里有一个很好的Javascript游戏循环的例子（我自己使用以来稍微使用/修改过）在这里找到了（参见yckart的答案）：requestAnimationFrame at a limited framerate检查一下，看看是否有帮助。

编辑：我已经分道扬琴，并添加了一个非常基本的循环 - 只需调用setInterval，所以它会一遍又一遍地调用main（）函数，并允许我们绘制绿色方块每次一个新位置 - 并删除绿色方块的图像加载（为什么不只是使用一个绿色矩形，因为你已经为董事会做了什么？）

我已经删除了一些冗余，我认为，简化了一些事情。

请在此处查看：http://jsfiddle.net/v4nz666/14yLvo08/

基本要点是（虽然我在这里没有绑定检查，在小提琴中）：

function main() {
    drawBoard();
    drawGreenBlock();
    y++;
}

setInterval(main, 30);

正如我所提到的，这是一种在JS中进行游戏循环的非常简单的方法，有更好的方法。请参阅上面我已经链接的答案，以获得更好的解决方案，该解决方案使用浏览器＆＃39;优化方法requestAnimationFrame（）。

希望有所帮助！

一次移动一个图像的位置

1 个答案: