备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

JavaScript实现ZLOGO: 界面改进与速度可调

2019-05-09 811
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 基于JavaScript和Antlr4实现简单的中文LOGO语法, 界面改进, 可调速度. Implement simple LOGO language using JavaScript and Antlr4.

续前文JavaScript实现ZLOGO: 前进方向和速度

在线演示地址: http://codeinchinese.com/%E5%9C%883/%E5%9C%883.html

源码仍在: program-in-chinese/quan3

2019_01_20_logo_

主要功能改进是在界面可以选择速度. 其他界面布局改进有:

  • 在ipad横屏下显示正常(1024x768)
  • (前文问题1) 改正了有些浏览器"蚂蚁"对不准的问题(在火狐, Opera, Safari下测试)
  • 加大字体和按钮

待解决问题

蚂蚁走位有偏移, 速度越快越明显 · Issue #9 · program-in-chinese/quan3 上面视频可以看到最后蚂蚁没有回到原点. 经测试貌似与速度有关, 尚未确定原因.

避免O(n^2)的绘制过程 · Issue #8 · program-in-chinese/quan3 上面视频可见越到后面行进越慢, 应该与每帧绘制线段数逐渐增加有关. 上面例子最后一帧绘制的总线段数有7200段.

避免在绘制每帧时重置背景色 · Issue #10 · program-in-chinese/quan3 在ipad下测试感觉蚂蚁行进有卡顿感, 不确定是否由于当前每帧都重置背景色. 应该只需在重新运行时再清理整个画板.

[继续改进] 添加方向指示 · Issue #3 · program-in-chinese/quan3 还需:

  • 更雅致点的图标
  • 在初始状态(白板)时显示图标默认状态(方向/位置)
  • 在界面提供选项, 以开/关图标显示

部分p5js API继续汉化, 如line, background · Issue #11 · program-in-chinese/quan3

2019-01-20

文章标签：
JavaScript
前端开发
iOS开发
Web App开发
API
关键词：
JavaScript界面
JavaScript实现
JavaScript ZLOGO
JavaScript实现zlogo改进
JavaScript实现zlogo
中文编程
目录
相关文章
王同学睡醒了
|
4月前
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！（一）
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
王同学睡醒了
230 0
穆雄雄.
|
1月前
|
JavaScript
当当网新用户注册界面——JS代码
当当网新用户注册界面——JS代码
穆雄雄.
7 0
王同学睡醒了
|
4月前
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！（二）
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
王同学睡醒了
284 1
穆雄雄.
|
11月前
|
JavaScript
当当网新用户注册界面——JS代码
当当网新用户注册界面——JS代码
穆雄雄.
97 0
1387809421166477
|
JavaScript 前端开发
利用JavaScript实现二级联动
利用JavaScript实现二级联动 要实现JavaScript二级联动效果，首先要确定需要哪些技术： 二维数组 for in循环 new Option(text,value,true,true) add(option,null) onchange() 表单事件 HTML代码： <!-- <input type="text" id="text"> --> 请选择省份： <select name="" id="provinces"> <!-- <option value="江苏省">江苏省</option>
1387809421166477
146 0
不苒
|
JavaScript 前端开发
JavaScript函数柯里化的实现原理，进来教你完成一个自己的自动实现柯里化方法
JavaScript函数柯里化的实现原理，进来教你完成一个自己的自动实现柯里化方法
不苒
167 0
CodingFire
|
移动开发 JavaScript weex
weex-自定义module，实现weex在iOS的本地化，js之间互相跳转，交互，传值（iOS接入weex的最佳方式）
weex-自定义module，实现weex在iOS的本地化，js之间互相跳转，交互，传值（iOS接入weex的最佳方式）
CodingFire
219 0
XinMo
|
JavaScript 索引
原生JS带你了解数组方法实现及使用
js
XinMo
139 0
柳鲲鹏
|
JavaScript
JS中实现或退出全屏
JS中实现或退出全屏
柳鲲鹏
153 0
鲲志说
|
前端开发 JavaScript
前端：JS实现双击table单元格变为可编辑状态
前端：JS实现双击table单元格变为可编辑状态
鲲志说
365 0

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript高级笔记-coderwhy版本（六）
  • 4
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 8
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 9
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 10
    在Blazor中使用Chart.js快速创建图表
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    108
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    13
  • 3
    描述 JavaScript 中的垃圾回收机制。
    20
  • 4
    如何使用 JavaScript 操作 DOM？
    15
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    19
  • 6
    JavaScript 中的数组方法有哪些？
    10
  • 7
    JS设置日期为0时0分0秒
    28
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    24
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    21
  • 10
    深入理解JavaScript中的闭包与作用域链
    9

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）