nodejs+express(ejs)做摇一摇小游戏（公司年会摇一摇游戏环节，大屏幕统计前几名摇动次数），大家一起摇一摇，看谁摇的次数多，并用excel-export导出excel_node.js实现摇一摇竞赛游戏

作者：AllinToyou | 2024-02-16 22:10:33

踩

node.js实现摇一摇竞赛游戏

项目最后放完整 demo 源码连接

https://download.csdn.net/download/qq_38652871/12016509
马上要年会了，有个什么总突然过来找我们部门后端负责人（我们公司后端用的PHP），询问是否能做个摇一摇的小游戏，大家一起摇一摇，有个类似比赛的小游戏互动，谁摇的次数多，谁靠前，最终前几名获奖，后端负责人直接来一句，这前端能做，你找前端吧，就这么着，把我叫了过去，问我能不能做，我说：以前没做过，我试试先做个小 demo 吧，没做过的东西真就不一定能整出来

自己先想了个游戏环节和互动流程：
在这里插入图片描述
看人家那架势，想让后端配合你做socket连接及相关逻辑的编写，估计是不可能了，幸亏咱有大前端“爸爸”，nodejs

没有用数据库，做了全局缓存，最终排名数据存储在 result.txt 里面，导出是读取的 result.txt 文件的数据

第一步：用express脚手架生成个nodejs项目

不会？点这里【GO】
或者自行去官网查看：http://www.expressjs.com.cn/starter/generator.html,

第二步：建立路由 router，ejs 模板，app.js 引入对应路由

在这里插入图片描述

第三步：手机访问 separate 先实现摇一摇功能

有一个第三方的库 shake.js 直接拿来用就行了，之前试过自己写了个摇一摇，利用x,y,z加速度，写算法计算摇一摇次数，发现不怎么灵光，要么不灵敏，要么太灵敏，后来干脆直接拿 shake.js 来用就行了

我的静态文件都放在了 public 下，包括 js css icon 都在，shake.js 就是第三方的 shake 库
https://github.com/alexgibson/shake.js/
在这里插入图片描述

    //实例化 Shake 
    let myShakeEvent = new Shake();

    shakeFlag = myShakeEvent.hasDeviceMotion; //当前设备是否支持摇一摇
    
    if (!shakeFlag) { //如果当前设备不支持摇一摇功能，将不支持样式显示出来，其他的都隐藏掉

        changeElStatus(1);

        return;

    }
    
    // start listening to device motion
    myShakeEvent.start();

 	window.addEventListener('shake', shakeEventDidOccur, false);
	
	/**
     * 摇一摇回调函数，每次摇动都回调
     */
    function shakeEventDidOccur() {

        console.log("摇动手机");

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

第四步：前后端建立socket连接

项目里用的 socket.io
官网地址：https://socket.io/docs/
npm install socket.io --save-dev
看一个例子就好了，其他的连接直接（有句话怎么说来着？如有雷同******），在这里就其他的直接雷同就好
看 controls 怎么连接和发送接收消息的，其他的自行下载 demo 查看,
提示：这儿代码可能连贯不起来，只为举例怎么用，比如前端有发送事件，后端没有接收事件，后端没有发送事件，前端确接收，这样代码肯定是错的，运行不起来的，但是，我想说的是但是，你知道怎么发送事件，怎么接收事件，然后去写自己的逻辑就行
服务端：
在这里插入图片描述

//  io.js
var socket_io = require('socket.io');
// 获取io
socketio.getSocketio = function (server) { // http(s) server

    var io = socket_io.listen(server);
    
    var controlsIo = io.of('/controls');

    controls(controlsIo);

};
1
2
3
4
5
6
7
8
9
10
11
12

// www
var io = require('./io');
//在这儿的上一行引入 io
var server = http.createServer(app);
//在这儿将创建的服务 server 传给 io
io.getSocketio(server);
1
2
3
4
5
6

// bin/controls.js
controlsIo.on('connection', function (socket) {
		
		//on 用来接收(响应)事件
        socket.on('start', function (data) {

            // console.log("this.hashData.separate",hashData.separate);

            var time = data.time;
            var people = data.people;
            var identifier = data.identifier;

            hashData.time = time;
            hashData.people = people;
            hashData.identifier = identifier;

            for (let key in hashData) {

                if (key == 'separate') {

                    hashData[key].map(el => {

                        el.status = 2;

                    })

                }

            }
			
			//emit 用来发送事件
            uniteIo.emit("start", data);

            separateIo.emit("start", data);

        })

        socket.on('disconnect', function (reason) {

            console.log('controls disconnect');

        })

    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

	// controls.ejs 对应的 前端 js
    let host = window.location.origin; //当前域名地址

    socket = io.connect(host + '/controls'); //用 socet.io 的 namespace 方式连接

    socket.on('connect', function () {

        console.log('connect successful');
		
		//on来接收后台发出的事件
        socket.on('end', function () {
			console.log('accept end emit')
        })

		

    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

第五步：就可以摇一摇了，后续的才是什么完善功能的时候了，这里只将用法，shake.js的用法，socket.io的用法，然后附上一个完整的 demo

	// 前端 separate.ejs对应的js 文件方法
    /**
     * 摇一摇回调函数，每次摇动都回调
     */
    function shakeEventDidOccur() {

        console.log("摇动手机", count);

        count += 1;//记录摇晃次数 +1

        countEl.innerHTML = count; //记录当前总次数

        speed = Math.ceil(count / (totalTime - time)); //总速度 次/秒

        speedEl.innerHTML = speed; //展示总速度 次/秒

        let tmpData = {
            curCode,
            count,
            speed
        }

        socket.emit('shake', tmpData); // 一边摇一边发送数据

    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

		//服务端 不断的接收摇一摇数据，添加到对应的缓存用户数据上并发送给大屏幕，unite页面
        socket.on('shake', function (data) { //摇动中随时统计摇动次数

            let nowCode = data.curCode;

            for (let i = 0; i < hashData.separate.length; i++) { //遍历 hashData.separate

                if (hashData.separate[i].curCode == nowCode) { //更改当前 separate 数据

                    hashData.separate[i].count = data.count;
                    hashData.separate[i].speed = data.speed;

                }

            }

            console.log("hashData.separate",hashData.separate);
            let playList = cusSort(hashData.separate, hashData.people + 8);

            hashData.playList = playList;

            uniteIo.emit('shake', hashData.playList);

        })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24