Full record on creating a tank battle using javascript (1) _ javascript skills

The purpose of this article is to consolidate your recent js knowledge. This tutorial is suitable for beginners who are familiar with basic JavaScript syntax and object-oriented syntax. Because I have just learned JavaScript, it is inevitable that errors will occur. If you find that you want to correct it. PS: This tank war was rewritten by myself after the source code was written online. There is nothing that is too difficult. In this case, js object-oriented is better and can be used as an introductory tutorial on js object-oriented.

1. create basic objects for simple tank Movement

1.1 how to draw a canvas in a map?

Considering browser compatibility, we use dom operations to draw and refresh game objects. How do we store our maps? We should save the map with a two-dimensional array. js does not have a two-dimensional array, but it can be implemented by storing the array in a one-dimensional array.

1.2 code implementation

We design the canvas as a two-dimensional array of 13*13. Each element corresponds to a length and width of 40 Px in the map, we can regard the entire map as a table consisting of cells 40 PX * 40 p x, so the size of our entire canvas is 520px * 520px;

Before the code is run, we will first give you an object relationship diagram:

1.2.1 create a top-level object

Html code:

The Code is as follows:

Tank wars