Create html5 Star Trek by yourself !, Create html5 Star Trek

Create html5 Star Trek by yourself !, Create html5 Star Trek

On the third day of studying html5 canvas, I thought I was not quite satisfied. I forgot it in a twinkling of an eye. So I was free to prepare a small game to play! The game should pay attention to the performance, and there are still some logic that needs to be considered. I think users need to be able to modify, that is, user configuration. Well, let's start a simple but interesting journey --

If you want to see the results first, jump to the trial!

Step 1: a canvas is required.

1 <canvas id = "canvas" width = "300" height = "400"> your browser does not support Canvas </canvas>

The general structure of JavaScript is as follows:

Var defines some variables planeMoveTimer aircraft movement monitoring/Timer attackEnemyTimer launch shell timer onkeydown listener onkeyup listener drawPlane draw aircraft drawEnemy draw enemies

First, predefine some variables.

1 var _ keyA = _ keyD = _ keyW = _ keyS = 0, // storage key status 2 3 step = 8, // aircraft movement rate 4 w = 34, h = 44, // actual aircraft size 5 planeX = 133, planeY = 356, // current aircraft position 6 planeSrc = "feiji.png", // aircraft material position 7 imgW = 177, imgH = 220, // aircraft source image size 8 9 cw = 300, ch = 400, // canvas size 10 canvas = document. getElementById ("canvas"), 11 ctx = canvas. getContext ("2d ");

This game only uses one external resource, that is, the image. For the address, visit the GitHub location link at the bottom of this article. Jump

Let's take a look at two ways of drawing

1 function drawPlane (x, y) {2 var img = new Image (); 3 img. src = planeSrc; // aircraft source image address 4 img. onload = function () {5 ctx. drawImage (img, 0, 0, imgW, imgH, planeX, planeY, w, h); 6} 7} 8 function drawEnemy () {9 for (var a = 0; a <cw; a + = 10) {10 for (var B = 0; B <ch-300; B + = 10) {11 ctx. beginPath (); 12 ctx. fillStyle = "orange"; 13 ctx. strokeStyle = "black"; 14 ctx. strokeRect (a, B, 10, 10); 15 ctx. fillRect (a, B, 10, 10); 16 ctx. closePath (); 17} 18} 19}

Aircraft images must be painted in the onload () method. Currently, the enemy is still a pile of orange bricks, draw them at the top of the canvas by traversing them.

Next, let's look at two Keyboard Events:

 1 window.document.onkeydown = function(evt){ 2     evt = (evt) ? evt : window.event; 3     switch(evt.keyCode) { 4         case 65:  // A 5             _keyA = 1; 6             break; 7         case 68:  // D 8             _keyD = 1; 9             break;10         case 87:  // W11             _keyW = 1;12             break;13         case 83:  // S14             _keyS = 1;15             break;16     }17 }18 window.document.onkeyup = function(evt){19     evt = (evt) ? evt : window.event;20     switch(evt.keyCode) {21         case 65:  // A22             _keyA = 0;23             break;24         case 68:  // D25             _keyD = 0;26             break;27         case 87:  // W28             _keyW = 0;29             break;30         case 83:  // S31             _keyS = 0;32             break;33     }34 }

The reason for setting variables _ keyA, _ keyD, _ keyW, and _ keyS in two events rather than directly triggering a drawing event is that when two keyS are pressed at the same time, an event cannot be triggered at the same time. Only the latter can trigger the event until the latter presses the key. To put it simply, if I want to move to the upper left corner, at the same time, press A and W. Assume that A is A little slower than W, and the plane's moving path is to move up first and then move to the left, this is obviously not what I want. I use four variables to store the button status. When I press the key, set the status to 1. When I press the key, set the status to 0. Then, we use a timer to constantly read the status of these keys and update the aircraft status in time.

The aircraft movement timer is as follows:

 1 var planeMoveTimer = window.setInterval(function(){ 2     if(_keyA||_keyD||_keyW||_keyS){ 3         ctx.clearRect(planeX, planeY, w, h); 4         _keyA && (planeX-=step); 5         _keyD && (planeX+=step); 6         _keyW && (planeY-=step); 7         _keyS && (planeY+=step); 8         planeX>=0 || (planeX=0); 9         planeX<=(cw-w) || (planeX=cw-w);10         planeY>=0 || (planeY=0);11         planeY<=(ch-h) || (planeY=ch-h);12         drawPlane(planeX, planeY);13     }14 }, 10);

Ctx. clearRect () is used to clear the original aircraft and prepare for the next state of the aircraft. But there is a big problem, it is to clear the whole plane directly. If the game has a background, if there are overlapping items, isn't it necessary to clear the items that are not aircraft together? Forgive me for ignorance. I will not consider this issue for the moment.

By judging the key status, the stride of each move is a preset step and the boundary processing is completed.

Then there is the attack Timer:

1 var attackEnemyTimer = window. setInterval (function () {2 var cannonX = planeX + Math. floor (w/2); // the x-axis position of the muzzle. 3 var cannonY = planeY; // the y-axis position of the muzzle. 4 var tmpTimer = window. setInterval (function () {// The Movement timer of each shell 5 ctx. clearRect (cannonX-1, cannonY-3, 2, 3); 6 cannonY-= 3; // shell Step 7 if (cannonY <0) {8 // shell penetration effect 9 ctx. beginPath (); 10 ctx. moveTo (cannonX, 100); // 100 is the lowest position of enemy 11 ctx. strokeStyle = "white"; 12 ctx. lineWidth = "4"; // simulate irregular destruction, 13 ctx has not been implemented yet. lineTo (cannonX, 0); 14 ctx. stroke (); 15 ctx. closePath (); 16 window. clearInterval (tmpTimer); // the timer for clearing the shell 17} 18 ctx. clearRect (cannonX-1, cannonY-3, 2, 3); 19 ctx. beginPath (); 20 ctx. fillStyle = "red"; 21 ctx. fillRect (cannonX-1, cannonY-3, 2, 3); // shell size: 2X322 ctx. closePath (); 23}, 0); 24}, 500 );

One shell is fired every seconds, and a timer is set for each shell to control the shell movement. I also use the method of wiping it first, because the shell movement also has a gap, the penetration effect of shells is to draw a straight line with the same color as the background color. Try to modify the shell stride to adjust the movement speed of the shell, or adjust the shell size.

The last step is nothing more. At the beginning, we need to draw enemies and planes!

1 drawPlane();2 drawEnemy();

Success! I also want to continue optimizing and adding playability, but I really don't have time to get it done. There are many other things to learn, so this is the first thing to do for this game! Is it easy! Haha, sorry, the title is too tempting. No way!

Others:

Online trial: http://xzh-loop.github.io/Manji/lab/html5game/Plane.html

Visit GitHub for this Project location: https://github.com/xzh-loop/Manji/tree/gh-pages/lab/html5game

Visit my GitHub Pages: http://xzh-loop.github.io/

In the future, what are the advantages and disadvantages of HTML5 browser operating systems compared with traditional windows, linux, and mac systems?

Amount ..... Html5 is a language. You can understand it as code that can be executed by a browser. For example, if you want to play a game, this web page can be used as a gun battle game, you can save the time for online games to download the client. The website can also provide the calculator function.
In fact, this is a metaphor, and browser functions will become more and more abundant. But in fact, the current browser is still running in the operating system, but it is not ruled out that you only need a browser. For more information, see chrome OS (but this is not a browser operating system)

How can I set my HTML5 questionnaire to be saved after it is filled? What code does it mean to call JS? Large

It is best to write data to the database using dynamic scripts. Or you can understand how to write XML.