个人中心
gpt4 book ai didi

javascript - 从玩家向鼠标发射子弹？

转载 作者：行者123 更新时间：2023-12-02 20:23:06 25 4
gpt4 key购买 nike

如何从玩家 X 和 Y 向鼠标 x 和 y 发射子弹？

我可以找到鼠标 X 和 Y 的 Angular ，但我不知道如何创建一颗飞向鼠标的子弹。

鼠标坐标的代码是(dx,dy)。

此外，如果您能解释一下您所做的事情背后的逻辑以及如何做到这一点，我将不胜感激。

谢谢!

Fiddle 

  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');
  var pressingDown = false;
  var pressingUp = false;
  var pressingLeft = false;
  var pressingRight = false;
  var mouseX, mouseY;

  function Player(x, y) {
    this.x = x;
    this.y = y;
    this.angle;
  }

  Player.prototype.draw = function() {
    context.save();
    context.translate(this.x, this.y);
    context.rotate(this.angle);

    context.beginPath();
    context.fillStyle = "green";
    context.arc(0, 0, 30, 0, 2 * Math.PI);
    context.fill();

    context.fillStyle = "red";
    context.fillRect(0, -10, 50, 20);

    context.restore();
  }

  Player.prototype.update = function(mouseX, mouseY) {
    var dx = mouseX - this.x;
    var dy = mouseY - this.y;
    this.angle = Math.atan2(dy, dx);
  }


  canvas.addEventListener('mousemove', mouseMove);


  function mouseMove(evt) {
    mouseX = evt.x;
    mouseY = evt.y;
  }

  var player = new Player(350, 250);


  function updatePlayer() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    player.draw();
    player.update(mouseX, mouseY);
    updatePlayerPosition();
  }

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

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

  updatePlayerPosition = function() {
    if (pressingRight)
      player.x += 1;
    if (pressingLeft)
      player.x -= 1;
    if (pressingDown)
      player.y += 1;
    if (pressingUp)
      player.y -= 1;
  }

  function update() {
    updatePlayer();
  }

  setInterval(update, 0)

最佳答案 

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			body {
				background-color: black;
			}
			
			canvas {
				position: absolute;
				margin: auto;
				left: 0;
				right: 0;
				border: solid 1px white;
				border-radius: 10px;
			}
		</style>
	</head>
	
	<body>
		<canvas id="canvas"></canvas>
		<script type="application/javascript">
			
			(function() {
			
				"use strict";
				
				var canvasWidth = 180;
				var canvasHeight = 160;
				var canvas = null;
				var bounds = null;
				var ctx = null;
				var mouseX = 0.0;
				var mouseY = 0.0;
				
				var player = {
					x: (canvasWidth * 0.5) | 0,
					y: (canvasHeight * 0.5) | 0,
					dx: 0.0,
					dy: 0.0,
					angle: 0.0,
					radius: 17.5,
					
					tick: function() {
						this.angle = Math.atan2(mouseY - this.y,mouseX - this.x);
					},
					
					render: function() {
						ctx.fillStyle = "darkred";
						ctx.strokeStyle = "black";
						ctx.translate(this.x,this.y);
						ctx.rotate(this.angle);
						ctx.beginPath();
						ctx.moveTo(this.radius,0.0);
						ctx.lineTo(-0.5 * this.radius,0.5 * this.radius);
						ctx.lineTo(-0.5 * this.radius,-0.5 * this.radius);
						ctx.lineTo(this.radius,0.0);
						ctx.fill();
						ctx.stroke();
						ctx.rotate(-this.angle);
						ctx.translate(-this.x,-this.y);
					}
				};
				
				var bullet = {
					x: (canvasWidth * 0.5) | 0,
					y: (canvasHeight * 0.5) | 0,
					dx: 0.0,
					dy: 0.0,
					radius: 5.0,
					
					tick: function() {
						this.x += this.dx;
						this.y += this.dy;
						
						if (this.x + this.radius < 0.0
						||	this.x - this.radius > canvasWidth
						||	this.y + this.radius < 0.0
						|| 	this.y - this.radius > canvasHeight)
						{
							this.dx = 0.0;
							this.dy = 0.0;
						}
					},
					
					render: function() {
						ctx.fillStyle = "darkcyan";
						ctx.strokeStyle = "white";
						ctx.beginPath();
						ctx.arc(this.x,this.y,this.radius,0.0,2.0*Math.PI,false);
						ctx.fill();
						ctx.stroke();
					}
				};
				
				function loop() {
					// Tick
					bullet.tick();
					player.tick();
					// Render
					ctx.fillStyle = "gray";
					ctx.fillRect(0,0,canvasWidth,canvasHeight);
					bullet.render();
					player.render();
					//
					requestAnimationFrame(loop);
				}
				
				window.onmousedown = function(e) {
					// The mouse pos - the player pos gives a vector
					// that points from the player toward the mouse
					var x = mouseX - player.x;
					var y = mouseY - player.y;
					
					// Using pythagoras' theorm to find the distance (the length of the vector)
					var l = Math.sqrt(x * x + y * y);
					
					// Dividing by the distance gives a normalized vector whose length is 1
					x = x / l;
					y = y / l;
					
					// Reset bullet position
					bullet.x = player.x;
					bullet.y = player.y;
					
					// Get the bullet to travel towards the mouse pos with a new speed of 10.0 (you can change this)
					bullet.dx = x * 10.0;
					bullet.dy = y * 10.0;
				}
				
				window.onmousemove = function(e) {
					mouseX = e.clientX - bounds.left;
					mouseY = e.clientY - bounds.top;
				}
				
				window.onload = function() {
					canvas = document.getElementById("canvas");
					canvas.width = canvasWidth;
					canvas.height = canvasHeight;
					bounds = canvas.getBoundingClientRect();
					ctx = canvas.getContext("2d");
					loop();
				}
			
			})();
			
		</script>
	</body>
</html>

关于javascript - 从玩家向鼠标发射子弹？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48493189/

25 4 0
文章推荐： Matplotlib 较暗的 HSV 颜色图
文章推荐： javascript - 使用 Google Feeds API (JavaScript) 获取 DeviantArt Media RSS
文章推荐： statistics - 在 Mathematica 中计算自定义分布的期望
文章推荐： kubernetes - 如何在 Mac OS Catalina 上安装 minikube
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com