Arcade games using javascript+ Canvas implementation, without the use of any game engine, for beginners, it is also easier to get started. Here is the mini game page:

The idea for implementing this mini-game is:

1. Div moves its own plane following the cursor

2. Own aircraft to fire bullets

3. Collision detection of bullets and enemy aircraft

4. Collision detection between enemy aircraft and their own aircraft

5. Background & explosion effect

Run a screenshot

Project screenshots

The source code

HTML part

<! DOCTYPE HTML > < HTML lang="en" > <head> <meta charset="UTF-8"> <title> Href =" CSS /style.css"> </head> <body> <div id="info"> <h1>Canvas asteroid :</h1> < Canvas ID =" Canvas "></ Canvas >< script src="js/index.js"></script> </body> </html>Copy the code

The CSS part

* {
	margin: 0;
}
canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #262626;
}
#info {
	color: #FFF;
	font-family: "Lucida Sans Typewriter"."Lucida Console", Monaco, "Bitstream Vera Sans Mono", monospace;
	margin: 10px 10px 0;
	padding: 8px;
	background: #161616;
	position: absolute;
	z-index: 1;
}
#info h1 {
	font-size: 18px;
}
#info p {
	font-size: 11px;
}
Copy the code

The last

That’s the core code. How about that? Is that easy? If you think this small game so easy, then congratulations to you, your JS has become a small, if you feel confused, that means your JS learning or not in place ah, then you need to continue to work hard. If you want to experience the effect of the case and technical exchange, you can leave a comment in the comments section.

It’s not far. I’ll see you in the game!