代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="icon" href="./IMG/LOGO礼仪.png">
<title>让汉语成为学生们对计算机下达命令的“自然语言”</title>
<!--
坚定中国特色社会主义道路自信、理论自信、制度自信，说到底是要坚定文化自信。
习近平
-->
<style>
textarea {
box-sizing: border-box;
-moz-box-sizing: border-box;
/*Firefox*/
-webkit-box-sizing: border-box;
/*Safari*/
width: 100%;
height: 100%;
font-family: "TH-Tshyn-P1", "TH-Tshyn-P0";
}
.textarea-inherit {
width: 100%;
overflow: auto;
word-break: break-all; //解决兼容问题
}
::-webkit-input-placeholder {
/* WebKit browsers，webkit内核浏览器 */
color: #fff;
font-size: 32px;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #fff;
font-size: 32px;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #fff;
font-size: 32px;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #fff;
font-size: 32px;
}
</style>
<script src="horth.js"> </script>
<script>
var kvm = new 虚拟机();
var words = kvm.words;
</script>
<link rel="stylesheet" href="./codemirror/docs.css">
<link rel="stylesheet" href="./codemirror/codemirror.css">
<link rel="stylesheet" href="./codemirror/colorforth.css">
<script src="./codemirror/codemirror.js"></script>
<script src="./codemirror/forth.js"></script>
</head>
<body>
<div style="visibility:hidden">
<script type="text/javascript">
var images = new Array()
function preload() {
var zong = images.length;
for (i = 0; i < preload.arguments.length; i++) {
images[zong + i] = new Image()
images[zong + i].src = preload.arguments[i]
images[zong + i].id = preload.arguments[i].replace(/^.*[\\\/]/, '');
// let path = "Path = " +"C:\\Documents\\folder\\img\\GFG.jpg";
// let path2 = "./IMG/笔头.JPG";
// console.log(path2.replace(/^.*[\\\/]/, ''));
}
}
preload(
"./IMG/七巧板礼仪.png", "./IMG/笔头.JPG"
)
</script>
</div>
<main id="左区"
style="height:calc(100vh - 32px);left: 0; top: 0; width: 50%;font-size: 24px;position: absolute; z-index: 0; border: 1px gainsboro ; ">
<div id="out" style="color:black;font-size: 24px;">
<h1 style="Text-align:center;font-size: 32px;">
<font color='green'>“汉语”也可以是编程语言？!</font>
</h1>
<!-- <canvas id="默认" style="width:500px; height:500px;outline: black 3px solid;display: block;margin: auto;"></canvas> -->
</div>
<div id="log">log</div>
<!-- 操作記錄, 藍色表示輸入, 黑色表示輸出, 紫色表示系統訊息 cols="100" rows="10" -->
</main>
<div id="右区"
style="font-size:24px;position: fixed;bottom: 0;height:100%;z-index: 0; border: 1px solid gainsboro; left: 50vw; top: 0px; width: 50vw; height: 100vh; ">
<textarea id="编辑区" wrap="soft" placeholder="# 程序编辑完毕后,按“CTRL+enter”即可执行。" class="textarea-inherit"
v-model="body"
style="width:calc(100vw);height:calc(100vh - 32px);outline-color: seagreen;background:white;font-size:24px;margin:2px; border:2px; padding:2px;"
onkeydown="ctrlenter()">
编 画布初始化
画布清空 十字坐标系
奥运蓝 色笔 1 号笔
国旗红 色刷
。
画布初始化
编 为演示标题
新画工
上下翻转坐标系
32 为画布字号
-250 -215 处刷文
画毕。
。
# ①笔头的大小和形状
画布初始化
"①笔头的大小和形状" 为演示标题
编 绘制起点线和轨迹的中线
新画工
上下翻转坐标系
新轨迹 20 为画布字号
黑 色笔刷
-200 100 为起点
200 100 为下点
-200 -100 为起点
200 -100 为下点
-100 -100 为起点
-100 100 为下点
0 -100 为起点
0 100 为下点
100 -100 为起点
100 100 为下点
"笔或刷所用墨水的颜色也可以修改" -150 -160 处刷文
描绘 刷绘
画毕。
新画工
新轨迹 金 色笔刷 1 号笔
-50 -150 100 100 拉框
-50 50 100 100 拉框
描绘
新轨迹 金 色笔刷 20 号笔
-100 -100 圈一下
-100 100 圈一下
0 -100 圈一下
0 100 圈一下
100 -100 圈一下
100 100 圈一下
新轨迹 金 色笔刷 100 号笔
100 -100 圈一下
100 100 圈一下
画毕。
新画工 金 色笔刷
40 为画布字号 上下翻转坐标系
"方形笔头" -20 -80 处描联
"圆形笔头" 80 -80 处刷联
画毕。
新画工 金 色笔刷
26 为画布字号 上下翻转坐标系
"直线笔头(刀笔)" -115 -85 处刷联
画毕。
。
新画工
绘制起点线和轨迹的中线
上下翻转坐标系
新轨迹 20 为画布字号
"竖线为左中右各自的轨迹中线" -150 180 处刷文
"都使用100号大小的笔，" -150 200 处刷文
"起点的水平间隔也是100" -150 220 处刷文
新轨迹 32 为画布字号
"终点线" -240 -110 处刷文
"起笔线" -240 130 处刷文
\ "左边是默认的笔头形状：“线笔”，中间使用“方形笔头”，右边使用“圆形笔头”，。" -250 -160 处刷文
\ "起点水平间隔100，" -250 180 处刷文
\ "笔号，即笔头大小也是100" -250 220 处刷文
画毕。
2999 毫秒后
新画工
-100 -100 为原点
100 号笔
新轨迹
0 0 为起点
200 步前进
描绘
画毕。
绘制起点线和轨迹的中线
1999 毫秒后
新画工
0 -100 为原点
100 号方笔 红 色笔
新轨迹
0 0 为起点
200 步前进
描绘
画毕。
绘制起点线和轨迹的中线
1999 毫秒后
新画工
100 -100 为原点
100 号圆笔 绿 色笔
新轨迹
0 0 为起点
200 步前进
描绘
画毕。
绘制起点线和轨迹的中线
5999 毫秒后
# ②绘制五角连星
画布初始化
"②绘制五角连星" 为演示标题
编 五角连星 \\ ( n -- )
150 步左移 200 步后移 # 将笔移动到左下方
18 度右转
5 次
S 步前进
144 度右转
再次
$
。
450 五角连星
# ③绘制瞄准方框
999 毫秒后 画布初始化
新画工
上下翻转坐标系
32 为画布字号
"③绘制瞄准方框" -250 -215 处刷文
画毕。
编 绘制瞄准方框 \\ ( n -- )
-150 -150 为原点
4 次
S 步前进
\ PENUP 使用前后左右移动，来控制起点，而不是起笔、落笔
S 步前移
\ PENDOWN
S 步前进
90 度右转
再次
$
。
100 绘制瞄准方框
# ④绘制方旋花
999 毫秒后 画布初始化
新画工
上下翻转坐标系
32 为画布字号
"④绘制方旋花" -250 -215 处刷文
画毕。
编 边长的方框 \\ ( n -- )
4 次
S 步前进
90 度右转
再次
$
。
编 见方旋一周 \ ( n -- )
24 次 \ 也可改成15次，每次24度，或者36 10
S 边长的方框
15 度右转
再次
$
。
100 见方旋一周
# ⑤绘制螺旋曲线
999 毫秒后 画布初始化
新画工
上下翻转坐标系
32 为画布字号
"⑤绘制螺旋曲线" -250 -215 处刷文
画毕。
200 步左移
编 绘制螺旋曲线 \\ ( n -- )
S 3 < 是则 $ 中止 然后
S 步前进
15 度右转
0.98 * "绘制螺旋曲线" 之词执 \ RECURSE
。
50 绘制螺旋曲线
# ⑥九十度扩旋
999 毫秒后 画布初始化
新画工
上下翻转坐标系
32 为画布字号
"⑥九十度扩旋" -250 -215 处刷文
画毕。
编 OSSPIRAL \\ ( n1 n2 -- )
S# 400 > 是则 $$ 中止 然后
S# 步前进
S 度右转
J 10 + J
"OSSPIRAL" 之词执 \ RECURSE
。
1 90 OSSPIRAL
# ⑦九十一度扩旋
999 毫秒后 画布初始化
新画工
上下翻转坐标系
32 为画布字号
"⑦九十一度扩旋" -250 -215 处刷文
画毕。
编 九十一度扩旋 \\ ( n -- )
S 200 > 是则 $ 中止 然后
S 步前进
91 度右转
3 +
"九十一度扩旋" 之词执 \ RECURSE
。
1 九十一度扩旋
# ⑧绘制正多边形
999 毫秒后 画布初始化
"⑧绘制正多边形" 为演示标题
\ 绘制三角形
编 绘制三角形
新画工
50 步前进
120 度右转
50 步前进
120 度右转
50 步前进
120 度右转
50 步前进
画毕。
。
绘制三角形
333 毫秒后
编 边形
S 次
50 步前进
360 S# / 度右转
再次 $
。
666 毫秒后
4 边形
666 毫秒后
5 边形
666 毫秒后
6 边形
666 毫秒后
7 边形
666 毫秒后
8 边形
666 毫秒后
9 边形
666 毫秒后
10 边形
666 毫秒后
11 边形
666 毫秒后
12 边形
666 毫秒后
13 边形
999 毫秒后
# ⑨绘制太极图
999 毫秒后 画布初始化
"⑨绘制太极图" 为演示标题
黑 给 阴
白 给 阳
\ 奥运蓝 给 阴
\ 国旗红 给 阳
新画工
新轨迹
400 号圆笔 阴 色笔
0 0 点一下
描绘
画毕。
999 毫秒后
新画工
新轨迹
1 号圆笔 阳 色笔
200 0 为起点
0 0 200 0 180 XYR逆夹弧
回起点
内之画布
新轨迹
400 号圆笔 阳 色笔
0 0 点一下
描绘
画毕。
999 毫秒后
新画工
新轨迹
200 号圆笔 阴 色笔
-100 0 点一下
描绘
画毕。
999 毫秒后
新画工
新轨迹
200 号圆笔 阳 色笔
100 0 点一下
描绘
画毕。
999 毫秒后
新画工
新轨迹
62 号圆笔 阴 色笔
100 0 点一下
描绘
画毕。
999 毫秒后
新画工
新轨迹
62 号圆笔 阳 色笔
-100 0 点一下
描绘
画毕。
# ⑩绘制七巧板
999 毫秒后 画布初始化
"⑩绘制七巧板" 为演示标题
新画工
新轨迹:
"#EE334E" 色刷
-200 -200 400 400 拉刷 刷绘
画毕。
999 毫秒后
新画工
新轨迹:
"#0081C8" 色刷
-200 -200 为起点 0 0 为下点 -200 200 为下点 回起点 刷绘
画毕。
999 毫秒后
新画工
新轨迹:
"cornsilk" 色刷
0 0 为起点 -200 200 为下点 200 200 为下点 回起点 刷绘
画毕。
999 毫秒后
新画工
新轨迹:
"tomato" 色刷
-200 -200 为起点 -100 -100 为下点 0 -200 为下点 回起点 刷绘
画毕。
999 毫秒后
新画工
新轨迹:
"#00A651" 色刷
0 0 为起点 100 -100 为下点 100 100 为下点 回起点 刷绘
画毕。
999 毫秒后
新画工
新轨迹:
"#FCB131" 色刷
-100 -100 为起点 0 -200 为下点 100 -100 为下点 0 0 为下点 回起点 刷绘
画毕。
999 毫秒后
新画工
新轨迹:
"#DB7093" 色刷
0 -200 为起点 200 -200 为下点 200 0 为下点 回起点 刷绘
画毕。 2999 毫秒后
</textarea>
</div>
<!-- style="position: relative;min-height: 100%;" visibility: hidden;-->
<footer style="position: fixed;bottom: 0;width:100%;left:0; ">
<div id="提示符" onclick="左中右()" style="position: fixed;bottom: 0;margin:0px; border:0px; padding:0px;border:0px;
borderStyle:inset; box-sizing:border-box;
color:red;caret-color:'50px solid #ffb800'; accent-color:red;
font-size:32px;">>>></div>
<input id="命令行" type="text" title="" placeholder='# 这是命令行,再次输入指令并回车即可执行。' onfocus="this.placeholder=''"
onblur="this.placeholder=''" onbonmouseover="显示堆栈()" onkeydown="if(event.keyCode==13){var log=document.getElementById(`log`);log.innerHTML=log.innerHTML + this.value+`<br/>\n`;fortheval(this.value);this.value=``;
}" style=" left:0;
margin:0px; border:0px; padding:0px;border:0px;
borderStyle:inset; box-sizing:border-box;background:seagreen;
color:white;caret-color:'32px solid white';
z-index:999; accent-color:white;
font-size:32px;text-indent:2.5em;
width:100%; height:100%; outline:none; ime-mode:active; ">
</footer>
<!-- <div> -->
<!-- 设置一个绝对定位的隐藏按钮 -->
<!-- </div> -->
</body>
</html>
<script>
function ctrlenter(event) {
//var msgInput=$(this).val()
//兼容Chrome和Firefox
event = (event) ? event : ((window.event) ? window.event : "");
var keyCode = event.keyCode ? event.keyCode : (event.which ? event.which : event.charCode);
var altKey = event.ctrlKey || event.metaKey;
if (keyCode == 13 && altKey) { //ctrl+enter换行
fortheval();
左中右();
}
// else if (keyCode == 13) { //enter发送
// send_chat_msg()
// event.preventDefault(); //禁止回车的默认换行
// }
}
var i = 0;
var kvm = new 虚拟机();
var words = kvm.words;
var log = document.getElementById("log");
var 左区 = document.getElementById("左区");
var 右区 = document.getElementById("右区");
// 当前画布 = document.getElementById("默认");
// 当前画布 = document.getElementById("默认").getContext('2d');
log.innerHTML =
"<font color='red'>>>></font><font color=black> # 欢迎使用中文口语特征显著的，适合中国编程启蒙教育的编程语言</font><br/>" +
"<font color='red'>>>></font><font color=black> # 每次启动自动预置一张空白画布如上，可用以演示编程启蒙教育的仿logo语言。</font><br/>" +
"<font color='red'>>>></font><font color=black> # 若不需要演示logo绘图(又名：乌龟绘图)，可下达“清屏”指令。</font><br/>" +
"<font color='red'>>>></font><font color=black> # 可下达“词典”指令，可查看词典（所有可执行的指令词）。</font><br/>" +
"<font color='red'>>>></font><font color=black> # 系统内置词典的词汇量有限，可根据需要不断自编新词（指令）。</font>";
var 编辑区 = document.getElementById("编辑区");
kvm.ticktype = ticktype;
function fortheval(str) {
// if (!kvm.getcompiling()) log.innerHTML += "<br />\n";
// log.innerHTML+="<font color='blue'>"+编辑区.value+"</font>\n";
if (arguments.length == 0) {
kvm.exec(编辑区.value);
} else {
kvm.exec(str)
}
if (!kvm.getcompiling() && !kvm.geterror()) {
log.innerHTML += "<hr/><font color='red'>>>></font>";
log.scrollTop = log.scrollHeight;
左区.scrollTop = 左区.scrollHeight;
右区.scrollTop = 右区.scrollHeight;
window.scrollTo(0, document.documentElement.scrollHeight);
}
}
function ticktype(t) {
log.innerHTML = log.innerHTML + t;
} // 輸出
function 显示堆栈(t) {
// log.innerHTML = log.innerHTML + t;
} // 輸出
// var buju={"顺序":[1,2,3],"id":2};
var buju = 2;
function 左中右() {
var 左区 = document.getElementById(`左区`),
右区 = document.getElementById(`右区`),
编辑区 = document.getElementById(`编辑区`);
if (buju == 3) {
buju = -3
}
buju += 1;
if (buju == 0) {
buju = 2
}
if (Math.abs(buju) == 2) { // 左右
左区.style.visibility = 'visible';
左区.style.width = "50vw";
右区.style.visibility = 'visible';
右区.style.left = window.innerWidth * 0.5 + "px";
右区.style.width = "50vw";
} else {
if (Math.abs(buju) == 3) { // 左100%
左区.style.visibility = 'visible';
左区.style.width = window.innerWidth + "px";
右区.style.visibility = 'hidden';
右区.style.left = 0;
右区.style.width = "0px";
} else { // 1 右100%
左区.style.visibility = 'hidden';
左区.style.width = "0px";
右区.style.visibility = 'visible';
右区.style.left = 0;
右区.style.width = window.innerWidth + "px";
}
}
}
fortheval(`编 步后转 步后退 180 度右转 。 编 步左转 步左进 90 度左转 。 编 步右转 步右进 90 度右转 。
新画布: 默认画布 500 500 为画布宽高 十字坐标系 画布居中 显示布边`);
// function wordsstring() {
// var str = "",
// name = "";
// for (var i in words) {
// name = words[i].name
// if (name != "。" || name != "编")
// str += name + " "
// }
// return str;
// }; // 获得words[i].key
var editor = CodeMirror.fromTextArea(document.getElementById(
"编辑区"), { // 命令行生效有bug 右边edit2
lineNumbers: true, // 显示行号
lineWrapping: true, // 自动换行
styleActiveLine: true, // 选中行高亮
indentUnit: 4,
tabSize: 2, // 缩进配置（默认为2）
// autofocus: true,
styleActiveLine: true, // 当前背景行高亮
theme: "colorforth",
mode: "text/x-forth"
});
editor.setSize('100%', '100%');
document.body.addEventListener("keydown", function(event) {
// 监听esc键退出全屏
if (event.keyCode == 27) {
window.location.reload();
}
// 监听 Ctrl + Enter 可全屏查看
if (event.ctrlKey && event.keyCode == 13) {
buju = 2;
左中右();
fortheval(editor.getValue());
}
});
</script>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手