JavaScript Doom

Share this article

Please forgive the blatant link-baiting title. JavaScript is fine. The world’s most-used programming language has a secure future — especially now id Software’s Doom has been converted to run in a browser! If you’ve been overcome by euphoria, stop reading further and click the link: developer.mozilla.org/demos/detail/doom-on-the-web/ The game is available from Mozilla’s Demo Studio; a resource which showcases HTML5, CSS3, and JavaScript technologies in Firefox and other browsers.

note: Where’s it gone?
The minute this post appeared, Mozilla pulled the Doom demo. I’m not sure why and it may only be temporary — I suspect it was overloading their servers. A video of JavaScript Doom can be viewed on YouTube while we’re waiting for it to return.
I’m conscious that SitePoint attracts readers who are far younger than me. If you’ve never heard of Doom, it’s a first-person shooting game which was released for the PC in 1993. While it wasn’t the first FPS — id Software’s Wolfenstein 3D can claim that crown — Doom revolutionized the genre. It’s pioneering 3D graphics, multi-player gaming, and graphic chainsaw-wielding violence was the inspiration for many of today’s blockbuster titles. By modern standards, Doom is showing its age. It has antiquated blocky VGA graphics, 2D maps (walkways cannot pass over another) and limited control (no jumping or vertical aiming). But the game play remains astounding and Doom has been converted for a range of consoles and handheld devices. Now it’s been ported to JavaScript and can be played in a browser without plug-ins. Unfortunately, JavaScript Doom is agonizingly slow in Chrome and won’t run in IE. Some versions of Safari are reported to work, but that wasn’t my experience in version 5.0.5. However, it works well on Firefox 4 and Opera; a mid-range PC should achieve 20-30 frames per second — probably better than the old 486 I used to play Doom back in 1993! There are a few graphical glitches but it’s playable. Amazingly, the game was compiled from C to JavaScript using Emscripten and Clang then optimized with Google’s Closure Compiler. Video output is rendered on a standard HTML5 canvas
element. Sound is handled using Mozilla’s non-standard Audio Data API but the effects are so nasty you won’t want them! If you’re interested, the source can be downloaded although the JavaScript is minified and unreadable.

If You Think That’s Impressive…

Fabrice Bellard has developed an x86 PC emulator in JavaScript. For fun. It runs in all the latest browsers so he installed the 2.6.20 Linux kernel and released browser-based emulator. Yes, it’s running Linux in a web page. The demo is limited to terminal output rendered in an HTML table but the implications are astonishing. My only concern is that someone will add X11, install a browser and recursively implode the web! Have you seen any other great examples of cutting-edge JavaScript?

Frequently Asked Questions (FAQs) about JavaScript DOOM

What is JavaScript DOOM?

JavaScript DOOM is a version of the classic video game DOOM that has been rewritten to run in a web browser using JavaScript. This allows the game to be played on any device with a web browser, without the need for any additional software or plugins. The game retains all the original features, including the graphics, sound effects, and gameplay mechanics, providing a nostalgic gaming experience for fans of the original DOOM.

How does JavaScript DOOM work?

JavaScript DOOM works by using a combination of HTML5 and JavaScript to recreate the original DOOM game in a web browser. The game’s code is written in JavaScript, which is a programming language that can be run directly in a web browser. The game’s graphics are rendered using HTML5, which is a markup language that allows for the creation of interactive web content. Together, these technologies allow for a fully playable version of DOOM to be run in a web browser.

Can I modify JavaScript DOOM?

Yes, you can modify JavaScript DOOM. The source code for the game is freely available on GitHub, allowing anyone with knowledge of JavaScript and HTML5 to make their own modifications to the game. This could include changing the game’s graphics, sound effects, or gameplay mechanics, or even adding new features or levels to the game.

Is JavaScript DOOM legal?

Yes, JavaScript DOOM is legal. The original DOOM game was released as open-source software by its creators, id Software, in 1997. This means that anyone is free to use, modify, and distribute the game’s code, as long as they comply with the terms of the original license. JavaScript DOOM is a derivative work of the original DOOM game, and as such, it is also covered by this license.

How can I play JavaScript DOOM?

To play JavaScript DOOM, all you need is a web browser that supports HTML5 and JavaScript. This includes most modern web browsers, such as Google Chrome, Mozilla Firefox, and Microsoft Edge. Simply navigate to the JavaScript DOOM website, and the game will load directly in your browser. No additional software or plugins are required.

Can I play JavaScript DOOM on my mobile device?

Yes, you can play JavaScript DOOM on your mobile device. The game is designed to run in any web browser that supports HTML5 and JavaScript, which includes the browsers on most modern smartphones and tablets. However, the game’s controls may not be optimized for touch input, so your experience may vary depending on your device.

