Javascript - Направьте объект на мышь - PullRequest
Новая
       16

Javascript - Направьте объект на мышь

0 голосов
/ 25 октября 2018

Я пытаюсь заставить этого персонажа игрока указывать на указатель мыши, но он вообще не двигается.Я понятия не имею, с чего начать, может кто-нибудь помочь мне?

Вот полный код:

Часть, с которой мне нужна помощь, находится в функции updatevalues ​​() объекта player(JavaScript) 

var canvas = document.getElementById("tanks-canvas");
var game = canvas.getContext("2d");

canvas.height = screen.height / 1.175;
canvas.width = screen.width / 1.05;
game.translate(canvas.width / 2, canvas.height / 2);
clear();
txt(0, 0, "Loading...", "100px georgia", "rgb(0, 0, 0)");

var mousex = 0;
var mousey = 0;
var angle;
var mode = "menu";
var key = [];
var scale = 1;
for (i = 0; i <= 255; i += 1) {
	key[i] = false;
}

/*
	Class Definition:
*/

// Bodies:
var circle_body = {
	x: 0,
	y: 0,
	radius: 100,
	
	draw: function() {
		this.setvals();
		circ(this.x, this.y, this.radius, "rgb(0, 150, 255)");
	},
	setvals: function() {
		this.radius = 25 * scale;
	}
};

// Turrents:

var rect_turrent = {
	x: 0,
	y: 0,
	width: 0,
	height: 0,
	offset: 0,
	
	draw: function() {
		this.setvals();
		
		rect(this.x + this.offset, this.y, this.width, this.height, "rgb(150, 150, 150)");
	},
	setvals: function() {
		this.offset = 35 * scale;
		this.width = 30 * scale;
		this.height = 15 * scale;
	}
};

// Classes:

var base = {
	draw: function() {
		rect_turrent.draw();
		circle_body.draw();
	}
};

/*
	Functions & Objects
*/

function txt(x, y, content, font, color) {
	game.fillStyle = color;
	game.textAlign = "center";
	game.font = font;
	game.fillText(content, x, y);
}

function rect(x, y, width, height, color) {
	x -= width / 2;
	y -= height / 2;
	game.fillStyle = color;
	game.strokeStyle = color.black;
	game.fillRect(x, y, width, height);
	game.strokeRect(x, y, width, height);
	
}

function img(x, y, img) {
	x -= img.width / 2;
	y -= img.height / 2;
	game.drawImage(img, x, y);
}

function circ(x, y, radius, color) {
	game.fillStyle = color;
	game.strokeStyle = color.black;
	game.beginPath();
	game.arc(x, y, radius, 0, Math.PI * 2);
	game.fill();
	game.stroke();
}

function clear() {
	rect(0, 0, canvas.width + 10, canvas.height + 10, "rgb(200, 200, 200)");
}

/*
	IMPORTANT: Player Character:
*/

var player = {
	// Variables
	x: 0,
	y: 0,
	type: "base",
	angle: 0,
	autorotate: false,
	
	// Functions
	
	update: function() {
		this.updatevalues();
		game.save();
		game.rotate(this.angle);
		this.draw();
		game.restore();
		txt(0, -100, "Mouse x: " + mousex + " | Mouse y: " + mousey + " | Angle: " + this.angle, "20px georgia", "rgb(0, 0, 0)");
	},
	draw: function() {
		if (this.type == "base") {
			base.draw();
		}
	},
	updatevalues: function() {
		this.offsetY = mousex - this.x;
		this.offsetX = mousey - this.y;
		this.angle = Math.atan(mousex / mousey);
	}
};

function menu() {
	player.update();
}

function update() {
	if (mode == "menu") {
		menu();
	}
	clear();
	player.update();
}

/*
	Intervals:
*/

game.interval = setInterval(update, 50);

/*
	Event Listeners
*/

document.addEventListener("keydown", function(event) {
	for (i = 0; i <= 255; i++) {
		if (event.keyCode == i) {
			key[i] = true;
		}
	}
});

document.addEventListener("keyup", function(event) {
	for (i = 0; i <= 255; i++) {
		key[i] = false;
	}
});

document.addEventListener("mousemove", function(event) {
	mousex = event.offsetX - (canvas.width / 2);
	mousey = (canvas.height / 2) - event.offsetY;
});
/* Everything */

* {
	transition: 1s;
}

body {
	background-color: rgb(100, 100, 100);
}

/* Flexbox: */

.flex-container {
	display: flex;
	flex-direction: column;
	padding: 5vw;
}

#header {
	flex-direction: row;
	background-color: rgb(200, 0, 0);
}

#main {
	background-color: rgb(200, 150, 50);
}

#navbar {
	z-index: 1;
	overflow: hidden;
	background-color: rgb(200, 200, 200);
	position: fixed;
	top: 0;
	width: 100%
}

/* Images */

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.imgcontainer {
	position: relative;
	width: 50%
}

.imgoverlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(0, 100, 200, 0.75);
	overflow: hidden;
	width: 100%;
	height: 0;
}

.imgtext {
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	color: rgba(200, 200, 200, 0.75);
}

.imgcontainer:hover .imgoverlay {
	height: 100%;
}

.image {
	width: 100%;
	height: auto;
}

/* Navigation Menu */

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    overflow-x: hidden;
    padding-top: 5vw;
}

