更改单机版页面结构，实现用户进入后，单数用户显示需要等待另一个玩家，双数的客户进入后，可以开始游戏~

HTML中加入div

<div class="square" id="remote"><div class="title">对方的游戏区域：</div><div class="game" id="remote_game"></div><div class="next" id="remote_next"></div><div class="info"><div>已用时：<span id="remote_time">0</span>s</div><div>已得分：<span id="remote_score">0</span>分</div><div id="remote_gameover"></div></div><!-- 点击按钮来调用函数 --><button id="down">down</button><br><button id="left">left</button><br><button id="right">right</button><br><button id="rotate">rotate</button><br><button id="fall">fall</button><br><button id="fixed">fixed</button><br><button id="performNext">performNext</button><br><button id="check">check</button><br><button id="checkClear">checkClear</button><br><button id="checkGameOver">checkGameOver</button><br><button id="setTime">setTime</button><br><button id="addScore">addScore</button><br><button id="gameOver">gameOver</button><br><button id="addBotLine">addBotLine</button><br></div>

remote.js中绑定按钮事件

var Remote = function (socket) {var game;var bindEvents = function () {document.getElementById('left').onclick = function () {game.left();}document.getElementById('down').onclick = function () {game.down();}document.getElementById('right').onclick = function () {game.right();}document.getElementById('rotate').onclick = function () {game.rotate();}document.getElementById('fall').onclick = function () {game.fall();}document.getElementById('fixed').onclick = function () {game.fixed();}document.getElementById('performNext').onclick = function () {game.performNext(2, 2);}document.getElementById('checkGameOver').onclick = function () {game.checkGameOver();}document.getElementById('setTime').onclick = function () {game.setTime(20);}document.getElementById('addScore').onclick = function () {game.addScore(10);}document.getElementById('gameOver').onclick = function () {game.gameOver(true);}document.getElementById('addBotLine').onclick = function () {game.addBotLine([[0, 1, 0, 1, 0, 1, 0, 1, 0, 1]]);}}var start = function (type, dir) {var doms = {gameDiv: document.getElementById('remote_game'),nextDiv: document.getElementById('remote_next'),timeDiv: document.getElementById('remote_time'),scoreDiv: document.getElementById('remote_score'),resultDiv: document.getElementById('remote_gameover')}game = new Game();game.init(doms, type, dir);}//   导出this.start = start;this.bindEvents = bindEvents;
}

创建wsServer.js文件

var app = require('HTTP').createServer();
var io = require('socket.io')(app);var PORT = 3000;
// 客户端计数
var clientCount = 0;
// 保存客户端socket
var socketMap = {}；
app.listen(PORT);
io.on('connection', function (socket) {// 用户连接进来后先进行客户加1clientCount++;socket.clientNum = clientCount;socketMap[clientCount] = socket;// 是单数个进来的用户需要等待if (clientCount % 2 == 1) {// 发送wait消息socket.emit('wait', 'waiting for another person');} else {socket.emit('start');socketMap[(clientCount - 1)].emit('start');}socket.on('disconnect', function () {});
});
console.log('websocket listening on port' + PORT);

script.js中传入socket对象

var socket = io('ws://localhost:3000');
// 创建local对象并调用,传入socket对象
var local = new Local(socket);
var remote = new Remote(socket);socket.on('waiting', function (str) {document.getElementById('waiting').innerHTML = str;
});

前端实现俄罗斯方块小游戏1（在单人版基础上，实现基于websocket的双人版游戏)相关推荐

html5 websocket 游戏,基于Websocket的H5在线游戏对战平台
基于Websocket的H5在线游戏对战平台摘要随着计算机的普及与互联网技术的发展,人们的生活方式发生了巨大的变化.基于B/S(Browser/Server)结构的系统不需要用户安装客户端软件,它 ...
mfc做数独游戏_我终于在iPhone上找到了体验最好的数独游戏
我已经被一个 9×9 的格子困住将近 30 分钟,它既让人深陷其中还欲罢不能. 玩<数独 2>这款 app 之前我是抗拒的,因为我对数字超级无感,但抱着朋友告诉我入门很简单后试一试的心态, ...
从零开始完整开发基于websocket的在线对弈游戏【五子棋】，只用几十行代码完成全部逻辑。
五子棋是规则简单明了的策略型游戏,先形成五子连线者获胜. 本课程习作采用两人在线对弈的方式进行比赛,拿着手机在上下班路上玩特别合适. 整个过程在众触低代码应用平台进行,使用表达式描述游戏逻辑(高度简化 ...
QT、linux驱动以及应用基础学习总结-基于IMX6ULL的翻金币游戏点灯以及蜂鸣器报警
0 前言代码链接:https://download.csdn.net/download/qq_55813245/85594338 资源 :imx6ull开发板系统:正点原子出厂系统(Uboot 版 ...
前端实现双人联机版俄罗斯方块小游戏2（实现双人联机)
基于websocket实现双人联机俄罗斯方块游戏,逻辑思路整理如下思路整理 1.游戏开始,双方都收到start消息,同时调用start方法 2.start方法中,调用game.init方法,同时发送 ...
注入游戏没有焦点_《热血传奇怀旧版》即将登陆咪咕快游盛趣游戏端游上云再落一子...
盛趣游戏云游戏业务开始提速.日前,回归最经典版本的<热血传奇怀旧版>重聚测试开启,并将独家上架咪咕快游云游戏平台.这是盛趣游戏与中移动咪咕互娱共建的擎云工作室正式落地后,双方在云游戏又一实 ...
八十年代的计算机游戏,那些无法遗忘的记忆八十年代最伟大的二十款游戏
八十年代对游戏行业来说是复杂的十年,这个时段既有整个行业的几近崩溃,但因为科技的飞速发展和思维模式的更新,又有无法忽略的主机和游戏的发布,许多经典都是在这个年代诞生的,现在就让我们来看一看在这个传奇的 ...
做游戏，学编程（C语言） 2 最简单的飞机游戏
这一次,在前面弹跳小球的基础上,实现一个简单的飞机游戏的雏形,主要包括:飞机显示.控制移动.发射子弹.击中敌机等功能.需要的语法基础知识和弹跳小球一样:printf.scanf.if-else.for ...
Linux游戏市场，Tacoma上的Nixie Pixel以及更多开放游戏新闻
您好,Linux游戏迷! 在本周的版本中,我们将了解Introversion Software对Linux游戏,Linux新游戏等的看法. 2015年7月12日至18日开放游戏摘要 Linux市场上的 ...

前端实现俄罗斯方块小游戏1（在单人版基础上，实现基于websocket的双人版游戏)

修改单机版游戏代码，并对其进行逻辑处理和初始化

更改单机版页面结构，实现用户进入后，单数用户显示需要等待另一个玩家，双数的客户进入后，可以开始游戏~

HTML中加入div

remote.js中绑定按钮事件

创建wsServer.js文件

script.js中传入socket对象

前端实现俄罗斯方块小游戏1（在单人版基础上，实现基于websocket的双人版游戏)相关推荐

最新文章

热门文章