热度 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>
|Archiver|小黑屋|星韵百科|星韵地理网
( 苏ICP备16002021号 )
GMT+8, 2025-3-14 20:27 , Processed in 0.065711 second(s), 21 queries .
Powered by Discuz! X3.5
© 2001-2024 Discuz! Team.