如何使用 React 制作一个贪吃蛇游戏?

在 React 中创建贪吃蛇游戏

Snake Game 使用 ReactJS 项目实现功能组件并相应地管理状态。开发的游戏允许用户使用箭头键控制蛇或触摸屏幕上显示的按钮来收集食物并增长长度。游戏的目标是在不与墙壁或蛇自己的身体碰撞的情况下吃尽可能多的食物。

最终输出预览: 让我们看看我们的最终项目会是什么样子。

创建贪吃蛇游戏的方法:

给定的代码代表使用 ReactJS 的贪吃蛇游戏项目。它涉及设置蛇、食物、按钮和菜单的组件。游戏以初始状态初始化,处理蛇运动的用户输入,检测碰撞,并相应地更新游戏板。渲染和用户界面的实现是为了显示游戏元素。游戏流程包括菜单和游戏玩法的过渡。

创建贪吃蛇游戏的步骤:

步骤 1: 在 VSCode IDE 中使用以下命令设置 React 项目。

lua 复制代码
 npx create-react-app snack_game

步骤 2: 执行以下命令导航到新创建的项目文件夹。

bash 复制代码
 cd snack_game

步骤 3: 创建一个名为 Components 的文件夹。我们将在此组件文件夹中创建各种组件及其样式文件,例如 Button.js、Food.js、Menu.js、Snake.js、Menu.css 和 Button.css。

贪吃蛇游戏的项目结构:

package.json中更新后的依赖项将如下所示:

json 复制代码
 "dependencies": {
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
 }

示例: 在上述目录结构中提到的App.jsindex.css文件中插入以下代码

App.js

