console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网页游戏中心</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f0f0f0;
}
.game-container {
display: none;
position: relative;
width: 600px;
height: 400px;
background: white;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.game-container.active {
display: block;
}
.game-container canvas {
width: 100%;
height: 100%;
}
.game-container #memoryBoard, #bubbleBoard, #connect4Board, #flappyCanvas, #puzzleBoard {
width: 100%;
height: 100%;
}
.card, .cell, .bubble {
position: absolute;
box-sizing: border-box;
}
.card.hidden, .bubble.hidden {
display: none;
}
.card {
width: 60px;
height: 60px;
background: #ddd;
border: 1px solid #ccc;
text-align: center;
line-height: 60px;
font-size: 24px;
color: #333;
cursor: pointer;
}
.connect4-cell {
width: 60px;
height: 60px;
background-color: #eee;
border: 1px solid #ccc;
display: inline-block;
box-sizing: border-box;
}
.red {
background-color: red;
}
.yellow {
background-color: yellow;
}
.bubble {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #000;
cursor: pointer;
}
.bubble.red { background-color: red; }
.bubble.blue { background-color: blue; }
.bubble.green { background-color: green; }
.bubble.yellow { background-color: yellow; }
.cell {
width: 100px;
height: 100px;
background-color: #ccc;
border: 1px solid #999;
}
</style>
</head>
<body>
<div class="game-container" id="snakeGame">
<h2>贪吃蛇</h2>
<canvas id="snakeCanvas" width="600" height="400"></canvas>
</div>
<div class="game-container" id="pingpongGame">
<h2>乒乓球</h2>
<canvas id="pingpongCanvas" width="600" height="400"></canvas>
</div>
<div class="game-container" id="memoryGame">
<h2>记忆配对</h2>
<div id="memoryBoard"></div>
</div>
<div class="game-container" id="connect4Game">
<h2>四子连珠</h2>
<div id="connect4Board"></div>
</div>
<div class="game-container" id="flappyGame">
<h2>小鸟飞翔</h2>
<canvas id="flappyCanvas" width="600" height="400"></canvas>
</div>
<div class="game-container" id="bubbleGame">
<h2>泡泡龙</h2>
<div id="bubbleBoard"></div>
</div>
<div class="game-container" id="puzzleGame">
<h2>拼图</h2>
<div id="puzzleBoard"></div>
</div>
<button onclick="showGame('snakeGame')">贪吃蛇</button>
<button onclick="showGame('pingpongGame')">乒乓球</button>
<button onclick="showGame('memoryGame')">记忆配对</button>
<button onclick="showGame('connect4Game')">四子连珠</button>
<button onclick="showGame('flappyGame')">小鸟飞翔</button>
<button onclick="showGame('bubbleGame')">泡泡龙</button>
<button onclick="showGame('puzzleGame')">拼图</button>
<script>
const snakeCanvas = document.getElementById('snakeCanvas');
const snakeCtx = snakeCanvas.getContext('2d');
const gridSize = 20;
const snakeSpeed = 150;
let snake = [{ x: 160, y: 200 }];
let food = { x: 200, y: 200 };
let dx = gridSize;
let dy = 0;
let gameInterval;
function drawSnake() {
snakeCtx.clearRect(0, 0, snakeCanvas.width, snakeCanvas.height);
snakeCtx.fillStyle = 'green';
snake.forEach(segment => snakeCtx.fillRect(segment.x, segment.y, gridSize, gridSize));
snakeCtx.fillStyle = 'red';
snakeCtx.fillRect(food.x, food.y, gridSize, gridSize);
}
function moveSnake() {
const head = { ...snake[0] };
head.x += dx;
head.y += dy;
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
food = {
x: Math.floor(Math.random() * (snakeCanvas.width / gridSize)) * gridSize,
y: Math.floor(Math.random() * (snakeCanvas.height / gridSize)) * gridSize
};
} else {
snake.pop();
}
if (head.x < 0 || head.y < 0 || head.x >= snakeCanvas.width || head.y >= snakeCanvas.height || snake.some(segment => segment.x === head.x && segment.y === head.y)) {
clearInterval(gameInterval);
alert('游戏结束');
document.location.reload();
}
drawSnake();
}
function changeDirection(event) {
switch (event.key) {
case 'ArrowUp':
if (dy === 0) { dx = 0; dy = -gridSize; }
break;
case 'ArrowDown':
if (dy === 0) { dx = 0; dy = gridSize; }
break;
case 'ArrowLeft':
if (dx === 0) { dx = -gridSize; dy = 0; }
break;
case 'ArrowRight':
if (dx === 0) { dx = gridSize; dy = 0; }
break;
}
}
function startSnake() {
document.addEventListener('keydown', changeDirection);
gameInterval = setInterval(moveSnake, snakeSpeed);
}
const pingpongCanvas = document.getElementById('pingpongCanvas');
const pingpongCtx = pingpongCanvas.getContext('2d');
const paddleWidth = 10;
const paddleHeight = 100;
const ballRadius = 10;
let paddle1 = { x: 0, y: pingpongCanvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight };
let paddle2 = { x: pingpongCanvas.width - paddleWidth, y: pingpongCanvas.height / 2 - paddleHeight / 2, width: paddleWidth, height: paddleHeight };
let ball = { x: pingpongCanvas.width / 2, y: pingpongCanvas.height / 2, radius: ballRadius, dx: 2, dy: 2 };
function drawPingPong() {
pingpongCtx.clearRect(0, 0, pingpongCanvas.width, pingpongCanvas.height);
pingpongCtx.fillStyle = '#00F';
pingpongCtx.beginPath();
pingpongCtx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
pingpongCtx.fill();
pingpongCtx.fillStyle = '#F00';
pingpongCtx.fillRect(paddle1.x, paddle1.y, paddle1.width, paddle1.height);
pingpongCtx.fillRect(paddle2.x, paddle2.y, paddle2.width, paddle2.height);
}
function movePingPong() {
ball.x += ball.dx;
ball.y += ball.dy;
if (ball.y + ball.dy > pingpongCanvas.height - ball.radius || ball.y + ball.dy < ball.radius) {
ball.dy = -ball.dy;
}
if (ball.x + ball.dx < paddle1.x + paddle1.width + ball.radius && ball.y > paddle1.y && ball.y < paddle1.y + paddle1.height) {
ball.dx = -ball.dx;
}
if (ball.x + ball.dx > paddle2.x - ball.radius && ball.y > paddle2.y && ball.y < paddle2.y + paddle2.height) {
ball.dx = -ball.dx;
}
if (ball.x + ball.dx < 0 || ball.x + ball.dx > pingpongCanvas.width) {
ball.x = pingpongCanvas.width / 2;
ball.y = pingpongCanvas.height / 2;
ball.dx = -ball.dx;
ball.dy = 2;
}
drawPingPong();
}
function movePaddle(event) {
switch (event.key) {
case 'w':
if (paddle1.y > 0) paddle1.y -= 10;
break;
case 's':
if (paddle1.y < pingpongCanvas.height - paddleHeight) paddle1.y += 10;
break;
case 'ArrowUp':
if (paddle2.y > 0) paddle2.y -= 10;
break;
case 'ArrowDown':
if (paddle2.y < pingpongCanvas.height - paddleHeight) paddle2.y += 10;
break;
}
}
function startPingPong() {
document.addEventListener('keydown', movePaddle);
setInterval(movePingPong, 10);
}
const memoryBoard = document.getElementById('memoryBoard');
let memoryCards = [];
let firstCard = null;
let secondCard = null;
let lockBoard = false;
function createMemoryBoard() {
memoryCards = [];
const cardValues = Array.from({ length: 8 }, (_, i) => i + 1).flatMap(num => [num, num]);
cardValues.sort(() => 0.5 - Math.random());
cardValues.forEach(value => {
const card = document.createElement('div');
card.className = 'card';
card.dataset.value = value;
card.addEventListener('click', () => flipCard(card));
memoryBoard.appendChild(card);
memoryCards.push(card);
});
}
function flipCard(card) {
if (lockBoard || card === firstCard || card.classList.contains('flipped')) return;
card.classList.add('flipped');
card.textContent = card.dataset.value;
if (!firstCard) {
firstCard = card;
} else {
secondCard = card;
lockBoard = true;
checkMatch();
}
}
function checkMatch() {
if (firstCard.dataset.value === secondCard.dataset.value) {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
resetBoard();
} else {
setTimeout(() => {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
firstCard.textContent = '';
secondCard.textContent = '';
resetBoard();
}, 1000);
}
}
function resetBoard() {
[firstCard, secondCard] = [null, null];
lockBoard = false;
}
function startMemory() {
createMemoryBoard();
}
const connect4Board = document.getElementById('connect4Board');
const boardRows = 6;
const boardCols = 7;
let currentPlayer = 'red';
const board = Array(boardRows).fill(null).map(() => Array(boardCols).fill(null));
function createConnect4Board() {
connect4Board.innerHTML = '';
for (let row = 0; row < boardRows; row++) {
for (let col = 0; col < boardCols; col++) {
const cell = document.createElement('div');
cell.className = 'connect4-cell';
cell.dataset.row = row;
cell.dataset.col = col;
cell.addEventListener('click', () => dropDisc(col));
connect4Board.appendChild(cell);
}
}
}
function dropDisc(col) {
for (let row = boardRows - 1; row >= 0; row--) {
if (!board[row][col]) {
board[row][col] = currentPlayer;
updateBoard();
if (checkWin(row, col)) {
alert(`${currentPlayer} 胜利!`);
resetConnect4();
} else {
currentPlayer = currentPlayer === 'red' ? 'yellow' : 'red';
}
break;
}
}
}
function updateBoard() {
Array.from(connect4Board.children).forEach(cell => {
const row = cell.dataset.row;
const col = cell.dataset.col;
cell.className = `connect4-cell ${board[row][col]}`;
});
}
function checkWin(row, col) {
return false;
}
function resetConnect4() {
board.forEach(row => row.fill(null));
updateBoard();
currentPlayer = 'red';
}
function startConnect4() {
createConnect4Board();
}
const flappyCanvas = document.getElementById('flappyCanvas');
const flappyCtx = flappyCanvas.getContext('2d');
const birdSize = 20;
let bird = { x: 50, y: flappyCanvas.height / 2, width: birdSize, height: birdSize, dy: 0 };
const gravity = 0.6;
const jump = -12;
let pipes = [];
let pipeWidth = 50;
let pipeGap = 150;
let pipeInterval = 1500;
let lastPipeTime = 0;
function drawFlappy() {
flappyCtx.clearRect(0, 0, flappyCanvas.width, flappyCanvas.height);
flappyCtx.fillStyle = 'yellow';
flappyCtx.fillRect(bird.x, bird.y, bird.width, bird.height);
pipes.forEach(pipe => {
flappyCtx.fillStyle = 'green';
flappyCtx.fillRect(pipe.x, 0, pipeWidth, pipe.top);
flappyCtx.fillRect(pipe.x, pipe.top + pipeGap, pipeWidth, flappyCanvas.height - pipe.top - pipeGap);
});
}
function updateFlappy() {
bird.dy += gravity;
bird.y += bird.dy;
if (bird.y + bird.height > flappyCanvas.height || bird.y < 0) {
alert('游戏结束');
document.location.reload();
}
pipes.forEach(pipe => {
pipe.x -= 2;
if (pipe.x + pipeWidth < 0) {
pipes.shift();
}
});
if (Date.now() - lastPipeTime > pipeInterval) {
const top = Math.random() * (flappyCanvas.height - pipeGap - 50);
pipes.push({ x: flappyCanvas.width, top });
lastPipeTime = Date.now();
}
drawFlappy();
}
function jumpFlappy() {
bird.dy = jump;
}
function startFlappy() {
document.addEventListener('keydown', jumpFlappy);
setInterval(updateFlappy, 20);
}
const bubbleBoard = document.getElementById('bubbleBoard');
const bubbleRadius = 20;
let bubbles = [];
function drawBubbles() {
bubbleBoard.innerHTML = '';
bubbles.forEach(bubble => {
const bubbleElement = document.createElement('div');
bubbleElement.className = 'bubble';
bubbleElement.style.backgroundColor = bubble.color;
bubbleElement.style.left = `${bubble.x}px`;
bubbleElement.style.top = `${bubble.y}px`;
bubbleElement.addEventListener('click', () => removeBubble(bubble));
bubbleBoard.appendChild(bubbleElement);
});
}
function createBubbles() {
bubbles = [];
const colors = ['red', 'blue', 'green', 'yellow'];
for (let i = 0; i < 30; i++) {
bubbles.push({
x: Math.random() * (bubbleBoard.clientWidth - bubbleRadius),
y: Math.random() * (bubbleBoard.clientHeight - bubbleRadius),
color: colors[Math.floor(Math.random() * colors.length)]
});
}
drawBubbles();
}
function removeBubble(bubble) {
bubbles = bubbles.filter(b => b !== bubble);
drawBubbles();
}
function startBubble() {
createBubbles();
}
const puzzleBoard = document.getElementById('puzzleBoard');
let puzzlePieces = [];
let emptyPiece = { x: 3, y: 3 };
const pieceSize = 100;
function createPuzzle() {
puzzleBoard.innerHTML = '';
puzzlePieces = [];
for (let y = 0; y < 4; y++) {
for (let x = 0; x < 4; x++) {
if (x === 3 && y === 3) continue;
const piece = document.createElement('div');
piece.className = 'cell';
piece.style.backgroundImage = `url('your-image-url.jpg')`;
piece.style.backgroundPosition = `-${x * pieceSize}px -${y * pieceSize}px`;
piece.dataset.x = x;
piece.dataset.y = y;
piece.addEventListener('click', () => movePiece(piece));
puzzleBoard.appendChild(piece);
puzzlePieces.push(piece);
}
}
}
function movePiece(piece) {
const x = parseInt(piece.dataset.x);
const y = parseInt(piece.dataset.y);
if ((x === emptyPiece.x && Math.abs(y - emptyPiece.y) === 1) || (y === emptyPiece.y && Math.abs(x - emptyPiece.x) === 1)) {
piece.dataset.x = emptyPiece.x;
piece.dataset.y = emptyPiece.y;
emptyPiece.x = x;
emptyPiece.y = y;
drawPuzzle();
}
}
function drawPuzzle() {
puzzlePieces.forEach(piece => {
piece.style.left = `${piece.dataset.x * pieceSize}px`;
piece.style.top = `${piece.dataset.y * pieceSize}px`;
});
}
function startPuzzle() {
createPuzzle();
}
function showGame(gameId) {
document.querySelectorAll('.game-container').forEach(container => {
container.classList.remove('active');
});
document.getElementById(gameId).classList.add('active');
switch (gameId) {
case 'snakeGame':
startSnake();
break;
case 'pingpongGame':
startPingPong();
break;
case 'memoryGame':
startMemory();
break;
case 'connect4Game':
startConnect4();
break;
case 'flappyGame':
startFlappy();
break;
case 'bubbleGame':
startBubble();
break;
case 'puzzleGame':
startPuzzle();
break;
}
}
</script>
</body>
</html>