TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Live canvas editor compiles and runs as you edit

22 点作者 bezalmighty将近 11 年前

5 条评论

Lerc将近 11 年前
I like this. I have worked on a couple of things in a similar area.<p>This too suffers from the problem that has plagued me.<p>I tried to add this code to the program<p><pre><code> var x=2; var y=1; while (x&gt;y) { x+=2; y+=1; } </code></pre> Which is my usual check for what happens when you encounter an endless loop. Of course, I didn&#x27;t get the entire thing typed in because the user interface froze when I typed the close bracket of (x&gt;y).<p>Javascript can&#x27;t pre-empt. An endless loop is a killer. I&#x27;m going to write something long and detailed about this one day. It&#x27;ll be a big rant.<p>I made a MediaWiki plugin for my approach. It uses a worker, which lets you do something about busy loops (you can kill it, not much else). The down side is that all of the drawing operations have to be passed through to the host as messages.<p>The other part of what I have been working on is a extremely simple API to use environments like this for novice programmers.<p>I made whio. <a href="https://github.com/Lerc/whio" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;Lerc&#x2F;whio</a> and I&#x27;m slowly building up a wiki as a intro to programming. <a href="http://fingswotidun.com/code/index.php/Main_Page" rel="nofollow">http:&#x2F;&#x2F;fingswotidun.com&#x2F;code&#x2F;index.php&#x2F;Main_Page</a><p>I teach some programming in a class of 10 year olds. I start off with <a href="http://jsbin.com/tinydraw/1/edit" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;tinydraw&#x2F;1&#x2F;edit</a> Which is a program they can focus on in one view and lets them draw pictures. Then I make suggestions and point them to the wiki. Where they go from there is amazing to see.<p>Just changing the number on the jsbin url shows where some of the kids have taken this. <a href="http://jsbin.com/tinydraw/45/edit" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;tinydraw&#x2F;45&#x2F;edit</a> <a href="http://jsbin.com/tinydraw/130/edit" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;tinydraw&#x2F;130&#x2F;edit</a> <a href="http://jsbin.com/tinydraw/148/edit" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;tinydraw&#x2F;148&#x2F;edit</a><p>This one appears to be by a someone who copied an example from the wiki then modified it <a href="http://jsbin.com/tinydraw/48/edit" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;tinydraw&#x2F;48&#x2F;edit</a><p>I like this one. Here a kid figured out from the wiki how to read the mouse. <a href="http://jsbin.com/tinydraw/50/edit" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;tinydraw&#x2F;50&#x2F;edit</a> Scattered through the versions are evolutions of this program until it ends up here, as a simple, but fairly complete game. <a href="http://jsbin.com/tinydraw/141/edit" rel="nofollow">http:&#x2F;&#x2F;jsbin.com&#x2F;tinydraw&#x2F;141&#x2F;edit</a>
nornagon将近 11 年前
Try out <a href="https://nornagon.github.io/live" rel="nofollow">https:&#x2F;&#x2F;nornagon.github.io&#x2F;live</a>, which also lets you edit constants without recompiling.
Leszek将近 11 年前
I&#x27;ve been working on something similar for teaching graphics programming to our undergrads. Uses esprima to parse the input JS and add some runtime error checking with line numbers, including unidentified variables and timeouts for loops:<p><a href="http://www.cl.cam.ac.uk/~ls426/graphicstutor/" rel="nofollow">http:&#x2F;&#x2F;www.cl.cam.ac.uk&#x2F;~ls426&#x2F;graphicstutor&#x2F;</a>
评论 #7963024 未加载
johnorourke将近 11 年前
Simpsons already did it. Well OK, @sanchothefat already did a similar thing using Processing.js over at <a href="http://hascanvas.com" rel="nofollow">http:&#x2F;&#x2F;hascanvas.com</a> - bit old now but he had plenty of interesting user contributions over the years.
dested将近 11 年前
Can you elaborate on what is actually happening?