Question

我在思考JS中的游戏想法时，我做了一个小小的应用程序，只是在画布上绘制框，我试图添加碰撞（我以前在不同的应用程序上做过）但是出于某种原因，某些东西是出错了。我不知道该怎么做，因为代码的结果很奇怪（碰撞代码在代码底部的碰撞函数下）。我在我创建的盒子上印刷的东西也有问题，我发现它也很奇怪（jsfiddle第30行）。非常感谢一些帮助！

<小时/> 打印问题：

function drawBoxes(coords,ctx){
    var colorArray = ["#1abc9c","#2ecc71","#3498db","#9b59b6","#34495e","#f1c40f","#e67e22","#e74c3c","#95a5a6"];
    console.log(coords);
    for(var i=0;i<=100;i++){
        var coordinates = coords[i].split(",");
        ctx.fillStyle = colorArray[Math.floor((Math.random() * 8) + 1)];
        ctx.fillRect(coordinates[0],coordinates[1],coordinates[2],coordinates[3]);
        ctx.fillStyle = "#000000";
        ctx.font = "20px arial";    
        ctx.fillText(coordinates[0] + "," + coordinates[1],coordinates[0]+10,coordinates[1]+31);
    }
}

<小时/> 碰撞问题

function collision(coords,c,ctx){
    $(document).click(function(e){
        if(e.target == c){
            for(var i=0;i<=100;i++){
                var coordinates = coords[i].split(",");
                if((e.offsetY > coordinates[1] && e.offsetY < coordinates[1]+50) && (e.offsetX > coordinates[0] && e.offsetX < coordinates[0]+50)){
                    ctx.fillStyle = "#ffffff";
                    ctx.fillRect(coordinates[0],coordinates[1],coordinates[2],coordinates[3]);
                } 
            }
        }
    });
}

<小时/> 这两个函数都是从main函数调用的，该函数在代码的开头被调用。 https://jsfiddle.net/9utyp7bm/

HTML5应用程序冲突和打印问题

0 个答案: