当前位置： 文江博客话题详情

我无法让镜头直接移动到光标处

发布于 2025-01-15 02:20:48 字数 6512 浏览 2 评论 0原文

我正在使用 javascript 制作 2d 游戏，但无法让镜头直接沿直线移动到光标。我希望这样，当调用拍摄功能时，使镜头移动到光标，并且在镜头已经结束后移动光标时不会改变路径。现在它只是对玩家的对角线

<!DOCTYPE html>
<html lang="en" onclick="shoot()">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<style>
canvas {
    border:4px solid #000000;
    background-color: #26af2d;
}
</style>
<body onload="startGame()">
  <div name="buttonDiv">
    <button type="button" id="startRoundBtn" onclick= startWave();>dont mind this</button>
    </div>
    <p id="demo">
    </p>
  
  <script>
  let playerHealth = 100;
  let shot = false;
  let enemyOut = false;
  let waveActive = false;
  let enemyDmg = 25;
  let playerImmuneTime = 0;
//start
var player;
var TopEdge;
var BottomEdge;
var RightEdge;
var LeftEdge;
let Enemy;
var projectile;
function startGame() {
player = new component(30, 30, "red", 10, 120);
TopEdge = new component(10000, 200, "purple", 0, -200);
BottomEdge = new component(10000, 1, "purple", 0, 500);
RightEdge = new component(1000, 500, "purple", 1150, 0);
LeftEdge = new component(1000, 500, "purple", -1000, 0);
var x = document.getElementById("startRoundBtn");
myGameArea.start();
}
//game area
var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1150;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas,
        document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 10);
    window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    },
    clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function(){
      clearInterval(this.interval);
  }
}
//coords
var pointerX = 0;
var pointerY = 0;
document.onmousemove = function(event) {
    pointerX = event.pageX;
    pointerY = event.pageY;
}
setInterval(pointerCheck, 1);
function pointerCheck() {
  var cursorCoords = 'Cursor Location: '+pointerX+'X, '+pointerY+'Y    health: ' + playerHealth + '          imune time:' +playerImmuneTime
  document.getElementById("demo").innerHTML = cursorCoords;
}
//compenents
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}
//new pos
this.newPos = function() {
    this.X += this.speedX;
    this.Y += this.speedY;
    }
//crashing
  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 = true;
    if ((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright)) {
      crash = false;
    }
    return crash;
  }
}
//updates
function updateGameArea() {
  myGameArea.clear();
  if (playerHealth > 0) {
    player.newPos();
  player.update();
  }
  TopEdge.update();
  BottomEdge.update();
  RightEdge.update();
  LeftEdge.update();
  if (shot == true) {
    projectile.update();
    projectile.newPos();
    projectile.speedX = 0;
    projectile.speedY = 0;
  }
  if (enemyOut == true && playerHealth > 0) {
    if (Enemy.crashWith(player) && playerImmuneTime <= 0) {
      playerHealth = playerHealth -= enemyDmg;
      playerImmuneTime = 50;
    } if (playerImmuneTime >= 0) {
      playerImmuneTime -= 1;
    }
    Enemy.newPos();
    Enemy.update();
    Enemy.speedX = 0;
    Enemy.speedY = 0;
  }
  player.speedX = 0; 
  player.speedY = 0;
//movement
  if (myGameArea.keys[65] ) {player.speedX = -2.5; }
  if (myGameArea.keys[68] ) {player.speedX = 2.5; }
  if (myGameArea.keys[87] ) {player.speedY = -2.5; }
  if (myGameArea.keys[83] ) {player.speedY = 2.5; }

  if (myGameArea.keys[82]) {waveActive = true;}
  
  if (myGameArea.keys[75]) {waveActive = false;}

  if (enemyOut == true && player.x >= Enemy.x) {Enemy.speedX = 1; }
  if (enemyOut == true && player.x <= Enemy.x) {Enemy.speedX = -1; }
  if (enemyOut == true && player.y >= Enemy.y) {Enemy.speedY = 1; }
  if (enemyOut == true && player.y <= Enemy.y) {Enemy.speedY = -1; }
  
  if (waveActive == true && enemyOut == false) {
  createEnemy();
  }
  if (shot == true && pointerX > player.x) {projectile.speedX = 10};
  if (shot == true && pointerX < player.x) {projectile.speedX = -10};
  if (shot == true && pointerY > player.y) {projectile.speedY = 10};
  if (shot == true && pointerY < player.y) {projectile.speedY = -10};
  if (shot == true && enemyOut == true && projectile.crashWith(Enemy)) {
    shot = false;
    enemyOut = false;
    waveActive = false;
  }
//edges of game area
  if (player.crashWith(TopEdge) && myGameArea.keys[87]) {
        player.speedY = 0;
  }
    if (player.crashWith(RightEdge) && myGameArea.keys[68]) {
        player.speedX = 0;
  }
    if (player.crashWith(BottomEdge) && myGameArea.keys[83]) {
        player.speedY = 0;
  }
    if (player.crashWith(LeftEdge) && myGameArea.keys[65]) {
        player.speedX = 0;
  }
  player.x += player.speedX;
  player.y += player.speedY;
  Enemy.x += Enemy.speedX;
  Enemy.y += Enemy.speedY;
  projectile.x += projectile.speedX;
  projectile.y += projectile.speedY;
}
function createEnemy() {
  Enemy = new component(30, 30, "purple",
  Math.floor(Math.random() * 1100),
  Math.floor(Math.random() * 500));
  enemyOut = true;
}

