首頁 > web前端 > js教程 > 主體

組裝中的 Web 應用程式!

DDD
發布: 2024-09-18 13:07:20
原創
643 人瀏覽過

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
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!