用signalr做一个单机游戏

1.定义一个signalr类：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;

namespace Signalr
{
    public class MyGame : Hub
    {
        public void Move(int  dir,int  x,int  y)
        {
            Clients.Others.move(dir,x,y);
        }

        public void Stop(int dir)
        {
            Clients.Others.stop(dir);
        }
    }
}

2.前台实现：

@{
    ViewBag.Title = "Home Page";
}


<script src="~/Scripts/jquery-3.3.1.js"></script>

<script src="~/Scripts/jquery.signalR-2.2.2.js"></script>

<script src="/signalr/hubs"></script>
 
<style>
    #payer {
    position:absolute;
    
    }
    
</style>

<script>
    var   user=null;
    var  payer=null;
    var   userStyle=null;

     //服务器连接
    var   myGame=$.connection.myGame;
    //调用方法
    myGame.client.move=function(dir,x,y){
      user.key=dir;
      user.x=x;
      user.y=y;
     show();
    };
    myGame.client.stop=function(dir){
    
    };
       
    $.connection.hub.start().done(function(){
     
        user={
           x:10,
           y:10,
           key:0
         };
    userStyle={
     imgIdx:0,
     width:parseInt(500/2),
     height:parseInt(599/3)
    };
      payer= $("#payer").css({"width":userStyle.width+"px","height":userStyle.height+"px"}).css({"background":"url('/img/parsion.jpg')"});
      $(document).keydown(function(event){
          
       switch(event.key)
      {
        case    's': 
         user.y+=3;
         user.key=0;
         break;
        case    'a':
         user.x-=5;
         user.key=3;
         break;
        case    'd':
         user.x+=5;
         user.key=2;
         break;
        case    'w':
         user.y-=3;
         user.key=1;
         break;
    
       }
       show();
     myGame.server.move(user.key,user.x,user.y);
    });
    
    }).fail(function(){
    
    
    });
    function  show(){
     userStyle.imgIdx++;
      if(userStyle.imgIdx==4)
      userStyle.imgIdx=0;
      payer.css("background-position",userStyle.imgIdx*userStyle.width+"px   "+user.key*userStyle.height+"px   ").css({"left":user.x+"px","top":user.y})
    }
</script>
<div id="payer">

  
</div>

实现效果：