如何在Node.js中的循环中为背景设置动画

Question

Im making a multiplayer endless runner game and want to make the background move down in a loop with random obstacles in my way. So far I was able to make the scene with controls for the player, have set up a multiplayer aspect, and a sign in. However, I am not able to figure out how to set the background in a loop or add obstacles moving towards the player. Heres the code: App2.JS:

                    var mongojs = require("mongojs");
            var db = mongojs('localhost:27017/myGame', ['account','progress']);

            var express = require('express');
            var app = express();
            var serv = require('http').Server(app);

            app.get('/',function(req, res) {
                res.sendFile(__dirname + '/client/index2.html');
            });
            app.use('/client',express.static(__dirname + '/client'));

            serv.listen(2000);
            console.log("Server started.");

            var SOCKET_LIST = {};

            var Entity = function(){
                var self = {
                    x:250,
                    y:250,
                    spdX:0,
                    spdY:0,
                    id:"",
                }
                self.update = function(){
                    self.updatePosition();
                }
                self.updatePosition = function(){
                    self.x += self.spdX;
                    self.y += self.spdY;
                }
                self.getDistance = function(pt){
                    return Math.sqrt(Math.pow(self.x-pt.x,2) + Math.pow(self.y-pt.y,2));
                }
                return self;
            }

            var Player = function(id){
                var self = Entity();
                self.id = id;
                self.number = "" + Math.floor(10 * Math.random());
                self.pressingRight = false;
                self.pressingLeft = false;
                self.pressingUp = false;
                self.pressingDown = false;
                self.pressingAttack = false;
                self.mouseAngle = 0;
                self.maxSpd = 25;
                self.hp = 10;
                self.hpMax = 10;
                self.score = 0;

                var super_update = self.update;
                self.update = function(){
                    self.updateSpd();
                    super_update();

                    if(self.pressingAttack){
                        self.shootBullet(self.mouseAngle);
                    }
                }
                self.shootBullet = function(angle){
                    var b = Bullet(self.id,angle);
                    b.x = self.x;
                    b.y = self.y;
                }

                self.updateSpd = function(){
                    if(self.pressingRight && (self.x + 30) < 500)
                        self.spdX = self.maxSpd;
                    else if(self.pressingLeft && self.x > 0)
                        self.spdX = -self.maxSpd;
                    else
                        self.spdX = 0;

                    if(self.pressingUp)
                        self.spdY = 0;
                    else if(self.pressingDown)
                        self.spdY = 0;
                    else
                        self.spdY = 0;      
                }

                self.getInitPack = function(){
                    return {
                        id:self.id,
                        x:self.x,
                        y:self.y,   
                        number:self.number, 
                        hp:self.hp,
                        hpMax:self.hpMax,
                        score:self.score,
                    };      
                }
                self.getUpdatePack = function(){
                    return {
                        id:self.id,
                        x:self.x,
                        y:self.y,
                        hp:self.hp,
                        score:self.score,
                    }   
                }

                Player.list[id] = self;

                initPack.player.push(self.getInitPack());
                return self;
            }
            Player.list = {};
            Player.onConnect = function(socket){
                var player = Player(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;
                    else if(data.inputId === 'attack')
                        player.pressingAttack = data.state;
                    else if(data.inputId === 'mouseAngle')
                        player.mouseAngle = data.state;
                });

                socket.emit('init',{
                    selfId:socket.id,
                    player:Player.getAllInitPack(),
                    bullet:Bullet.getAllInitPack(),
                })
            }
            Player.getAllInitPack = function(){
                var players = [];
                for(var i in Player.list)
                    players.push(Player.list[i].getInitPack());
                return players;
            }

            Player.onDisconnect = function(socket){
                delete Player.list[socket.id];
                removePack.player.push(socket.id);
            }
            Player.update = function(){
                var pack = [];
                for(var i in Player.list){
                    var player = Player.list[i];
                    player.update();
                    pack.push(player.getUpdatePack());      
                }
                return pack;
            }


            var Bullet = function(parent,angle){
                var self = Entity();
                self.id = Math.random();
                self.spdX = Math.cos(angle/180*Math.PI) * 10;
                self.spdY = Math.sin(angle/180*Math.PI) * 10;
                self.parent = parent;
                self.timer = 0;
                self.toRemove = false;
                var super_update = self.update;
                self.update = function(){
                    if(self.timer++ > 100)
                        self.toRemove = true;
                    super_update();

                    for(var i in Player.list){
                        var p = Player.list[i];
                        if(self.getDistance(p) < 32 && self.parent !== p.id){
                            p.hp -= 1;

                            if(p.hp <= 0){
                                var shooter = Player.list[self.parent];
                                if(shooter)
                                    shooter.score += 1;
                                p.hp = p.hpMax;
                                p.x = Math.random() * 500;
                                p.y = Math.random() * 500;                  
                            }
                            self.toRemove = true;
                        }
                    }
                }
                self.getInitPack = function(){
                    return {
                        id:self.id,
                        x:self.x,
                        y:self.y,       
                    };
                }
                self.getUpdatePack = function(){
                    return {
                        id:self.id,
                        x:self.x,
                        y:self.y,       
                    };
                }

                Bullet.list[self.id] = self;
                initPack.bullet.push(self.getInitPack());
                return self;
            }
            Bullet.list = {};

            Bullet.update = function(){
                var pack = [];
                for(var i in Bullet.list){
                    var bullet = Bullet.list[i];
                    bullet.update();
                    if(bullet.toRemove){
                        delete Bullet.list[i];
                        removePack.bullet.push(bullet.id);
                    } else
                        pack.push(bullet.getUpdatePack());      
                }
                return pack;
            }

            Bullet.getAllInitPack = function(){
                var bullets = [];
                for(var i in Bullet.list)
                    bullets.push(Bullet.list[i].getInitPack());
                return bullets;
            }

            var DEBUG = true;

            var isValidPassword = function(data,cb){
                db.account.find({username:data.username,password:data.password},function(err,res){
                    if(res.length > 0)
                        cb(true);
                    else
                        cb(false);
                });
            }
            var isUsernameTaken = function(data,cb){
                db.account.find({username:data.username},function(err,res){
                    if(res.length > 0)
                        cb(true);
                    else
                        cb(false);
                });
            }
            var addUser = function(data,cb){
                db.account.insert({username:data.username,password:data.password},function(err){
                    cb();
                });
            }

            var io = require('socket.io')(serv,{});
            io.sockets.on('connection', function(socket){
                socket.id = Math.random();
                SOCKET_LIST[socket.id] = socket;

                socket.on('signIn',function(data){
                    isValidPassword(data,function(res){
                        if(res){
                            Player.onConnect(socket);
                            socket.emit('signInResponse',{success:true});
                        } else {
                            socket.emit('signInResponse',{success:false});          
                        }
                    });
                });
                socket.on('signUp',function(data){
                    isUsernameTaken(data,function(res){
                        if(res){
                            socket.emit('signUpResponse',{success:false});      
                        } else {
                            addUser(data,function(){
                                socket.emit('signUpResponse',{success:true});                   
                            });
                        }
                    });     
                });


                socket.on('disconnect',function(){
                    delete SOCKET_LIST[socket.id];
                    Player.onDisconnect(socket);
                });
                socket.on('sendMsgToServer',function(data){
                    var playerName = ("" + socket.id).slice(2,7);
                    for(var i in SOCKET_LIST){
                        SOCKET_LIST[i].emit('addToChat',playerName + ': ' + data);
                    }
                });

                socket.on('evalServer',function(data){
                    if(!DEBUG)
                        return;
                    var res = eval(data);
                    socket.emit('evalAnswer',res);      
                });



            });

            var initPack = {player:[],bullet:[]};
            var removePack = {player:[],bullet:[]};


            setInterval(function(){
                var pack = {
                    player:Player.update(),
                    bullet:Bullet.update(),
                }

                for(var i in SOCKET_LIST){
                    var socket = SOCKET_LIST[i];
                    socket.emit('init',initPack);
                    socket.emit('update',pack);
                    socket.emit('remove',removePack);
                }
                initPack.player = [];
                initPack.bullet = [];
                removePack.player = [];
                removePack.bullet = [];

            },1000/25);

