首页 > web前端 > js教程 > 组装中的 Web 应用程序!

组装中的 Web 应用程序!

DDD
发布: 2024-09-18 13:07:20
原创
735 人浏览过

MOS 6502 was an immense step in affordable computing. Thanks to this little fellow, we got introduced to Commodore64, Apple II,
Atari2600 and NES. Still to this day, people play around with 6502 Assembly, creating software and games for these forgotten platforms.

Now, let me introduce myself - I'm Cassiopeia (however, I use Oliwia in formal settings), a transgender woman with a love for old technology and assembly programming. I've been a JavaScript developer for over six years. Most of the time I worked with typical web technologies such as Vue, React and Angular. Even though most of my experience comes from front-end development, most of the fun I get from programming comes from back-end development. And about a year ago, I grew amazed with old technology, and that's where 6502 comes in.

6502 has only(!) 56 instructions, but even with such a limited amount of instructions, developers (as always) could create impressive programs.
Have you ever thought about what it would be like to write your web applications using 6502?

No?

Of course not, why would you think that?!

But I...! I thought about that! I thought about how would it be to assemble your 6502 program, upload it and have it generate a website!

6502Web

Welcome, to 6502Web, a 6502 runtime written in JavaScript, that makes it possible to create (simple) websites and web applications using 6502 assembly!

I wanted to keep my runtime as simple as possible and as javascript-less as possible, especially since it's my first time writing something like that.

First off, get your 6502 program assembled, for testing I mostly use masswerk assembler since it's the fastest for me.

Let's start with something simple, try to assemble a program like this:

LDA #0
STA $46
STA $0
LDA #3
STA $46
LDA #72
STA $47
LDA #73
STA $48
LDA #33
STA $49
STA $1
登录后复制

Now that you have your .bin file downloaded, link 6502web cdn to your web app.

Then, you can load your binary file and run it like so:

<script>
LOAD_6502("file.bin").then(res => res.run({ log: true, sharedMemory: [] }));
</script>
登录后复制

Open your website (remember to start a web server, 6502web runtime uses fetch to load the binary file, and we need a web server running for that :3)

And... WHAT'S THAT?!

Web Applications in ssembly!

If you open devtools, you can see that somehow, a

element has appeared with "HI!" as its content.. But how?! Let's look at the 6502 code again, now with comments!

LDA #0   ; 0 is the ID of a <p> element in 6502web runtime, lets load it
STA $46  ; store it to $46, which is start of our RAM memory
STA $0
; by storing to $0, we RUN a built-in function which is responsible for creating an HTML element, that uses $46 as its argument (what HTML element to create!)

LDA #3   ; 3 will now be the length of the string we want to put in our <p>!
STA $46  ; store it at $46
LDA #72  ; 'H' in ASCII!
STA $47  ; store it at $47
LDA #73  ; 'I' in ASCII!
STA $48  ; store it at $48
LDA #33  ; '!' in ASCII!
STA $49  ; store it at $49
STA $1

; storing to $1 runs another built-in function, that is responsible for setting up text content of a *recently* created HTML element. Its first argument is length of the string it has to read, and then it reads memory fields (ASCII characters) after that, corresponding to the length we stored at $46
登录后复制

So.. This is basically how the 6502web runtime works. For now there's just a small numbers of features implemented:

  • Creating HTML elements,
  • Setting text content of HTML elements
  • Adding event listeners
  • Binding X and Y registers to HTML elements
  • Shared memory between 6502 and JS

With this small amount of features I was able to create a very simple counter app!

Web Applications in ssembly!

Web Applications in ssembly!

I believe that's enough for now, if you are interested, come and see for yourself, just be aware that this runtime is mostly a joke (a joke I put a lot effort into)

I'm still working on it, so MANY opcodes are yet to be implemented.

GitHub

Have a good day everyone!

以上是组装中的 Web 应用程序!的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板