为什么我的障碍没有显示

Question

处于皱眉状态的英雄我有这段代码，除了障碍物（绿色矩形）之外，其他所有东西都起作用，它们的命中框甚至处于活动状态，但它们不可见。 我花了数小时来检查代码，看不到问题所在。

这是代码：

<!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 个解决方案

解决方案1
0 已采纳 2016-05-21 02:00:05

为什么我的障碍没有显示

问题描述

1 个解决方案

解决方案1 0 已采纳 2016-05-21 02:00:05

解决方案1
0 已采纳 2016-05-21 02:00:05