js 复制代码
 // App.js 
 import React, { Component } from "react"; 
 import Snake from "./Components/Snake"; 
 import Food from "./Components/Food"; 
 import Button from "./Components/Button"; 
 import Menu from "./Components/Menu"; 
 import "./App.css"; 
 const getRandomFood = () => { 
   let min = 1; 
   let max = 98; 
   let x = Math.floor((Math.random() * (max - min + 1) + min) / 2) * 2; 
   let y = Math.floor((Math.random() * (max - min + 1) + min) / 2) * 2; 
   return [x, y]; 
 }; 
 ​
 const initialState = { 
   food: getRandomFood(), 
   direction: "RIGHT", 
   speed: 100, 
   route: "menu", 
   snakeDots: [ 
     [0, 0], 
     [0, 2], 
   ], 
 }; 
 ​
 class App extends Component { 
   constructor() { 
     super(); 
     this.state = initialState; 
   } 
 ​
   componentDidMount() { 
     setInterval(this.moveSnake, this.state.speed); 
     document.onkeydown = this.onKeyDown; 
   } 
 ​
   componentDidUpdate() { 
     this.onSnakeOutOfBounds(); 
     this.onSnakeCollapsed(); 
     this.onSnakeEats(); 
   } 
 ​
   onKeyDown = (e) => { 
     e.preventDefault(); 
     e = e || window.event; 
     switch (e.keyCode) { 
       case 37: 
         this.setState({ direction: "LEFT" }); 
         break; 
       case 38: 
         this.setState({ direction: "UP" }); 
         break; 
       case 39: 
         this.setState({ direction: "RIGHT" }); 
         break; 
       case 40: 
         this.setState({ direction: "DOWN" }); 
         break; 
     } 
   }; 
 ​
   moveSnake = () => { 
     let dots = [...this.state.snakeDots]; 
     let head = dots[dots.length - 1]; 
     if (this.state.route === "game") { 
       switch (this.state.direction) { 
         case "RIGHT": 
           head = [head[0] + 2, head[1]]; 
           break; 
         case "LEFT": 
           head = [head[0] - 2, head[1]]; 
           break; 
         case "DOWN": 
           head = [head[0], head[1] + 2]; 
           break; 
         case "UP": 
           head = [head[0], head[1] - 2]; 
           break; 
       } 
       dots.push(head); 
       dots.shift(); 
       this.setState({ 
         snakeDots: dots, 
       }); 
     } 
   }; 
 ​
   onSnakeOutOfBounds() { 
     let head = this.state.snakeDots[this.state.snakeDots.length - 1]; 
     if (this.state.route === "game") { 
       if ( 
         head[0] >= 100 || 
         head[1] >= 100 || 
         head[0] < 0 || 
         head[1] < 0 
       ) { 
         this.gameOver(); 
       } 
     } 
   } 
 ​
   onSnakeCollapsed() { 
     let snake = [...this.state.snakeDots]; 
     let head = snake[snake.length - 1]; 
     snake.pop(); 
     snake.forEach((dot) => { 
       if (head[0] == dot[0] && head[1] == dot[1]) { 
         this.gameOver(); 
       } 
     }); 
   } 
 ​
   onSnakeEats() { 
     let head = this.state.snakeDots[this.state.snakeDots.length - 1]; 
     let food = this.state.food; 
     if (head[0] == food[0] && head[1] == food[1]) { 
       this.setState({ 
         food: getRandomFood(), 
       }); 
       this.increaseSnake(); 
       this.increaseSpeed(); 
     } 
   } 
 ​
   increaseSnake() { 
     let newSnake = [...this.state.snakeDots]; 
     newSnake.unshift([]); 
     this.setState({ 
       snakeDots: newSnake, 
     }); 
   } 
 ​
   increaseSpeed() { 
     if (this.state.speed > 10) { 
       this.setState({ 
         speed: this.state.speed - 20, 
       }); 
     } 
   } 
 ​
   onRouteChange = () => { 
     this.setState({ 
       route: "game", 
     }); 
   }; 
 ​
   gameOver() { 
     alert(`GAME OVER, your score is ${this.state.snakeDots.length - 2}`); 
     this.setState(initialState); 
   } 
 ​
   onDown = () => { 
     let dots = [...this.state.snakeDots]; 
     let head = dots[dots.length - 1]; 
 ​
     head = [head[0], head[1] + 2]; 
     dots.push(head); 
     dots.shift(); 
     this.setState({ 
       direction: "DOWN", 
       snakeDots: dots, 
     }); 
   }; 
 ​
   onUp = () => { 
     let dots = [...this.state.snakeDots]; 
     let head = dots[dots.length - 1]; 
 ​
     head = [head[0], head[1] - 2]; 
     dots.push(head); 
     dots.shift(); 
     this.setState({ 
       direction: "UP", 
       snakeDots: dots, 
     }); 
   }; 
 ​
   onRight = () => { 
     let dots = [...this.state.snakeDots]; 
     let head = dots[dots.length - 1]; 
 ​
     head = [head[0] + 2, head[1]]; 
     dots.push(head); 
     dots.shift(); 
     this.setState({ 
       direction: "RIGHT", 
       snakeDots: dots, 
     }); 
   }; 
 ​
   onLeft = () => { 
     let dots = [...this.state.snakeDots]; 
     let head = dots[dots.length - 1]; 
 ​
     head = [head[0] - 2, head[1]]; 
     dots.push(head); 
     dots.shift(); 
     this.setState({ 
       direction: "LEFT", 
       snakeDots: dots, 
     }); 
   }; 
 ​
   render() { 
     const { route, snakeDots, food } = this.state; 
     return ( 
       <div> 
         {route === "menu" ? ( 
           <div> 
             <Menu onRouteChange={this.onRouteChange} /> 
           </div> 
         ) : ( 
           <div> 
             <div className="game-area"> 
               <Snake snakeDots={snakeDots} /> 
               <Food dot={food} /> 
             </div> 
             <Button 
               onDown={this.onDown} 
               onLeft={this.onLeft} 
               onRight={this.onRight} 
               onUp={this.onUp} 
             /> 
           </div> 
         )} 
       </div> 
     ); 
   } 
 } 
 ​
 export default App; 
 ​

index.css

css 复制代码
 /* index.css */
 body { 
   background-color: #1e1e1e; 
 } 
 ​
 .game-area { 
   position: relative; 
   width: 600px; 
   height: 500px; 
   border: 2px solid #dc042c; 
   border-radius: 10px; 
   margin: 50px auto; 
   display: flex; 
   flex-wrap: wrap; 
   box-shadow: 0 0 10px #abbfc0; 
 } 
 ​
 @media only screen and (max-width: 800px) { 
   .game-area { 
     position: relative; 
     width: 350px; 
     height: 300px; 
   } 
 ​
   .snake { 
     width: 12px; 
     height: 12px; 
   } 
 } 
 ​
 .snake { 
   position: absolute; 
   width: 2%; 
   height: 2%; 
   background-color: #dc042c; 
   border: 1px solid white; 
   z-index: 2; 
 } 
 ​
 .food { 
   position: absolute; 
   width: 12px; 
   height: 12px; 
   background-color: white; 
   border-radius: 20px; 
   z-index: 1; 
 }
 ​

在不同的文件中编写以下提到的代码(每个代码块的第一行都提到了文件名)

  • Button.js: Button.js表示React功能组件,用于在snake游戏中渲染控制蛇移动的按钮。
  • Menu.js: Menu.js文件代码为Snake Game呈现菜单。它显示一个"开始游戏"按钮,并在单击时触发onRouteChange功能。菜单的样式使用"menu.CSS"文件中的CSS
  • Food.js 是一个React组件,它根据提供的坐标在游戏中呈现食物。
  • Snake.js:Snake.js文件代码是一个React组件,它在游戏中基于表示蛇点的坐标数组来渲染蛇。

//Button.js

js 复制代码
 //Button.js 
 import React from "react"; 
 import "./Button.css"; 
 ​
 const Button = ({ onUp, onDown, onLeft, onRight }) => { 
   return ( 
     <div className="buttons"> 
       <div className="upwards"> 
         <input className="up" onClick={onUp} type="button" value="UP" /> 
       </div> 
       <div className="sideways"> 
         <input 
           className="left"
           onClick={onLeft} 
           type="button"
           value="LEFT"
         /> 
         <input 
           className="right"
           onClick={onRight} 
           type="button"
           value="RIGHT"
         /> 
       </div> 
       <div className="downwards"> 
         <input 
           className="down"
           onClick={onDown} 
           type="button"
           value="DOWN"
         /> 
       </div> 
     </div> 
   ); 
 }; 
 export default Button; 
 ​

Food.js

js 复制代码
 //Food.js 
 import React from "react"; 
 ​
 const Food = (props) => { 
   const style = { 
     left: `${props.dot[0]}%`, 
     top: `${props.dot[1]}%`, 
   }; 
   return <div className="food" style={style} />; 
 }; 
 ​
 export default Food; 
 ​
js 复制代码
 //Menu.js 
 import React from "react"; 
 import "./Menu.css"; 
 ​
 const Menu = ({ onRouteChange }) => { 
   return ( 
     <div className="wrapper"> 
       <div> 
         <input 
           onClick={onRouteChange} 
           className="start"
           type="button"
           value="start game"
         /> 
       </div> 
     </div> 
   ); 
 }; 
 ​
 export default Menu; 
 ​

Snake.js

js 复制代码
 //Snake.js 
 import React from "react"; 
 ​
 const Snake = (props) => { 
   return ( 
     <div> 
       {props.snakeDots.map((dot, i) => { 
         const style = { 
           left: `${dot[0]}%`, 
           top: `${dot[1]}%`, 
         }; 
         return <div className="snake" key={i} style={style} />; 
       })} 
     </div> 
   ); 
 }; 
 export default Snake; 
 ​

Button.css

css 复制代码
 /* Button.css */
 .upwards, 
 .downwards { 
   display: flex; 
   justify-content: center; 
 } 
 ​
 .sideways { 
   display: flex; 
   justify-content: center; 
   margin: 10px; 
 } 
 ​
 .left, 
 .right { 
   margin: 50px; 
   padding: 20px; 
   border: 0px solid; 
   border-radius: 20px; 
   border: 1px solid white; 
   color: #dc042c; 
   background: #1e1e1e; 
   box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.6); 
 } 
 ​
 .up, 
 .down { 
   padding: 20px; 
   border: 0px solid; 
   border-radius: 20px; 
   border: 1px solid white; 
   color: #dc042c; 
   background: #1e1e1e; 
   box-shadow: 5px -5px 10px rgba(0, 0, 0, 0.6); 
 }
 ​
css 复制代码
 /* Menu.css */
 .wrapper { 
   position: relative; 
   width: 200px; 
   height: 250px; 
   border: 2px solid #dc042c; 
   /* border-radius: 10px; */
   margin: 50px auto; 
   margin-top: 200px; 
   display: flex; 
   flex-wrap: wrap; 
   justify-content: center; 
   /* box-shadow: 0 0 10px #abbfc0; */
 } 
 ​
 .start { 
   margin: 100px; 
   background: #1e1e1e; 
   color: white; 
   border-radius: 7px; 
   border: 0px; 
   padding: 10px; 
   font-size: 1.2em; 
   box-shadow: 0 0 70px #abbfc0; 
   font-family: "Courier New", Courier, monospace; 
 }
 ​

启动我们的程序:

Step 1: 在命令行执行一下命令启动项目程序

shell 复制代码
 npm start

Step 2: 在浏览器地址中打开一下地址 http://localhost:3000/

shell 复制代码
 http://localhost:3000/

输出:

相关推荐
brief of gali4 分钟前
记录一个奇怪的前端布局现象
前端
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q2 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海2 小时前
Chrome离线安装包下载
前端·chrome