Javascript 如何在画布上设置限制角色移动的边界？_Javascript_Html

Javascript 如何在画布上设置限制角色移动的边界？

javascript html

Javascript 如何在画布上设置限制角色移动的边界？,javascript,html,Javascript,Html,在我的画布上，我希望我的角色四处移动。他们四处走动，但他们可以在画布上自由地去任何他们想去的地方。我想在他们的道路上设置障碍物，作为一个大的黑色方块，以便我的角色能够绕过它。我在网上搜索了一个解决方案，但没有什么可以帮助我（如果你想让我进一步澄清我的问题，请让我-我现在想不出还有什么需要补充的）以下是我目前的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset=

在我的画布上，我希望我的角色四处移动。他们四处走动，但他们可以在画布上自由地去任何他们想去的地方。我想在他们的道路上设置障碍物，作为一个大的黑色方块，以便我的角色能够绕过它。我在网上搜索了一个解决方案，但没有什么可以帮助我

（如果你想让我进一步澄清我的问题，请让我-我现在想不出还有什么需要补充的）

以下是我目前的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="ctx" width="1773" height="990" style="border:1px solid #000000;"><div style="width: 100px; height: 100px; border: 10px solid black;"></div></canvas>
 
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
    <script>
        var ctx = document.getElementById("ctx").getContext("2d");
        ctx.font = '30px Arial';
     
        var socket = io();
     
        socket.on('newPositions',function(data){
            ctx.clearRect(0,0,500,500);
            for(var i = 0 ; i < data.length; i++)
                ctx.fillText(data[i].number,data[i].x,data[i].y);       
        });
     
        document.onkeydown = function(event){
            if(event.keyCode === 39)    //d
                socket.emit('keyPress',{inputId:'right',state:true});
            else if(event.keyCode === 40)   //s
                socket.emit('keyPress',{inputId:'down',state:true});
            else if(event.keyCode === 37) //a
                socket.emit('keyPress',{inputId:'left',state:true});
            else if(event.keyCode === 38) // w
                socket.emit('keyPress',{inputId:'up',state:true});
     
        }
        document.onkeyup = function(event){
            if(event.keyCode === 39)    //d
                socket.emit('keyPress',{inputId:'right',state:false});
            else if(event.keyCode === 40)   //s
                socket.emit('keyPress',{inputId:'down',state:false});
            else if(event.keyCode === 37) //a
                socket.emit('keyPress',{inputId:'left',state:false});
            else if(event.keyCode === 38) // w
                socket.emit('keyPress',{inputId:'up',state:false});
        }
     
    </script>
</body>
</html>

谢谢

var express = require('express');
var app = express();
var serv = require('http').Server(app);
 
app.get('/',function(req, res) {
    res.sendFile(__dirname + '/client/index.html');
});
app.use('/client',express.static(__dirname + '/client'));
 
serv.listen(2000)
console.log("Server started.");
 
var SOCKET_LIST = {};
var PLAYER_LIST = {};

var Player = function(id) {
    var self = {
        x:250,
        y:250,
        id:id,
        number: "" + Math.floor(10 * Math.random()),
        pressingRight:false,
        pressingLeft:false,
        pressingUp:false,
        pressingDown:false,
        maxSpd:10,
    }
    self.updatePosition = function(){
        if(self.pressingRight)
            self.x += self.maxSpd;
        if(self.pressingLeft)
            self.x -= self.maxSpd;
        if(self.pressingUp)
            self.y -= self.maxSpd;
        if(self.pressingDown)
            self.y += self.maxSpd;
    }
    return self;
}
 
var io = require('socket.io')(serv,{});
io.sockets.on('connection', function(socket){
    socket.id = Math.random();
    SOCKET_LIST[socket.id] = socket;

    var player = Player(socket.id);
    PLAYER_LIST[socket.id] = player
 
    socket.on('disconnect',function(){
        delete SOCKET_LIST[socket.id];
        delete PLAYER_LIST[socket.id];
    });

    socket.on('keyPress',function(data){
        if(data.inputId === 'left')
            player.pressingLeft = data.state;
        else if(data.inputId === 'right')
            player.pressingRight = data.state;
        else if(data.inputId === 'up')
            player.pressingUp = data.state;
        else if(data.inputId === 'down')
            player.pressingDown = data.state;
    });
 
});
 
setInterval(function(){
    var pack = [];
    for(var i in PLAYER_LIST){
        var player = PLAYER_LIST[i];
        player.updatePosition();
        pack.push({
            x:player.x,
            y:player.y,
            number:player.number
        });     
    }
    for(var i in SOCKET_LIST){
        var socket = SOCKET_LIST[i];
        socket.emit('newPositions',pack);
    }
 
 
 
 
},1000/25);