家好，我是Echa。
前段時間有00后前端程序員粉絲私信小編問道：小時候我們玩什么小游戲，用Vue和React可以開發簡易的Web站點小游戲嗎？這一類的問題。立馬勾起了小編的小時候玩的那些經典小游戲愛的那么癡迷。
經典小游戲愛的那么癡迷
作為80后的小編，雖然禿頭程序員沒有頭發，但是童心還是一直都在的。對于童年時玩過的那些經典游戲，我們始終難以忘懷。回憶和懷念經典最好的方式就是重新體驗它們！GitHub作為程序員們的開源寶庫，有著很多非常好的項目。.其中有許多可以稱之為經典，像《俄羅斯方塊》、《記憶翻牌》、《掃雷》、《貪吃蛇》、《坦克大戰》等等陪伴我們度過了兒時快樂的時光。
小霸王學習機 一句“小霸王其樂無窮啊”能夠勾起多少八零九零的集體回憶，曾經靠一副手柄就能爽快打完魂斗羅、沙羅曼蛇、雪人兄弟、忍者神龜、超級瑪麗..。
小霸王
借此機會，小編給大家好物分享10個經典小游戲開源項目（Vue、React版），免費送一個。希望忙碌的粉絲們勞逸結合，可以玩玩，放松放松，有利于身心健康。不過千萬別成謎語游戲無法自拔的那種，玩也有一個度。
下面小編給一一介紹，看看哪款游戲是你們的最愛:你可以在試玩過程中自定義游戲關卡并學習源代碼。
Github：https://github.com/chvin/react-tetris
體驗：https://chvin.github.io/react-tetris/?lan=en
react-tetris - 經典俄羅斯方塊小游戲
復刻經典的俄羅斯方塊，該項目采用 React+Redux+Immutable 的技術棧。這款游戲的復刻程度堪稱像素級別，不僅體現在畫面上，還有流暢度、玩法、音效等方面都做到了極致。
俄羅斯方塊是一直各類程序語言熱衷實現的經典游戲，JavaScript的實現版本也有很多，用React 做好俄羅斯方塊則成了我一個目標。
Github：https://github.com/martindrapeau/backbone-game-engine
體驗：http://martindrapeau.github.io/backbone-game-engine/super-mario-bros/index.html
backbone-game-engine - 超級馬里奧
超級馬里奧是比較經典的GBA游戲了，這個紅帽子藍吊帶的大胡子工人陪伴著很多90后度過童年。這個游戲支持游戲自定義道具，充分回味童年的樂趣。
特性：
Github：https://github.com/shinima/battle-city
體驗：https://battle-city.js.org
坦克大戰 單人打
《坦克大戰》是由日本南夢宮Namco游戲公司開發的一款平面射擊游戲，于1985年發售。游戲以坦克戰斗及保衛基地為主題，屬于策略型聯機類。 這個項目在很大程度上還原了坦克大戰游戲。圖標、音效和界面等方面，各個細節的幾乎一模一樣。
坦克大戰 雙人打
該 GitHub 倉庫的版本是經典坦克大戰的復刻版本，基于原版素材，使用 React 將各類素材封裝為對應的組件。素材使用 SVG 進行渲染以展現游戲的像素風，可以先調整瀏覽器縮放再進行游戲，1080P 屏幕下使用 200% 縮放為最佳。此游戲使用網頁前端技術進行開發，主要使用 React 進行頁面展現，使用 Immutable.js 作為數據結構工具庫，使用 redux 管理游戲狀態，以及使用 redux-saga/little-saga 處理復雜的游戲邏輯。
Github：https://github.com/ekinkaradag/snake-vue3
經典貪吃蛇小游戲
snake-vue3 基于 Vue 3.3、Vite、Vuex 實現的經典貪吃蛇游戲。
Github：https://github.com/laoqiu233/minesweeper-react
Win98 的風格掃雷小游戲
一個掃雷游戲，作者嘗試使用老式字體和經典的 Win98 圖標，用 CSS 復制 Win98 的風格，使這個項目盡可能真實。該項目使用的技術棧包括：TypeScript、Webpack、React、Redux、React Router。
Github：https://github.com/RylanBot/threejs-tetris-react
3D 俄羅斯方塊游戲
基于 Three.js、React、TypeScript 實現的 3D 俄羅斯方塊游戲，可以拖動旋轉頁面進行觀察。
Github：https://github.com/HabitRPG/habitica
RPG 角色扮演游戲
這是一個培養習慣的開源應用，那它為什么會出現在游戲集合里呢？因為它會將你培養習慣的過程，當作一個 RPG 角色扮演游戲。
你需要根據設定的習慣，創建對應現實中需要完成的任務，當你完成一個任務時會獲得相應的經驗和金幣，這些東西可以用來提升虛擬人物的等級以及購買裝備。但當任務失敗時，對應的將失去血量作為懲罰。隨著你的等級提升，將會開啟更多的玩法，比如：孵化寵物、職業、專屬技能、組隊打副本等。
Github：https://github.com/Aklilu-Mandefro/game-application-using-react-and-typescript
簡單 2D 蛇游戲
使用 React 和 TypeScript 構建的簡單 2D 蛇游戲。可以使用 w、a、s 和 d 鍵來移動蛇。當吃掉水果時，得分和蛇的長度會動態增加，使用 canvas 元素構建。其用到的技術包括：React、Chakra-UI、Redux、Redux-saga。
Github：https://github.com/WeiChongDevelops/3072
體驗：https://3072.vercel.app/
3072 數字合并游戲
3072 是一款受流行游戲“2048”啟發的數字合并游戲，但游戲玩法與2048截然不同，使用的是 3 的倍數而不是 2，這真的是一種非常深刻和令人振奮的用戶體驗改變。這個項目使用 TypeScript、React 和 Tailwind CSS 構建，確保高性能的交互性和令人驚艷的響應式設計。
Github：https://github.com/Kirill2603/3d-chess-v2
經典國際象棋游戲
使用 React、Redux Toolkit、ThreeJS、React Three Fiber、ChessJS 和 ChakraUI 構建的經典國際象棋游戲。
Github：https://github.com/LAxBANDA/frontend-concentration-or-memory#concentration-or-memory-game
記憶翻牌游戲
使用 Vue3.3、Pinia、Webpack、TypeScript 開發的一款記憶翻牌游戲。
粉絲們，有沒有勾起你們兒童對回憶？喜歡哪款經典小游戲呢？
歡迎在評論區分享討論。
一臺電腦,一個鍵盤,盡情揮灑智慧的人生;
幾行數字,幾個字母,認真編寫生活的美好;
一 個靈感,一段程序,推動科技進步,促進社會發展。
創作不易，喜歡的老鐵們加個關注，點個贊，打個賞，后面會不定期更新干貨和技術相關的資訊，速速收藏，謝謝！你們的一個小小舉動就是對小編的認可，更是創作的動力。
創作文章的初心是：沉淀、分享和利他。既想寫給現在的你，也想貪心寫給 10 年、20 年后的工程師們，現在的你站在浪潮之巔，面對魔幻的互聯網世界，很容易把一條河流看成整片大海。未來的讀者已經知道了這段技術的發展歷史，但難免會忽略一些細節。如果未來的工程師們真的創造出了時間旅行機器，可以讓你回到現在。那么小編的創作就是你和當年工程師們的接頭暗號，你能感知到他們在這個時代的鍵盤上留下的余溫。
webpack 是一種前端資源構建工具，一個靜態模塊打包器(module bundler)。
在 webpack 看來, 前端的所有資源文件(js/json/css/img/less/...)都會作為模塊處理。
它將根據模塊的依賴關系進行靜態分析，打包生成對應的靜態資源(bundle)。
入口(Entry)指示 webpack 以哪個文件為入口起點開始打包，分析構建內部依賴圖。
輸出(Output)指示 webpack 打包后的資源 bundles 輸出到哪里去，以及如何命名。
Loader 讓 webpack 能夠去處理那些非 JavaScript 文件(webpack 自身只理解JavaScript)
插件(Plugins)可以用于執行范圍更廣的任務。插件的范圍包括，從打包優化和壓縮，一直到重新定義環境中的變量等。
模式(Mode)指示 webpack 使用相應模式的配置。
npm init//【全局安裝】
npm install webpack webpack-cli -g
//【本地安裝
npm install webpack webpack-cli -Dwebpack src/js/index.js -o build/js/built.js --mode=development功能: webpack 能夠編譯打包 js 和 json 文件，并且能將 es6 的模塊化語法轉換成瀏覽器能識別的語法。
生產環境指令:
webpack src/js/index.js -o build/js/built.js --mode=production功能:在開發配置功能上多一個功能，壓縮代碼。
const { resolve } = require('path'); // node 內置核心模塊，用來處理路徑問題。
module.exports = {
entry: './src/js/index.js', // 入口文件
output: { // 輸出配置
filename: './built.js',
path: resolve(__dirname, 'build/js')
},
mode: 'development' //開發環境
}; webpack1.創建文件
2. 下載安裝 loader 包
npm i css-loader style-loader less-loader less -D // resolve 用來拼接絕對路徑的方法
const { resolve } = require('path');
module.exports = {
// webpack 配置// 入口起點
entry: './src/index.js',
// 輸出
output: {
// 輸出文件名
filename: 'built.js',
// 輸出路徑// __dirname nodejs 的變量，代表當前文件的目錄絕對路徑
path: resolve(__dirname, 'build')
},
// loader 的配置
module: {
rules: [// 詳細 loader 配置// 不同文件必須配置不同 loader 處理
{
// 匹配哪些文件
test: /\.css$/,
// 使用哪些 loader 進行處理
use: [
// use 數組中 loader 執行順序:從右到左，從下到上 依次執行
// 創建 style 標簽，將 js 中的樣式資源插入進行，添加到 head 中生效
'style-loader',
// 將 css 文件變成 commonjs 模塊加載 js 中，里面內容是樣式字符串
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 將 less 文件編譯成 css 文件// 需要下載 less-loader 和 less
'less-loader'
]
}
]
},
// plugins 的配置
plugins: [
// 詳細 plugins 的配置
],
// 模式
mode: 'development', // 開發模式// mode: 'production'
} webpacknpm install --save-dev html-webpack-plugin
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
]
},
plugins: [
// plugins 的配置
// html-webpack-plugin
// 功能:默認會創建一個空的 HTML，自動引入打包輸出的所有資源(JS/CSS)
// 需求:需要有結構的 HTML 文件
new HtmlWebpackPlugin({
// 復制 './src/index.html' 文件，并自動引入打包輸出的所有資源(JS/CSS)
template: './src/index.html'
})
],
mode: 'development'
}; 4.運行指令:
webpack1.創建文件
2.下載安裝 loader 包
npm install --save-dev html-loader url-loader file-loader3.修改配置文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{test: /\.less$/,// 要使用多個 loader 處理用 use
use: ['style-loader', 'css-loader', 'less-loader']
},{
// 問題:默認處理不了 html 中 img 圖片
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
// 使用一個 loader
// 下載 url-loader file-loader
loader: 'url-loader',
options: {
// 圖片大小小于8kb，就會被base64處理
// 優點: 減少請求數量(減輕服務器壓力)
// 缺點:圖片體積會更大(文件請求速度更慢)
limit: 8 * 1024,
// 問題:因為url-loader默認使用es6模塊化解析，而html-loader引入圖片是commonjs
// 解析時會出問題:[object Module]
// 解決:關閉 url-loader 的 es6 模塊化，使用 commonjs 解析
esModule: false,
// 給圖片進行重命名
// [hash:10]取圖片的 hash 的前 10 位
// [ext]取文件原來擴展名
name: '[hash:10].[ext]'
}},
{
test: /\.html$/,// 處理 html 文件的 img 圖片(負責引入 img，從而能被 url-loader 進行處理)
loader: 'html-loader'
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})],
mode: 'development'
};
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他資源(除了html/js/css資源以外的資源)
{
// 排除 css/js/html 資源
exclude: /\.(css|js|html|less)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development'
};
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/index.js',
output: {
filename: 'built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 打包其他資源(除了html/js/css資源以外的資源)
{
// 排除 css/js/html 資源
exclude: /\.(css|js|html|less)$/, loader: 'file-loader',
options: {
name: '[hash:10].[ext]'
}
}]
},
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
// 項目構建后路徑
contentBase: resolve(__dirname, 'build'),
// 啟動 gzip 壓縮
compress: true,
// 端口號
port: 3000,
// 自動打開瀏覽器
open: true
}}; npx webpack-dev-server1.創建文件
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/js/index.js',
output: {
filename: 'js/built.js',
path: resolve(__dirname, 'build')
},
module: {
rules: [
// loader 的配置
{
// 處理 less 資源
test: /\.less$/,
use: ['style-loader', 'css-loader', 'less-loader']
},{
// 處理css資源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},{
// 處理圖片資源
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
limit: 8 * 1024,
name: '[hash:10].[ext]',
// 關閉es6模塊化
esModule: false,
outputPath: 'imgs'
}},
{
// 處理html中img資源
test: /\.html$/,
loader: 'html-loader'
},
{ // 處理其他資源
exclude: /\.(html|js|css|less|jpg|png|gif)/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media'
}
}
]
},
plugins: [
// plugins 的配置new HtmlWebpackPlugin({
template: './src/index.html'
})
],
mode: 'development',
devServer: {
contentBase: resolve(__dirname, 'build'),
compress: true,
port: 3000,
open: true
}}; npx webpack-dev-server暫時寫到這里吧。