Question

hero in frowning state我有这个代码，一切都有效，除了障碍物（绿色矩形），它们的命中框甚至是活动的，但它们是不可见的。我花了几个小时浏览代码，看不出问题。

这是代码：

<!DOCTYPE html>
<html>
<head>

<style>
    canvas {
        position: absolute;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
        display: block;
        margin: auto;
        border: 1px solid #000000;
        background-color: #f1f1f1;
    }
</style>

</head>
<body onload="startGame()">

<script>

    var hero
    var rubbish
    var obstacles = [];
    var gameSize = {x:window.innerWidth-50,y:window.innerHeight-50};

    function startGame() {
        myGameArea.start();
        hero = new component(gameSize.x/6,gameSize.y/2,30,30,"heroSmile.png","image");
    rubbish = new component(gameSize.x*5/6,gameSize.y/2,30,30,"Rubbish.png","image");
}

var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = gameSize.x;
        this.canvas.height = gameSize.y;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas, document.body.childNodes[0]);   //required for some reason, dont mess with this
        this.frameNo = 0;
        this.interval = setInterval(updateGameArea,20);
        window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = true;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.keys[e.keyCode] = false; 
        })
    },
    clear : function() {
        this.context.clearRect(0, 0, gameSize.x, gameSize.y);
    }
}

function everyinterval(n) { 
    if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
    return false;
}

function component(x, y, width, height, color, type) {
    this.type = type;
    if (type == "image") {
        this.image = new Image();
        this.image.src = color;
    }
    this.width = width;
    this.height = height;
    this.speedX = 0;
    this.speedY = 0;    
    this.x = x;
    this.y = y;    
    this.update = function() {
        ctx = myGameArea.context;
        if (type == "image") {
            ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
        } else {
            ctx.fillStyle = color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }
    }
    this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY;        
    }
    this.crashWith = function(otherobj) {
        var myleft = this.x;
        var myright = this.x + (this.width);
        var mytop = this.y;
        var mybottom = this.y + (this.height);
        var otherleft = otherobj.x;
        var otherright = otherobj.x + (otherobj.width);
        var othertop = otherobj.y;
        var otherbottom = otherobj.y + (otherobj.height);
        var crash;
        if ((mybottom < othertop) ||
            (mytop > otherbottom) ||
            (myright < otherleft) ||
            (myleft > otherright)) {crash = false;
        } else {crash = true;}
        return crash;
    }
}



function checkGameSize() {
    gameSize = {x:window.innerWidth-50,y:window.innerHeight-50};
    myGameArea.canvas.width = gameSize.x;
    myGameArea.canvas.height = gameSize.y;
}

function checkKeys() {
        var speed = 5;
        if (myGameArea.keys && myGameArea.keys[38]) {rubbish.speedY -= speed; };
        if (myGameArea.keys && myGameArea.keys[40]) {rubbish.speedY += speed; };
        if (myGameArea.keys && myGameArea.keys[37]) {rubbish.speedX -= speed; };
        if (myGameArea.keys && myGameArea.keys[39]) {rubbish.speedX += speed; };

        if (myGameArea.keys && myGameArea.keys[65]) {hero.speedX -= speed; };
        if (myGameArea.keys && myGameArea.keys[68]) {hero.speedX += speed; };
        if (myGameArea.keys && myGameArea.keys[87]) {hero.speedY -= speed; };
        if (myGameArea.keys && myGameArea.keys[83]) {hero.speedY += speed; };
}

function updateGameArea() {
    var x, y;
    if (hero.crashWith(rubbish)) {hero.image.src = "heroFrown.png";} else {hero.image.src = "heroSmile.png";}
    for (i = 0; i < obstacles.length; i += 1) {if (hero.crashWith(obstacles[i])) {hero.image.src = "heroFrown.png";}}
        myGameArea.clear();
        myGameArea.frameNo += 1;
        if (myGameArea.frameNo == 1 || everyinterval(150)) {
            x = myGameArea.canvas.width;
            y = myGameArea.canvas.height - 200
            obstacles.push(new component(x, y, 10, 200, "green"));
        }
        for (i = 0; i < obstacles.length; i += 1) {
            obstacles[i].x += -1;
            obstacles[i].update();
        }
        checkGameSize();
        hero.speedX = 0;
        hero.speedY = 0;
        rubbish.speedX = 0;
        rubbish.speedY = 0;
        checkKeys();
        hero.newPos();
        rubbish.newPos();
        hero.update();
        rubbish.update();
}

</script>

</body>
</html>

Answer 1

好吧，所以有一些事情，

我创建了一个有效的jsFiddle ......

https://jsfiddle.net/cy3ommq4/4/

但看看我写的评论;

enter code here

我用颜色替换了图像，因为我没有图像：P
我将更新障碍移到了代码块的末尾（基本上你的问题看看 updateGameArea 函数）

<强>更新我刚刚意识到你意味着从最后XD开始的障碍对不起，我更新了小提琴

为什么我的障碍没有表现出来

1 个答案: