Question

我正在构建一个简单的游戏，用户控制蓝色方块，目标是输入红色框。我创建的敌人方块未检测到playerOne对象。我不确定为什么，已经回答的其他问题并没有真正帮助。我担心它是我的代码所特有的。我可能还做过一百万件事。希望能对您有所帮助！谢谢。

这是我的所有代码：

<!DOCTYPE html>
<html>
	<head>
		<title>Javascript Testing</title>
        <style>
            body {
                background-color:darkblue;
            }
            #page {
                background-color: skyblue; border: 5px solid orange;
                height: 650px;
                width: 600px;
                margin:auto;
            }
            h1 {
                text-align: center;
            }
            #main {
                background-color: white; border: 5px solid black;
                margin: 10px 50px 50px 50px;
            }
        </style>
	</head>
	<body>
		<div id="page">
			<h1>javascript testing</h1>
			<canvas id="main" width=500, height=500></canvas>
		</div>
		<script>
		// Canvas Work
		 var can = document.getElementById("main");
		 var ctx = can.getContext("2d");
		 
		 // Variables
        var startPlat = new Platform(can.width/4, can.height-50, 250, 50, "#11eeaa");
        var endPlat = new Platform(can.width/3, 0, 150, 50, "#ff5555");
		var playerOne = new Player(can.width/2, can.height-30, 30, 30);
		var Enemies = [];
		for(i = 0; i < 4; i++){
            Enemies[i] = new Enemy(Math.floor(Math.random()*300), Math.floor(100+Math.random()*300), 30, 30);
		}
		
		// User Controls
		var leftPressed = false;
		var rightPressed = false;
        var upPressed = false;
        var downPressed = false;
		
		document.addEventListener("keydown", keyDownHandler, false);
		document.addEventListener("keyup", keyUpHandler, false);
		
		function keyDownHandler(e){
		    if(e.keyCode == 39){
		        rightPressed = true;
		    } else if(e.keyCode == 37){
		        leftPressed = true;
		    }else if(e.keyCode == 38){
                upPressed = true;
            }else if(e.keyCode == 40){
                downPressed = true;
            }
		}
		function keyUpHandler(e){
		    if(e.keyCode == 39){
		        rightPressed = false;
		    } else if(e.keyCode == 37){
		        leftPressed = false;
		    }else if(e.keyCode == 38){
                upPressed = false;
            }else if(e.keyCode == 40){
                downPressed = false;
            }
		}
            
        // Collision Detection
        function CollisionDetection(){
            if(playerOne.y + playerOne.height < endPlat.y + endPlat.height-2 &&
               playerOne.x + playerOne.width < endPlat.x + endPlat.width && playerOne.x - playerOne.width > endPlat.x){
                window.alert("Success!")
                document.location.reload();
            }
            if(playerOne.x + playerOne.width < Enemies.x){
                window.alert("FAILURE!")
                document.location.reload();
            }
        }
		
		// Objects
		function Player(x, y, width, height){
		    this.x = x;
		    this.y = y;
		    this.speedX = 0;
		    this.speedY = 0;
		    this.width = width;
		    this.height = height;
		    this.draw = function(){
		        ctx.fillStyle = "blue";
		        ctx.fillRect(this.x, this.y, this.width, this.height);
		    }
		    this.move = function(){
                 if(leftPressed && this.x > 0){
                 this.x += -3;
                 }
                if(rightPressed && this.x < can.width - this.width){
                this.x += 3;
                }
                if(upPressed && this.y > 0){
                    this.y += -3
                }
                if(downPressed && this.y < can.height - this.height){
                    this.y += 3;
                }
		    }
		}
		function Enemy(x, y, width, height){
			 this.x = x;
			 this.y = y;
			 this.speedX = Math.floor(Math.random()*2+2);
			 this.speedY = Math.floor(Math.random()*2+2);
			 this.width = width;
			 this.height = height;
			 this.color = "red";
			 this.draw = function(){
				 ctx.fillStyle = this.color;
				 ctx.fillRect(this.x, this.y, this.width, this.height);
			 }
			 this.move = function(){
				 this.x += this.speedX;
				 this.y += this.speedY;
				 if(this.x < 0 || this.x > can.width-this.width){
				     this.speedX = -this.speedX;
				 }
				 if(this.y < 0 || this.y > can.height-this.height){
				     this.speedY = -this.speedY;
				 }
                 if(this.x + this.width > startPlat.x && this.x < startPlat.x + startPlat.width &&
                    this.y + this.height> startPlat.y && this.y < startPlat.y + startPlat.height){
                        this.speedY = -this.speedY;
                        this.speedX = -this.speedX;
                        
                 }
                 if(this.x + this.width > endPlat.x && this.x < endPlat.x + endPlat.width &&
                    this.y + this.height > endPlat.y && this.y < endPlat.y + endPlat.height){
                        this.speedY = -this.speedY;
                        this.speedX = -this.speedX;
                        
                 }
                    
			 }
			 
		 }
        function Platform(x, y, width, height, color){
                this.x = x;
                this.y = y;
                this.width = width;
                this.height = height;
                this.color = color;
                this.draw = function(){
                    ctx.fillStyle = this.color;
                    ctx.fillRect(this.x, this.y, this.width, this.height)
                }
            }
            
		 //Draw Stuff Here
		 animate = function(){
		    ctx.clearRect(0,0,can.width,can.height);
             startPlat.draw();
             endPlat.draw();
		        for(i = 0; i < Enemies.length; i++){
		            Enemies[i].draw();
		            Enemies[i].move();
		        }
            playerOne.draw();
            playerOne.move();
            CollisionDetection();
             
            
		 }
		 animate();
		 setInterval(animate,10);
		</script>
	</body>
</html>

Answer 1

您的碰撞检测不起作用，因为您没有任何代码可以执行此操作。将此添加到您的CollisionDetection()函数中：

Enemies.forEach(function(enemy) {
    if (enemy.y + enemy.height < playerOne.y && enemy.y + enemy.height > playerOne.y + playerOne.height && enemy.x + enemy.width < playerOne.x + playerOne.width && enemy.x - enemy.width > playerOne.x) {
        //Do stuff here
    }
})

为什么我的碰撞检测不适用于敌人vs PlayerOne

1 个答案: