发布时间:2024-10-12作者:陈宇谦点击:
经典 HTML 小游戏
贪吃蛇:控制一条蛇在方格上吃食物,同时避开墙壁和自己。
俄罗斯方块:排列不同形状的方块,形成水平线或垂直线以清除它们。
扫雷:根据数字提示,找到并标记隐藏的雷区。
数独:用数字填充网格中的空白单元格,每个行、列和 3x3 方块中只能包含一个数字 1-9。
纸牌接龙:安排纸牌以创建国王到 A 的序列,并按花色排序。
井字棋:在 3x3 网格中放置 X 或 O,以获得三连线。
泡泡射击:用彩色泡泡射击,将三个或更多相同颜色的泡泡匹配并弹出。
2048:合并相同数字的方块来创建更大的数字,目标是创建 2048。
较新的 HTML 小游戏
Agar.io:控制一个圆圈状的细胞,吃掉其他较小的细胞并增长。
Threes!:滑动数字瓷砖,将相邻的相同数字合并为更大的数字。
Flappy Bird:控制一只鸟,避开管道并尽可能飞得更远。
DogeMiner:挖掘狗币并升级你的农场,成为最富有的狗狗矿工。
Blobby Volley 2:控制弹簧形状的角色进行排球比赛。
Hexanaut:操纵六角形方块,解决谜题并逃离迷宫。
Cut the Rope:帮助 Om Nom 吃到所有糖果,通过切割绳索。
Hill Climb Racing:驾驶越野车,克服崎岖的地形并执行特技。
创建自己的 HTML 小游戏
要创建自己的 HTML 小游戏,您需要了解 HTML、CSS 和 JavaScript 的基础知识。一些有用的资源包括:
[MDN Web Docs]()
[W3Schools]()
[JavaScript Tutorial]()
还有许多在线游戏引擎可以简化创建 HTML 游戏的过程:
[Phaser]()
[PixiJS]()
[Babylon.js]()
html
body {
background-color: f8f8f8;
}
.board {
width: 600px;
height: 600px;
margin: auto;
border: 1px solid 000;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
}
.cell {
width: 100%;
height: 100%;
cursor: pointer;
}
.black {
background-color: black;
}
.white {
background-color: white;
}
.win {
background-color: green;
}
// 获取棋盘元素
const board = document.querySelector('.board');
// 创建棋盘
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.setAttribute('data-row', i);
cell.setAttribute('data-col', j);
board.appendChild(cell);
}
}
// 轮到谁下棋
let turn = 'black';
// 获胜的连子数
const winNum = 5;
// 棋盘数据
let boardData = [];
for (let i = 0; i < 15; i++) {
boardData.push([]);
for (let j = 0; j < 15; j++) {
boardData[i].push(0);
}
}
// 落子
function drop(e) {
// 获取当前位置
const row = e.target.getAttribute('data-row');
const col = e.target.getAttribute('data-col');
// 判断当前位置是否已落子
if (boardData[row][col] !== 0) {
return;
}
// 落子
if (turn === 'black') {
e.target.classList.add('black');
boardData[row][col] = 1;
} else {
e.target.classList.add('white');
boardData[row][col] = 2;
}
// 判断是否胜利
if (checkWin(row, col)) {
alert(`${turn}获胜!`);
return;
}
// 切换轮到谁下棋
turn = turn === 'black' ? 'white' : 'black';
}
// 判断是否胜利
function checkWin(row, col) {
// 检查水平方向
let count = 1;
for (let i = col - 1; i >= 0; i--) {
if (boardData[row][i] === boardData[row][col]) {
count++;
} else {
break;
}
}
for (let i = col + 1; i < 15; i++) {
if (boardData[row][i] === boardData[row][col]) {
count++;
} else {
break;
}
}
if (count >= winNum) {
return true;
}
// 检查垂直方向
count = 1;
for (let i = row - 1; i >= 0; i--) {
if (boardData[i][col] === boardData[row][col]) {
count++;
} else {
break;
}
}
for (let i = row + 1; i < 15; i++) {
if (boardData[i][col] === boardData[row][col]) {
count++;
} else {
break;
}
}
if (count >= winNum) {
return true;
}
// 检查右斜方向
count = 1;
for (let i = row - 1, j = col + 1; i >= 0 && j < 15; i--, j++) {
if (boardData[i][j] === boardData[row][col]) {
count++;
} else {
break;
}
}
for (let i = row + 1, j = col - 1; i < 15 && j >= 0; i++, j--) {
if (boardData[i][j] === boardData[row][col]) {
count++;
} else {
break;
}
}
if (count >= winNum) {
return true;
}
// 检查左斜方向
count = 1;
for (let i = row - 1, j = col - 1; i >= 0 && j >= 0; i--, j--) {
if (boardData[i][j] === boardData[row][col]) {
count++;
} else {
break;
}
}
for (let i = row + 1, j = col + 1; i < 15 && j < 15; i++, j++) {
if (boardData[i][j] === boardData[row][col]) {
count++;
} else {
break;
}
}
if (count >= winNum) {
return true;
}
return false;
}
// 添加事件监听器
board.addEventListener('click', drop);
2023-08-31
2023-10-14
2023-08-05
2023-08-29
2023-09-25
2023-09-23
2023-09-23
2023-09-11
2023-09-23
2023-09-06