各位精神股东，大家好，今天带来deepseek更新后的代码能力测评，让AI模拟一颗树生长的过程，个人感觉挺有意思的
一、废话不多说，直接写提示词：你可以用html实现一棵树从树苗长大到参天大树吗？
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
color: #fff;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
overflow-x: hidden;
}
header {
text-align: center;
margin: 20px 0;
max-width: 800px;
z-index: 10;
}
h1 {
font-size: 2.8rem;
margin-bottom: 10px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
background: linear-gradient(to right, #c0e218, #f8f8a0, #c0e218);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.subtitle {
font-size: 1.2rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1400px;
margin: 20px auto;
}
.canvas-container {
position: relative;
background: rgba(0, 20, 40, 0.6);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
width: 700px;
height: 600px;
}
canvas {
background: linear-gradient(to bottom, #0a1a30, #1d3b5f);
display: block;
border-radius: 15px;
}
.info-panel {
background: rgba(10, 30, 50, 0.7);
border-radius: 15px;
padding: 25px;
width: 350px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(100, 180, 255, 0.2);
backdrop-filter: blur(5px);
}
.panel-title {
font-size: 1.8rem;
margin-bottom: 20px;
color: #a0e050;
text-align: center;
text-shadow: 0 0 10px rgba(160, 224, 80, 0.4);
}
.growth-stages {
margin-bottom: 30px;
}
.stage {
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}
.stage h3 {
display: flex;
align-items: center;
font-size: 1.2rem;
margin-bottom: 8px;
color: #7ec850;
}
.stage .icon {
width: 24px;
height: 24px;
margin-right: 10px;
background-color: #7ec850;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.stage p {
font-size: 0.95rem;
line-height: 1.6;
color: #cce5ff;
}
.controls {
display: flex;
flex-direction: column;
gap: 15px;
}
.control-group {
display: flex;
flex-direction: column;
gap: 8px;
}
label {
font-size: 0.95rem;
color: #a0d0ff;
}
input[type="range"] {
width: 100%;
height: 8px;
border-radius: 4px;
background: rgba(100, 150, 200, 0.3);
outline: none;
-webkit-appearance: none;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: #7ec850;
cursor: pointer;
box-shadow: 0 0 10px rgba(126, 200, 80, 0.5);
}
.buttons {
display: flex;
gap: 15px;
margin-top: 10px;
}
button {
flex: 1;
padding: 12px;
border: none;
border-radius: 8px;
background: linear-gradient(to right, #2c7744, #4a9d5e);
color: white;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
background: linear-gradient(to right, #3a8a54, #5cb377);
}
button:active {
transform: translateY(1px);
}
.stats {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.9rem;
color: #a0d0ff;
}
.footer {
margin-top: 30px;
text-align: center;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
max-width: 800px;
}
.tree-label {
position: absolute;
top: 20px;
left: 20px;
background: rgba(0, 0, 0, 0.6);
padding: 8px 15px;
border-radius: 20px;
font-size: 1.1rem;
z-index: 10;
}
.season-indicator {
position: absolute;
top: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.6);
padding: 8px 15px;
border-radius: 20px;
font-size: 1.1rem;
z-index: 10;
}
@media (max-width: 1100px) {
.container {
flex-direction: column;
align-items: center;
}
.info-panel {
width: 700px;
max-width: 90vw;
}
}
</style>
</head>
<body>
<header>
<h1>树的生长模拟：从树苗到参天大树</h1>
<p class="subtitle">观察一棵树从幼苗到参天大树的完整生命历程，体验自然界的奇妙生长过程</p>
</header>
<div class="container">
<div class="canvas-container">
<div class="tree-label">橡树 (Quercus robur)</div>
<div class="season-indicator">季节：春</div>
<canvas id="treeCanvas" width="700" height="600"></canvas>
</div>
<div class="info-panel">
<h2 class="panel-title">树的生长阶段</h2>
<div class="growth-stages">
<div class="stage">
<h3><span class="icon">1</span>幼苗期 (0-5年)</h3>
<p>树苗从种子发芽，发展根系和主干。此阶段树木脆弱，生长速度较快，高度可达2-3米。</p>
</div>
<div class="stage">
<h3><span class="icon">2</span>青年期 (5-20年)</h3>
<p>树木快速向上生长，形成主干和基本树冠结构。每年可生长0.5-1米高度，开始开花结果。</p>
</div>
<div class="stage">
<h3><span class="icon">3</span>成熟期 (20-100年)</h3>
<p>树木达到最大高度，树冠充分展开，根系发达。生长速度减缓，专注于增加树干直径和树冠密度。</p>
</div>
<div class="stage">
<h3><span class="icon">4</span>老年期 (100年以上)</h3>
<p>树木生长几乎停止，部分枝干可能枯死。树冠开始下降，但树干直径仍缓慢增加。可存活数百年。</p>
</div>
</div>
<div class="controls">
<div class="control-group">
<label for="growthSlider">生长阶段: <span id="growthValue">幼苗期</span></label>
<input type="range" id="growthSlider" min="0" max="100" value="10">
</div>
<div class="control-group">
<label for="seasonSlider">季节: <span id="seasonValue">春</span></label>
<input type="range" id="seasonSlider" min="0" max="3" value="0">
</div>
<div class="buttons">
<button id="playBtn">播放生长动画</button>
<button id="resetBtn">重置</button>
</div>
</div>
<div class="stats">
<div>当前高度: <span id="heightValue">2.5</span> 米</div>
<div>树干直径: <span id="diameterValue">0.1</span> 米</div>
<div>树龄: <span id="ageValue">3</span> 年</div>
</div>
</div>
</div>
<div class="footer">
<p>树木生长模拟 | 此模拟展示了树木从幼苗到成熟的生命周期，包括季节变化对树木外观的影响</p>
<p>技术实现：HTML5 Canvas & JavaScript | 自然分形算法</p>
</div>
<script>
// 获取Canvas元素和上下文
const canvas = document.getElementById('treeCanvas');
const ctx = canvas.getContext('2d');
// 获取UI元素
const growthSlider = document.getElementById('growthSlider');
const growthValue = document.getElementById('growthValue');
const seasonSlider = document.getElementById('seasonSlider');
const seasonValue = document.getElementById('seasonValue');
const playBtn = document.getElementById('playBtn');
const resetBtn = document.getElementById('resetBtn');
const heightValue = document.getElementById('heightValue');
const diameterValue = document.getElementById('diameterValue');
const ageValue = document.getElementById('ageValue');
const seasonIndicator = document.querySelector('.season-indicator');
// 树木生长状态
let growthStage = 10; // 0-100
let season = 0; // 0:春, 1:夏, 2:秋, 3:冬
let isAnimating = false;
let animationId = null;
// 季节颜色
const seasonColors = {
spring: { trunk: '#8B4513', leaf: '#7CFC00', grass: '#3CB371' },
summer: { trunk: '#654321', leaf: '#228B22', grass: '#2E8B57' },
autumn: { trunk: '#5D4037', leaf: '#DAA520', grass: '#8FBC8F' },
winter: { trunk: '#A9A9A9', leaf: '#F0F8FF', grass: '#708090' }
};
// 季节名称
const seasonNames = ['春', '夏', '秋', '冬'];
// 初始化
function init() {
drawScene();
setupEventListeners();
}
// 设置事件监听器
function setupEventListeners() {
growthSlider.addEventListener('input', () => {
growthStage = parseInt(growthSlider.value);
updateUI();
drawScene();
});
seasonSlider.addEventListener('input', () => {
season = parseInt(seasonSlider.value);
updateUI();
drawScene();
});
playBtn.addEventListener('click', () => {
if (isAnimating) {
isAnimating = false;
playBtn.textContent = '播放生长动画';
cancelAnimationFrame(animationId);
} else {
isAnimating = true;
playBtn.textContent = '暂停动画';
animateGrowth();
}
});
resetBtn.addEventListener('click', () => {
growthStage = 10;
growthSlider.value = growthStage;
updateUI();
drawScene();
if (isAnimating) {
isAnimating = false;
playBtn.textContent = '播放生长动画';
cancelAnimationFrame(animationId);
}
});
}
// 更新UI显示
function updateUI() {
// 更新生长阶段文本
if (growthStage < 25) {
growthValue.textContent = '幼苗期';
} else if (growthStage < 50) {
growthValue.textContent = '青年期';
} else if (growthStage < 75) {
growthValue.textContent = '成熟期';
} else {
growthValue.textContent = '老年期';
}
// 更新季节文本
seasonValue.textContent = seasonNames[season];
seasonIndicator.textContent = `季节：${seasonNames[season]}`;
// 更新统计数据
const height = (growthStage / 100 * 25).toFixed(1);
const diameter = (growthStage / 100 * 1.5).toFixed(2);
const age = Math.round(growthStage / 100 * 120);
heightValue.textContent = height;
diameterValue.textContent = diameter;
ageValue.textContent = age;
}
// 绘制场景
function drawScene() {
// 清除画布
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 绘制背景
drawBackground();
// 绘制树
drawTree(canvas.width / 2, canvas.height - 50, -Math.PI/2, growthStage/10, 8);
}
// 绘制背景
function drawBackground() {
// 天空
const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#87CEEB');
gradient.addColorStop(1, '#1E90FF');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// 太阳
ctx.beginPath();
ctx.arc(600, 80, 40, 0, Math.PI * 2);
ctx.fillStyle = '#FFD700';
ctx.fill();
// 云朵
drawCloud(100, 70);
drawCloud(300, 90);
drawCloud(500, 60);
// 地面
ctx.fillStyle = getSeasonColor().grass;
ctx.fillRect(0, canvas.height - 50, canvas.width, 50);
// 草地细节
drawGrass();
}
// 绘制云朵
function drawCloud(x, y) {
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.beginPath();
ctx.arc(x, y, 20, 0, Math.PI * 2);
ctx.arc(x + 15, y - 10, 15, 0, Math.PI * 2);
ctx.arc(x + 30, y, 20, 0, Math.PI * 2);
ctx.arc(x + 15, y + 10, 15, 0, Math.PI * 2);
ctx.fill();
}
// 绘制草地
function drawGrass() {
ctx.strokeStyle = '#2E8B57';
ctx.lineWidth = 1;
for (let i = 0; i < 100; i++) {
const x = Math.random() * canvas.width;
const height = 5 + Math.random() * 10;
ctx.beginPath();
ctx.moveTo(x, canvas.height - 50);
ctx.lineTo(x, canvas.height - 50 - height);
ctx.stroke();
}
}
// 获取季节颜色
function getSeasonColor() {
switch(season) {
case 0: return seasonColors.spring;
case 1: return seasonColors.summer;
case 2: return seasonColors.autumn;
case 3: return seasonColors.winter;
}
}
// 绘制树
function drawTree(x, y, angle, size, width) {
if (size < 1) return;
const colors = getSeasonColor();
const endX = x + Math.cos(angle) * size * 10;
const endY = y + Math.sin(angle) * size * 10;
// 绘制树枝
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(endX, endY);
ctx.strokeStyle = colors.trunk;
ctx.lineWidth = width;
ctx.lineCap = 'round';
ctx.stroke();
// 绘制树叶（只在非冬季）
if (season !== 3 && size < 8) {
ctx.fillStyle = colors.leaf;
const leafSize = 2 + size * 2;
const leafCount = 10 + size * 5;
for (let i = 0; i < leafCount; i++) {
const angle = Math.random() * Math.PI * 2;
const distance = Math.random() * 20;
const leafX = endX + Math.cos(angle) * distance;
const leafY = endY + Math.sin(angle) * distance;
ctx.beginPath();
ctx.arc(leafX, leafY, leafSize, 0, Math.PI * 2);
ctx.fill();
}
}
// 递归绘制分支
const newSize = size * 0.75;
const newWidth = width * 0.7;
if (newSize > 0.5) {
// 左分支
drawTree(endX, endY, angle - Math.PI/4 - Math.random()*0.2, newSize, newWidth);
// 右分支
drawTree(endX, endY, angle + Math.PI/4 + Math.random()*0.2, newSize, newWidth);
// 随机中间分支
if (Math.random() > 0.3) {
drawTree(endX, endY, angle + (Math.random() - 0.5) * 0.4, newSize * 0.9, newWidth * 0.8);
}
}
}
// 生长动画
function animateGrowth() {
if (!isAnimating) return;
growthStage += 0.5;
if (growthStage > 100) {
growthStage = 100;
isAnimating = false;
playBtn.textContent = '播放生长动画';
}
growthSlider.value = growthStage;
updateUI();
drawScene();
// 每10个生长阶段改变一次季节
if (Math.floor(growthStage) % 10 === 0) {
season = (season + 1) % 4;
seasonSlider.value = season;
}
animationId = requestAnimationFrame(animateGrowth);
}
// 初始化应用
window.onload = init;
</script>
</body>
</html>
二、效果如下
由于无法加入视频，展示以图片的形式给出，大家可以把代码粘贴到本地看效果
总结
这次deepseek更新还是给我们带来了许多的惊喜
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
