旋转矩形没有准确指向播放器

时间：2015-08-31 20:19:13

标签： javascript html css canvas

我有一个游戏，矩形向播放器旋转，但它没有准确指向。我很确定我没有很好的数学技能。谢谢！

＆＃13;
＆＃13; 
static class Program
{
    static void Main()
    {
        do
        {
            var formA = new FormA();
            Application.Run(formA);
            var formB = new FormB(formA.SelectedConfigurationFile);
            Application.Run(formB);
        } while (!IsComplete);
    }

    public static IsComplete { get; set;}
}

public class FormB
{
    protected override void OnFormClosed(FormClosedEventArgs e)
    {
        base.OnFormClosed(e);
        if (e.CloseReason == CloseReason.UserClosing)
            Program.IsComplete = true;
    }

    private void btnCancel_Click(object sender, EventArgs e)
    {
        Program.IsComplete = true;
        Close();
    }

    private void btnBack_Click(object sender, EventArgs e)
    {
        if (this.Tabs.SelectedIndex == 0)
        {
            Program.IsComplete = false;
            Close();
        }
    }
}
＆＃13; 
var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
 
var HEIGHT = 500;
var WIDTH = 500;
var timeWhenGameStarted = Date.now();   //return time in ms
 
var frameCount = 0;
 
var p = {
	x:50,
	y:50,
	spdX:30,
	spdY:5,
	w:20,
	h:20,
	aimAngle:0,
	//
	pressingDown:false,
	pressingUp:false,
	pressingLeft:false,
	pressingRight:false,
};

var e = {
	x:100,
	y:100,
	spdX:30,
	spdY:5,
	w:20,
	h:20,
	aimAngle:0,
	//
	pressingDown:false,
	pressingUp:false,
	pressingLeft:false,
	pressingRight:false,
};

function lineToAngle(ctx, x1, y1, length, angle) {

    angle *= Math.PI / 180;

    var x2 = x1 + length * Math.cos(angle),
        y2 = y1 + length * Math.sin(angle);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);

    return {x: x2, y: y2};
};

function aim(){
	// var y = p.y-10;
	// var x = p.x-10;
	// var angle = Math.atan2(y, x)-0;
	
	var diffX = p.x - e.x;
	var diffY = p.y - e.y;
	
	e.aimAngle = Math.atan2(diffY,diffX) / Math.PI * 180
	
	ctx.beginPath();
    lineToAngle(ctx, 200, 200, 40, e.aimAngle);
    ctx.lineWidth = 10;
    ctx.stroke();
};
 
function udp(){
	if(p.pressingRight)
		p.x += 10;
	if(p.pressingLeft)
		p.x -= 10;
	if(p.pressingDown)
		p.y += 10;
	if(p.pressingUp)
		p.y -= 10;
   
	if(p.x < p.width/2)
		p.x = p.width/2;
	if(p.x > WIDTH-p.width/2)
		p.x = WIDTH - p.width/2;
	if(p.y < p.height/2)
		p.y = p.height/2;
	if(p.y > HEIGHT - p.height/2)
		p.y = HEIGHT - p.height/2;
};

function getkeys(){
	document.onkeydown = function(event){
		if(event.keyCode === 68)        //d
			p.pressingRight = true;
		else if(event.keyCode === 83)   //s
			p.pressingDown = true;
		else if(event.keyCode === 65) //a
			p.pressingLeft = true;
		else if(event.keyCode === 87) // w
			p.pressingUp = true;
	};
	 
	document.onkeyup = function(event){
		if(event.keyCode === 68)        //d
			p.pressingRight = false;
		else if(event.keyCode === 83)   //s
			p.pressingDown = false;
		else if(event.keyCode === 65) //a
			p.pressingLeft = false;
		else if(event.keyCode === 87) // w
			p.pressingUp = false;
	};
};