Does JavaScript DOOM have multiplayer?

No, JavaScript DOOM does not currently support multiplayer. The game is a single-player experience, allowing you to play through the original DOOM campaign on your own. However, because the game’s source code is available on GitHub, it is possible that multiplayer functionality could be added in the future by a third-party developer.

Can I save my progress in JavaScript DOOM?

Yes, you can save your progress in JavaScript DOOM. The game uses the web browser’s local storage feature to save your progress, allowing you to pick up where you left off even if you close your browser or turn off your computer. However, please note that your save data will be lost if you clear your browser’s local storage.

Is JavaScript DOOM free?

Yes, JavaScript DOOM is free to play. The game is a non-commercial project, created by fans of the original DOOM game for the enjoyment of others. The game’s source code is also freely available on GitHub, allowing anyone to download, modify, and distribute the game at no cost.

Can I contribute to the development of JavaScript DOOM?

Yes, you can contribute to the development of JavaScript DOOM. The game’s source code is hosted on GitHub, a platform that allows for collaborative software development. If you have knowledge of JavaScript and HTML5, you can contribute to the game’s development by fixing bugs, adding new features, or improving the game’s performance.

Craig BucklerCraig Buckler
View Author

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's created enterprise specifications, websites and online applications for companies and organisations including the UK Parliament, the European Parliament, the Department of Energy & Climate Change, Microsoft, and more. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler.

