ex6 滑鼠遊戲+結束判斷
http://amani.test.ntpc.edu.tw/signalr/ex/ex6.html
- 完整Server端及Client端流程如下:
- Server端ChatHub.cs完整程式碼:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR;
using System.Threading.Tasks;
using Newtonsoft.Json;
using System.Runtime.Serialization.Formatters;
public class ChatHub : Hub
{
//過關點擊次數
public const int PASS_COUNTS = 10;
//宣告靜態類別,儲存user清單
public static class Users
{
public class Info
{
public Info(string n) { name = n; x = 0; y = 0; count = 0; }
public string name { get; set; }
public int x { get; set; }
public int y { get; set; }
public int count { get; set; }
}
public static Dictionary<string, Users.Info> ConnectionIds = new Dictionary<string, Users.Info>();
}
//遊戲初始
public void gameConnected(string name)
{
//將目前使用者新增至user清單
Users.ConnectionIds.Add(Context.ConnectionId, new Users.Info(name));
}
//遊戲
public void Game(Users.Info user)
{
if (Users.ConnectionIds.ContainsKey(Context.ConnectionId))
{
Users.ConnectionIds[Context.ConnectionId] = user;
}
Clients.Others.game(Users.ConnectionIds.Select(u => new { id = u.Key, name = u.Value.name, x = u.Value.x, y = u.Value.y, count = u.Value.count }).ToList());//用Others,自己不用更新座標,更具即時性
//判斷是否過關
if (user.count == PASS_COUNTS)
{
//清除遊戲分數
foreach (KeyValuePair<string, Users.Info> u in Users.ConnectionIds)
{
Users.ConnectionIds[u.Key].count = 0;
}
//通知玩家過關
Clients.All.pass(user.name, Users.ConnectionIds.Select(u => new { id = u.Key, name = u.Value.name, x = u.Value.x, y = u.Value.y, count = u.Value.count }).ToList());
}
}
//儲存上一個加入的群組
public static string OriginGroup = string.Empty;
//加群組(只能在一個群組)
public Task JoinOnlyOneGroup(string groupId)
{
Groups.Remove(Context.ConnectionId, OriginGroup);
OriginGroup = groupId;
return Groups.Add(Context.ConnectionId, groupId);
}
//加群組(可多個群組)
public Task JoinGroup(string groupId)
{
OriginGroup = groupId;
return Groups.Add(Context.ConnectionId, groupId);
}
//退群組
public Task LeaveGroup(string groupId)
{
return Groups.Remove(Context.ConnectionId, groupId);
}
//傳送訊息給群組
public void SendGroup(string groupId, string message)
{
var user = Users.ConnectionIds.Where(u => u.Key == Context.ConnectionId).FirstOrDefault();
Clients.Group(groupId).show(user.Value.name + "說:" + message);
}
//傳送訊息給所有User
public void Send(string message)
{
var user = Users.ConnectionIds.Where(u => u.Key == Context.ConnectionId).FirstOrDefault();
Clients.All.show(user.Value.name + "說:" + message);
}
//傳送訊息給某人
public void SendOne(string id, string message)
{
var from = Users.ConnectionIds.Where(u => u.Key == Context.ConnectionId).FirstOrDefault();
Clients.Client(id).show("<span style='color:red'>" + from.Value.name + "密你:" + message + "</span>");
}
//新使用者連線進入聊天室
public void userConnected(string name)
{
//將目前使用者新增至user清單
Users.ConnectionIds.Add(Context.ConnectionId, new Users.Info(name));
//發送給所有人,取得user清單
Clients.All.getList(Users.ConnectionIds.Select(u => new { id=u.Key,name=u.Value.name}).ToList());
//通知其他人,有新使用者
Clients.Others.show("歡迎" + name + "進入聊天室");
}
//當使用者斷線時呼叫
//stopCalled是SignalR 2.1.0版新增的參數
public override Task OnDisconnected(bool stopCalled)
{
Clients.Others.removeList(Context.ConnectionId);
Users.ConnectionIds.Remove(Context.ConnectionId);
return base.OnDisconnected(stopCalled);
}
}
- Client端mouseGame.html完整程式碼:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="signalR/hubs"></script>
</head>
<body>
<script>
var chat = $.connection.chatHub;//chatHub小寫
var name = "";
var x = 0;
var y = 0;
var count = 0;
//初始
$(function () {
name = Math.floor(Math.random() * 10000 + 1) + "用戶";
$(document)
.mousemove(function (e) {
//移動位置
x=e.pageX;
y=e.pageY;
$("#divMe").parent().css({ position: 'relative' });
$("#divMe").css({ top: y-15, left: x, position: 'absolute' });
//傳送座標、點擊次數至Server
sendGame();
})
.click(function () {
//點擊次數
count += 1;
sendGame();
});
});
//signalR啟動完成後,要執行的動作
$.connection.hub.start().done(function () {
//遊戲初始
chat.server.gameConnected(name);
});
//顯示遊戲訊息
chat.client.game = function (users) {
$("#divRoom").empty();
$.each(users, function (id, user) {
if (user.name != name) {//自己不顯示
var newDiv = $("<div id="+id+">" + user.name + ":" + user.count + "下" + "</div>");
newDiv.parent().css({ position: 'relative' });
newDiv.css({ top: user.y, left: user.x, position: 'absolute' });
$("#divRoom").append(newDiv);
}
});
}
//是否過關
chat.client.pass = function (winner, users) {
count = 0;
$("#divPass").css('visibility', 'visible');
$("#divPass").html("恭喜玩家「" + winner + "」過關!");
window.setTimeout(
function () {
$("#divPass").css('visibility', 'hidden');
},5000
);
}
//傳送座標、點擊次數至Server
function sendGame() {
//顯示座標
$("#divMe").text(name + ":" + count + "下");
//送至遠端
var info = {};
info.name = name;
info.x = x;
info.y = y;
info.count = count;
chat.server.game(info);
}
//使用者離開
chat.client.removeList = function (id) {
$('#' + id).remove();
};
</script>
<div style="width:700px;">
<!--過關標語-->
<div id="divPass" style="background-color:orange;color:white;font-size:larger;"></div>
<!--顯示所有人的鼠標位置-->
<div id="divRoom"></div>
<!--自己的鼠標位置-->
<div id="divMe" style="background-color:yellow;"></div>
</div>
</body>
</html>