indexCars2.html:

                <div id="signDiv">
                Username: <input id="signDiv-username" type="text"></input><br>
                Password: <input id="signDiv-password" type="password"></input>
                <button id="signDiv-signIn">Sign In</button>
                <button id="signDiv-signUp">Sign Up</button>
            </div>
            <div id="animate" 
                 style = "position: relative;"
                 style = "border: 1px solid green;"
                 style = "background: yellow; "
                 style = "width: 100;"
                 style = "height: 100;"
                 style = "z-index: 5;">
                Sample
            </div>

            <div id="gameDiv" style="display:none;">
                <canvas id="ctx" width="500" height="500" style="border:1px solid #000000;"></canvas>

                <div id="chat-text" style="width:500px;height:100px;overflow-y:scroll">
                    <div>Hello!</div>
                </div>

                <form id="chat-form">
                    <input id="chat-input" type="text" style="width:500px"></input>
                </form>
            </div>

            <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script>
            <script>
                $(document).ready(function(e) {
                var width = "+=" + $(document).width();
                $("#animate").animate({
                left: width
              }, 5000, function() {
                // Animation complete.
              });
            });</script>
            <script>
            //  var WIDTH = 500;
            //  var HEIGHT = 500;
                var socket = io();

                //sign
                var signDiv = document.getElementById('signDiv');
                var signDivUsername = document.getElementById('signDiv-username');
                var signDivSignIn = document.getElementById('signDiv-signIn');
                var signDivSignUp = document.getElementById('signDiv-signUp');
                var signDivPassword = document.getElementById('signDiv-password');


                signDivSignIn.onclick = function(){
                    socket.emit('signIn',{username:signDivUsername.value,password:signDivPassword.value});
                }
                signDivSignUp.onclick = function(){
                    socket.emit('signUp',{username:signDivUsername.value,password:signDivPassword.value});
                }
                socket.on('signInResponse',function(data){
                    if(data.success){
                        signDiv.style.display = 'none';
                        gameDiv.style.display = 'inline-block';
                    } else
                        alert("Sign in unsuccessul.");
                });
                socket.on('signUpResponse',function(data){
                    if(data.success){
                        alert("Sign up successul.");
                    } else
                        alert("Sign up unsuccessul.");
                });

                //chat
                var chatText = document.getElementById('chat-text');
                var chatInput = document.getElementById('chat-input');
                var chatForm = document.getElementById('chat-form');

                socket.on('addToChat',function(data){
                    chatText.innerHTML += '<div>' + data + '</div>';
                });
                socket.on('evalAnswer',function(data){
                    console.log(data);
                });


                chatForm.onsubmit = function(e){
                    e.preventDefault();
                    if(chatInput.value[0] === '/')
                        socket.emit('evalServer',chatInput.value.slice(1));
                    else
                        socket.emit('sendMsgToServer',chatInput.value);
                    chatInput.value = '';       
                }

                //game
                var Img = {};
                Img.player = new Image();
                Img.player.src = '/client/img/lamboS.png';
                Img.bullet = new Image();
                Img.bullet.src = '/client/img/bullet.png';
                Img.map = new Image();
                Img.map.src = '/client/img/road.png';

                var ctx = document.getElementById("ctx").getContext("2d");
                ctx.font = '30px Arial';

                var Player = function(initPack){
                    var self = {};
                    self.id = initPack.id;
                    self.number = initPack.number;
                    self.x = initPack.x;
                    self.y = initPack.y;
                    self.hp = initPack.hp;
                    self.hpMax = initPack.hpMax;
                    self.score = initPack.score;

                    self.draw = function(){ 
            //          var x = self.x - Player.list[selfId].x + WIDTH/2;
            //          var y = self.y - Player.list[selfId].y + HEIGHT/2;

                        var hpWidth = 30 * self.hp / self.hpMax;
                        ctx.fillStyle = 'red';
                        ctx.fillRect(self.x - hpWidth/2,self.y - 40,hpWidth,4);

                        var width = Img.player.width;
                        var height = Img.player.height;

                        ctx.drawImage(Img.player,
                            0,0,Img.player.width,Img.player.height,
                            self.x-width/2,self.y-height/2,width,height);

                        //ctx.fillText(self.score,self.x,self.y-60);
                    }

                    Player.list[self.id] = self;


                    return self;
                }
                Player.list = {};


                var Bullet = function(initPack){
                    var self = {};
                    self.id = initPack.id;
                    self.x = initPack.x;
                    self.y = initPack.y;

                    self.draw = function(){         
                        var width = Img.bullet.width/2;
                        var height = Img.bullet.height/2;

            //          var x = self.x - Player.list[selfId].x + WIDTH/2;
            //          var y = self.y - Player.list[selfId].y + HEIGHT/2;

                        ctx.drawImage(Img.bullet,
                            0,0,Img.bullet.width,Img.bullet.height,
                            self.x-width/2,self.y-height/2,width,height);
                    }

                    Bullet.list[self.id] = self;        
                    return self;
                }
                Bullet.list = {};

                var selfId = null;

                socket.on('init',function(data){    
                    if(data.selfId)
                        selfId = data.selfId;
                    //{ player : [{id:123,number:'1',x:0,y:0},{id:1,number:'2',x:0,y:0}], bullet: []}
                    for(var i = 0 ; i < data.player.length; i++){
                        new Player(data.player[i]);
                    }
                    for(var i = 0 ; i < data.bullet.length; i++){
                        new Bullet(data.bullet[i]);
                    }
                });

                socket.on('update',function(data){
                    //{ player : [{id:123,x:0,y:0},{id:1,x:0,y:0}], bullet: []}
                    for(var i = 0 ; i < data.player.length; i++){
                        var pack = data.player[i];
                        var p = Player.list[pack.id];
                        if(p){
                            if(pack.x !== undefined)
                                p.x = pack.x;
                            if(pack.y !== undefined)
                                p.y = pack.y;
                            if(pack.hp !== undefined)
                                p.hp = pack.hp;
                            if(pack.score !== undefined)
                                p.score = pack.score;
                        }
                    }
                    for(var i = 0 ; i < data.bullet.length; i++){
                        var pack = data.bullet[i];
                        var b = Bullet.list[data.bullet[i].id];
                        if(b){
                            if(pack.x !== undefined)
                                b.x = pack.x;
                            if(pack.y !== undefined)
                                b.y = pack.y;
                        }
                    }

                    for(var i = 0 ; i < data.bullet.length; i++){
                        var pack = data.bullet[i];
                        var b = Bullet.list[data.bullet[i].id];
                        if(b){
                            if(pack.x !== undefined)
                                b.x = pack.x;
                            if(pack.y !== undefined)
                                b.y = pack.y;
                        }
                    }
                });

                socket.on('remove',function(data){
                    //{player:[12323],bullet:[12323,123123]}
                    for(var i = 0 ; i < data.player.length; i++){
                        delete Player.list[data.player[i]];
                    }
                    for(var i = 0 ; i < data.bullet.length; i++){
                        delete Bullet.list[data.bullet[i]];
                    }
                });

                setInterval(function(){
                    if(!selfId)
                        return;
                    ctx.clearRect(0,0,500,500);
                    drawMap();
                    drawScore();
                    for(var i in Player.list)
                        Player.list[i].draw();
                    for(var i in Bullet.list)
                        Bullet.list[i].draw();
                },40);

                var drawMap = function(){
                    var x = 0;
                    var y = 0;
            //      var x = WIDTH/2 - Player.list[selfId].x;
            //      var y = HEIGHT/2 - Player.list[selfId].y;
                    ctx.drawImage(Img.map, x, y);
            //        for(x = 0; x < 5; x += 100){
            ////            ctx.drawImage(Img.map, x, y);    
            //        }
                }

                var drawScore = function(){
                    ctx.fillStyle = 'red';
                    ctx.fillText(Player.list[selfId].score,10,30);
                }

                document.onkeydown = function(event){
                    if(event.keyCode === 68)    //d
                        socket.emit('keyPress',{inputId:'right',state:true});
                    else if(event.keyCode === 83)   //s
                        socket.emit('keyPress',{inputId:'down',state:true});
                    else if(event.keyCode === 65) //a
                        socket.emit('keyPress',{inputId:'left',state:true});
                    else if(event.keyCode === 87) // w
                        socket.emit('keyPress',{inputId:'up',state:true});

                }
                document.onkeyup = function(event){
                    if(event.keyCode === 68)    //d
                        socket.emit('keyPress',{inputId:'right',state:false});
                    else if(event.keyCode === 83)   //s
                        socket.emit('keyPress',{inputId:'down',state:false});
                    else if(event.keyCode === 65) //a
                        socket.emit('keyPress',{inputId:'left',state:false});
                    else if(event.keyCode === 87) // w
                        socket.emit('keyPress',{inputId:'up',state:false});
                }

                document.onmousedown = function(event){
                    socket.emit('keyPress',{inputId:'attack',state:true});
                }
                document.onmouseup = function(event){
                    socket.emit('keyPress',{inputId:'attack',state:false});
                }
                document.onmousemove = function(event){
                    var x = -250 + event.clientX - 8;
                    var y = -250 + event.clientY - 8;
                    var angle = Math.atan2(y,x) / Math.PI * 180;
                    socket.emit('keyPress',{inputId:'mouseAngle',state:angle});
                }




            </script>

Answer 1

The idea in endless runners is to actually move the objects towards the player at constant speed(ie speed of the player). As soon as they get off the screen you can stop updating them. Check out this http://blog.sklambert.com/html5-game-tutorial-module-pattern/?utm_content=buffer18ac6&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer