我的编程空间,编程开发者的网络收藏夹
学习永远不晚

怎么使用Three.js实现3D乒乓球小游戏

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

怎么使用Three.js实现3D乒乓球小游戏

本篇内容介绍了“怎么使用Three.js实现3D乒乓球小游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

效果

怎么使用Three.js实现3D乒乓球小游戏

原理

React-Three-Fiber

React Three Fiber 是一个基于 Three.jsReact 渲染器,简称 R3F。它像是一个配置器,把 Three.js 的对象映射为 R3F 中的组件。

特点
  • 使用可重用的组件以声明方式构建动态场景图,使 Three.js 的处理变得更加轻松,并使代码库更加整洁。这些组件对状态变化做出反应,具有开箱即用的交互性。

  • Three.js 中所有内容都能在这里运行。它不针对特定的 Three.js 版本,也不需要更新以修改,添加或删除上游功能。

  • 渲染性能与 Three.js 和 GPU 相仿。组件参与 React 之外的 render loop 时,没有任何额外开销。

React Three Fiber 比较繁琐,我们可以写成 R3F 或简称为 Fiber。让我们从现在开始使用 R3F 吧。

生态系统

R3F 有充满活力的生态系统,包括各种库、辅助工具以及抽象方法:

  • @react-three/drei – 有用的辅助工具,自身就有丰富的生态

  • @react-three/gltfjsx – 将 GLTFs 转换为 JSX 组件

  • @react-three/postprocessing – 后期处理效果

  • @react-three/test-renderer – 用于在 Node 中进行单元测试

  • @react-three/flex – react-three-fiber 的 flex 盒子布局

  • @react-three/xr – VR/AR 控制器和事件

  • @react-three/csg – 构造实体几何

  • @react-three/rapier – 使用 Rapier 的 3D 物理引擎

  • @react-three/cannon – 使用 Cannon 的 3D 物理引擎

  • @react-three/p2 – 使用 P2 的 2D 物理引擎

  • @react-three/a11y – 可访问工具

  • @react-three/gpu-pathtracer – 真实的路径追踪

  • create-r3f-app next – nextjs 启动器

  • lamina – 基于 shader materials 的图层

  • zustand – 基于 flux 的状态管理

  • jotai – 基于 atoms 的状态管理

  • valtio – 基于 proxy 的状态管理

  • react-spring – 一个 spring-physics-based 的动画库

  • framer-motion-3d – framer motion,一个很受欢迎的动画库

  • use-gesture – 鼠标/触摸手势

  • leva – 创建 GUI 控制器

  • maath – 数学辅助工具

  • miniplex – ECS 实体管理系统

  • composer-suite – 合成着色器、粒子、特效和游戏机制、

安装
npm install three @react-three/fiber
第一个场景

在一个新建的 React 项目中,我们通过以下的步骤使用 R3F 来创建第一个场景。

初始化Canvas

首先,我们从 @react-three/fiber 引入 Canvas 元素,将其放到 React 树中:

import ReactDOM from 'react-dom'import { Canvas } from '@react-three/fiber'function App() {  return (    <div id="canvas-container">      <Canvas />    </div>  )}ReactDOM.render(<App />, document.getElementById('root'))

Canvas 组件在幕后做了一些重要的初始化工作:

  • 它初始化了一个场景 Scene 和一个相机 Camera,它们都是渲染所需的基本模块。

  • 它在页面每一帧更新中都渲染场景,我们不需要再到页面重绘方法中循环调用渲染方法。

Canvas 大小响应式自适应于父节点,我们可以通过改变父节点的宽度和高度来控制渲染场景的尺寸大小。

添加一个Mesh组件

为了真正能够在场景中看到一些物体,现在我们添加一个小写的 <mesh /> 元素,它直接等效于 new THREE.Mesh()

<Canvas>  <mesh />

可以看到我们没有特地去额外引入mesh组件,我们不需要引入任何元素,所有Three.js中的对象都将被当作原生的JSX元素,就像在 ReactDom 中写 <div /><span /> 元素一样。R3F Fiber组件的通用规则是将Three.js中的它们的名字写成驼峰式的DOM元素即可。

一个 MeshThree.js 中的基础场景对象,需要给它提供一个几何对象 geometry 以及一个材质 material 来代表一个三维空间的几何形状,我们将使用一个 BoxGeometryMeshStandardMaterial 来创建一个新的网格 Mesh,它们会自动关联到它们的父节点。

<Canvas>  <mesh>    <boxGeometry />    <meshStandardMaterial />  </mesh>

上述代码和以下 Three.js 代码是等价的:

const scene = new THREE.Scene()const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)const renderer = new THREE.WebGLRenderer()renderer.setSize(width, height)document.querySelector('#canvas-container').appendChild(renderer.domElement)const mesh = new THREE.Mesh()mesh.geometry = new THREE.BoxGeometry()mesh.material = new THREE.MeshStandardMaterial()scene.add(mesh)function animate() {  requestAnimationFrame(animate)  renderer.render(scene, camera)}animate()

构造函数参数:

根据 BoxGeometry 的文档,我们可以选择给它传递三个参数:widthlengthdepth

new THREE.BoxGeometry(2, 2, 2)

为了实现相同的功能,我们可以在 R3F 中使用 args 属性,它总是接受一个数组,其项目表示构造函数参数:

<boxGeometry args={[2, 2, 2]} />
添加光源

接着,我们通过像下面这样添加光源组件来为我们的场景添加一些光线。

<Canvas>  <ambientLight intensity={0.1} />  <directionalLight color="red" position={[0, 0, 5]} />

属性:

这里介绍关于 R3F 的最后一个概念,即 React 属性是如何在 Three.js 对象中工作的。当你给一个 Fiber 组件设置任意属性时,它将对 Three.js 设置一个相同名字的属性。我们关注到 ambientLight 上,由它的文档可知,我们可以选择 colorintensity 属性来初始化它:

<ambientLight intensity={0.1} />

等价于

const light = new THREE.AmbientLight()light.intensity = 0.1

快捷方法:

Three.js 中对于很多属性的设置如 colorsvectors 等都可以使用 set() 方法进行快捷设置:

const light = new THREE.DirectionalLight()light.position.set(0, 0, 5)light.color.set('red')

JSX 中也是相同的:

<directionalLight position={[0, 0, 5]} color="red" />
结果
<Canvas>  <mesh>    <boxBufferGeometry />    <meshBasicMaterial color="#03c03c" />  </mesh>  <ambientLight args={[0xff0000]} intensity={0.1} />  <directionalLight position={[0, 0, 5]} intensity={0.5} /></Canvas>

怎么使用Three.js实现3D乒乓球小游戏

查看React Three Fiber完整API文档

实现

〇 搭建页面基本结构

首先,我们创建一个 Experience 文件作为渲染三维场景的组件,并在其中添加 Canvas 组件搭建基本页面结构。

import { Canvas } from "@react-three/fiber";export default function Experience() {  return (    <>      <Canvas></Canvas>    </>  );}

怎么使用Three.js实现3D乒乓球小游戏

① 场景初始化

接着我们开启 Canvas 的阴影并设置相机参数,然后添加环境光 ambientLight 和点光源 pointLight 两种光源:

<Canvas  shadows  camera={{ fov: 50, position: [0, 5, 12] }}>  <ambientLight intensity={.5} />  <pointLight position={[-10, -10, -10]} /></Canvas>

如果需要修改 Canvas 的背景色,可以在其中添加一个 color 标签并设置参数 attachbackground,在 args 参数中设置颜色即可。

<Canvas>  <color attach="background" args={["lightgreen"]} /></Canvas>

怎么使用Three.js实现3D乒乓球小游戏

② 添加辅助工具

接着,我们在页面顶部引入 Perf,它是 R3F 生态中查看页面性能的组件,它的功能和 Three.jsstats.js 是类似的,像下面这样添加到代码中设置它的显示位置,页面对应区域就会出现可视化的查看工具,在上面可以查看 GPUCPUFPS 等性能参数。

如果想使用网格作为辅助线或用作装饰,可以使用 gridHelper 组件,它支持配置 positionrotationargs 等参数。

import { Perf } from "r3f-perf";export default function Experience() {  return (    <>      <Canvas>        <Perf position="top-right" />        <gridHelper args={[50, 50, '#11f1ff', '#0b50aa']} position={[0, -1.1, -4]} rotation={[Math.PI / 2.68, 0, 0]} />      </Canvas>    </>  );}

怎么使用Three.js实现3D乒乓球小游戏

③ 创建乒乓球和球拍

我们创建一个名为 PingPong.jsx 的乒乓球组件文件,然后在文件顶部引入以下依赖,其中 PhysicsuseBoxusePlaneuseSphere 用于创建物理世界;useFrame 是用来进行页面动画更新的 hook,它将在页面每帧重绘时执行,我们可以在它里面执行一些动画函数和更新控制器,相当于 Three.js 中用原生实现的 requestAnimationFrameuseLoader 用于加载器的管理,使用它更方便进行加载错误管理和回调方法执行;lerp 是一个插值运算函数,它可以计算某一数值到另一数值的百分比,从而得出一个新的数值,常用于移动物体、修改透明度、颜色、大小、模拟动画等。

import { Physics, useBox, usePlane, useSphere } from "@react-three/cannon";import { useFrame, useLoader } from "@react-three/fiber";import { Mesh, TextureLoader } from "three";import { GLTFLoader } from "three-stdlib/loaders/GLTFLoader";import lerp from "lerp";
创建物理世界

然后创建一个 PingPong 类,在其中添加 <Physics> 组件来创建物理世界,像直接使用 Cannon.js 一样,可以给它设置 iterationstolerancegravityallowSleep 等参数来分别设置物理世界的迭代次数、容错性、引力以及是否支持进入休眠状态等,然后在其中添加一个平面几何体和一个平面刚体 ContactGround

function ContactGround() {  const [ref] = usePlane(    () => ({      position: [0, -10, 0],      rotation: [-Math.PI / 2, 0, 0],      type: "Static",    }),    useRef < Mesh > null  );  return <mesh ref={ref} />;}export default function PingPong() {  return (    <>      <Physics        iterations={20}        tolerance={0.0001}        defaultContactMaterial={{          contactEquationRelaxation: 1,          contactEquationStiffness: 1e7,          friction: 0.9,          frictionEquationRelaxation: 2,          frictionEquationStiffness: 1e7,          restitution: 0.7,        }}        gravity={[0, -40, 0]}        allowSleep={false}      >        <mesh position={[0, 0, -10]} receiveShadow>          <planeGeometry args={[1000, 1000]} />          <meshPhongMaterial color="#5081ca" />        </mesh>        <ContactGround />      </Physics>    </>  );}

怎么使用Three.js实现3D乒乓球小游戏

创建乒乓球

接着,我们创建一个球体类 Ball,在其中添加球体 ???? ,可以使用前面介绍的 useLoader 来管理它的贴图加载,为了方便观察到乒乓球的转动情况,贴图中央加了一个十字交叉图案 。然后将其放在 <Physics> 标签下。

function Ball() {  const map = useLoader(TextureLoader, earthImg);  const [ref] = useSphere(    () => ({ args: [0.5], mass: 1, position: [0, 5, 0] }),    useRef < Mesh > null  );  return (    <mesh castShadow ref={ref}>      <sphereGeometry args={[0.5, 64, 64]} />      <meshStandardMaterial map={map} />    </mesh>  );}export default function PingPong() {  return (    <>      <Physics>        {  }        <Ball />      </Physics>    </>  );}

怎么使用Three.js实现3D乒乓球小游戏

创建球拍

球拍采用的是一个 glb 格式的模型,在 Blender 中我们可以看到模型的样式和详细的骨骼结构,对于模型的加载,我们同样使用 useLoader 来管理,此时的加载器需要使用 GLTFLoader

怎么使用Three.js实现3D乒乓球小游戏

我们创建一个 Paddle 类并将其添加到 <Physics> 标签中,在这个类中我们实现模型加载,模型加载完成后绑定骨骼,并在 useFrame 页面重绘方法中,根据鼠标所在位置更新乒乓球拍模型的位置 position,并根据是否一开始游戏状态以及鼠标的位置来更新球拍的 x轴y轴 方向的 rotation 值。

function Paddle() {  const { nodes, materials } = useLoader(    GLTFLoader,    '/models/pingpong.glb',  );  const model = useRef();  const [ref, api] = useBox(() => ({    type: 'Kinematic',    args: [3.4, 1, 3.5],  }));  const values = useRef([0, 0]);  useFrame((state) => {    values.current[0] = lerp(      values.current[0],      (state.mouse.x * Math.PI) / 5,      0.2    );    values.current[1] = lerp(      values.current[1],      (state.mouse.x * Math.PI) / 5,      0.2    );    api.position.set(state.mouse.x * 10, state.mouse.y * 5, 0);    api.rotation.set(0, 0, values.current[1]);    if (!model.current) return;    model.current.rotation.x = lerp(      model.current.rotation.x,      started ? Math.PI / 2 : 0,      0.2    );    model.current.rotation.y = values.current[0];  });  return (    <mesh ref={ref} dispose={null}>      <group        ref={model}        position={[-0.05, 0.37, 0.3]}        scale={[0.15, 0.15, 0.15]}      >        <group rotation={[1.88, -0.35, 2.32]} scale={[2.97, 2.97, 2.97]}>          <primitive object={nodes.Bone} />          <primitive object={nodes.Bone003} />          {  }          <skinnedMesh            castShadow            receiveShadow            material={materials.glove}            material-roughness={1}            geometry={nodes.arm.geometry}            skeleton={nodes.arm.skeleton}          />        </group>        <group rotation={[0, -0.04, 0]} scale={[141.94, 141.94, 141.94]}>          <mesh            castShadow            receiveShadow            material={materials.wood}            geometry={nodes.mesh.geometry}          />          {  }        </group>      </group>    </mesh>  );}

到这里,我们已经实现乒乓球颠球的基本功能了 ????

怎么使用Three.js实现3D乒乓球小游戏

颠球计数

为了显示每次游戏可以颠球的次数,现在我们在乒乓球拍中央加上数字显示 5️⃣ 。我们可以像下面这样创建一个 Text 类,在文件顶部引入 TextGeometryFontLoaderfontJson 作为字体几何体、字体加载器以及字体文件,添加一个 geom 作为创建字体几何体的方法,当 count 状态值发生变化时,实时更新创建字体几何体模型。

import { useMemo } from "react";import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry";import { FontLoader } from "three/examples/jsm/loaders/FontLoader";import fontJson from "../public/fonts/firasans_regular.json";const font = new FontLoader().parse(fontJson);const geom = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9'].map(  (number) => new TextGeometry(number, { font, height: 0.1, size: 5 }));export default function Text({ color = 0xffffff, count, ...props }) {  const array = useMemo(() => [...count], [count]);  return (    <group {...props} dispose={null}>      {array.map((char, index) => (        <mesh          position={[-(array.length / 2) * 3.5 + index * 3.5, 0, 0]}          key={index}          geometry={geom[parseInt(char)]}        >          <meshBasicMaterial color={color} transparent opacity={0.5} />        </mesh>      ))}    </group>  );}

然后将 Text 字体类放入球拍几何体中,其中 count 字段需要在物理世界中刚体发生碰撞时进行更新,该方法加载下节内容添加碰撞音效时一起实现。

function Paddle() {  return (    <mesh ref={ref} dispose={null}>      <group ref={model}>        {  }        <Text          rotation={[-Math.PI / 2, 0, 0]}          position={[0, 1, 2]}          count={count.toString()}        />      </group>    </mesh>  );}

怎么使用Three.js实现3D乒乓球小游戏

④ 页面装饰

到这里,整个小游戏的全部流程都开发完毕了,现在我们来加一些页面提示语、颠球时的碰撞音效,页面的光照效果等,使 3D 场景看起来更加真实。

音效

实现音效前,我们先像下面这样添加一个状态管理器,来进行页面全局状态的管理。zustand 是一个轻量级的状态管理库;_.clamp(number, [lower], upper) 用于返回限制在 lowerupper 之间的值;pingSound 是需要播放的音频文件。我们在其中添加一个 pong 方法用来更新音效和颠球计数,添加一个 reset 方法重置颠球数字。count 字段表示每次的颠球次数,welcome 表示是否在欢迎界面。

import create from "zustand";import clamp from "lodash-es/clamp";import pingSound from "/medias/ping.mp3";const ping = new Audio(pingSound);export const useStore = create((set) => ({  api: {    pong(velocity) {      ping.currentTime = 0;      ping.volume = clamp(velocity / 20, 0, 1);      ping.play();      if (velocity > 4) set((state) => ({ count: state.count + 1 }));    },    reset: (welcome) =>      set((state) => ({ count: welcome ? state.count : 0, welcome })),  },  count: 0,  welcome: true,}));

然后我们可以在上述 Paddle 乒乓球拍类中像这样在物体发生碰撞时触发 pong 方法:

function Paddle() {  {}  const [ref, api] = useBox(() => ({    type: "Kinematic",    args: [3.4, 1, 3.5],    onCollide: (e) => pong(e.contact.impactVelocity),  }));}
光照

为了是场景更加真实,我们可以开启 Canvas 的阴影,然后添加多种光源 ???? 来优化场景,如 spotLight 就能起到视觉聚焦的作用。

<Canvas  shadows  camera={{ fov: 50, position: [0, 5, 12] }}>  <ambientLight intensity={.5} />  <pointLight position={[-10, -10, -10]} />  <spotLight    position={[10, 10, 10]}    angle={0.3}    penumbra={1}    intensity={1}    castShadow    shadow-mapSize-width={2048}    shadow-mapSize-height={2048}    shadow-bias={-0.0001}  />  <PingPong /></Canvas>
提示语

为了提升小游戏的用户体验,我们可以添加一些页面文字提示来指引使用者和提升页面视觉效果,需要注意的是,这些额外的元素不能添加到 <Canvas /> 标签内哦 ????

const style = (welcome) => ({  color: '#000000',  display: welcome ? 'block' : 'none',  fontSize: '1.8em',  left: '50%',  position: "absolute",  top: 40,  transform: 'translateX(-50%)',  background: 'rgba(255, 255, 255, .2)',  backdropFilter: 'blur(4px)',  padding: '16px',  borderRadius: '12px',  boxShadow: '1px 1px 2px rgba(0, 0, 0, .2)',  border: '1px groove rgba(255, 255, 255, .2)',  textShadow: '0px 1px 2px rgba(255, 255, 255, .2), 0px 2px 2px rgba(255, 255, 255, .8), 0px 2px 4px rgba(0, 0, 0, .5)'});<div style={style(welcome)}>???? 点击任意区域开始颠球</div>

怎么使用Three.js实现3D乒乓球小游戏

“怎么使用Three.js实现3D乒乓球小游戏”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

怎么使用Three.js实现3D乒乓球小游戏

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么使用Three.js实现3D乒乓球小游戏

本篇内容介绍了“怎么使用Three.js实现3D乒乓球小游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!效果原理React-Three-F
2023-07-05

Three.js实现3D乒乓球小游戏(物理效果)

本文将使用ReactThreeFiber和Cannon.js来实现一个具有物理特性的乒乓球小游戏,使用ReactThreeFiber搭建基础三维场景、如何使用新技术栈给场景中对象的添加物理特性等,最后利用上述知识点,将开发一个简单的乒乓球小游戏,需要的朋友可以参考下
2023-03-21

怎么使用Python和OpenCV实现在线打乒乓球

本篇内容介绍了“怎么使用Python和OpenCV实现在线打乒乓球”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!捕捉屏幕第一件事就是捕捉屏幕
2023-06-16

怎么利用Three.js实现跳一跳小游戏

本篇内容介绍了“怎么利用Three.js实现跳一跳小游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!游戏规则十分简单:长按鼠标蓄力、放手,
2023-06-30

怎么使用JS+Canvas实现接球小游戏

本篇内容介绍了“怎么使用JS+Canvas实现接球小游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!成果展示实现思路这里我们采用疑问的句式
2023-07-02

Unity怎么实现3D迷宫小游戏

这篇文章主要介绍了Unity怎么实现3D迷宫小游戏的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Unity怎么实现3D迷宫小游戏文章都会有所收获,下面我们一起来看看吧。一、前言闲来无事,从零开始整个《3D迷宫》
2023-06-29

Unity怎么实现3D射箭小游戏

这篇文章主要介绍Unity怎么实现3D射箭小游戏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!Unity 小游戏:3D射箭前两周因为实训太忙,再加上自己对老师所讲的设计模式并不是很理解,所以就没有写博客。这次博客是记
2023-06-14

怎么用jQuery实现弹弹球小游戏

本篇内容介绍了“怎么用jQuery实现弹弹球小游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!本文实例为大家分享了jQuery实现弹弹球小
2023-06-20

C++怎么实现打气球小游戏

这篇文章主要介绍“C++怎么实现打气球小游戏”,在日常操作中,相信很多人在C++怎么实现打气球小游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”C++怎么实现打气球小游戏”的疑惑有所帮助!接下来,请跟着小编
2023-06-20

Python中turtle怎么实现球类小游戏

本篇内容主要讲解“Python中turtle怎么实现球类小游戏”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python中turtle怎么实现球类小游戏”吧!1. 前言turtle (小海龟)
2023-07-06

怎么使用CocosCreator实现射击小游戏

这篇文章主要介绍怎么使用CocosCreator实现射击小游戏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!分析下制作步骤:1. 准备好资源,搭建场景资源的话可以自己到网上找,也可以直接用我的也行;创建好相应文件夹,
2023-06-14

怎么使用Vue2+JS实现扫雷小游戏

这篇文章主要讲解了“怎么使用Vue2+JS实现扫雷小游戏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用Vue2+JS实现扫雷小游戏”吧!实现步骤1、场景布局实现布局就是经典的方格布局
2023-07-02

怎么用Python实现2048小游戏

这篇文章主要介绍怎么用Python实现2048小游戏,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、开发环境Python版本:3.6.4相关模块:pygame模块;以及一些Python自带的模块。二、环境搭建安装P
2023-06-15

怎么用java实现猜拳小游戏

本篇内容介绍了“怎么用java实现猜拳小游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!本文实例为大家分享了java实现猜拳小游戏的具体代
2023-06-20

使用Java怎么实现一个贪吃蛇小游戏

这篇文章将为大家详细讲解有关使用Java怎么实现一个贪吃蛇小游戏,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. 程序结构  程序结构图如图:2. 程序设计思路2.1 Data类作用:连接
2023-06-14

使用js怎么实现简单贪吃蛇小游戏

本篇文章给大家分享的是有关使用js怎么实现简单贪吃蛇小游戏,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
2023-06-15

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网(https://www.python.org/downloads/)下载安装包并安装。Python的默认安装路径是:C:\Python34配置环境变量:【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型,它能够通过学习和理解人类的语言来进行对话,还能根据聊天的上下文进行互动,并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种,不过在C,C++中使用可变参数时要小心,在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少,否则会产生访问越界,运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
  • php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本,常被称为 Python 3000,或简称 Py3k。相对于 Python 的早期版本,这是一个较大的升级。为了不带入过多的累赘,Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中, 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具: easy_install  和  pip , 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译

目录