说明:实在对不住诸位,的确是我弄错了,views/index.ejs里的对 socket.io.js的引用使用了我本地的绝对路径,需要修改为<script src="/socket.io/socket.io.js"></script>即可,对此我重新打了个包。再次歉意!!!
上周做了javascript版的象棋游戏【详见 js 写中国象棋游戏_应用backbone、canvas】,在iteye上发布后,承蒙诸位赏脸,有所反响。
经广大朋友指点,本周在前一游戏的基础上增加了 双方玩家可在 浏览器 上 在线对战 的 功能,有朋友提议用 ajax 或 falsh 可以通信,但前者较初级,后者非前端技术。衡量下接受了另一个网友提议的 nodeJS + websocket,实际开发是使用 express + socket.io 框架实现。因暂无 nodeJS 服务器可用,需要大家先自己在电脑上配置下环境运行,非常简单。
配置方法:
1、下载附件文件压缩包,解压到本地,如 E:/chess
2、如无 nodeJS 先安装 http://nodejs.org/
2、运行 cmd,执行 npm install -g express [ 安装express框架包 ]
3、命令进入chess文件夹 执行 npm install [ 安装依赖包,主要是 socket.io ] 【注意文件夹路径,有人反馈,找不到,是因为解压方式的不同,可能会是 E:/chess/chess 】
4、启动 node app.js
上述四步即可,如果无法运行 可留言。
功能介绍:
1、使用chrome打开 本地服务 ,可以先通过 ipconfig 查询自己的本地IP,如172.7.1.60,用浏览器打开本地IP加端口号,如 http://172.7.1.56:3000 ,会自动为网址后添加随机数作为房间号, 如 http://172.7.1.56:3000/31 【如只本地测试也可以打开 http://127.0.0.1:3000 】, 此时会提示“暂无其他玩家,将本页面网址发给朋友打开,即可进行游戏连接”。如图
2、当另一可访问你电脑的玩家打开同样的网址,或自己再本机用另一浏览器打开同样的网址, 会提示 “对方已进入,可以开始游戏”。注意房间号要相同。
3、当双方都点击开始后,棋子自动从棋盒进入棋盘并摆放好位置。如图
4、双方按象棋规则进行,被吃掉的子会自动放回棋盒。如图
5、当一方获胜时,提示胜利
6、此时可以点击开始 进行新一轮游戏
7、当一方离开时,提示“对方已离开”
8、右下角,有一个简单的实时聊天框,以供双方及时通讯
象棋本身的制作规则建议看 【详见 js 写中国象棋游戏_应用backbone、canvas】。
本案例主要使用了
jQuery - 底层
Backbone - MVC框架,对象棋视图、模型、事件有效管理
express - 封装 nodeJS,作后台服务
socket.io - 封装 websocket,作数据通信
本来是想做一个可多房间选择版的,已初步完成并可用,但因还需要维护各房间状态,本周无法及时发布,暂弃。如图
还望广大朋友支持的功能有
1、如何做各种状态下的声音提示
2、找一个可以免费使用的支持nodeJS的服务器,放上去可供大家直接试用
3、支持摄像头实时视频
现在我们前端开发可以用 nodeJS 搭后台环境,可以用 socket 做通信,前端已经已经成为越来越重要的存在,望广大前端爱好者,共同努力,扩大我们前端的作用 及 影响。
有意见、建议欢迎留言
相关推荐
JavaScript网页版二人对战象棋是一款完全基于JavaScript编程语言实现的在线游戏,允许两位玩家在同一网页上进行实时的象棋对决。这样的应用展示了JavaScript在网页交互和实时通信方面的强大功能,同时也涉及到HTML...
【标题】"象棋程序(JSP),人人对战"揭示了这是一个基于JSP(Java Server Pages)技术开发的在线象棋游戏平台,允许用户之间进行实时对战。JSP是一种服务器端的脚本语言,它结合了HTML和Java代码,用于创建动态网页...
### Unity游戏源码unity中国象棋 #### 一、Unity引擎简介 Unity是一款跨平台的游戏开发工具,由Unity Technologies公司开发。它支持多种编程语言,包括C#、JavaScript(即UnityScript)等,并且能够发布到多个平台...
【JS小游戏-象棋暗棋】是一个利用JavaScript编程语言开发的休闲娱乐项目,它将中国传统象棋元素融入到“暗棋”玩法中,为玩家提供了一种全新的在线游戏体验。在这款游戏中,棋子被翻转在棋盘上,玩家需要通过推理和...
【PHP + AJAX + MYSQL 网络象棋】是一个基于Web技术实现的在线对战棋类游戏,允许两位玩家通过互联网进行实时的棋局对抗。这个项目的核心技术栈包括PHP作为后端服务器语言,AJAX(Asynchronous JavaScript and XML)...
项目:用 JavaScript 实现的简单 AI 国际象棋游戏 这是一款简单的基于 AI 的国际象棋游戏,完全使用 JavaScript 和 HTML5 开发,并添加了 CSS,使其外观漂亮,画龙点睛。该项目已使用 javascript 和 jquery 验证...
此外,如果想让游戏支持多人在线对战,可以考虑集成WebSocket或其他实时通信技术,以便实时同步双方玩家的棋盘状态。 在开发过程中,持续优化用户体验也很重要。例如,添加悔棋功能,提供提示和禁手检测,以及友好...
游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统...
总体而言,通过使用HTML5中的Canvas元素来实现中国象棋游戏的在线对战功能,不仅可以使游戏界面更加美观,操作更加流畅,同时也为传统游戏的传承与发展注入了新的活力。随着技术的不断进步和创新,未来的网页游戏将...
《中国象棋Online v2008 build 0313 (PHP+MYSQL)》是一款基于Web的在线中国象棋游戏平台,它采用PHP编程语言和MYSQL数据库系统进行开发,为用户提供了一个便捷、互动的对战环境。在这个系统中,用户可以在线与他人...
【绝版中国象棋】是一款基于Java开发的中国象棋游戏,它利用了JavaScript、jQuery和JSON等技术,为用户提供了一种在线娱乐的平台。在这款游戏中,玩家可以体验到传统中国象棋的乐趣,同时结合现代编程语言和技术,...
游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统...
【中国象棋基于WebSocket】项目是一个实现了在线对弈功能的中国象棋应用,它利用了WebSocket技术进行实时的双向通信,让玩家可以在网络上进行实时的棋局对战。WebSocket是一种在客户端和服务器之间建立持久连接的...
《使用Node.js与Socket.IO构建实时双人对战国际象棋游戏》 在现代Web开发中,实时交互已经成为用户体验的重要组成部分。本项目“shatranj”是一个基于Node.js和Socket.IO实现的双人在线国际象棋游戏。下面将详细...
《521YY歪歪网络HTML5中国象棋 v1.0》是一款基于HTML5技术开发的在线中国象棋游戏,适用于网站环境,允许用户直接在网页上进行对战。这款应用结合了传统象棋的策略性和现代互联网的便利性,为象棋爱好者提供了全新的...
【标题】"php-socket-chess" 是一个...总的来说,"php-socket-chess" 项目结合了 PHP、Web Socket 和 JavaScript 的技术,构建了一个实时的在线国际象棋平台,展示了如何在 Web 环境下实现复杂的游戏逻辑和实时交互。
《构建Chess-TS-Web-App:基于JavaScript的在线国际象棋对战平台》 在当今互联网技术高速发展的时代,游戏已经成为人们休闲娱乐的重要方式之一。而棋类游戏,特别是国际象棋,因其策略性和竞技性深受广大爱好者喜爱...
游戏开始后,玩家在游戏设置中选择人机对战,则系统执黑棋,玩家自己执白棋。双方轮流下一棋,先将横、竖或斜线的5个或5个以上同色棋子连成不间断的一排者为胜。 【项目资源】:包含前端、后端、移动开发、操作系统...
在这个数字化的时代,利用JavaScript技术,我们可以创建在线的国际象棋游戏平台,让玩家无论身处何处都能享受对弈的乐趣。 在JavaScript中开发在线国际象棋,主要涉及以下几个核心知识点: 1. **DOM操作**:...