Home > Web Front-end > JS Tutorial > Writing a push box game with JS and H5

Writing a push box game with JS and H5

小云云
Release: 2018-03-17 16:24:49
Original
2096 people have browsed it


The push box game is a popular game many years ago (even now many people play it). The purpose of the game is very simple, that is, push the box and push all the boxes. When you reach the destination, the game is successful: it seems to be a simple logic, but in fact it is still difficult. I also relied on the help of others to complete it. Now I will introduce how to use js and html5 to write the game (for convenience, we will Replace it with a pink circle):

1. Ability requirements

JavaScript, HTML canvas, basic object-oriented ideas, reasonable programming logic.

2. Writing sequence

1.pushBox.html file

2.pojo.js file (used to store all objects)

3.paint.js file (used to write Drawing statements)

4.game.js file (used to write the running logic part)

5.allLevels.js file (used to store levels)

*Note: This is my writing habit. According to content and function, Each category is separated. If you have a better way to write it, please comment

3. Start writing

1. Create a basic pushBox .html file:

The content is very simple. The only needs the tag and set the id. The subsequent

<body>
	<canvas id=&#39;can1&#39; width=1536 height=733></canvas>
	<audio id="walk" autoplay></audio>
	<audio id="push" autoplay></audio>
	<audio id="win" autoplay></audio>
</body>
Copy after login

Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template