CSSdoomemulatorHTML5 Dev CenterHTML5 Tutorials & Articlesjavascriptlinux
Share this article
Read Next
Effortless Content Publishing: A Developer’s Guide to Adobe Experience Manager
Effortless Content Publishing: A Developer’s Guide to Adobe Experience Manager
SitePoint Sponsors
From Idea to Prototype in Minutes: Claude Sonnet 3.5
From Idea to Prototype in Minutes: Claude Sonnet 3.5
Zain Zaidi
Essential Plugins for WordPress Developers: Top Picks for 2024
Essential Plugins for WordPress Developers: Top Picks for 2024
SitePoint Sponsors
WebAssembly vs JavaScript: A Comparison
WebAssembly vs JavaScript: A Comparison
Kaan Güner
The Functional Depth of Docker and Docker Compose
The Functional Depth of Docker and Docker Compose
Vultr
How Top HR Agencies Build Trust Through Logo Designs
How Top HR Agencies Build Trust Through Logo Designs
Evan Brown
Leveraging Progressive Web Apps (PWAs) for Enhanced Mobile User Engagement
Leveraging Progressive Web Apps (PWAs) for Enhanced Mobile User Engagement
SitePoint Sponsors
10 Artificial Intelligence APIs for Developers
10 Artificial Intelligence APIs for Developers
SitePoint Sponsors
The Ultimate Guide to Navigating SQL Server With SQLCMD
The Ultimate Guide to Navigating SQL Server With SQLCMD
Nisarg Upadhyay
Retrieval-augmented Generation: Revolution or Overpromise?
Retrieval-augmented Generation: Revolution or Overpromise?
Kateryna ReshetiloOlexandr Moklyak
How to Deploy Apache Airflow on Vultr Using Anaconda
How to Deploy Apache Airflow on Vultr Using Anaconda
Vultr
Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
Cloud Native: How Ampere Is Improving Nightly Arm64 Builds
Dave NearyAaron Williams
How to Create Content in WordPress with AI
How to Create Content in WordPress with AI
Çağdaş Dağ
A Beginner’s Guide to Setting Up a Project in Laravel
A Beginner’s Guide to Setting Up a Project in Laravel
Claudio Ribeiro
Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
Enhancing DevSecOps Workflows with Generative AI: A Comprehensive Guide
Gitlab
Creating Fluid Typography with the CSS clamp() Function
Creating Fluid Typography with the CSS clamp() Function
Daine Mawer
Comparing Full Stack and Headless CMS Platforms
Comparing Full Stack and Headless CMS Platforms
Vultr
7 Easy Ways to Make a Magento 2 Website Faster
7 Easy Ways to Make a Magento 2 Website Faster
Konstantin Gerasimov
Powerful React Form Builders to Consider in 2024
Powerful React Form Builders to Consider in 2024
Femi Akinyemi
Quick Tip: How to Animate Text Gradients and Patterns in CSS
Quick Tip: How to Animate Text Gradients and Patterns in CSS
Ralph Mason
Sending Email Using Node.js
Sending Email Using Node.js
Craig Buckler
Creating a Navbar in React
Creating a Navbar in React
Vidura Senevirathne
A Complete Guide to CSS Logical Properties, with Cheat Sheet
A Complete Guide to CSS Logical Properties, with Cheat Sheet
Ralph Mason
Using JSON Web Tokens with Node.js
Using JSON Web Tokens with Node.js
Lakindu Hewawasam
How to Build a Simple Web Server with Node.js
How to Build a Simple Web Server with Node.js
Chameera Dulanga
Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
Building a Digital Fortress: How to Strengthen DNS Against DDoS Attacks?
Beloslava Petrova
Crafting Interactive Scatter Plots with Plotly
Crafting Interactive Scatter Plots with Plotly
Binara Prabhanga
GenAI: How to Reduce Cost with Prompt Compression Techniques
GenAI: How to Reduce Cost with Prompt Compression Techniques
Suvoraj Biswas
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
How to Use jQuery’s ajax() Function for Asynchronous HTTP Requests
Aurelio De RosaMaria Antonietta Perna
Quick Tip: How to Align Column Rows with CSS Subgrid
Quick Tip: How to Align Column Rows with CSS Subgrid
Ralph Mason
15 Top Web Design Tools & Resources To Try in 2024
15 Top Web Design Tools & Resources To Try in 2024
SitePoint Sponsors
7 Simple Rules for Better Data Visualization
7 Simple Rules for Better Data Visualization
Mariia Merkulova
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
Cloudways Autonomous: Fully-Managed Scalable WordPress Hosting
SitePoint Team
Best Programming Language for AI
Best Programming Language for AI
Lucero del Alba
Quick Tip: How to Add Gradient Effects and Patterns to Text
Quick Tip: How to Add Gradient Effects and Patterns to Text
Ralph Mason
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Logging Made Easy: A Beginner’s Guide to Winston in Node.js
Vultr
How to Optimize Website Content for Featured Snippets
How to Optimize Website Content for Featured Snippets
Dipen Visavadiya
Psychology and UX: Decoding the Science Behind User Clicks
Psychology and UX: Decoding the Science Behind User Clicks
Tanya Kumari
Build a Full-stack App with Node.js and htmx
Build a Full-stack App with Node.js and htmx
James Hibbard
Digital Transformation with AI: The Benefits and Challenges
Digital Transformation with AI: The Benefits and Challenges
Priyanka Prajapat
Quick Tip: Creating a Date Picker in React
Quick Tip: Creating a Date Picker in React
Dianne Pena
How to Create Interactive Animations Using React Spring
How to Create Interactive Animations Using React Spring
Yemi Ojedapo
10 Reasons to Love Google Docs
10 Reasons to Love Google Docs
Joshua KrausZain Zaidi
How to Use Magento 2 for International Ecommerce Success
How to Use Magento 2 for International Ecommerce Success
Mitul Patel
5 Exciting New JavaScript Features in 2024
5 Exciting New JavaScript Features in 2024
Olivia GibsonDarren Jones
Tools and Strategies for Efficient Web Project Management
Tools and Strategies for Efficient Web Project Management
Juliet Ofoegbu
Choosing the Best WordPress CRM Plugin for Your Business
Choosing the Best WordPress CRM Plugin for Your Business
Neve Wilkinson
ChatGPT Plugins for Marketing Success
ChatGPT Plugins for Marketing Success
Neil Jordan
Managing Static Files in Django: A Comprehensive Guide
Managing Static Files in Django: A Comprehensive Guide
Kabaki Antony
The Ultimate Guide to Choosing the Best React Website Builder
The Ultimate Guide to Choosing the Best React Website Builder
Dianne Pena
Exploring the Creative Power of CSS Filters and Blending
Exploring the Creative Power of CSS Filters and Blending
Joan Ayebola
How to Use WebSockets in Node.js to Create Real-time Apps
How to Use WebSockets in Node.js to Create Real-time Apps
Craig Buckler
Best Node.js Framework Choices for Modern App Development
Best Node.js Framework Choices for Modern App Development
Dianne Pena
SaaS Boilerplates: What They Are, And 10 of the Best
SaaS Boilerplates: What They Are, And 10 of the Best
Zain Zaidi
Understanding Cookies and Sessions in React
Understanding Cookies and Sessions in React
Blessing Ene Anyebe
Enhanced Internationalization (i18n) in Next.js 14
Enhanced Internationalization (i18n) in Next.js 14
Emmanuel Onyeyaforo
Essential React Native Performance Tips and Tricks
Essential React Native Performance Tips and Tricks
Shaik Mukthahar
How to Use Server-sent Events in Node.js
How to Use Server-sent Events in Node.js
Craig Buckler
Five Simple Ways to Boost a WooCommerce Site’s Performance
Five Simple Ways to Boost a WooCommerce Site’s Performance
Palash Ghosh
Elevate Your Online Store with Top WooCommerce Plugins
Elevate Your Online Store with Top WooCommerce Plugins
Dianne Pena
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Unleash Your Website’s Potential: Top 5 SEO Tools of 2024
Dianne Pena
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
How to Build a Chat Interface using Gradio & Vultr Cloud GPU
Vultr
Enhance Your React Apps with ShadCn Utilities and Components
Enhance Your React Apps with ShadCn Utilities and Components
David Jaja
10 Best Create React App Alternatives for Different Use Cases
10 Best Create React App Alternatives for Different Use Cases
Zain Zaidi
Control Lazy Load, Infinite Scroll and Animations in React
Control Lazy Load, Infinite Scroll and Animations in React
Blessing Ene Anyebe
Building a Research Assistant Tool with AI and JavaScript
Building a Research Assistant Tool with AI and JavaScript
Mahmud Adeleye
Understanding React useEffect
Understanding React useEffect
Dianne Pena
Web Design Trends to Watch in 2024
Web Design Trends to Watch in 2024
Juliet Ofoegbu
Building a 3D Card Flip Animation with CSS Houdini
Building a 3D Card Flip Animation with CSS Houdini
Fred Zugs
How to Use ChatGPT in an Unavailable Country
How to Use ChatGPT in an Unavailable Country
Dianne Pena
An Introduction to Node.js Multithreading
An Introduction to Node.js Multithreading
Craig Buckler
How to Boost WordPress Security and Protect Your SEO Ranking
How to Boost WordPress Security and Protect Your SEO Ranking
Jaya Iyer
Understanding How ChatGPT Maintains Context
Understanding How ChatGPT Maintains Context
Dianne Pena
Building Interactive Data Visualizations with D3.js and React
Building Interactive Data Visualizations with D3.js and React
Oluwabusayo Jacobs
JavaScript vs Python: Which One Should You Learn First?
JavaScript vs Python: Which One Should You Learn First?
Olivia GibsonDarren Jones
13 Best Books, Courses and Communities for Learning React
13 Best Books, Courses and Communities for Learning React
Zain Zaidi
5 jQuery.each() Function Examples
5 jQuery.each() Function Examples
Florian RapplJames Hibbard
Implementing User Authentication in React Apps with Appwrite
Implementing User Authentication in React Apps with Appwrite
Yemi Ojedapo
AI-Powered Search Engine With Milvus Vector Database on Vultr
AI-Powered Search Engine With Milvus Vector Database on Vultr
Vultr
Understanding Signals in Django
Understanding Signals in Django
Kabaki Antony
Why React Icons May Be the Only Icon Library You Need
Why React Icons May Be the Only Icon Library You Need
Zain Zaidi
View Transitions in Astro
View Transitions in Astro
Tamas Piros
Getting Started with Content Collections in Astro
Getting Started with Content Collections in Astro
Tamas Piros
What Does the Java Virtual Machine Do All Day?
What Does the Java Virtual Machine Do All Day?
Peter Kessler
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Become a Freelance Web Developer on Fiverr: Ultimate Guide
Mayank Singh
Layouts in Astro
Layouts in Astro
Tamas Piros
.NET 8: Blazor Render Modes Explained
.NET 8: Blazor Render Modes Explained
Peter De Tender
Mastering Node CSV
Mastering Node CSV
Dianne Pena
A Beginner’s Guide to SvelteKit
A Beginner’s Guide to SvelteKit
Erik KückelheimSimon Holthausen
Brighten Up Your Astro Site with KwesForms and Rive
Brighten Up Your Astro Site with KwesForms and Rive
Paul Scanlon
Which Programming Language Should I Learn First in 2024?
Which Programming Language Should I Learn First in 2024?
Joel Falconer
Managing PHP Versions with Laravel Herd
Managing PHP Versions with Laravel Herd
Dianne Pena
Accelerating the Cloud: The Final Steps
Accelerating the Cloud: The Final Steps
Dave Neary
An Alphebetized List of MIME Types
An Alphebetized List of MIME Types
Dianne Pena
The Best PHP Frameworks for 2024
The Best PHP Frameworks for 2024
Claudio Ribeiro
11 Best WordPress Themes for Developers & Designers in 2024
11 Best WordPress Themes for Developers & Designers in 2024
SitePoint Sponsors
Top 10 Best WordPress AI Plugins of 2024
Top 10 Best WordPress AI Plugins of 2024
Dianne Pena
20+ Tools for Node.js Development in 2024
20+ Tools for Node.js Development in 2024
Dianne Pena
The Best Figma Plugins to Enhance Your Design Workflow in 2024
The Best Figma Plugins to Enhance Your Design Workflow in 2024
Dianne Pena
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Harnessing the Power of Zenserp for Advanced Search Engine Parsing
Christopher Collins
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form