/* The navigation menu links */
.sidenav a {
    padding: 1vw 1vw 1vw 4vw;
    text-decoration: none;
	overflow-x: hidden;
	font-size: 2vw;
    color: rgba(150, 150, 150, 0.75);
    display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    color: rgb(255, 255, 255);
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 1vw;
    font-size: 5vw;
    margin-left: 50px;
}


/* Styles: */

h1 {
	font: 10vw courier;
	color: rgb(0, 0, 200);
	text-align: center;
	padding: none;
}

h2 {
	font: 9vw courier;
	color: rgb(0, 0, 150);
	text-align: center;
	padding: none;
}

h3 {
	font: 8vw courier;
	color: rgb(0, 0, 150);
	text-align: center;
	padding: none;
}

h4 {
	font: 7vw courier;
	color: rgb(0, 0, 150);
	text-align: center;
	padding: none;
}

h5 {
	font: 6vw courier;
	color: rgb(0, 0, 150);
	text-align: center;
	padding: none;
}

h6 {
	font: 5vw courier;
	color: rgb(0, 0, 150);
	text-align: center;
	padding: none;
}

p {
	font: 2vw georgia;
	color: rgb(0, 100, 0);
	text-align: justify;
}

/* Other */

.link {
	color: rgb(150, 150, 150);
}

.link:hover {
	color: rgb(255, 255, 255);
}

code {
	font-family: courier;
}

canvas {
	padding: none;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	display: block;
	background-color: rgb(255, 255, 255);
	border: 5px solid rgb(0, 0, 0);
}
<!DOCTYPE html>
<html>
	<head>
		<title>Game Goods</title>
		<link rel="stylesheet" href="style.css">
		
		<script src="functions.js"></script>
	</head>
	
	<body>
		
		<!-- Game -->
		<canvas id="tanks-canvas"></canvas>
		<script src="tanks-script.js"></script>
		
	</body>

</html>

(Если вы запустите его, нажмите «Полная страница», или оно не будет работать.)

Редактировать 10-30-18: я изменил код в соответствии с ответом Хелдера.По крайней мере, мышь теперь работает ...

Редактировать 10-31-18: Я изменил мышь и мышь, чтобы они также находились в координатах 0, 0, когда мышь находится в середине.Теперь холст работает как координатная плоскость.Я также добавил отладочный текст (вы можете увидеть его, если запустите фрагмент).

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Я узнал формулу с помощью моего учителя математики и другой вопрос.

Формула 

Math.atan2(-y, x);
0 голосов
/ 25 октября 2018

Ваши вычисления для угла неверны, посмотрите на этот пример ...

Это ни в коем случае не точное решение, но вы должны двигаться в правильном направлении, я использую только mousexв моем расчете. 

var canvas = document.getElementById("tanks-canvas");
var game = canvas.getContext("2d");

canvas.height = canvas.width = 170;
game.translate(canvas.width / 2, canvas.height / 2);
clear();

var mousex = 0;
var mousey = 0;
var angle;
var mode = "menu";
var key = [];
var scale = 1;
for (i = 0; i <= 255; i += 1) {
  key[i] = false;
}

var player = {
  x: 0,  y: 0,
  type: "base",
  angle: 0,
  autorotate: false,

  update: function() {
    this.updatevalues();
    game.save()
    game.rotate(this.angle);
    this.draw();
    game.restore();
  },
  updatevalues: function() {
    this.offsetY = mousex - this.x;
    this.offsetX = mousey - this.y;
    this.angle = 360 * Math.sin(mousex/30000);    
  },
  draw: function() {
    if (this.type == "base") {
      base.draw();
    }
  }  
};

/*
	Class Definition:
*/

// Bodies:
var circle_body = {
  x: 0,
  y: 0,
  radius: 100,

  draw: function() {
    this.setvals();
    circ(this.x, this.y, this.radius, "rgb(0, 150, 255)");
  },
  setvals: function() {
    this.radius = 25 * scale;
  }
};

// Turrents:

var rect_turrent = {
  x: 0,
  y: 0,
  width: 0,
  height: 0,
  offset: 0,

  draw: function() {
    this.setvals();

    rect(this.x + this.offset, this.y, this.width, this.height, "rgb(150, 150, 150)");
  },
  setvals: function() {
    this.offset = 35 * scale;
    this.width = 30 * scale;
    this.height = 15 * scale;
  }
};

// Classes:

var base = {
  draw: function() {
    rect_turrent.draw();
    circle_body.draw();
  }
};

/*
	Functions & Objects
*/


function rect(x, y, width, height, color) {
  x -= width / 2;
  y -= height / 2;
  game.fillStyle = color;
  game.strokeStyle = color.black;
  game.fillRect(x, y, width, height);
  game.strokeRect(x, y, width, height);

}

function circ(x, y, radius, color) {
  game.fillStyle = color;
  game.strokeStyle = color.black;
  game.beginPath();
  game.arc(x, y, radius, 0, Math.PI * 2);
  game.fill();
  game.stroke();
}

function clear() {
  rect(0, 0, canvas.width + 10, canvas.height + 10, "rgb(200, 200, 200)");
}


function update() {
  clear();
  player.update();
}


game.interval = setInterval(update, 50);


document.addEventListener("mousemove", function(event) {
  mousex = event.offsetX;
  mousey = event.offsetY;
});
<canvas id="tanks-canvas"></canvas>
...