【通义灵码实践】实现经典手机游戏推箱子

简介: 本文介绍了使用通义灵码辅助实现经典推箱子游戏的过程。首先,通过输入“用Python写一个推箱子游戏”,灵码生成了基本的终端版本代码,包括地图渲染、玩家移动和胜利检测等功能。然而,终端版本交互体验不佳。为了解决这一问题,再次输入“不要在终端上运行,希望可以在页面上运行”,灵码生成了基于Flask的后端代码和HTML前端代码,实现了网页版推箱子游戏。最终结果展示了游戏的完整实现,包括前后端交互和用户界面。总结中提到,该方法具有快速生成代码、代码质量高、易于扩展等优点,但也存在功能简单、样式和用户体验有限、错误处理不足等问题,适合快速原型开发和教学演示。

1.背景

用python实现经典小游戏,自己写代码费时费力,用通义灵码辅助实现,快速又准确。

2.灵码实践

2.1 第一版

输入:用python写一个推箱子游戏

灵码回答

  1. 规则说明

image.png

  1. 代码
def print_map(game_map):
    for row in game_map:
        print(''.join(row))
    print()

def move_player(game_map, player_pos, direction):
    x, y = player_pos
    dx, dy = direction

    new_x, new_y = x + dx, y + dy

    if game_map[new_x][new_y] == '#':
        return False  # 碰到墙壁,不能移动

    if game_map[new_x][new_y] in ('.', 'G'):
        game_map[x][y], game_map[new_x][new_y] = game_map[new_x][new_y], game_map[x][y]
        return True

    if game_map[new_x][new_y] == 'B':
        box_new_x, box_new_y = new_x + dx, new_y + dy
        if game_map[box_new_x][box_new_y] in ('.', 'G'):
            game_map[box_new_x][box_new_y] = 'B'
            game_map[new_x][new_y] = game_map[x][y]
            game_map[x][y] = '.'
            return True

    return False

def check_win(game_map):
    for row in game_map:
        if 'B' in row:
            return False
    return True

def main():
    game_map = [
        ['#', '#', '#', '#', '#', '#', '#'],
        ['#', '.', '.', '.', '.', '.', '#'],
        ['#', '.', 'B', '.', '.', '.', '#'],
        ['#', '.', '.', '.', 'G', '.', '#'],
        ['#', '.', '.', '.', '.', '.', '#'],
        ['#', '.', '.', '.', '.', 'P', '#'],
        ['#', '#', '#', '#', '#', '#', '#']
    ]

    player_pos = (5, 5)
    directions = {
        'w': (-1, 0),  # 上
        's': (1, 0),   # 下
        'a': (0, -1),  # 左
        'd': (0, 1)    # 右
    }

    while True:
        print_map(game_map)
        if check_win(game_map):
            print("恭喜你,通关了!")
            break

        move = input("请输入方向 (w/s/a/d): ").strip().lower()
        if move not in directions:
            print("无效的输入,请输入 w/s/a/d")
            continue

        if move_player(game_map, player_pos, directions[move]):
            for i, row in enumerate(game_map):
                if 'P' in row:
                    player_pos = (i, row.index('P'))
                    break

if __name__ == "__main__":
    main()
  1. 代码说明

image.png

  1. 最终结果

image.png

  1. 问题

只能在终端里实现,交互体验不好。

2.2 第二版

输入:不要在终端上运行,希望可以在页面上运行

灵码回答

  1. 实现说明

image.png

  1. 代码

后端代码

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

# 初始游戏地图
game_map = [
    ['#', '#', '#', '#', '#', '#', '#'],
    ['#', '.', '.', '.', '.', '.', '#'],
    ['#', '.', 'B', '.', '.', '.', '#'],
    ['#', '.', '.', '.', 'G', '.', '#'],
    ['#', '.', '.', '.', '.', '.', '#'],
    ['#', '.', '.', '.', '.', 'P', '#'],
    ['#', '#', '#', '#', '#', '#', '#']
]

player_pos = (5, 5)
directions = {
    'w': (-1, 0),  # 上
    's': (1, 0),   # 下
    'a': (0, -1),  # 左
    'd': (0, 1)    # 右
}

def move_player(map_data, player_pos, direction):
    x, y = player_pos
    dx, dy = direction

    new_x, new_y = x + dx, y + dy

    if map_data[new_x][new_y] == '#':
        return False  # 碰到墙壁,不能移动

    if map_data[new_x][new_y] in ('.', 'G'):
        map_data[x][y], map_data[new_x][new_y] = map_data[new_x][new_y], map_data[x][y]
        return True

    if map_data[new_x][new_y] == 'B':
        box_new_x, box_new_y = new_x + dx, new_y + dy
        if map_data[box_new_x][box_new_y] in ('.', 'G'):
            map_data[box_new_x][box_new_y] = 'B'
            map_data[new_x][new_y] = map_data[x][y]
            map_data[x][y] = '.'
            return True

    return False

