在画布中将播放器对象移向光标方向(slither.io样式)

Question

我也发现了类似的问题，但不完全正确。我可以用鼠标点击就可以做到这一点，但我不知道如何处理‘摩丝表情’事件。

我的现状例如，JSFiddle

我正在努力使它的屏幕被翻译成鼠标，同时移动我的播放器，而不仅仅是在摩丝表情上。但我不知道还能怎么做。

我有一个player对象，当鼠标被移动时，它会更新。

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

    this.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x,this.y,30,0,Math.PI * 2, false);
        ctx.fillStyle = 'black';
        ctx.fill();
    }

    this.update = function () {
        this.x = playerX;
        this.y = playerY;
        this.draw();
    }
}

这个更新函数不允许人为的移动，但是当我尝试实现某些东西时，它最终会产生大量的滞后--显然，我采取了错误的方法。

目前，我只是在检测鼠标相对于屏幕中心的位置。

document.addEventListener('mousemove', (event) => {
    moveWorld(event);
});    

function moveWorld(e){
    var x = e.clientX;
    var y = e.clientY;
    // playerSpeed is 3
    var centerX = window.innerWidth / 2
    var centerY = window.innerHeight / 2
    // move south
    if (y < centerY) {
        ctx.translate (0,playerSpeed);
        playerY -= playerSpeed;        
    }
    // move e
    if (x < centerX) {
        ctx.translate (playerSpeed,0);
        playerX -=playerSpeed;
    } 
    // move north
    if (y > centerY) {
        ctx.translate (0,-playerSpeed);
        playerY += playerSpeed;
    }
    // move west
    if (x > centerX) {
        ctx.translate (-playerSpeed,0);
        playerX +=playerSpeed;
    }
    drawWorld();
}

最后把一切都呈现出来。

function drawWorld(){
    requestAnimationFrame(drawWorld); // refresh world

    //  CLEAR
    ctx.clearRect(0,0,innerHeight,innerHeight);

    // world
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillRect(110, 30, 50, 50);

    // player
    player.update();

}
document.addEventListener('mousemove', (event) => {
    moveWorld(event);
});    

drawWorld();

Answer 1

1. 假设鼠标在屏幕中心
2. 在mousemove上，更新鼠标坐标。
3. 使用最后已知的鼠标坐标在循环中运行moveWorld。

​

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var playerX = canvas.width / 2;
var playerY = canvas.height / 2;

$(window).on("resize", function () {
    $("#login,#game,#canvas").width( $(this).width());
    $("#login,#game,#canvas").height( $(this).height());
    playerX = canvas.width / 2;
    playerY = canvas.height / 2;
}).resize();

var centerX = canvas.width / 2;
var centerY = canvas.height / 2;
var playerSpeed = 3;

var mouseX = centerX;
var mouseY = centerY;

function mouseUpdate(e) {
    mouseX = e.clientX;
    mouseY = e.clientY;
}

function moveWorld(){
    var x = mouseX;
    var y = mouseY;
    var centerX = window.innerWidth / 2
    var centerY = window.innerHeight / 2
    // move south
    if (y < centerY) {
        ctx.translate (0,playerSpeed);
        playerY -= playerSpeed;        
    }
    // move e
    if (x < centerX) {
        ctx.translate (playerSpeed,0);
        playerX -=playerSpeed;
    } 
    // move north
    if (y > centerY) {
        ctx.translate (0,-playerSpeed);
        playerY += playerSpeed;
    }
    // move west
    if (x > centerX) {
        ctx.translate (-playerSpeed,0);
        playerX +=playerSpeed;
    }
    drawWorld();
    requestAnimationFrame(moveWorld);
}

var player = new Player (playerX, playerY);
var counter = 0;


function drawWorld() {
    //  CLEAR
    ctx.clearRect(0,0,innerHeight,innerHeight);
    
    // world
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillRect(110, 30, 50, 50);

    // player
    player.update();

}
document.addEventListener('mousemove', (event) => {
    mouseUpdate(event);
});    

requestAnimationFrame(moveWorld);

function Player (x,y) {
    this.x = x;
    this.y = y;
    
    this.draw = function () {
        ctx.beginPath();
        ctx.arc(this.x,this.y,30,0,Math.PI * 2, false);
        ctx.fillStyle = 'black';
        ctx.fill();
    }

    this.update = function () {
        this.x = playerX;
        this.y = playerY;
        this.draw();
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="canvas"></canvas>

​

Answer 2

更新的

在您试图开发Slither.io系统时，我假设您正在寻找由可乘坐吉萨b的月租车。制造的Slither.io克隆

您是否试图实现以下目标？位移器3:指针移动事件

​

var config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);
var player = null;

function preload ()
{
    this.load.spritesheet('balls', 'https://labs.phaser.io/assets/sprites/balls.png', { frameWidth: 17, frameHeight: 17 });
}

function create ()
{
 player = this.add.image(0,0, 'balls', Phaser.Math.Between(0, 5));

    this.input.on('pointermove', function (pointer) {

        player.x = pointer.x;
        player.y = pointer.y;

    }, this);
}

<script src="//cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser.min.js"></script>
<div id="phaser-example" style="overflow: hidden;"></div>

​

Answer 3

做这种事情的正确方法是让浏览器使用window.requestAnimationFrame来处理“框架滴答”。

这是我的小提琴：

https://jsfiddle.net/r5e2ht1v/4/

var mouseX, mouseY; 

document.addEventListener('mousemove', (event) => {
    mouseX = event.clientX; 
  mouseY = event.clientY; 
});    

function drawWorld(){

    //  CLEAR
    ctx.clearRect(0,0,innerHeight,innerHeight);

    // world
    ctx.fillStyle = 'red';
    ctx.fillRect(10, 10, 50, 50);
    ctx.fillRect(110, 30, 50, 50);

    // player
    player.update();
    moveWorld(); 

    window.requestAnimationFrame(drawWorld);

}

window.requestAnimationFrame(drawWorld); 

您可以在这里使用更多的性能优化：

画布