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

简介: 本文介绍了使用通义灵码辅助实现经典推箱子游戏的过程。首先,通过输入“用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天前
|
存储 人工智能 运维
【01】做一个精美的打飞机小游戏,浅尝阿里云通义灵码python小游戏开发AI编程-之飞机大战小游戏上手实践-优雅草央千澈-用ai开发小游戏尝试-分享源代码和游戏包
【01】做一个精美的打飞机小游戏,浅尝阿里云通义灵码python小游戏开发AI编程-之飞机大战小游戏上手实践-优雅草央千澈-用ai开发小游戏尝试-分享源代码和游戏包
【01】做一个精美的打飞机小游戏,浅尝阿里云通义灵码python小游戏开发AI编程-之飞机大战小游戏上手实践-优雅草央千澈-用ai开发小游戏尝试-分享源代码和游戏包
|
9天前
|
人工智能 自然语言处理 安全
千行百业,“义”不容辞:通义技术创新与商业实践
千行百业,“义”不容辞:通义技术创新与商业实践。本次分享分为两部分,首先介绍大模型的快速迭代与普及,探讨通义千问在精度和复杂任务执行上的突破;其次聚焦企业级落地,解决安全性、部署路径及模型调优三大问题。通过多模态理解(视觉、语音)和更强的生成控制力,携手伙伴服务各行业,推动技术向生产力转化,并关注公益应用,助力社会进步。
|
16天前
|
Java 测试技术 开发者
通义灵码助力高效开发——我的实践心得
作为一名Java开发工程师,我一直在寻找提高开发效率的方法。最近,我尝试了通义灵码的个人版新功能,并取得了显著的效果。本文将分享我的实践场景、效果和心得。
47 1
|
2月前
|
存储 Serverless 数据库
通义灵码与阿里云的融合实践
本文探讨了通义灵码与阿里云的融合实践,涵盖生成在阿里云上部署应用的代码及与阿里云服务的深度集成,如云服务器创建、云数据库配置、云存储设置及函数计算服务等,显著提升开发效率和应用灵活性。
通义灵码与阿里云的融合实践
|
27天前
|
大数据 开发者
通义灵码创新实践征集赛获奖名单公布!
通义灵码创新实践征集赛得到了众多开发者的支持和喜爱,现公布活动获奖名单,快来看看吧!
161 5
|
1月前
|
机器学习/深度学习 数据采集 存储
通义千问 Qwen 在智能文本分析中的应用实践
本文探讨了通义千问Qwen在智能文本分析的应用,涵盖文本分类、情感分析及关键信息提取,通过具体案例和代码实现,展示了Qwen的强大语言理解能力,为开发者和研究人员提供了实用参考。
|
1月前
|
人工智能 自然语言处理 小程序
基于通义千问32B及RAG技术的CACA指南诊疗规范平台落地实践
本方案整合CACA智能导航系统与基于RAG的大模型医疗问答系统,旨在提供高效、精准的肿瘤诊治支持。通过指南AI导航、知识图谱查询等功能,优化医生诊疗流程,提升患者服务质量,实现医疗资源的有效利用。
82 6
|
2月前
|
人工智能 移动开发 前端开发
通义灵码使用实践场景、效果和心得。
作为一名H5前端开发学者,我在学习过程中借助通义灵码@workspace大幅提升了效率。通过自动推荐匹配的CSS样式和项目内相似模板的排版建议,减少了重复劳动,效率提高超过一倍。此外,它还能解析并翻译GitHub上的英文.md文件,如成功部署声音合成AI:GPT-SoVITS项目,极大便利了我的学习与开发工作。
90 4
|
2月前
|
人工智能 边缘计算 自然语言处理
DistilQwen2:通义千问大模型的知识蒸馏实践
DistilQwen2 是基于 Qwen2大模型,通过知识蒸馏进行指令遵循效果增强的、参数较小的语言模型。本文将介绍DistilQwen2 的技术原理、效果评测,以及DistilQwen2 在阿里云人工智能平台 PAI 上的使用方法,和在各开源社区的下载使用教程。
|
2月前
|
人工智能 运维 自然语言处理
通义灵码一周年:灵码编码个人版实践
作为一名运维工程师,我在运维和测试过程中经常需要编写代码。最近了解到通义灵码,它支持行/函数级实时续写、自然语言生成代码等功能,大大提升了我的工作效率。通过通义灵码,我可以快速生成和补全代码,节省了大量时间。此外,通义灵码还提供了代码解释和注释生成等实用功能,帮助我更好地理解和维护现有代码。整体安装和使用都非常简便,推荐给需要提升开发效率的小伙伴们。
150 4

热门文章

最新文章