Nodejs实现的一个非常简单的2d网络游戏的小例子

使用nodejs写的网络游戏.很简单的玩法.主要是学习nodejs用.大家轻喷. ui很烂.发布在github上面.

https://github.com/kingdemonccgg/nodejs_html5_webgame

前台

canvas 标签用于ui展示

webworker 用于与服务器进行心跳同步.

websocket 用于与服务器通信.

后台

nodejs 编写整个后台.没有使用数据库.

使用socket.io 插件作为与前台的socket通信保障.

zlyuanteng 1楼•2 个月前作者

Node.js 实现的一个非常简单的 2D 网络游戏的小例子

概述

使用 Node.js 编写的简单 2D 网络游戏。本示例主要目的是帮助学习者理解如何使用 Node.js 构建基本的网络应用。尽管 UI 可能较为简陋，但其背后的逻辑和技术实现是重点。项目已托管于 GitHub 上，欢迎交流与改进。

GitHub 链接: https://github.com/kingdemonccgg/nodejs_html5_webgame

前台

HTML & Canvas

使用 HTML 和 <canvas> 标签来绘制游戏界面。

示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>Simple 2D Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="/socket.io/socket.io.js"></script>
    <script src="client.js"></script>
</body>
</html>

client.js 中会处理画布绘制和与服务器的通信。

Web Worker

使用 Web Worker 来保持与服务器的心跳同步。

示例代码：

// clientWorker.js
const socket = new WebSocket('ws://localhost:3000');
setInterval(() => {
    socket.send('ping');
}, 1000);

WebSocket

使用 WebSocket 进行与服务器的数据交换。

示例代码：

// client.js
const socket = io();
socket.on('connect', () => {
    console.log('Connected to server!');
});
socket.on('message', (data) => {
    console.log('Received:', data);
});

后台

Node.js

使用 Node.js 构建整个后端逻辑。

示例代码：

// server.js
const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
    console.log('New client connected');

    socket.on('disconnect', () => {
        console.log('Client disconnected');
    });

    socket.on('message', (data) => {
        console.log('Message received:', data);
        socket.emit('response', 'Hello from server');
    });
});

server.listen(3000, () => {
    console.log('Server listening on port 3000');
});

Socket.IO
- 使用 Socket.IO 插件确保客户端与服务器之间的实时通信。
- 示例代码：
```
// server.js
const io = require('socket.io')(server);
```

通过以上示例代码，你可以构建一个简单的 2D 网络游戏。尽管功能简单，但它涵盖了基本的前端和后端技术，非常适合初学者理解和实践。希望这个小例子对你有所帮助！

yuanlaile 2楼•2 个月前

等在线版 :P

sinazl 3楼•2 个月前

条件不允许啊.代码写的不是很好.而且node服务器很难搞到…

sinazl 4楼•2 个月前

申请一个NAE服务器邀请码啊

h691938207 5楼•2 个月前

看NAE 介绍上面node版本比较低.而且没有socket.io环境…

ionicwang 6楼•2 个月前

这个帖子描述了一个使用Node.js实现的非常基础的2D网络游戏。这里我将提供一个更简单的小例子来说明如何使用Node.js、WebSocket以及HTML5 Canvas来创建这样的游戏。

后端 (Node.js + socket.io)

首先，我们需要安装socket.io库：

npm install socket.io

然后是后端代码示例 (server.js)：

const http = require('http');
const io = require('socket.io');

const server = http.createServer();
const socketServer = io(server);

let players = {};

socketServer.on('connection', (socket) => {
    console.log('A user connected: ', socket.id);
    
    socket.on('newPlayer', (data) => {
        players[socket.id] = data;
        socket.broadcast.emit('newPlayer', data);
    });

    socket.on('movePlayer', (data) => {
        if (players[socket.id]) {
            players[socket.id].x = data.x;
            players[socket.id].y = data.y;
        }
        socket.broadcast.emit('movePlayer', data);
    });

    socket.on('disconnect', () => {
        console.log('User disconnected: ', socket.id);
        delete players[socket.id];
        socket.broadcast.emit('playerLeft', socket.id);
    });
});

server.listen(3000, () => {
    console.log('Listening on port 3000');
});

这段代码设置了一个基本的游戏服务器，它可以处理玩家连接、移动以及断开连接的情况。

前端 (HTML + JavaScript)

前端需要使用WebSocket来与服务器交互，并且用Canvas来绘制游戏场景。以下是简化的HTML文件 (index.html)：

<!DOCTYPE html>
<html>
<head>
    <title>Simple Web Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <script src="/socket.io/socket.io.js"></script>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        const socket = io();

        let player = { x: 50, y: 50, id: null };

        socket.on('connect', () => {
            player.id = socket.id;
            socket.emit('newPlayer', player);
        });

        socket.on('newPlayer', (data) => {
            drawPlayer(data);
        });

        socket.on('movePlayer', (data) => {
            drawPlayer(data);
        });

        function drawPlayer(player) {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillRect(player.x, player.y, 20, 20);
        }

        window.addEventListener('keydown', (event) => {
            if (event.key === 'ArrowRight') player.x += 10;
            if (event.key === 'ArrowLeft') player.x -= 10;
            if (event.key === 'ArrowUp') player.y -= 10;
            if (event.key === 'ArrowDown') player.y += 10;
            socket.emit('movePlayer', player);
        });
    </script>
</body>
</html>

以上代码创建了一个简单的游戏环境，玩家可以控制一个小方块移动。服务器负责跟踪所有玩家的位置并广播更新给其他玩家。

请注意，这只是一个非常基础的例子，实际开发中可能需要考虑更多细节如碰撞检测、游戏状态同步等。