注册 登录
星韵地理网 返回首页

wen的个人空间 http://xingyun.org.cn/?1517 [收藏] [复制] [分享] [RSS]

日志

利用Deepseek创建地图拼图游戏

热度 2已有 28 次阅读2025-3-12 10:56 |个人分类:随便聊聊|系统分类:地理新闻

 

利用Deepseek创建地图拼图游戏

 

一个没有编程基础的地理老师能不能写一个地理教学的程序?比如说,我一直想写一个地图拼图的程序,运行在浏览器中,可以载入不同的地图,拼图分不同的难度级别,学生通过点击交换地图分块,直到把原来的地图拼好,最好还有计时功能。

答案是可以的,今天上午只上两节课,用课间的时间,借助于Deepseek的强大能力,写好了这个程序,放在网上:

http://8.155.36.251/map.html

(网络申请域名手续比较烦,我还没有申请域名,使用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>

发表评论 评论 (4 个评论)

回复 wangfei 2025-3-12 19:46
给文老师点个赞,行动起来,就是AI达人。
回复 景荣 2025-3-13 21:16
我现在用的最多的是做文案。
回复 wen 2025-3-14 08:33
wangfei: 给文老师点个赞,行动起来,就是AI达人。
用DS做RAG,感觉既没啥技术含量,也做不出什么实用的东西,也许微调能做出一点真正有价值的东西。
回复 wen 2025-3-14 08:35
景荣: 我现在用的最多的是做文案。
过去每个学期都让我头疼的各种计划总结,现在基本都是我写一半,AI写一半。

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 注册

QQ|Archiver|小黑屋|星韵百科|星韵地理网 ( 苏ICP备16002021号 )

GMT+8, 2025-3-14 19:39 , Processed in 0.062288 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

返回顶部