日志
利用Deepseek创建地图拼图游戏
热度 2 ||
利用Deepseek创建地图拼图游戏
一个没有编程基础的地理老师能不能写一个地理教学的程序？比如说，我一直想写一个地图拼图的程序，运行在浏览器中，可以载入不同的地图，拼图分不同的难度级别，学生通过点击交换地图分块，直到把原来的地图拼好，最好还有计时功能。
答案是可以的，今天上午只上两节课，用课间的时间，借助于Deepseek的强大能力，写好了这个程序，放在网上：
(网络申请域名手续比较烦，我还没有申请域名，使用ip地址)
这个程序在电脑上可以完美运行，但是手机上不行，因为手机的屏幕分辨率不同于电脑，当然你可以继续要Deepseek改进，但是我觉得没必要，地图填图游戏如果屏幕太小，我就觉得没有味道了。
怎么做的？其实很简单，打开deepseek官网，选择r1，输入提示词：“请写一个地图拼图游戏的程序。”然后，DS就很快写好了程序。最初的程序也是基本可用的，但是需要手动修改很多地方，对于不懂程序设计的人来说，应该通过不断地改进提示词(prompt)以便程序符合自己的需求。比如说：能在浏览器中运行的程序；页面上面是两个菜单；地图分块的交换的原则是什么；通过不断的修改提示词改进程序，而且每次DS给出结果后都测试一下。
我大概经过十几次的修改提示词，最后完成这个程序的完整提示词为：
“请写一个HTML5 + JavaScript页面。页面最上面是页面名称：地图拼图游戏。下面居中出现两个菜单，左边菜单两个选项，第一个中国地图是缺省选项，对应值china.jpg,第二个是亚洲地图。对应值为asia.jpg, 第三个世界地图，对应值world.jpg。右边菜单是难度选项，三个选项为"易""中""难"，分别对应值为n=2,3,4，缺省为2。 菜单的右边是一个计数器。菜单行的下面是一个居中的开始按钮。按钮下方为一个画布用来显示地图。当点击开始按钮后，计时器开始计时，页面读取所选择的地图，缺省是china.jpg,之后该图片按照本身的大小被平均分成nxn小块。然后随机排列顺序并显示在画布上。每个小块加浅灰色的细(1 pix)边框，每个小块都可以移动。鼠标第一次点击的小块获得焦点，获得交点的小块加上粗的(3 pix)红色边框，并与第二次鼠标单击的小块交换位置。每次交换之后，判断交换之后的图片是否与原始图片一致，是的话弹出胜利的对话框，否的话继续。”
这就可以了，你只需要复制DS产生的代码，以文本文件的形式存在你的电脑上，再用浏览器打开这个文件节可以了，当然注意在同一目录下需要有相应的地图文件。
近来DS的运行速度越来越快了，如果你早上五点起来用，更是运转如飞。我没起那么早，我是调用API完成的，花了一毛五分钱。
现在你可以发挥自己的想象力，创造各种教学用的软件，你只要好好规划prompt，代码的编写就交给DS吧。
我把地图拼图游戏的整个源代码也复制在这里，就算不懂程序设计，你看那明白的注释，都可以改动部分代码以改进程序。
源代码：map.html
<!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;
flex-direction: column;
align-items: center;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
margin: 20px 0;
}
.menu {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.menu-row {
display: flex;
align-items: center;
gap: 20px;
}
canvas {
border: 1px solid #000;
margin-top: 20px;
}
.hidden {
display: none;
}
button {
padding: 10px 10px;
font-size: 16px;
cursor: pointer;
margin-top: 10px;
}
.timer {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>地图拼图游戏</h1>
<div class="menu">
<div class="menu-row">
<div>
<label for="mapSelect">选择地图：</label>
<select id="mapSelect">
<option value="china.jpg" selected>中国地图</option>
<option value="asia.jpg">亚洲地图</option>
<option value="world.jpg">世界地图</option>
</select>
</div>
<div>
<label for="difficultySelect">选择难度：</label>
<select id="difficultySelect">
<option value="2" selected>易 (2x2)</option>
<option value="3">中 (3x3)</option>
<option value="4">难 (4x4)</option>
</select>
</div>
<div class="timer" id="timer">00:00</div>
</div>
</div>
<button id="startButton">开始</button>
<canvas id="puzzleCanvas" class="hidden"></canvas>
<script>
const canvas = document.getElementById('puzzleCanvas');
const ctx = canvas.getContext('2d');
const mapSelect = document.getElementById('mapSelect');
const difficultySelect = document.getElementById('difficultySelect');
const startButton = document.getElementById('startButton');
const timerDisplay = document.getElementById('timer');
let tiles = [];
let selectedTile = null;
let originalImage = null;
let gridSize = 2; // 默认难度为2x2
let timerInterval = null;
let seconds = 0;
// 开始按钮点击事件
startButton.addEventListener('click', () => {
resetTimer();
startTimer();
loadImage();
});
// 加载图片并初始化拼图
function loadImage() {
const img = new Image();
img.src = mapSelect.value;
img.onload = () => {
canvas.width = img.width;
canvas.height = img.height;
originalImage = img;
gridSize = parseInt(difficultySelect.value);
initializeTiles(img);
shuffleTiles();
drawTiles();
canvas.classList.remove('hidden');
};
}
// 初始化n x n个小块
function initializeTiles(img) {
tiles = [];
const tileWidth = img.width / gridSize;
const tileHeight = img.height / gridSize;
for (let y = 0; y < gridSize; y++) {
for (let x = 0; x < gridSize; x++) {
const tile = {
x: x * tileWidth,
y: y * tileHeight,
originalX: x * tileWidth,
originalY: y * tileHeight,
image: img
};
tiles.push(tile);
}
}
}
// 随机打乱小块顺序
function shuffleTiles() {
for (let i = tiles.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[tiles[i].x, tiles[j].x] = [tiles[j].x, tiles[i].x];
[tiles[i].y, tiles[j].y] = [tiles[j].y, tiles[i].y];
}
}
// 绘制n x n个小块
function drawTiles() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
tiles.forEach(tile => {
const tileWidth = originalImage.width / gridSize;
const tileHeight = originalImage.height / gridSize;
ctx.drawImage(
tile.image,
tile.originalX, tile.originalY, tileWidth, tileHeight, // 源图像区域
tile.x, tile.y, tileWidth, tileHeight // 目标画布区域
);
ctx.strokeStyle = selectedTile === tile ? 'red' : '#ccc'; // 浅灰色边框
ctx.lineWidth = selectedTile === tile ? 3 : 1; // 选中时边框加粗
ctx.strokeRect(tile.x, tile.y, tileWidth, tileHeight);
});
}
// 画布点击事件
canvas.addEventListener('click', (e) => {
const rect = canvas.getBoundingClientRect();
const mouseX = e.clientX - rect.left;
const mouseY = e.clientY - rect.top;
const tileWidth = originalImage.width / gridSize;
const tileHeight = originalImage.height / gridSize;
// 找到点击的小块
const clickedTile = tiles.find(tile =>
mouseX >= tile.x && mouseX < tile.x + tileWidth &&
mouseY >= tile.y && mouseY < tile.y + tileHeight
);
if (clickedTile) {
if (selectedTile) {
// 交换两个小块的位置
swapTiles(selectedTile, clickedTile);
selectedTile = null;
drawTiles();
// 检查是否胜利
if (checkWin()) {
clearInterval(timerInterval);
alert(`恭喜！你赢了！用时：${timerDisplay.textContent}`);
}
} else {
// 选择第一个小块
selectedTile = clickedTile;
drawTiles();
}
}
});
// 交换两个小块的位置
function swapTiles(tile1, tile2) {
[tile1.x, tile2.x] = [tile2.x, tile1.x];
[tile1.y, tile2.y] = [tile2.y, tile1.y];
}
// 检查是否胜利
function checkWin() {
return tiles.every(tile => tile.x === tile.originalX && tile.y === tile.originalY);
}
// 计时器功能
function startTimer() {
timerInterval = setInterval(() => {
seconds++;
const minutes = Math.floor(seconds / 60);
const secs = seconds % 60;
timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
}, 1000);
}
function resetTimer() {
clearInterval(timerInterval);
seconds = 0;
timerDisplay.textContent = '00:00';
}
</script>
</body>
</html>
