javascript - 如何获取在 Canvas 上移动的图像的 X 和 Y 坐标

Question

当我在 Canvas 上移动 player.hero 的图像时，我想要一个变量来保存英雄当前的 x 和 y 位置。所以我可以让僵尸图像向英雄的当前位置移动。谢谢，如果到目前为止我的代码很糟糕，请提出修改建议，谢谢。

(function() {

    var canvas, context, width, height, speed = 8;    
    var interval_id;
    var zombies = [];
    var bullets = [];

    var moveLeft = false;
    var moveRight = false;
    var moveUp = false;
    var moveDown = false;

    var player = {
        x : 0,
        y : 0,
        width : 35,
        height : 60,
        hero : new Image(),
    };

    for (var i = 0; i < 10; i += 1){
        var zombie = {
            x : 10,
            y : 10,
            undead : new Image(),
            targetToGox : 0,
            targetToGoy : 0,
         };
         zombies.push(zombie);
    }
    var mouse = {
        x : 0,
        y : 0,
    }

    document.addEventListener('DOMContentLoaded', init, false);

    function init() {    
        canvas = document.querySelector('canvas');
        context = canvas.getContext('2d');
        width = canvas.width;
        height = canvas.height;
        player.x = width / 2 - 18;
        player.y = height / 2 - 30;
        player.hero.src = 'hero.png';
        zombie.undead.src = 'zombie.png';
        //context.drawImage(player.hero, player.x, player.y);  
        window.addEventListener("keydown", activate,false);
        window.addEventListener("keyup",deactivate,false);
        //window.addEventListener("mouseover", drawImagePointingAt, false);
        interval_player = window.setInterval(drawPlayer, 33);
    }

    function drawPlayer() {
        context.clearRect(0 ,0 ,width, height);
        context.drawImage(player.hero,player.x, player.y);
        //******** need zombie to go to position of player.hero******///
        context.drawImage(zombie.undead (somthing for x and y coordinats of player.hero);
        // stops player moveing beyond the bounds of the canvas
        if (player.x + player.width >= width) {
            moveRight = false
        }
        if (player.y + player.height >= height) {
            moveDown = false
        }
        if (player.x  <= 0) {
            moveLeft = false
        }
        if (player.y <= 0) {
            moveUp = false
        }     
        if (moveRight) {
            player.x  += speed;
        }
        if (moveUp) {
            player.y -= speed;
        }
        if (moveDown) {
            player.y += speed;
        }
        if (moveLeft){
            player.x -= speed;
        }

    function activate(event) {
        var keyCode = event.keyCode;
            if (keyCode === 87){
                moveUp = true;
            }
            else if (keyCode === 68){
                moveRight = true;
            }
            else if (keyCode === 83){
                moveDown = true;
            }
            else if (keyCode === 65){
                moveLeft = true;
            }

    }
    function deactivate(event) {
        var keyCode = event.keyCode;
            if (keyCode === 87){
                moveUp = false;}
            else if (keyCode === 68){
                moveRight = false;}
            else if (keyCode === 83){
                moveDown = false;}
            else if (keyCode === 65){
                moveLeft = false;}
    }
    function getRandomNumber(min, max) {
        return Math.round(Math.random() * (max - min)) + min;
    }
    function stop() {
        clearInterval(interval_player);

    }
})();

Answer 1

这是一个相当长的文字墙，讲述了为什么我认为重构代码而不是 “...获取我在屏幕上移动的图像的 X 和 Y 坐标”。

这篇文章的结尾包含一个脚本，它试图展示您可以如何去做。

您询问了代码的质量。对于新程序员来说，您的代码并不很糟糕，但是随着您的代码库变大，您陷入一些经典陷阱将会很痛苦。

这方面的一个例子可能是为您的玩家在按键后应该移动的每个可能方向保留变量(在单独的函数中操作和使用)。这样做的问题是，当您决定更改此系统的任何 方面时，它就会崩溃。

相反，考虑让一个对象代表玩家，它包含它自己的内部逻辑，通过改变它自己的坐标来“移动”。

我怎么强调这个想法都不为过——优秀的黑客总是给自己一个工作的空间。你不应该(例如)让Player直接操纵游戏绘图例程。这是一个如此普遍的概念，以至于在软件工程中实际上有一些词来描述这种组织原则的不同方面(像“Encapsulation”或“Loose coupling”或“Law of Demeter”这样的词)。这很重要。

这引出了另一点:全局变量。

这是一个更难的问题，因为所有程序员如果对它过于挑剔(特别是如果他们从事的是低级工作)，最终都会变成伪君子。尽管如此，最好还是合并您拥有 的任何全局变量，并可能创建函数作为它们与“外部世界”的接口(interface)。

在您的游戏中，这意味着像 moveLeft 一样移动到一个“游戏循环”中，该循环只检查所有“对象”坐标，清除屏幕并适本地绘制这些对象。

这里的另一个重要想法是“重复”功能应该共享一个方法。在您的情况下，这将导致 Player 和 Zombie 成为某个更抽象的类别的实例，我将其命名为 GameObject。这允许您为 GameObject 编写一次所有主要功能，并在 Player 和 Zombie 中“继承”它们的功能(有许多 other , perhaps even better , 无需原型(prototype)或继承即可实现的方法)

考虑到所有这一切，我试着花 20 分钟来制作一些东西，希望它能给你一些东西来工作。如果这与您的目的完全无关，至少您可以在自己的腰包下进行另一轮可能毫无意义的互联网自负。

我的代码的“继承”是以一种非常简单的 Javascript 风格完成的，尽管事实上有不少于 12 种“新的和改进的”方法来在 JS 代码之间共享实现细节，每一种都有很大的不同他们对原型(prototype)或面向对象编程原则的坚持程度。

我不希望涵盖 Stamps、jSL，甚至 Javascript 现在臭名昭著的 new 'class' keyword ，所以我建议您阅读这些内容，也许自己将它们用于有利可图的用途，但现在我坚持使用基础知识。

const ZOMBIE_COUNT = 10

function GameState() {
    this.player  = null;
    this.enemies = []
}
var Game = new GameState() // our global game state

// An abstract 'game object' or character
function GameObject({x, y, image}) {
    this.x = x
    this.y = y
    this.image = image
}
GameObject.prototype.draw = function() {
    Game.ctx.fillStyle = this.color
    Game.ctx.fillRect(this.x, this.y, 10, 10)
}
GameObject.prototype.moveLeft =  function(n) { if(this.x > 0) this.x -= n }
GameObject.prototype.moveRight = function(n) { if(this.x < Game.width) this.x += n }
GameObject.prototype.moveDown =  function(n) { if(this.y < Game.height) this.y += n}
GameObject.prototype.moveUp =    function(n) { if(this.y > 0) this.y -= n }

function Player({x, y, width}) {
    GameObject.call(this, {x, y}) // setup x, y & image
    this.color = 'red'
}
Player.prototype = Object.create(GameObject.prototype, {})

function Zombie({x, y, target}) {
    GameObject.call(this, {x, y}) // setup x, y & image
    this.target = target // target contains the player
    this.color = 'blue'
}
Zombie.prototype = Object.create(GameObject.prototype, {})
Zombie.prototype.moveToPlayer = function() {
    let {x, y} = Game.player
    // very basic 'movement' logic
    if (this.x < x) {
        this.moveRight(1/4)
    } else if (this.x > x) {
        this.moveLeft(1/4)
    }

    if (this.y > y) {
        this.moveUp(1/4)
    } else if (this.y < y) {
        this.moveDown(1/4)
    }
}


function init() {
    var canvas = document.getElementById('canvas')
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d')
    } else {
        console.log("No canvas")
        return -1
    }

    let {width, height} = canvas

    // Setup our game object
    Game.width = width
    Game.height = height
    Game.ctx = ctx
    // Create our player in the middle
    Game.player = new Player({x: width / 2, y: height / 2})

    // Create our enemies
    for(let i = 0; i < ZOMBIE_COUNT; i++) {
        Game.enemies.push(new Zombie({x: Math.random() * width  | 0, // truncate our value
                                      y: Math.random() * height | 0}))
    }

    game_loop()
}

function game_loop() {
    window.requestAnimationFrame(game_loop)
    Game.ctx.fillStyle = 'white'
    Game.ctx.fillRect(0, 0, Game.width, Game.height);
    Game.player.draw()

    Game.enemies.map(enemy => {
        enemy.moveToPlayer()
        enemy.draw()
    })
}

function process_key(ev) {
    let speed = 3
    let key = ev.keyCode
    if (key === 68)
        Game.player.moveRight(speed)
    if (key === 87)
        Game.player.moveUp(speed)
    if (key === 65)
        Game.player.moveLeft(speed)
    if (key === 83)
        Game.player.moveDown(speed)
}

window.addEventListener('keydown', process_key, false);

init()

canvas { border: 3px solid #333; }

<canvas id="canvas" width="400" height="400"></canvas>