def check_win(map_data):
    for row in map_data:
        if 'B' in row:
            return False
    return True

@app.route('/')
def index():
    return render_template('index.html', game_map=game_map)

@app.route('/move', methods=['POST'])
def move():
    global player_pos
    direction = request.form.get('direction')
    if direction in directions:
        if move_player(game_map, player_pos, directions[direction]):
            for i, row in enumerate(game_map):
                if 'P' in row:
                    player_pos = (i, row.index('P'))
                    break
            if check_win(game_map):
                return jsonify({'status': 'win'})
    return jsonify({'status': 'ok', 'game_map': game_map})

if __name__ == '__main__':
    app.run(debug=True)

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>推箱子游戏</title>
    <style>
        .map {
            display: grid;
            grid-template-columns: repeat(7, 50px);
            grid-gap: 2px;
        }
        .cell {
            width: 50px;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }
        .wall { background-color: black; color: white; }
        .empty { background-color: lightgray; }
        .goal { background-color: yellow; }
        .box { background-color: brown; color: white; }
        .player { background-color: blue; color: white; }
        .box-goal { background-color: green; color: white; }
    </style>
</head>
<body>
    <div id="game-map" class="map"></div>
    <div>
        <button onclick="move('w')"></button>
        <button onclick="move('a')"></button>
        <button onclick="move('s')"></button>
        <button onclick="move('d')"></button>
    </div>
    <script>
        function updateMap(mapData) {
            const mapContainer = document.getElementById('game-map');
            mapContainer.innerHTML = '';
            mapData.forEach(row => {
                row.forEach(cell => {
                    const cellElement = document.createElement('div');
                    cellElement.classList.add('cell');
                    if (cell === '#') cellElement.classList.add('wall');
                    else if (cell === '.') cellElement.classList.add('empty');
                    else if (cell === 'G') cellElement.classList.add('goal');
                    else if (cell === 'B') cellElement.classList.add('box');
                    else if (cell === 'P') cellElement.classList.add('player');
                    else if (cell === 'BG') cellElement.classList.add('box-goal');
                    cellElement.textContent = cell;
                    mapContainer.appendChild(cellElement);
                });
            });
        }

        function move(direction) {
            fetch('/move', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `direction=${direction}`
            })
            .then(response => response.json())
            .then(data => {
                if (data.status === 'win') {
                    alert('恭喜你,通关了!');
                } else {
                    updateMap(data.game_map);
                }
            });
        }

        document.addEventListener('DOMContentLoaded', () => {
            updateMap({{ game_map | tojson }});
        });
    </script>
</body>
</html>
  1. 代码说明

image.png

  1. 最终结果

image.png

3.总结

3.1 优点

  1. 快速生成代码
  • 通义灵码能够快速生成基本的推箱子游戏代码,节省了从零开始编写的时间。
  • 提供了完整的前后端代码,包括Flask后端和HTML前端,使得开发者可以快速搭建一个可运行的Web应用。
  1. 代码质量较高
  • 生成的代码结构清晰,逻辑明确,符合Python和Flask的最佳实践。
  • 前端代码使用了现代的HTML和JavaScript,布局合理,样式简洁。
  1. 易于扩展
  • 生成的代码模块化程度较高,便于后续的扩展和维护。
  • 可以轻松添加更多的游戏关卡、更复杂的逻辑或改进用户界面。
  1. 文档和注释
  • 生成的代码包含了详细的注释,帮助开发者理解每一部分的功能。
  • 提供了详细的说明文档,指导开发者如何运行和调试代码。
  1. 交互性强
  • 通过AJAX请求实现了前后端的交互,使得游戏体验更加流畅。
  • 用户可以通过简单的按钮操作控制游戏角色,操作简单直观。

3.2 缺点

  1. 功能相对简单
  • 生成的推箱子游戏功能较为基础,没有复杂的游戏机制和高级特性。
  • 缺乏一些常见的游戏元素,如计分系统、时间限制、多关卡等。
  1. 样式和用户体验
  • 生成的前端样式较为简单,可能不够吸引人。
  • 用户界面的交互效果有限,缺乏动画和音效等增强用户体验的元素。
  1. 错误处理
  • 生成的代码在错误处理方面较为简单,可能需要开发者进一步完善。
  • 例如,网络请求失败时的处理、输入验证等。
  1. 性能优化
  • 生成的代码在性能优化方面做得不够,特别是在处理大规模数据或高并发请求时。
  • 需要开发者根据实际需求进行性能调优。
  1. 安全性
  • 生成的代码在安全性方面考虑较少,可能存在一些安全漏洞。
  • 例如,CSRF攻击、XSS攻击等,需要开发者进行安全加固。


通义灵码生成的推箱子游戏代码具有快速生成、代码质量高、易于扩展等优点,适合快速原型开发和教学演示。然而,对于需要更高复杂度、更好用户体验和更高安全性的商业项目,还需要开发者进行进一步的开发和优化。