function update(){
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
	
	aim();
	
	ctx.fillStyle = 'green';
	ctx.fillRect(p.x, p.y, p.w, p.h);
	// ctx.fillStyle = 'red';
	// ctx.fillRect(e.x, e.y, e.w, e.h);
	getkeys()
	udp();
};

setInterval(update, 20);
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

问题很简单，你的黑线位置不匹配。正如e 100,100位置200,200，而是位置p。您只需更改 lineToAngle(ctx, 200, 200, 40, e.aimAngle); 的位置即可匹配此处的位置：

100,100

所以将其更改为e（lineToAngle(ctx, e.x, e.y, 40, e.aimAngle); 对象中的内容），或将其更改为：

var ctx = document.getElementById("ctx").getContext("2d");
ctx.font = '30px Arial';
 
var HEIGHT = 500;
var WIDTH = 500;
var timeWhenGameStarted = Date.now();   //return time in ms
 
var frameCount = 0;
 
var p = {
	x:50,
	y:50,
	spdX:30,
	spdY:5,
	w:20,
	h:20,
	aimAngle:0,
	//
	pressingDown:false,
	pressingUp:false,
	pressingLeft:false,
	pressingRight:false,
};

var e = {
	x:200,
	y:200,
	spdX:30,
	spdY:5,
	w:20,
	h:20,
	aimAngle:0,
	//
	pressingDown:false,
	pressingUp:false,
	pressingLeft:false,
	pressingRight:false,
};

function lineToAngle(ctx, x1, y1, length, angle) {

    angle *= Math.PI / 180;

    var x2 = x1 + length * Math.cos(angle),
        y2 = y1 + length * Math.sin(angle);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);

    return {x: x2, y: y2};
};

function aim(){
	// var y = p.y-10;
	// var x = p.x-10;
	// var angle = Math.atan2(y, x)-0;
	
	var diffX = p.x - e.x;
	var diffY = p.y - e.y;
	
	e.aimAngle = Math.atan2(diffY,diffX) / Math.PI * 180
	
	ctx.beginPath();
    lineToAngle(ctx, e.x, e.y, 40, e.aimAngle);
    ctx.lineWidth = 10;
    ctx.stroke();
};
 
function udp(){
	if(p.pressingRight)
		p.x += 10;
	if(p.pressingLeft)
		p.x -= 10;
	if(p.pressingDown)
		p.y += 10;
	if(p.pressingUp)
		p.y -= 10;
   
	if(p.x < p.width/2)
		p.x = p.width/2;
	if(p.x > WIDTH-p.width/2)
		p.x = WIDTH - p.width/2;
	if(p.y < p.height/2)
		p.y = p.height/2;
	if(p.y > HEIGHT - p.height/2)
		p.y = HEIGHT - p.height/2;
};

function getkeys(){
	document.onkeydown = function(event){
		if(event.keyCode === 68)        //d
			p.pressingRight = true;
		else if(event.keyCode === 83)   //s
			p.pressingDown = true;
		else if(event.keyCode === 65) //a
			p.pressingLeft = true;
		else if(event.keyCode === 87) // w
			p.pressingUp = true;
	};
	 
	document.onkeyup = function(event){
		if(event.keyCode === 68)        //d
			p.pressingRight = false;
		else if(event.keyCode === 83)   //s
			p.pressingDown = false;
		else if(event.keyCode === 65) //a
			p.pressingLeft = false;
		else if(event.keyCode === 87) // w
			p.pressingUp = false;
	};
};

function update(){
	ctx.clearRect(0, 0, WIDTH, HEIGHT);
	
	aim();
	
	ctx.fillStyle = 'green';
	ctx.fillRect(p.x, p.y, p.w, p.h);
	// ctx.fillStyle = 'red';
	// ctx.fillRect(e.x, e.y, e.w, e.h);
	getkeys()
	udp();
};

setInterval(update, 20);

<h4>Click on the canvas & then use WASD keys as controls</h4>
<canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas></center>
function foo(arrayFoo) {
  return arrayFoo.length > 10 ? 'too long' : 'just right';
}

相关问题
最新问题