JS and HTMLGaming: From Angry Birds to ZX Spectrum

Key Points

• HTML5/JavaScript gaming field is growing rapidly, and developers have increasingly rich APIs and tools available to them.
• Mozilla visual programmer and tech evangelist Rob Hawkes highlights the potential of HTML5 and JavaScript in browser games, noting the increasing complexity of these games.
• Developers who are interested in learning HTML5/JavaScript game development should first be familiar with JavaScript and graphics APIs (such as the Canvas API and Audio API). Game engines like Crafty and Impact are also useful.
• HTML5 and JavaScript have prompted the revival of retro games, which may bring a more complex and immersive gaming experience in the future, especially with the support of technologies such as WebGL.
• The openness of the Internet has brought challenges and opportunities to the game's profit model. Developers need to explore various strategies, from in-game payment to sponsorship, in order to make the game profitable.

HTML5/JavaScript gaming field has been developing rapidly recently. Browser games are becoming more and more popular, and developers are also beginning to discover a set of convenient APIs and other tools. Rob Hawkes is passionate about praising HTML5 and JavaScript and its application in browser games. Rob is a visual programmer, author and technical evangelist at Mozilla, responsible for Mozilla's gaming work in the developer community. He gave a closing keynote at the Web Directions Code conference in Melbourne in May, showing us how great HTML5 and JavaScript games are growing rapidly.

Hello, Rob. Please tell us your background in development.

I have been working in the field of network development for about 13 years. I learned a little bit about HTML and CSS – I was more interested in web design, but then turned to PHP, when I learned that I could do something very powerful in server-side development. Once I know how to create a form, I thought, now, how to access this data? Everyone learns PHP from the form...yes! It's really cool to be able to send data somewhere. So later I worked in the industry, mainly engaged in front-end development, and worked for several years. I became interested in the media and started delving into JavaScript, and since then I realized that I wasn't that passionate about making websites, but more passionate about learning technology and pushing it to my limits. I've always been very interested in game making and love to take something to do crazy things to learn how it works, so during college I did a lot of HTML5 work – especially canvas.

You must have started fiddling with canvas in the early days, right?

Actually, canvas existed before I started. Apple used it to create their dashboard widget. It's always in WebKit, although it never really stabilizes in other browsers—or at least it's never been fun. No one has ever done anything with it. But when I came across canvas, I thought it was really cool. I started at a good time – there were very few books on it at the time, but it also brought a lot of opportunities. I'm one of the few people who are delving into it in depth. In addition, I also participated in the experiment of the JavaScript API. I think I am neither a designer nor a developer—between the two. I love visual programming. Things like game making and canvas are perfect because you can combine hardcore development with some really intuitive interface experience. That's what I'm working on at Mozilla; the game development aspect of the web--and Boot2Gecko, which is a mobile device project we're working on.

What made you interested in HTML5/JavaScript games? Are you a game fan?

I have games in my life - I have a ZX Spectrum, a game console...

Wow! Are you a fan of ZX Spectrum?

My dad doesn't like computers very much, but for some reason he thinks buying one is a good idea. But I was deeply attracted by the idea that the game appeared after inserting the tape! I mean, I was still very young, but I still remember—"Fighting the Duck", and all those crazy games. Then when I started playing PC games, my productivity dropped for a long time! But the game has always been fun for me. Technologies like Flash and JavaScript made me realize that it was so cool that I could make games now. Then once you start making the game, it opens up a whole new realm of possibilities. It's like the feeling I felt when I first made a website - I created it! There are many different techniques you can learn in game development—input, visual graphics, sound—and you don’t always get that experience when building a standard website. In the game, you always push things to the limit.

So if I am interested in HTML5/JavaScript game development, what should I learn first and what direction should I develop?

Master JavaScript; standard language-related content. But once you're happy with JavaScript, you can take a look at some graphics APIs—such as the Canvas API. Canvas is a very good API. Until I came across it, I really don't know how to draw something in the browser without creating an image. You can also check out the Audio API. The multimedia functionality in HTML5 is very interesting. Check out some game engines. You may not necessarily have to learn them from scratch, but there are a lot of game engines that will allow you to get started quickly without having to fully understand the basics. For example, Crafty, I believe it is an Australian engine and it is free. Then there is a very good engine, priced at $99, called Impact - a very good game engine with very well-documented documentation. If you want to create a game with JavaScript but don't necessarily want to get too deep into implementation details, these engines are a great starting point. If you really want to get a deeper look at the ins and outs of game development, learn how to animation using tools like requestAnimationFrame, which can optimize loops in JavaScript. When you combine it with the Canvas API, like having a square move around the screen, it's not a difficult task to use the keyboard to type from there. From there, you can take it wherever you want.

So it seems you still need to understand basic JavaScript well.