目录
相关文章
|
2月前
|
人工智能 自然语言处理
通义灵码在Visual Studio2022中的实践
本文介绍了如何在Visual Studio 2022中安装和使用通义灵码。首先,在Visual Studio 2022中安装通义灵码插件,然后按照步骤完成安装和登录。最后,通过实操演示了通义灵码的三大功能:行级/函数级实时续写、自然语言生成代码和研发领域自由问答。希望读者能从中受益。
814 4
|
2月前
|
存储 算法 C语言
通义灵码在考研C语言和数据结构中的应用实践 1-5
通义灵码在考研C语言和数据结构中的应用实践,体验通义灵码的强大思路。《趣学C语言和数据结构100例》精选了五个经典问题及其解决方案,包括求最大公约数和最小公倍数、统计字符类型、求特殊数列和、计算阶乘和双阶乘、以及求斐波那契数列的前20项和。通过这些实例,帮助读者掌握C语言的基本语法和常用算法,提升编程能力。
81 4
|
23天前
|
存储 Serverless 数据库
通义灵码与阿里云的融合实践
本文探讨了通义灵码与阿里云的融合实践,涵盖生成在阿里云上部署应用的代码及与阿里云服务的深度集成,如云服务器创建、云数据库配置、云存储设置及函数计算服务等,显著提升开发效率和应用灵活性。
通义灵码与阿里云的融合实践
|
26天前
|
人工智能 移动开发 前端开发
通义灵码使用实践场景、效果和心得。
作为一名H5前端开发学者,我在学习过程中借助通义灵码@workspace大幅提升了效率。通过自动推荐匹配的CSS样式和项目内相似模板的排版建议,减少了重复劳动,效率提高超过一倍。此外,它还能解析并翻译GitHub上的英文.md文件,如成功部署声音合成AI:GPT-SoVITS项目,极大便利了我的学习与开发工作。
62 2
|
2月前
|
人工智能 自然语言处理 程序员
提交通义灵码创新实践文章,重磅好礼只等你来!
通义灵码创新实践征集赛正式开启,发布征文有机会获得重磅好礼+流量福利,快来参加吧!
3614 20
|
1月前
|
人工智能 运维 自然语言处理
通义灵码一周年:灵码编码个人版实践
作为一名运维工程师,我在运维和测试过程中经常需要编写代码。最近了解到通义灵码,它支持行/函数级实时续写、自然语言生成代码等功能,大大提升了我的工作效率。通过通义灵码,我可以快速生成和补全代码,节省了大量时间。此外,通义灵码还提供了代码解释和注释生成等实用功能,帮助我更好地理解和维护现有代码。整体安装和使用都非常简便,推荐给需要提升开发效率的小伙伴们。
126 4
|
2月前
|
机器学习/深度学习 自然语言处理 搜索推荐
1024——通义·灵码的功能以应用以及实践案例测评
本文档介绍了阿里巴巴旗下的通义·灵码大模型产品,涵盖其核心功能如文本生成、语义理解、情感分析、多模态处理等,并展示了在智能客服、金融智能投顾、电商推荐系统等多个领域的应用实例。通过具体代码示例,演示了如何调用通义·灵码的API实现自动回复、投资建议、新闻摘要生成等功能。最后,通过实际案例解析,评估了通义·灵码的新功能及其优化建议,包括安全性改进和代码优化策略。
100 0
1024——通义·灵码的功能以应用以及实践案例测评
|
2月前
|
安全 前端开发 测试技术
【灵码助力安全2】——利用通义灵码辅助复现未公开漏洞的实践
本文介绍了利用通义灵码辅助复现未公开漏洞的过程,包括XSS和文件包含两种典型漏洞类型。通过具体案例,展示了如何结合CVE描述和源码,使用灵码定位漏洞位置、分析漏洞原因,并验证漏洞的存在。文章强调了灵码在提高漏洞复现效率、减少手动排查时间方面的优势,同时也指出了其在复杂场景下仍需人工判断的局限性。未来,期待灵码能在自动化安全测试、动态分析及威胁建模等领域发挥更大作用,全面提升软件安全性。
|
2月前
|
运维 自然语言处理 开发者
作为一名运维人员,使用通义灵码个人版处理日常工作中的代码相关任务,极大地提升了我的工作效率。以下是我使用通义灵码的具体实践场景、效果和心得,以及相应的截图。
作为一名运维人员,我使用通义灵码处理日常工作中的代码任务,效率提升了30%。通义灵码帮助我快速理解复杂代码、生成准确的代码注释,并能从自然语言生成代码示例,大幅减少了代码编写和理解的时间。
76 3
|
2月前
|
运维 测试技术 开发工具
基于通义灵码 @workspace 和 @terminal 的实践场景、效果和心得
基于通义灵码 @workspace 和 @terminal 的实践场景、效果和心得

热门文章

最新文章