function shoot() {
  let midPlayerX = player.x + 12;
  let midPlayerY = player.y + 12;
  projectile = new component(5, 5, "white", midPlayerX, midPlayerY);
  shot = true;
}
</script>
</body>
</html>

原文

I am making a 2d game with javascript and i can't get the shot to travel in a line directly to the cursor. I want it so when the shoot function is called th make the shot travel to the cursor and not alter the path when the cursor is moved after the shot is already out. Right now it is onnly going diagonal to the player

<!DOCTYPE html>
<html lang="en" onclick="shoot()">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="utf-8">
<style>
canvas {
    border:4px solid #000000;
    background-color: #26af2d;
}
</style>
<body onload="startGame()">
  <div name="buttonDiv">
    <button type="button" id="startRoundBtn" onclick= startWave();>dont mind this</button>
    </div>
    <p id="demo">
    </p>
  
  <script>
  let playerHealth = 100;
  let shot = false;
  let enemyOut = false;
  let waveActive = false;
  let enemyDmg = 25;
  let playerImmuneTime = 0;
//start
var player;
var TopEdge;
var BottomEdge;
var RightEdge;
var LeftEdge;
let Enemy;
var projectile;
function startGame() {
player = new component(30, 30, "red", 10, 120);
TopEdge = new component(10000, 200, "purple", 0, -200);
BottomEdge = new component(10000, 1, "purple", 0, 500);
RightEdge = new component(1000, 500, "purple", 1150, 0);
LeftEdge = new component(1000, 500, "purple", -1000, 0);
var x = document.getElementById("startRoundBtn");
myGameArea.start();
}
//game area
var myGameArea = {
    canvas : document.createElement("canvas"),
    start : function() {
        this.canvas.width = 1150;
        this.canvas.height = 500;
        this.context = this.canvas.getContext("2d");
        document.body.insertBefore(this.canvas,
        document.body.childNodes[0]);
        this.interval = setInterval(updateGameArea, 10);
    window.addEventListener('keydown', function (e) {
            myGameArea.keys = (myGameArea.keys || []);
            myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    window.addEventListener('keyup', function (e) {
      myGameArea.keys[e.keyCode] = (e.type == "keydown");
    })
    },
    clear : function(){
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
    },
    stop : function(){
      clearInterval(this.interval);
  }
}
//coords
var pointerX = 0;
var pointerY = 0;
document.onmousemove = function(event) {
    pointerX = event.pageX;
    pointerY = event.pageY;
}
setInterval(pointerCheck, 1);
function pointerCheck() {
  var cursorCoords = 'Cursor Location: '+pointerX+'X, '+pointerY+'Y    health: ' + playerHealth + '          imune time:' +playerImmuneTime
  document.getElementById("demo").innerHTML = cursorCoords;
}
//compenents
function component(width, height, color, x, y) {
  this.width = width;
  this.height = height;
  this.speedX = 0;
  this.speedY = 0;
  this.x = x;
  this.y = y;
  this.update = function() {
  ctx = myGameArea.context;
  ctx.fillStyle = color;
  ctx.fillRect(this.x, this.y, this.width, this.height);
}
//new pos
this.newPos = function() {
    this.X += this.speedX;
    this.Y += this.speedY;
    }
//crashing
  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 = true;
    if ((mybottom < othertop) ||
    (mytop > otherbottom) ||
    (myright < otherleft) ||
    (myleft > otherright)) {
      crash = false;
    }
    return crash;
  }
}
//updates
function updateGameArea() {
  myGameArea.clear();
  if (playerHealth > 0) {
    player.newPos();
  player.update();
  }
  TopEdge.update();
  BottomEdge.update();
  RightEdge.update();
  LeftEdge.update();
  if (shot == true) {
    projectile.update();
    projectile.newPos();
    projectile.speedX = 0;
    projectile.speedY = 0;
  }
  if (enemyOut == true && playerHealth > 0) {
    if (Enemy.crashWith(player) && playerImmuneTime <= 0) {
      playerHealth = playerHealth -= enemyDmg;
      playerImmuneTime = 50;
    } if (playerImmuneTime >= 0) {
      playerImmuneTime -= 1;
    }
    Enemy.newPos();
    Enemy.update();
    Enemy.speedX = 0;
    Enemy.speedY = 0;
  }
  player.speedX = 0; 
  player.speedY = 0;
//movement
  if (myGameArea.keys[65] ) {player.speedX = -2.5; }
  if (myGameArea.keys[68] ) {player.speedX = 2.5; }
  if (myGameArea.keys[87] ) {player.speedY = -2.5; }
  if (myGameArea.keys[83] ) {player.speedY = 2.5; }

  if (myGameArea.keys[82]) {waveActive = true;}
  
  if (myGameArea.keys[75]) {waveActive = false;}

  if (enemyOut == true && player.x >= Enemy.x) {Enemy.speedX = 1; }
  if (enemyOut == true && player.x <= Enemy.x) {Enemy.speedX = -1; }
  if (enemyOut == true && player.y >= Enemy.y) {Enemy.speedY = 1; }
  if (enemyOut == true && player.y <= Enemy.y) {Enemy.speedY = -1; }
  
  if (waveActive == true && enemyOut == false) {
  createEnemy();
  }
  if (shot == true && pointerX > player.x) {projectile.speedX = 10};
  if (shot == true && pointerX < player.x) {projectile.speedX = -10};
  if (shot == true && pointerY > player.y) {projectile.speedY = 10};
  if (shot == true && pointerY < player.y) {projectile.speedY = -10};
  if (shot == true && enemyOut == true && projectile.crashWith(Enemy)) {
    shot = false;
    enemyOut = false;
    waveActive = false;
  }
//edges of game area
  if (player.crashWith(TopEdge) && myGameArea.keys[87]) {
        player.speedY = 0;
  }
    if (player.crashWith(RightEdge) && myGameArea.keys[68]) {
        player.speedX = 0;
  }
    if (player.crashWith(BottomEdge) && myGameArea.keys[83]) {
        player.speedY = 0;
  }
    if (player.crashWith(LeftEdge) && myGameArea.keys[65]) {
        player.speedX = 0;
  }
  player.x += player.speedX;
  player.y += player.speedY;
  Enemy.x += Enemy.speedX;
  Enemy.y += Enemy.speedY;
  projectile.x += projectile.speedX;
  projectile.y += projectile.speedY;
}
function createEnemy() {
  Enemy = new component(30, 30, "purple",
  Math.floor(Math.random() * 1100),
  Math.floor(Math.random() * 500));
  enemyOut = true;
}

function shoot() {
  let midPlayerX = player.x + 12;
  let midPlayerY = player.y + 12;
  projectile = new component(5, 5, "white", midPlayerX, midPlayerY);
  shot = true;
}
</script>
</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

遮了一弯 2025-01-22 02:20:48

您需要“冻结”射击和到达目的地之间的 pointerX 和 pointerY 值（否则这些值将在鼠标移动时发生变化）。

当射弹发射时，您已经有了 shot=true ，因此可以在添加到 mousemove 事件侦听器的条件中读取它。这将在射弹发射时冻结指针：


document.onmousemove = function (event) {
  if (!shot) {
    pointerX = event.pageX
    pointerY = event.pageY
  } // prevent updates to pointers when shot is fired;
}

但是当射弹与存储的 碰撞时，您需要通过将 shot 设置为 false 来重新激活侦听器>pointerX 和 pointerY 值。

you need to 'freeze' the pointerX and pointerY values between the shot being fired and reaching its destination (otherwise those values will change on mousemove).

You already have shot=true when the projectile is launched so it can be read in a conditional you add to your mousemove event listener. That will take care of freezing the pointers when the projectile is fired :


document.onmousemove = function (event) {
  if (!shot) {
    pointerX = event.pageX
    pointerY = event.pageY
  } // prevent updates to pointers when shot is fired;
}

but you will need to reactivate the listener by setting shot to false when the projectile colides with the stored pointerX and pointerY values.

回复 原文
~没有更多了~

关于作者

第七度阳光i

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

15077827184

文章 0 评论 0

遗失的美好

文章 0 评论 0

离不开的别离

文章 0 评论 0

3857621955

文章 0 评论 0

懒猫

文章 0 评论 0

洋洋洒洒

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文