Yes. I mean, there are some game libraries like jQuery – engines like Crafty and Impact are a bit like that. But they are not as abstract as jQuery. If you want to do something more complicated, you still need to write JavaScript. But if you just want to do basic animations—like introducing images as sprites and moving around—you can do that with Crafty. The problem is, you don't fully understand what's going on behind the scenes. Outside the web, if you want to make a game, you can use Flash or Unity as it abstracts a way to handle complex animations and physical effects. But, for me, understanding JavaScript means I can create games from scratch. Yes, it can be difficult and may take a while, but it's worth it in the long run. If you can at least understand the basics of it—for loops, arrays and objects, etc.—then you will really appreciate it when you want to move things further.

HTML5 and JavaScript seem to have led to the explosion of retro games—strategy games, platform games, and the resurrection of old games like Pong. Do you think it will go in other directions, such as more complex and interactive projects?

Retro games are cool in this regard. HTML5 games are in a fairly simple stage, so retro games are perfect – they don't require much abilities, mainly in 2D, and are easy to create. The same is true when Flash games were popular. Nothing can stop developers from using JavaScript to create a more immersive experience. We are starting to see how we use WebGL. Many people are starting to create games closer to those you see on iOS—even 3D games—using technologies like hardware acceleration. "Pong" is great, but it doesn't push too much technology; even "Angry Birds" doesn't push too much technology. I've seen someone create Quake 4 in WebGL and it runs smoothly. We need to see more of these games to help establish the web as a platform for modern gaming. We now have the technology and capabilities we need to create a real game. And what I mean by real games are those games you can see in PC games. We are beginning to see companies and developers moving in this direction. We need to create online games built for the Internet. Now we are seeing a revival of interactive games, but we are not seeing too many games created specifically for the web. I want to see more games that take advantage of the network while also realizing device limitations. Just because you can make the same game on both platforms doesn't mean it should be exactly the same. I think the network has a chance to be an independent gaming platform – a unique goal, not just another place to place standard games. Once the game developers get this under the grasp, I think we'll see something really interesting. Now the games on the web are really just copying other platforms – games are pretty static, and they don't really use anything the web offers, such as social features or the ability to connect to other APIs. All of this is inherent to the web and we are using it in the website, but what happens if we use it in the game?

What many developers do in browser games often involve digging through the past, which is not necessarily a bad thing - but can you see extensions of concepts and ideas?

That would be my dream. Now I think we are unfair to HTML and the web as a gaming platform. We compare it to previous platforms; for example, we are porting games from iOS—we run an HTML version of Angry Birds on the web, but it was never created for that. We brought it over because it was successful. This is unfair; we compare the web platform to the native platform it builds for. Of course, native platforms are better – it is built for touch control, some programming language and technology. We will never let the network grow independently by limiting it to what we have been doing before. We can unleash the power of the network and try something that is not as limited as the games we usually play – for example, we see that the game is contained in a small box in the browser. There is no reason for the game to have to appear in a small box as part of a website—it can be part of the network; you can chase the game online. There is no reason why you can't play games on Twitter. I hope that as people gradually embrace the idea of ​​online games, we will see a lot of new games coming. The JavaScript API is built for the network. This is a very basic technology; establishing a web socket connection and some events, you can send and receive messages to the web server in real time - making multiplayer games from there is no difficulty.

How do you make these ideas worth the market?

This is one of the problems we are trying to solve at Mozilla. This is also one of the common problems we get from game developers - "It sounds good, but what if I don't want to provide my game for free?" People are used to DRM and code protection, they come to the web and everything is Open; the source code is all there. So we have two problems that need to be solved here. First: How do we convince people that using open technology is a good idea? I think this problem is easy to solve because if you are worried about your game being stolen, then I don't think the network is for you. Just because you can make games in HTML doesn't mean it's the best platform for your game. And there are ways to alleviate these problems, such as shrinking the code—these methods can help developers feel a little more comfortable with publishing code that they have already spent a lot of time working on. The second question is marketing: How do you sell your game? If you can’t make a living, then at least as a company, making games makes no sense. You can go a path and if you don't spend money, you don't have to worry too much about stopping people from entering your game, but you can use donation mode. On the other hand, if you really want to turn them off without paying for the game, you can do that. We are developing an open web application API at Mozilla, which allows you to provide receipts that need to be verified on the game developer server. We are looking for ways to embrace the openness of the code, rather than stopping people from viewing the source code, just creating a dot, can you say, are you paying for this game? If not, then you won't get the full experience. This is not a magic pill. If it's just a single player they've already paid for, there's no way to stop them from taking it and doing what people do with networking technology once they get all the source code. I have a strong doubt that games on the Internet will not be stolen more than games elsewhere. Pirated games are much more complicated than just getting source code. If you have a server-side component, then you have protection, and that's where the receipt system can come into play. If you know that the game cannot be played unless someone visits your server, then you can control the experience. If they steal the front-end code, they still can't play the game because they don't get your server-side code, and if they can get into your server, then you have another problem. I don't think there is absolutely no problem with monetizing games online—the problem at the moment is that we haven't had a huge success yet. It's a question of chicken or egg first - people are waiting for success, and success is not coming because people are waiting. We need someone to come forward and try it out. And it's the internet, so you don't have to sell games like you used to. You may be able to make money from in-game payments, so you can still have a free gaming experience, but control what people experience in the game—the level players reach, the armor they have, or the energy gains.Once we fully understand what is possible, we figure out how to monetize it, especially after big companies like EA join - if anyone knows how to make money, that's these people. I think independent developers will follow suit. It's not as easy as it's on iOS...but they already have a huge lead. There are many ways to do it online. Newspapers have begun to consider introducing paywalls…this doesn’t necessarily work. The question is, should you block the content? Does this go against the original intention of the Internet? Are there any other ways to make money that is more suitable for the Internet? Maybe that's the answer to the question - not "How do I stop them from playing my game if they don't pay?", but "How do I make money from this game with what the Internet is good at?" Maybe it's not even from the player Make money there, but make money from sponsors. I would love to know where we will be in a year. We may see a series of successful games making a lot of money.

