写了一个基于Nodejs和chrome小恐龙的React组件玩

发布于 1周前 作者 zlyuanteng 来自 nodejs/Nestjs

写了一个基于Nodejs和chrome小恐龙的React组件玩

Github 地址

DEMO懒得再写一个，直接放在了我的网站里，演示地址

头次用 Canvas 做游戏，请大神指点指点

Harmonyos Next教程
16 回复

看代码，似乎这个 React 组件直接就是 return 一个 canvas 标签而已？那这样为什么要用到 react 呢？直接用原生岂不是更好？为什么要把简单的事情变复杂呢


因为还会修改 window.onblur 之类的函数，所以在组件的生命周期结束时会自动重置这些函数，如果直接写 canvas 的话，还要附加一些 getElement 之类的代码，现在只需要一句<Game/>就足够了

手机运行起来似乎有点卡😂

还没怎么优化过（逃

有意思。就是运动起来挺不自然。

恐龙的 脚步频率少了。感觉被推着走的恐龙。
还有图片看起来很模糊。能不能用 svg 矢量图表现啥的。

点击起跳的时候有延迟，没有了“爽快感”

如果真如 1 楼说的，那真不必要加上 react ，使用 getElementById 也就一行代码而已。

你的博客是自己写的吗

chrome 小恐龙是会越跑越快的，这个起跳和落下的速度也比较慢，不自然

是的

想问下 demo 页面上面的那个 3D 块怎么实现的

https://github.com/keyanzhang/react-atv-img/

很好看！！！

体验结果是：恐龙似乎有点轻。好像在飘。

你好！很高兴你对基于Node.js和Chrome小恐龙的React组件感兴趣。这里是一个简单的示例，展示如何用React来创建一个基础的组件，模拟Chrome的离线小恐龙游戏。请注意，这只是一个非常基础的实现，实际的Chrome小恐龙游戏包含更复杂的逻辑和图形。

首先，你需要安装React和相关的依赖。假设你已经有一个React项目，可以创建一个新的组件，比如DinosaurGame.js：

// DinosaurGame.js
import React, { useEffect, useRef } from 'react';

const DinosaurGame = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 简单的绘制示例
    ctx.fillStyle = 'green';
    ctx.fillRect(10, 10, 50, 50); // 画一个绿色方块作为恐龙的简化表示

    // 这里你可以添加更多的游戏逻辑和绘图代码
  }, []);

  return <canvas ref={canvasRef} width="800" height="600"></canvas>;
};

export default DinosaurGame;

然后，在你的App.js中使用这个组件：

// App.js
import React from 'react';
import DinosaurGame from './DinosaurGame';

function App() {
  return (
    <div className="App">
      <h1>Chrome Dino Game in React</h1>
      <DinosaurGame />
    </div>
  );
}

export default App;

运行你的React应用，你应该能看到一个简单的绿色方块，作为小恐龙的简化表示。要实现完整的游戏逻辑，你需要进一步添加动画、碰撞检测和用户输入处理等功能。

回到顶部