ChatBox-我用2句提示词就实现了一个网页游戏
如果您也喜欢，可以直接拷贝代码部分另存为任意html文件，就可以直接运行这个游戏了，游戏体验很不错，原来有了大语言模型加持，你我都是程序员！
·
两句话实现一款游戏！
今天，我使用ChatBox只用3句话就实现了一个看起来还不错的贪吃蛇游戏，如上图所示。
下面，给大家展示我是如何实现的以及我输入的2句话。
第一句话：写一个贪吃蛇游戏。
其输出的代码如下。
好的,我可以帮你写一个简单的贪吃蛇游戏。以下是完整的HTML、CSS和JavaScript代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
#gameCanvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const tileCount = canvas.width / gridSize;
let snake = [
{x: 10, y: 10},
];
let food = {x: 15, y: 15};
let dx = 0;
let dy = 0;
function drawGame() {
clearCanvas();
moveSnake();
drawSnake();
drawFood();
checkCollision();
setTimeout(drawGame, 100);
}
function clearCanvas() {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function moveSnake() {
const head = {x: snake[0].x + dx, y: snake[0].y + dy};
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
generateFood();
} else {
snake.pop();
}
}
function drawSnake() {
ctx.fillStyle = 'green';
snake.forEach(segment => {
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
});
}
function drawFood() {
ctx.fillStyle = 'red';
ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
}
function generateFood() {
food.x = Math.floor(Math.random() * tileCount);
food.y = Math.floor(Math.random() * tileCount);
}
function checkCollision() {
const head = snake[0];
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
resetGame();
}
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
resetGame();
}
}
}
function resetGame() {
snake = [{x: 10, y: 10}];
food = {x: 15, y: 15};
dx = 0;
dy = 0;
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -1;
const goingDown = dy === 1;
const goingRight = dx === 1;
const goingLeft = dx === -1;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -1;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -1;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 1;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 1;
}
}
drawGame();
</script>
</body>
</html>
这个贪吃蛇游戏包含以下功能：
使用Canvas绘制游戏界面
蛇可以移动并吃食物
食物随机生成
碰到墙壁或自身会重置游戏
使用方向键控制蛇的移动
你可以将这段代码保存为HTML文件并在浏览器中打开来玩游戏。使用方向键来控制蛇的移动方向。
如果你想要进一步改进这个游戏，可以考虑添加以下功能：
计分系统
游戏开始和结束界面
难度选择（通过调整蛇的移动速度）
音效
更好的视觉效果（如渐变色、图片等）
希望这个例子对你有帮助！如果你有任何问题或需要进一步的解释，请随时问我。输出的游戏代码及UI界面如下图所示，这显然达不到我的要求，来起码得启动按钮都没有。
第二句话：
请进一步改进：
添加方向按键，这样手机触摸屏也能玩
添加游戏得分
添加“开始游戏”与“重新开始”的按钮
重新设计一下 UI 样式
输出的代码如下所示，还是不完美。
当然，我可以帮你改进一下UI。以下是一个改进后的版本，增加了一些视觉效果和游戏控制：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪吃蛇游戏</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.game-container {
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
max-width: 100%;
flex-wrap: wrap;
}
#gameCanvas {
border: 2px solid #333;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
#gameControls {
text-align: center;
margin: 0 auto;
padding: 0 8px;
}
#gameScore {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#score {
font-size: 24px;
margin: 10px 0;
}
#startBtn {
font-size: 18px;
padding: 12px 24px;
background: linear-gradient(145deg, #f0f0f0, #cacaca);
color: #333;
border: none;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 5px 5px 10px #bebebe,
-5px -5px 10px #ffffff;
position: relative;
overflow: hidden;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
}
#startBtn::before {
content: '';
position: absolute;
top: 2px;
left: 2px;
right: 2px;
bottom: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), transparent);
border-radius: 8px 8px 0 0;
pointer-events: none;
}
#startBtn:hover {
transform: translateY(-2px);
box-shadow: 6px 6px 12px #bebebe,
-6px -6px 12px #ffffff;
background: linear-gradient(145deg, #f5f5f5, #d0d0d0);
}
#startBtn:active {
transform: translateY(1px);
box-shadow: inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
background: linear-gradient(145deg, #e6e6e6, #c0c0c0);
}
.controls {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
width: 180px;
margin: 20px auto;
}
.control-btn {
width: 60px;
height: 60px;
font-size: 24px;
background: linear-gradient(145deg, #f0f0f0, #cacaca);
color: #333;
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 5px 5px 10px #bebebe,
-5px -5px 10px #ffffff;
position: relative;
overflow: hidden;
}
.control-btn::before {
content: '';
position: absolute;
top: 5%;
left: 5%;
right: 5%;
bottom: 5%;
border-radius: 50%;
z-index: -1;
}
.control-btn:hover {
transform: translateY(-2px);
box-shadow: 6px 6px 12px #bebebe,
-6px -6px 12px #ffffff;
}
.control-btn:active {
transform: translateY(1px);
box-shadow: inset 4px 4px 8px #bebebe,
inset -4px -4px 8px #ffffff;
}
#up {
grid-column: 2;
}
#left {
grid-column: 1;
grid-row: 2;
}
#right {
grid-column: 3;
grid-row: 2;
}
#down {
grid-column: 2;
grid-row: 3;
}
</style>
</head>
<body>
<div class="game-container">
<canvas id="gameCanvas" width="300" height="300"></canvas>
<div id="gameControls">
<div id="gameScore">
<div id="score">得分: 0</div>
<button id="startBtn">开始游戏</button>
</div>
<div class="controls">
<button id="up" class="control-btn" onclick="changeDirectionByButton('up')">↑</button>
<button id="left" class="control-btn" onclick="changeDirectionByButton('left')">←</button>
<button id="right" class="control-btn" onclick="changeDirectionByButton('right')">→</button>
<button id="down" class="control-btn" onclick="changeDirectionByButton('down')">↓</button>
</div>
</div>
</div>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const startBtn = document.getElementById('startBtn');
const gridSize = 15;
const tileCount = canvas.width / gridSize;
let snake = [{ x: 10, y: 10 }];
let food = { x: 15, y: 15 };
let dx = 0;
let dy = 0;
let score = 0;
let gameRunning = false;
function drawGame() {
if (!gameRunning) return;
clearCanvas();
moveSnake();
drawSnake();
drawFood();
checkCollision();
updateScore();
setTimeout(drawGame, 200);
}
function clearCanvas() {
ctx.fillStyle = '#f0f0f0';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function moveSnake() {
const head = { x: snake[0].x + dx, y: snake[0].y + dy };
snake.unshift(head);
if (head.x === food.x && head.y === food.y) {
generateFood();
score += 10;
} else {
snake.pop();
}
}
function drawSnake() {
snake.forEach((segment, index) => {
const gradient = ctx.createLinearGradient(
segment.x * gridSize,
segment.y * gridSize,
(segment.x + 1) * gridSize,
(segment.y + 1) * gridSize
);
gradient.addColorStop(0, '#4CAF50');
gradient.addColorStop(1, '#45a049');
ctx.fillStyle = gradient;
ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
if (index === 0) {
// Draw eyes
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(segment.x * gridSize + 5, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
ctx.arc(segment.x * gridSize + 10, segment.y * gridSize + 5, 2, 0, 2 * Math.PI);
ctx.fill();
}
});
}
function drawFood() {
const gradient = ctx.createRadialGradient(
food.x * gridSize + gridSize / 2,
food.y * gridSize + gridSize / 2,
2,
food.x * gridSize + gridSize / 2,
food.y * gridSize + gridSize / 2,
gridSize / 2
);
gradient.addColorStop(0, '#ff6b6b');
gradient.addColorStop(1, '#ee5253');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(food.x * gridSize + gridSize / 2, food.y * gridSize + gridSize / 2, gridSize / 2 - 1, 0, 2 * Math.PI);
ctx.fill();
}
function generateFood() {
food.x = Math.floor(Math.random() * tileCount);
food.y = Math.floor(Math.random() * tileCount);
}
function checkCollision() {
const head = snake[0];
if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
gameOver();
}
for (let i = 1; i < snake.length; i++) {
if (head.x === snake[i].x && head.y === snake[i].y) {
gameOver();
}
}
}
function gameOver() {
gameRunning = false;
startBtn.textContent = '重新开始';
startBtn.style.display = 'inline-block';
alert(`游戏结束！你的得分是: ${score}`);
}
function updateScore() {
scoreElement.textContent = `得分: ${score}`;
}
function resetGame() {
snake = [{ x: 10, y: 10 }];
food = { x: 15, y: 15 };
dx = 0;
dy = 0;
score = 0;
updateScore();
}
document.addEventListener('keydown', changeDirection);
function changeDirection(event) {
const LEFT_KEY = 37;
const RIGHT_KEY = 39;
const UP_KEY = 38;
const DOWN_KEY = 40;
const keyPressed = event.keyCode;
const goingUp = dy === -1;
const goingDown = dy === 1;
const goingRight = dx === 1;
const goingLeft = dx === -1;
if (keyPressed === LEFT_KEY && !goingRight) {
dx = -1;
dy = 0;
}
if (keyPressed === UP_KEY && !goingDown) {
dx = 0;
dy = -1;
}
if (keyPressed === RIGHT_KEY && !goingLeft) {
dx = 1;
dy = 0;
}
if (keyPressed === DOWN_KEY && !goingUp) {
dx = 0;
dy = 1;
}
}
function changeDirectionByButton(direction) {
if (direction === 'left' && dx !== 1) {
dx = -1;
dy = 0;
} else if (direction === 'up' && dy !== 1) {
dx = 0;
dy = -1;
} else if (direction === 'down' && dy !== -1) {
dx = 0;
dy = 1;
} else if (direction === 'right' && dx !== -1) {
dx = 1;
dy = 0;
}
}
startBtn.addEventListener('click', () => {
resetGame();
gameRunning = true;
startBtn.style.display = 'none';
drawGame();
});
clearCanvas();
</script>
</body>
</html>
这个改进版本包含以下UI和功能增强：
添加了方向按键，使游戏可以在移动设备上玩
添加了居中的游戏容器，使游戏在页面上更加美观。
改进了Canvas的样式，添加了边框和阴影效果。
添加了得分显示。
添加了开始/重新开始按钮。
为蛇和食物添加了渐变色，使其看起来更有立体感。
为蛇头部添加了眼睛，增加了趣味性。
将食物改为圆形，并添加了渐变效果。
添加了游戏结束时的提示。
改进了整体的配色方案，使用了更柔和的颜色。
这个版本的UI更加美观，游戏体验也更好。你可以将这段代码保存为HTML文件并在浏览器中打开来玩游戏。点击"开始游戏"按钮开始，使用方向键来控制蛇的移动方向。
希望这个改进版本能满足你的需求！如果你还有任何问题或需要进一步的修改，请随时告诉我。
如果您也喜欢，可以直接拷贝代码部分另存为任意html文件，就可以直接运行这个游戏了，游戏体验很不错，原来有了大语言模型加持，你我都是程序员！
火山引擎开发者社区是火山引擎打造的AI技术生态平台，聚焦Agent与大模型开发，提供豆包系列模型（图像/视频/视觉）、智能分析与会话工具，并配套评测集、动手实验室及行业案例库。社区通过技术沙龙、挑战赛等活动促进开发者成长，新用户可领50万Tokens权益，助力构建智能应用。
更多推荐
3
0- 0
已为社区贡献2条内容
所有评论(0)