Frequently Asked Questions about HTML5 Games and WebGL

What is WebGL and why is it important for HTML5 games?

WebGL stands for Web Graphics Library. It is a JavaScript API that allows rendering interactive 3D and 2D graphics in any compatible web browser without plug-ins. WebGL is crucial for HTML5 gaming because it provides developers with the ability to create rich, high-quality graphics experiences that can run smoothly on a variety of devices. This opens up endless possibilities for game development, as it allows to create complex, immersive games that can be played directly in the browser.

How does HTML5 games compare to traditional game platforms?

HTML5 games have many advantages compared to traditional game platforms. First, HTML5 games are platform-agnostic and can be played on any device with a web browser, including smartphones, tablets and computers. This means players can enjoy their favorite games anywhere without downloading or installing anything. Secondly, HTML5 games are usually faster and easier to develop than traditional platforms, and games usually require specialized knowledge and tools. Finally, HTML5 games can be easily updated and distributed, making them attractive to both developers and players.

Can I play HTML5 games offline?

Yes, one of the huge advantages of HTML5 games is that they can be played offline. This is thanks to HTML5's application caching feature, which allows web applications to store data on users' devices for use when there is no network connection. This means you can continue to play your favorite HTML5 games even if you are not connected to the internet.

Is HTML5 games safe?

HTML5 games are usually as safe as any other web application. However, like all software, they can also be vulnerable to attacks if they are not designed and maintained properly. Developers must follow best practices for web security, such as using security protocols, verifying user input, and regularly updating and patching games to fix any potential security issues.

What are some examples of popular HTML5 games?

There are many popular HTML5 games today, from simple puzzle games to complex multiplayer online games. Some notable examples include "2048", "HexGL" and "Gem Maze". These games showcase the power and versatility of HTML5 and WebGL and give us some insight into the future of Web-based gaming.

How do I start developing my own HTML5 game?

Developing HTML5 games requires a good understanding of HTML, CSS, and JavaScript, as well as familiar with the WebGL API. There are also some available libraries and frameworks that can simplify the development process, such as Phaser, Pixi.js, and Three.js. In addition, there are many online tutorials and resources to help you get started with HTML5 game development.

Can I monetize my HTML5 game?

Yes, there are many ways to monetize HTML5 games. A common approach is through ads, which can be achieved by displaying ads in games or providing paid ad-free versions of the game. Another approach is through in-game purchases where players can purchase virtual goods or services in the game. Finally, some developers choose to sell their games directly, whether through their own websites or through game distribution platforms.

What is the future of HTML5 games?

The future of HTML5 games looks very bright. With the continuous advancement of web technology and the increasing popularity of mobile games, we are likely to see more innovative and exciting HTML5 games in the future. In addition, the rise of virtual and augmented reality technologies may also open up new possibilities for HTML5 game development.

What are the limitations of HTML5 games?

Although HTML5 games have many advantages, they also have some limitations. Performance can be a problem, for example, especially for more complex games. Additionally, not all web browsers fully support all features of HTML5 and WebGL, which can lead to compatibility issues. However, with the continuous development and improvement of web technologies, these limitations are becoming less important.

Can I use WebGL for non-game applications?

Of course! While WebGL is often related to gaming, it can also be used in a variety of non-game applications. For example, WebGL can be used to create interactive 3D visualizations, virtual tours, and even augmented reality experiences. The possibilities are almost limitless.

The above is the detailed content of JS and HTMLGaming: From Angry Birds to ZX Spectrum. For more information, please follow other related articles on the PHP Chinese website!