下载是模拟的俄罗斯方法的效果，在下落的情况下，能
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <title>Shot</title>
5 <meta charset="gbk" />
6 <link type="text/css" href="canvas.css" rel="stylesheet"/>
7 </head>
8 <body onkeydown="getCommand();">
9 <canvas id="canvas" width="880" height="400" style="background:black">
10 您的浏览器不支持
11 </canvas>
12 </body>
13 <script >
14 var canvas = document.getElementById("canvas");
15 var cxt = canvas.getContext("2d");
16
17 function Shot(x,y,speed){
18 this.x = x;
19 this.y = y;
20 this.speed = speed;
21 this.move = function (){
22 if(this.y > 400){
23 this.y = 40;
24 }
25 this.y +=speed;
26 }
27 this.moveRight = function (){
28 this.x +=speed;
29 }
30 this.moveLeft = function (){
31 this.x -=speed;
32 }
33 this.moveUP = function (){
34 this.y -=speed;
35 }
36 }
37 var shot = new Shot(40,40,10);
38 //var shots = new Array();
39
40 function drawShot(tank){
41 cxt.fillStyle = "#ded284";
42 cxt.beginPath();
43 cxt.fillRect(tank.x,tank.y,5,10);
44 cxt.closePath();
45 }
49 function getCommand(){
50 var code = event.keyCode;
51 switch(code) {
52 case 87: //上
53 shot.moveUP();
54 break;
55 case 68: //右
56 shot.moveRight();
57 break;
58 case 83: //下
59 shot.move();
60 break;
61 case 65: //左enemyTanks[i]
62 shot.moveLeft();
63 break;
64 case 74:
65 break;
66 }
67 drawShot(shot);
68 }
70 function run(){
71 cxt.clearRect(0,0,880,400);
72 //cxt.clearRect(0,0,880,400);
73 shot.move();
74 drawShot(shot);
75
76 }
77 //function flashTankMap(){
78 //刷新作战莵E
79 //清历篆布
81 //}
82 //run();
83 window.setInterval("run()",100);
87 </script>
88 </html>
够对其进行控制，不过做的环形的还是不多
H TML5 之 （7） 俄罗斯方块效果,布布扣,bubuko.com
时间： 2024-08-25 13:31:51