Comments: This article describes how to use html5 canvas to create a space game. For more information, see
HTML5 Canvas allows you to quickly create lightweight images for game development. This section describes how to use Canvas to create a nostalgic outer space flying game that will run on the web page. This game is designed to demonstrate the basic principles for developing Web games using the Canvas function. The goal of this space game is to make your space ship pass through the stars that are distributed across the explosion of the planet, safely returning to the base.
This tutorial contains the complete code for running the game. The code is written using HTML5 Canvas and JavaScript, and contains four independent sample codes with annotations. Each example involves a key programming task that is necessary to develop different aspects of the game. The fourth sample code combines all the tasks to create a complete and effective game where you can use the arrow keys to move the ship across the galaxy maze that explodes on a red planet. If your ship hits a planet, it will be destroyed. To safely return to the base, you must avoid the minor or blow it up before you hit the minor. The score is based on the number of times you move the ship and the number of bombs you have fired.
This topic includes an independent annotated code example to show you how to create a random area containing white stars using HTML5 Canvas and JavaScript, and draw an orange-green space ship like a Frisbee. This game image is created in pixels. By using the instant mode, Canvas can directly place pixels on the screen. This function allows you to easily draw points, lines, and shapes in selected colors at desired locations. This sample code shows you how to create a spacecraft by combining mathematical beiser curves and colors in the shape. It then explains how to use a small circle composed of arcs to draw stars.
This sample code contains the following tasks to demonstrate the basic principles of using Canvas to draw these game elements:
1. Add a Canvas element to a webpage
2. Create a black background
3. Draw random stars on the background
4. Add a spacecraft to the background
The end of the sample code is the discussion material that describes the design and structure of these tasks, as well as detailed information on how they work.
Canvas code example:
The Code is as follows:
<! DOCTYPE html>
<Html>
<Head>
<Script type = "text/javascript">
// This function is called on page load.
Function canvasSpaceGame (){
// Get the canvas element.
Canvas = document. getElementById ("myCanvas ");
// Make sure you got it.
If (canvas. getContext)
// If you have it, create a canvas user inteface element.
{
// Specify 2d canvas type.
Ctx = canvas. getContext ("2d"); </p> <p> // Paint it black.
Ctx. fillStyle = "black ";
Ctx. rect (0, 0,300,300 );
Ctx. fill (); </p> <p> // Paint the starfield.
Stars (); </p> <p> // Draw space ship.
MakeShip ();
}
} </P> <p> // Paint a random starfield. </p> <p>
Function stars () {</p> <p> // Draw 50 stars.
For (I = 0; I <= 50; I ++ ){
// Get random positions for stars.
Var x = Math. floor (Math. random () * 299)
Var y = Math. floor (Math. random () * 299) </p> <p> // Make the stars white
Ctx. fillStyle = "white"; </p> <p> // Give the ship some room.
If (x <30 | y <30) ctx. fillStyle = "black"; </p> <p> // Draw an individual star.
Ctx. beginPath ();
Ctx. arc (x, y, 3, 0, Math. PI * 2, true );
Ctx. closePath ();
Ctx. fill ();
}
} </P> <p> function makeShip () {</p> <p> // Draw saucer bottom.
Ctx. beginPath ();
Ctx. moveTo (28.4, 16.9 );
Ctx. bezierCurveTo (28.4, 19.7, 22.9, 22.0, 16.0, 22.0 );
Ctx. bezierCurveTo (9.1, 22.0, 3.6, 19.7, 3.6, 16.9 );
Ctx. bezierCurveTo (3.6, 14.1, 9.1, 11.8, 16.0, 11.8 );
Ctx. bezierCurveTo (22.9, 11.8, 28.4, 14.1, 28.4, 16.9 );
Ctx. closePath ();
Ctx. fillStyle = "rgb (222,103, 0 )";
Ctx. fill (); </p> <p> // Draw saucer top.
Ctx. beginPath ();
Ctx. moveTo (22.3, 12.0 );
Ctx. bezierCurveTo (22.3, 13.3, 19.4, 14.3, 15.9, 14.3 );
Ctx. bezierCurveTo (12.4, 14.3, 9.6, 13.3, 9.6, 12.0 );
Ctx. bezierCurveTo (9.6, 10.8, 12.4, 9.7, 15.9, 9.7 );
Ctx. bezierCurveTo (19.4, 9.7, 22.3, 10.8, 22.3, 12.0 );
Ctx. closePath ();
Ctx. fillStyle = "rgb (51,190, 0 )";
Ctx. fill ();
}
</Script>
</Head>
<Body onload = "canvasSpaceGame ()">
<H1>
Canvas Space Game
</H1>
<Canvas id = "myCanvas" width = "300" height = "300">
</Canvas>
</Body>
</Html>
Canvas sample code
This section describes the design and structure of the sample code. It explains different parts of the Code and how to integrate them. The Canvas example uses the standard HTML5 header so that the browser can differentiate it as part of the HTML5 specification.
The code is divided into two main parts:
1. Subject Code
2. script code
Subject Code
When a page is loaded, the subject tag uses the onload function to call the canvasSpaceGame function. The Canvas tag is a part of the subject. Specify the Canvas initial width and height, and specify the ID attribute. You must use the ID to add the canvas element to the object model on the page.
Script code
The script code includes three functions: canvasSpaceGame, stars, and makeShip. The canvasSpaceGame function is called when the page is loaded. Both stars and makeShip are called from canvasSpaceGame.
CanvasSpaceGame Function
This function is called when a page is loaded. It obtains the Canvas by using the Canvas Element ID in the main code, obtains the context of the Canvas, and is ready to accept the drawing. After the context is initialized to a 2D canvas, the canvas is painted black using fillStyle, rect, and fill methods.
Stars Functions
This function is called from canvasSpaceGame. It uses the for loop to generate 50 potential star positions on a two-dimensional plane, and then uses fillStyle to create white. Then, a check is conducted to check whether the x and y coordinates are too close to the upper left corner. If the stars are drawn too close to the upper left corner, the fillStyle will be changed to black so that it will not impede the spacecraft. Then, draw each star using the arc method and use the appropriate fill color.
MakeShip
This function is called from canvasSpaceGame. Use a series of beginPath, moveTo, bezierCurveTo, closePath, fillStyle, and fill methods to draw a simple spaceship.
A ship is created by drawing two ovans, one of which is located on the other. It is first drawn in Adobe Illustrator CS5, and then exported to the Canvas using the Ai2Canvas plug-in. The generated Canvas code has been copied and pasted into the code in this example.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
