Suck the cat with code! This paper is participating in[Cat Essay Campaign]
Greedy cat game
As a front end person, I decided to use an object-oriented way to write gluttonous cat mini-games, inspired by gluttonous snake mini-games.
We can think of the whole game as a game class, and a game class can have a variety of properties.
We can take the cat of gluttonous cats as an attribute, as well as the map attribute, the food attribute, the obstacle attribute.
We can think of a cat as a “cat” class with array properties, orientation properties, growth methods, and movement methods.
A map can be regarded as a map class, with row attributes, column attributes, width attributes (total width), and height attributes (total height).
I have an array property, and the array holds each of these little squares.
If you think of food as a food class, you have an X property, you have a Y property, an IMG property.
You can think of an obstacle as a class with an array property
map.js
When we render the object and the map, we go into map.js to render the map. The map needs to be rendered on the page, so we’ll use a DOM element this.dom = document.createElement(“div”), and then we’ll fill the method, Us every step of the equivalent of a small grid, we should start with every line is created, and then create each column, will create additional dom elements and array, and then on to tree operation, make the tree on the document. The operation body. The appendChild (enclosing the dom).
Game.js
We then defined rendering maps and rendering food methods in game.js in order to correlate maps with food. Game.js also defines actions to detect whether a boundary has been crossed, ways to end the Game, ways to detect whether the cat has eaten the food fish, ways to reset the food, and actions to detect whether the cat has bumped into an obstacle.
Cat.js
Then we render the Cat in the map. In cat.js, the Cat’s body is composed of multiple foods. We need to define the method and direction of the Cat’s movement. We also need to determine if the user is pressing in the right direction.
foot.js
Food.js defines x, y, img and the corresponding x and y when resetting the food.
Block.js
If we want to change the location of an obstacle, we can do so in block. js.
html
HTML is all about linking all js together
conclusion
I wrote a lot of notes in the code, which is convenient for people to read and understand. Due to my personal comparison, I didn’t write a lot in many places. Please give me more advice.
The final effect is as follows:
Source warehouse
Github project address greedy cat eat fish small game source code
Github online play, please click on the game online play