Hands-On Game Development with WebAssembly

上QQ阅读APP看书，第一时间看更新

HTML5 and WebAssembly

In this chapter, we will show you how the C code we write to target WebAssembly comes together with HTML5, JavaScript, and CSS to create a web page. We will teach you how to create a new HTML shell file to be used by Emscripten in the creation of our WebAssembly app. We will discuss the Module object and how Emscripten uses it as an interface between our JavaScript and the WebAssembly module. We will show you how to call WebAssembly functions written in C from within JavaScript on our HTML page. We will also show you how to call JavaScript functions from our C code. We will discuss how to use CSS to improve the look of our web page. We will introduce you to the HTML5 Canvas element and show how it is possible to display images to the canvas from within JavaScript. We will briefly discuss moving those images around the canvas from our WebAssembly module. This chapter will give you an understanding of how everything works together and lays the foundation for other features we are developing for our WebAssembly applications.

Beginning with this chapter and continuing through the remainder of the book, you will need image and font files from the GitHub project to compile the examples. For this chapter, you will need the /Chapter02/spaceship.png image file from the project directory. Please download the project from the following URL: https://github.com/PacktPublishing/Hands-On-Game-Development-with-WebAssembly .

I highly recommend working along as you read each section of this chapter. You may use your favorite code editor and the command line to follow along. Even though we have provided links to download the code directly, it cannot be emphasized enough how much you will learn by actually following edits suggested in this chapter. You are going to make mistakes and learn a lot from them. If you decide to work along, another suggestion is the following: do not proceed to the next section unless your edit/steps in the current section are successful. If you need help, contact me on twitter (@battagline).

In this chapter, we will cover the following topics:

The Emscripten minimal shell file
Creating a new HTML shell and C file
Defining our CSS
HTML5 and game development
Adding a canvas to the Emscripten template

本周热推：

ARM嵌入式体系结构与接口技术（Cortex-A9版）（微课版）微型计算机系统原理及应用：国产龙芯处理器的软件和硬件集成（基础篇）The Machine Learning Workshop Android NDK Game Development Cookbook Arduino项目开发：智能控制