canvas实现冠状病毒射击游戏

た 入场券 2022-08-28 13:57 290阅读 0赞

在线演示

20210918181427738.gif

结构

  1. <canvas id='canvas' width='1280' height='720'></canvas>

样式

  1. body {
  2.     background:#111;
  3.     margin:0;
  4.     padding:0
  5. }
  6. canvas {
  7.     background:#000;
  8.     display:block;
  9.     cursor:none
  10. }

方法

  1. "use strict"
  2.         var stage = {
  3.             w:1280,
  4.             h:720
  5.         }
  7.         var _pexcanvas = document.getElementById("canvas");
  8.         _pexcanvas.width = stage.w;
  9.         _pexcanvas.height = stage.h;
  10.         var ctx = _pexcanvas.getContext("2d");
  15.         var pointer = {
  16.             x:stage.w/2,
  17.             y:stage.h/4
  18.         }
  20.         var scale = 1;
  21.         var portrait = true;
  22.         var loffset = 0;
  23.         var toffset = 0;
  24.         var mxpos = 0;
  25.         var mypos = 0;
  28. // ------------------------------------------------------------------------------- Gamy
  30. var againprog = 0;
  32. var healthprog = 0;
  35. function newGame() {
  36.     score = 0;
  37.     health = 100;
  38.     enemies=[];
  39.     enemies.push(new Enemy());
  40.     enemies.push(new Enemy());
  41.     enemies.push(new Enemy());
  42.     againprog = 0;
  43. }
  47. function drawHeart(x,y,w) {
  48.     ctx.beginPath();
  49.     ctx.arc(x-w/4, y, w/4, 0.75*Math.PI,0);
  50.     ctx.arc(x+w/4, y, w/4, 1*Math.PI, 2.25*Math.PI);
  51.     ctx.lineTo(x,y+w/1.5);
  52.     ctx.closePath();
  53.     ctx.fill();
  54. }
  57. var Cannon = function(x,y,tx,ty) {
  58.     this.x = x;
  59.     this.y = y;
  60.     this.tx = tx;
  61.     this.ty = ty;
  62.     this.r = 10;
  63. }
  65. var cannons = [];
  67. var gameover = false;
  69. cannons.push(new Cannon(stage.w,stage.h,stage.w/2,stage.h/2));
  71. var firetm = 0;
  72. var fireact = true;
  74. var health = 100;
  75. var score = 0;
  78. var arm = {x:stage.w,y:stage.h};
  79. var arm2 = {x:0,y:stage.h};
  80. var danger = false;
  81. var dangera = 0;
  85. var Enemy = function() {
  86.     this.x = stage.w/2;
  87.     this.y = stage.h/2;
  88.     this.r = 10;
  89.     this.tx = Math.floor(Math.random()*stage.w);
  90.     this.ty = Math.floor(Math.random()*stage.h);
  91.     this.des = false;
  92.     this.eyeX = 0.4;
  93.     this.eyeY = 0.25;
  94.     this.eyeR = 0.25;
  95.     this.sp = 50;
  96.     this.spl = 1.4;
  97.     this.op=1;
  98.     this.danger = false;
  99.     this.nuked = false;
  100. }
  102. var enemies = [];
  103. // for (var i = 0; i < 10; i++) {
  104. //     enemies[i] = new Enemy();
  105. // }
  106.         enemies.push(new Enemy());
  107.         enemies.push(new Enemy());
  108.         enemies.push(new Enemy());
  110. var entm = 0;
  111. var ga =0;
  113. var steptime = 0;
  116. var Star = function() {
  117.     this.a = Math.random()*Math.PI*2;
  118.     this.v = 3+Math.random()*5;
  119.     this.x = stage.w/2;
  120.     this.y = stage.h/2;
  121.     this.r = 0.2;
  122. }
  124. var Power = function() {
  125.     this.type = Math.floor(Math.random()*2)+1;
  126.     this.a = Math.random()*Math.PI*2;
  127.     this.v = 3+Math.random()*5;
  128.     this.x = stage.w/2;
  129.     this.y = stage.h/2;
  130.     this.r = 0.2;
  131.     this.dis = false;
  132.     this.op = 1;
  133. }
  136. var powers = [];
  137. var powertm = 0;
  138. var powermax = Math.random()*800+300;
  139. // powermax = 10;
  141. var stars = [];
  143. for (var i =0;i<200;i++) {
  144.     stars[i] = new Star();
  145.     var st = stars[i];
  146.     var move = Math.random()*400;
  148.     st.x += Math.sin(st.a)*move;
  149.     st.y += Math.cos(st.a)*move;
  152. }
  154. // powers.push(new Power());
  158. function enginestep() {
  159.     steptime = Date.now();
  160.     ctx.clearRect(0,0,stage.w,stage.h);
  162.     ctx.fillStyle = "#ffffff";
  165.     for (var i = 0; i < stars.length; i++) {
  166.         var st = stars[i];
  168.         st.x += Math.sin(st.a)*st.v;
  169.         st.y += Math.cos(st.a)*st.v;
  170.         st.r += st.v/200;
  172.         ctx.beginPath();
  173.         ctx.arc(st.x,st.y, st.r, 2*Math.PI, 0);
  174.         ctx.fill();
  176.         if (st.x>stage.w||st.x<0||st.y<0||st.y>stage.h) {
  177.             stars[i] = new Star();
  178.         }
  179.     }
  180.     if (!gameover) {
  181.         danger = false;
  184.         powertm++;
  185.         if (powertm>powermax) {
  186.             powers.push(new Power());
  187.             powertm = 0;
  188.             powermax = Math.random()*1200+600;
  189.             // powermax = 10;
  190.         }
  195.         for (var i = 0; i < powers.length; i++) {
  196.             var st = powers[i];
  198.             if (!st.des) {
  199.                 st.x += Math.sin(st.a)*st.v/1.5;
  200.                 st.y += Math.cos(st.a)*st.v/1.5;
  201.                 st.r += st.v/15;
  202.             } else {
  203.                 st.r *=1.1;
  204.                 if (st.type==1) {
  205.                 st.op += (0-st.op)/10;
  206.             } else {
  207.                 st.op += (0-st.op)/20;
  209.             }
  210.                 st.x += (stage.w/2-st.x)/10;
  211.                 st.y += (stage.h/2-st.y)/10;
  213.             }
  216.             if (st.type ==1) {
  217.                 ctx.fillStyle = "rgba(255,0,0,"+st.op+")";
  219.                 drawHeart(st.x,st.y-st.r/4, st.r*2);
  221.             } else {
  222.                 ctx.fillStyle = "rgba(255,255,0,"+st.op+")";
  223.                 ctx.strokeStyle = "rgba(255,255,0,"+st.op+")";
  224.                 ctx.lineWidth = st.r/10;
  225.                 ctx.beginPath();
  226.                 ctx.arc(st.x,st.y, st.r, 2*Math.PI, 0);
  227.                 ctx.stroke();
  229.                 ctx.beginPath();
  230.                 ctx.arc(st.x,st.y, st.r*0.15, 2*Math.PI, 0);
  231.                 ctx.fill();
  234.                 ctx.beginPath();
  235.                 ctx.arc(st.x,st.y, st.r*0.85, 1.67*Math.PI, 2*Math.PI);
  236.                 ctx.arc(st.x,st.y, st.r*0.25, 2*Math.PI, 1.67*Math.PI,true);
  238.                 ctx.closePath();
  239.                 ctx.fill();
  243.                 ctx.beginPath();
  244.                 ctx.arc(st.x,st.y, st.r*0.85, 3*Math.PI, 3.33*Math.PI);
  245.                 ctx.arc(st.x,st.y, st.r*0.25, 3.33*Math.PI,3*Math.PI, true);
  246.                 ctx.closePath();
  247.                 ctx.fill();
  249.                 ctx.beginPath();
  250.                 ctx.arc(st.x,st.y, st.r*0.85, 2.33*Math.PI, 2.67*Math.PI);
  251.                 ctx.arc(st.x,st.y, st.r*0.25, 2.67*Math.PI,2.33*Math.PI, true);
  252.                 ctx.lineTo(st.x,st.y);
  253.                 ctx.closePath();
  254.                 ctx.fill();
  256.             }
  257.             if (st.x>stage.w||st.x<0||st.y<0||st.y>stage.h||st.r>stage.w/2) {
  258.                 powers.splice(i,1);
  259.                 if (st.type == 2&&st.r>stage.w/2) {
  260.                     for (var e = 0; e < enemies.length; e++) {
  261.                         enemies[e].des = true;
  262.                         enemies[e].nuked = true;
  264.                     }
  265.                 }
  266.                 i--;
  267.             }
  270.         }
  272.         entm++;
  273.         if (enemies.length<10&&entm>300) {
  274.             entm=0;
  275.             enemies.push(new Enemy());
  277.         }
  279.             ctx.lineWidth = 2;
  280.         for (var i = 0; i < enemies.length; i++) {
  281.             var en = enemies[i];
  282.             if (!en.danger) {
  283.                 ctx.strokeStyle = "rgba(0,255,255,"+en.op*2+")";
  284.             } else {
  285.                 health -= 0.01;
  286.                 ctx.strokeStyle = "rgba(255,0,0,"+en.op*2+")";
  287.                 danger = true;
  288.             }
  293.             if (!en.des) {
  295.                 if (en.danger) {
  296.                     var randx = Math.floor(Math.random()*4)-2;
  297.                     var randy = Math.floor(Math.random()*4)-2;
  299.                     en.x = en.tx+randx;
  300.                     en.y = en.ty+randy;
  301.                 } else {
  302.                     en.x += (en.tx-en.x)/100;
  303.                     en.y += (en.ty-en.y)/100;
  304.                     var randx = 0;
  305.                     var randy = 0;
  306.                 }
  308.                 en.r += (50-en.r)/100;
  309.                 if (Math.abs(50-en.r)<2&&!en.danger) {
  310.                     en.tx=en.x;
  311.                     en.ty=en.y;
  312.                     en.danger=true;
  313.                 }
  314.                 ctx.beginPath();
  315.                 ctx.arc(en.x-en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
  316.                 ctx.stroke();
  317.                 ctx.beginPath();
  318.                 ctx.arc(en.x+en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
  319.                 ctx.stroke();
  321.                 ctx.beginPath();
  322.                 ctx.arc(en.x,en.y+en.r/4, en.r/3, 2*Math.PI, Math.PI);
  323.                 ctx.stroke();
  325.                 ctx.beginPath();
  326.                 ctx.arc(en.x,en.y, en.r, 0, 2*Math.PI);
  327.                 ctx.stroke();
  328.             } else {
  330.                 en.eyeR += (0.5-en.eyeR)/5;
  331.                 en.op += (0-en.op)/5;
  332.                 // en.sp += (5-en.sp)/20;
  333.                 en.r += (100-en.r)/20;
  334.                 en.spl += (2.5-en.spl)/5;
  335.                 ctx.beginPath();
  336.                 ctx.arc(en.x-en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
  337.                 ctx.stroke();
  338.                 ctx.beginPath();
  339.                 ctx.arc(en.x+en.r*en.eyeX,en.y-en.r*en.eyeY, en.r*en.eyeR, 0, 2*Math.PI);
  340.                 ctx.stroke();
  341.                 ctx.beginPath();
  342.                 ctx.arc(en.x,en.y+en.r/2, en.r*en.eyeR, Math.PI,2*Math.PI);
  343.                 ctx.stroke();
  345.             ctx.beginPath();
  346.             ctx.arc(en.x,en.y, en.r, 0, 2*Math.PI);
  347.             ctx.stroke();
  348.             }
  350.             //spikes
  351.             for (var s = 0; s < 12; s++) {
  352.                 var a = (Math.PI*2/12)*s+ga;
  353.                 ctx.beginPath();
  354.                 ctx.moveTo(en.x+Math.sin(a)*en.r,en.y+Math.cos(a)*en.r);
  355.                 ctx.lineTo(en.x+Math.sin(a)*en.r*1.2,en.y+Math.cos(a)*en.r*1.2);
  356.                 ctx.lineTo(en.x+Math.sin(a+Math.PI/en.sp)*en.r*en.spl,en.y+Math.cos(a+Math.PI/en.sp)*en.r*en.spl);
  357.                 ctx.lineTo(en.x+Math.sin(a-Math.PI/en.sp)*en.r*en.spl,en.y+Math.cos(a-Math.PI/en.sp)*en.r*en.spl);
  358.                 ctx.lineTo(en.x+Math.sin(a)*en.r*1.2,en.y+Math.cos(a)*en.r*1.2);
  359.                 ctx.stroke();
  360.                 // ctx.fill();
  361.             }
  363.             if (Math.abs(0.5-en.eyeR)<0.01) {
  364.                 var rand = Math.floor(Math.random()*2);
  365.                 if (enemies[i].nuked&&rand==1) {
  366.                 enemies.splice(i,1);
  368.                 } else {
  369.                 enemies[i] = new Enemy();
  371.                 }
  372.             }
  373.         }
  381.         if (danger) {
  382.             dangera += 0.05+(100-health)/1000;
  383.             if (dangera>=Math.PI) {
  384.                 dangera=0;
  385.             }
  386.             ctx.fillStyle='rgba(255,0,0,'+(1-Math.sin(dangera))/4+')';
  387.             ctx.fillRect(0,0,stage.w,stage.h);
  388.             if (health<10) {
  389.                 ctx.fillStyle='rgba(255,255,0,'+(Math.sin(dangera))+')';
  390.                 ctx.strokeStyle='rgba(255,255,0,'+(Math.sin(dangera))+')';
  392.                 ctx.lineWidth = 10;
  393.                 ctx.beginPath();
  394.                 ctx.lineJoin = 'round';
  395.                 ctx.moveTo(stage.w/2,stage.h/4);
  396.                 ctx.lineTo(stage.w/2+stage.h/7,stage.h/2);
  397.                 ctx.lineTo(stage.w/2-stage.h/7,stage.h/2);
  398.                 ctx.closePath();
  399.                 ctx.stroke();
  401.                 ctx.font = "bold 130px arial";
  402.                 ctx.textAlign = "center"; 
  403.                 ctx.textBaseline = "middle"; 
  404.                 ctx.fillText("!",stage.w/2,stage.h/2.5);
  406.                 ctx.font = "bold 50px arial";
  407.                 ctx.fillText("LOW HEALTH",stage.w/2,stage.h*0.6);
  408.             }
  409.         } else {
  410.             dangera = 0;
  411.         }
  413.         healthprog += (health-healthprog)/5;
  414.         ctx.fillStyle='#00ffff';
  415.         ctx.font = "30px arial";
  416.         ctx.textAlign = "left"; 
  417.         ctx.textBaseline = "middle"; 
  418.         ctx.fillText("Health: ",20,40);
  420.         ctx.fillText("Score: "+score,stage.w-200,40);
  421.         // ctx.fillText("Step:   "+(Date.now()-steptime),20,120);
  422.         if (health>30) {
  423.             ctx.fillStyle='rgba(0,255,255,0.8)';
  424.         } else {
  425.             ctx.fillStyle='rgba(255,0,0,0.8)';
  426.         }
  427.         ctx.lineWidth = 2;
  428.         ctx.fillRect(130,25,healthprog*3,30);
  429.         ctx.strokeStyle = "#00ffff";
  430.         ctx.strokeRect(130,25,300,30);
  432.         if (health<0) {
  433.             gameover = true;
  434.         }
  436.     } else {    
  439.         ctx.fillStyle='rgba(0,255,255,0.3)';
  440.         ctx.fillRect((stage.w-220)/2,stage.h*0.65-25,againprog,50);
  442.         ctx.fillStyle='#00ffff';
  443.         ctx.font = "bold 130px arial";
  444.         ctx.textAlign = "center"; 
  445.         ctx.textBaseline = "middle"; 
  446.         ctx.fillText("GAME OVER",stage.w/2,stage.h/3);
  447.         ctx.font = "bold 50px arial";
  448.         ctx.fillText("SCORE: "+score,stage.w/2,stage.h/2);
  450.         ctx.font = "bold 30px arial";
  452.         ctx.fillText("PLAY AGAIN",stage.w/2,stage.h*0.65);
  453.         ctx.strokeRect((stage.w-220)/2,stage.h*0.65-25,220,50);
  455.         againprog += (0-againprog)/50;
  457.     }
  459.         ctx.strokeStyle = "#00ffff";
  460.         ctx.fillStyle = "#00ffff";
  461.             ctx.lineWidth = 2;
  462.         if (fireact) {
  463.             firetm++;
  464.             if(firetm>5) {
  466.                 cannons.push(new Cannon(pointer.x+(stage.w-pointer.x)/2.5,pointer.y+(stage.h-pointer.y)/2.5,pointer.x,pointer.y));
  467.                 cannons.push(new Cannon(pointer.x-(pointer.x)/2.5,pointer.y+(stage.h-pointer.y)/2.5,pointer.x,pointer.y));
  470.                 firetm=0;
  471.             }
  473.             arm.x=Math.floor(Math.random()*50)-25+stage.w;
  474.             arm.y=Math.floor(Math.random()*50)-25+stage.h;
  475.             arm2.x=Math.floor(Math.random()*30)-15;
  476.             arm2.y=Math.floor(Math.random()*30)-15+stage.h;
  477.         } else {
  478.             arm.x=stage.w;
  479.             arm.y=stage.h;
  480.             arm2.x=0;
  481.             arm2.y=stage.h;
  482.         }
  489.         for (var i = 0; i < cannons.length; i++) {
  491.             var can = cannons[i];
  493.             can.x += (can.tx-can.x)/5;
  494.             can.y += (can.ty-can.y)/5;
  495.             can.r += (0-can.r)/5;
  497.             ctx.beginPath();
  498.             ctx.arc(can.x,can.y, can.r, 0, 2*Math.PI);
  499.             ctx.fill();
  502.             if (can.r<2&&!gameover) {
  503.                 for (var a = 0; a < enemies.length; a++) {
  504.                     var en = enemies[a];
  505.                     var dx = can.x-en.x;
  506.                     var dy = can.y-en.y;
  507.                     var dis = dx*dx+dy*dy;
  508.                     if (dis<en.r*en.r) {
  510.                         // enemies.splice(a,1);
  511.                         if (!enemies[a].des) {
  512.                         enemies[a].des = true;
  514.                         score+=10;
  516.                         }
  517.                     }
  519.                 }
  521.             }
  523.             if (can.r<1&&!gameover) {
  524.                 for (var a = 0; a < powers.length; a++) {
  525.                     var en = powers[a];
  526.                     var dx = can.x-en.x;
  527.                     var dy = can.y-en.y;
  528.                     var dis = dx*dx+dy*dy;
  529.                     if (dis<en.r*en.r) {
  531.                         if (!en.des) {
  532.                             powers[a].des = true;
  533.                             if (en.type==1) {
  534.                             health = 100;
  535.                             }
  537.                         }
  538.                     }
  540.                 }
  542.             }
  544.             if (can.r<1&&gameover) {
  546.                 if (can.x>(stage.w-220)/2&&can.y>stage.h*0.65-25&&can.x<(stage.w-220)/2+220&&can.y<stage.h*0.65-25+50) {
  548.                     againprog +=1;
  549.                     if (againprog>220) {
  550.                         newGame();
  551.                         gameover = false;
  552.                     }
  553.                 }
  554.             }
  555.             if (Math.abs(can.tx-can.x)<1) {
  560.                 cannons.splice(i,1);
  561.             }
  565.         }
  566.         ctx.beginPath();
  567.         ctx.moveTo(pointer.x-20,pointer.y);
  568.         ctx.lineTo(pointer.x+20,pointer.y);
  569.         ctx.stroke();
  571.         ctx.beginPath();
  572.         ctx.moveTo(pointer.x,pointer.y-20);
  573.         ctx.lineTo(pointer.x,pointer.y+20);
  574.         ctx.stroke();
  576.             ctx.beginPath();
  577.             ctx.arc(pointer.x,pointer.y, 8, 0, 2*Math.PI);
  578.             ctx.stroke();
  580.         ctx.beginPath();
  581.         ctx.moveTo(pointer.x+(arm.x-pointer.x)/3,pointer.y+(arm.y-pointer.y)/3+10);
  582.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/2.5,pointer.y+(arm.y-pointer.y)/2.5+10);
  583.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/2,pointer.y+(arm.y-pointer.y)/2+10);
  584.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.5,pointer.y+(arm.y-pointer.y)/1.5+50);
  585.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.2,pointer.y+(arm.y-pointer.y)/1.2+80);
  586.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.1,pointer.y+(arm.y-pointer.y)/1.1+100);
  587.         ctx.stroke();
  588.         ctx.beginPath();
  589.         ctx.moveTo(pointer.x+(arm.x-pointer.x)/3-10,pointer.y+(arm.y-pointer.y)/3);
  590.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/2.5-10,pointer.y+(arm.y-pointer.y)/2.5);
  591.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/2-10,pointer.y+(arm.y-pointer.y)/2);
  592.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.5-50,pointer.y+(arm.y-pointer.y)/1.5);
  593.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.2-80,pointer.y+(arm.y-pointer.y)/1.2);
  594.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.1-100,pointer.y+(arm.y-pointer.y)/1.1);
  595.         ctx.stroke();
  597.         ctx.beginPath();
  598.         ctx.moveTo(pointer.x+(arm.x-pointer.x)/3,pointer.y+(arm.y-pointer.y)/3-10);
  599.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/2.5,pointer.y+(arm.y-pointer.y)/2.5-10);
  600.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/2,pointer.y+(arm.y-pointer.y)/2-10);
  601.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.5,pointer.y+(arm.y-pointer.y)/1.5-50);
  602.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.2,pointer.y+(arm.y-pointer.y)/1.2-80);
  603.         ctx.lineTo(pointer.x+(arm.x-pointer.x)/1.1,pointer.y+(arm.y-pointer.y)/1.1-100);
  604.         ctx.stroke();
  608.         ctx.beginPath();
  609.         ctx.moveTo(arm2.x+pointer.x-(pointer.x)/3,pointer.y+(arm2.y-pointer.y)/3+10);
  610.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2.5,pointer.y+(arm2.y-pointer.y)/2.5+10);
  611.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2,pointer.y+(arm2.y-pointer.y)/2+10);
  612.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.5,pointer.y+(arm2.y-pointer.y)/1.5+50);
  613.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.2,pointer.y+(arm2.y-pointer.y)/1.2+80);
  614.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.1,pointer.y+(arm2.y-pointer.y)/1.1+100);
  615.         ctx.stroke();
  617.         ctx.beginPath();
  618.         ctx.moveTo(arm2.x+pointer.x-(pointer.x)/3-10,pointer.y+(arm2.y-pointer.y)/3);
  619.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2.5-10,pointer.y+(arm2.y-pointer.y)/2.5);
  620.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2-10,pointer.y+(arm2.y-pointer.y)/2);
  621.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.5-50,pointer.y+(arm2.y-pointer.y)/1.5);
  622.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.2-80,pointer.y+(arm2.y-pointer.y)/1.2);
  623.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.1-100,pointer.y+(arm2.y-pointer.y)/1.1);
  624.         ctx.stroke();
  626.         ctx.beginPath();
  627.         ctx.moveTo(arm2.x+pointer.x-(pointer.x)/3,pointer.y+(arm2.y-pointer.y)/3-10);
  628.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2.5,pointer.y+(arm2.y-pointer.y)/2.5-10);
  629.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/2,pointer.y+(arm2.y-pointer.y)/2-10);
  630.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.5,pointer.y+(arm2.y-pointer.y)/1.5-50);
  631.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.2,pointer.y+(arm2.y-pointer.y)/1.2-80);
  632.         ctx.lineTo(arm2.x+pointer.x-(pointer.x)/1.1,pointer.y+(arm2.y-pointer.y)/1.1-100);
  633.         ctx.stroke();
  638.         ctx.beginPath();
  639.         ctx.arc(pointer.x+(arm.x-pointer.x)/3,pointer.y+(arm.y-pointer.y)/3, 10, 0, 2*Math.PI);
  640.         ctx.arc(pointer.x+(arm.x-pointer.x)/2.5,pointer.y+(arm.y-pointer.y)/2.5, 10, 0, 2*Math.PI);
  641.         ctx.arc(pointer.x+(arm.x-pointer.x)/2,pointer.y+(arm.y-pointer.y)/2, 10, 0, 2*Math.PI);
  642.         ctx.arc(pointer.x+(arm.x-pointer.x)/1.5,pointer.y+(arm.y-pointer.y)/1.5, 50, 0, 2*Math.PI);
  643.         ctx.arc(pointer.x+(arm.x-pointer.x)/1.2,pointer.y+(arm.y-pointer.y)/1.2, 80, 0, 2*Math.PI);
  644.         ctx.arc(pointer.x+(arm.x-pointer.x)/1.1,pointer.y+(arm.y-pointer.y)/1.1, 100, 0, 2*Math.PI);
  645.         ctx.stroke();
  648.         ctx.beginPath();
  649.         ctx.arc(arm2.x+pointer.x-(pointer.x/3),pointer.y+(arm2.y-pointer.y)/3, 10, 0, 2*Math.PI);
  650.         ctx.arc(arm2.x+pointer.x-(pointer.x/2.5),pointer.y+(arm2.y-pointer.y)/2.5, 10, 0, 2*Math.PI);
  651.         ctx.arc(arm2.x+pointer.x-(pointer.x)/2,pointer.y+(arm2.y-pointer.y)/2, 10, 0, 2*Math.PI);
  652.         ctx.arc(arm2.x+pointer.x-(pointer.x)/1.5,pointer.y+(arm2.y-pointer.y)/1.5, 50, 0, 2*Math.PI);
  653.         ctx.arc(arm2.x+pointer.x-(pointer.x)/1.2,pointer.y+(arm2.y-pointer.y)/1.2, 80, 0, 2*Math.PI);
  654.         ctx.arc(arm2.x+pointer.x-(pointer.x)/1.1,pointer.y+(arm2.y-pointer.y)/1.1, 100, 0, 2*Math.PI);
  655.         ctx.stroke();
  658.         ctx.fillStyle='#004444';
  659.         ctx.font = "14px arial";
  660.         ctx.textAlign = "center"; 
  661.         ctx.textBaseline = "middle"; 
  662.         ctx.fillText("Coronavirus Shooting Game, Designed & Developed by Faisal Jawed",stage.w/2,stage.h-20);
  663. }
  667. // ------------------------------------------------------------------------------- events
  668. // ------------------------------------------------------------------------------- events
  669. // ------------------------------------------------------------------------------- events
  670. // ------------------------------------------------------------------------------- events
  672. function toggleFullScreen() {
  673.     var doc = window.document;
  674.     var docEl = doc.documentElement;
  676.     var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  677.     var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;
  679.     if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
  680.         requestFullScreen.call(docEl);
  682.     }
  683.     else {
  684.         cancelFullScreen.call(doc);
  686.     }
  687. }
  690. var ox = 0;
  691. var oy = 0;
  692. function mousestart(e) {
  693.     mxpos = (e.pageX-loffset)*scale;
  694.     mypos = (e.pageY-toffset)*scale;
  695.     pointer.x = mxpos;
  696.     pointer.y = mypos;
  698. // fireact = true;
  702. }
  703. function mousemove(e) {
  704.     mxpos = (e.pageX-loffset)*scale;
  705.     mypos = (e.pageY-toffset)*scale;
  706.     pointer.x = mxpos;
  707.     pointer.y = mypos;
  709.     // ball.vY += (mxpos-ox)/15*line.d;
  711.     ox = mxpos;
  712. }
  714. function mouseend(e) {
  715. // fireact = false;
  717. }
  719. var moveX = 0;
  720. var moveY = 0;
  721. var moveZ = 0;
  724. function keydowned(e) {
  725.     // if (e.keyCode==65) {
  726.     //     moveX = 10;
  727.     // } else if (e.keyCode==68) {
  728.     //     moveX = -10;
  729.     // }
  730.     // if (e.keyCode==83) {
  731.     //     moveY = -10;
  732.     // } else if (e.keyCode==87) {
  733.     //     moveY = 10;
  734.     // }
  736.     // if (e.keyCode==69) {
  737.     //     moveZ = 10;
  738.     // } else if (e.keyCode==81) {
  739.     //     moveZ = -10;
  740.     // }
  741.     // console.log(e.keyCode);
  742. }
  746. function keyuped(e) {
  747.     // if (e.keyCode==65) {
  748.     //     moveX = 0;
  749.     // } else if (e.keyCode==68) {
  750.     //     moveX = 0;
  751.     // }
  752.     // if (e.keyCode==87) {
  753.     //     moveY = 0;
  754.     // } else if (e.keyCode==83) {
  755.     //     moveY = 0;
  756.     // }
  757.     // if (e.keyCode==81) {
  758.     //     moveZ = 0;
  759.     // } else if (e.keyCode==69) {
  760.     //     moveZ = 0;
  761.     // }
  762.     // console.log("u"+e.keyCode);
  763. }
  767. window.addEventListener('mousedown', function(e) {
  768.     mousestart(e);
  769. }, false);
  770. window.addEventListener('mousemove', function(e) {
  771.     mousemove(e);
  772. }, false);
  773. window.addEventListener('mouseup', function(e) {
  774.     mouseend(e);
  775. }, false);
  776. window.addEventListener('touchstart', function(e) {
  777.     e.preventDefault();
  778.     mousestart(e.touches[0]);
  779. }, false);
  780. window.addEventListener('touchmove', function(e) {
  781.     e.preventDefault();
  782.     mousemove(e.touches[0]);
  783. }, false);
  784. window.addEventListener('touchend', function(e) {
  785.     e.preventDefault();
  786.     mouseend(e.touches[0]);
  787. }, false);
  790. window.addEventListener('keydown', function(e) {
  791.     keydowned(e);
  792. }, false);
  793. window.addEventListener('keyup', function(e) {
  794.     keyuped(e);
  795. }, false);
  797. // ------------------------------------------------------------------------ stager
  798. // ------------------------------------------------------------------------ stager
  799. // ------------------------------------------------------------------------ stager
  800. // ------------------------------------------------------------------------ stager
  801. function _pexresize() {
  802.     var cw = window.innerWidth;
  803.     var ch = window.innerHeight;
  804.     if (cw<=ch*stage.w/stage.h) {
  805.         portrait = true;
  806.         scale = stage.w/cw;
  807.         loffset = 0;
  808.         toffset = Math.floor(ch-(cw*stage.h/stage.w))/2;
  809.         _pexcanvas.style.width = cw + "px";
  810.         _pexcanvas.style.height = Math.floor(cw*stage.h/stage.w) + "px";
  811.     } else {
  812.         scale = stage.h/ch;
  813.         portrait = false;
  814.         loffset = Math.floor(cw-(ch*stage.w/stage.h))/2;
  815.         toffset = 0;
  816.         _pexcanvas.style.height = ch + "px";
  817.         _pexcanvas.style.width = Math.floor(ch*stage.w/stage.h) + "px";
  818.     }
  819.     _pexcanvas.style.marginLeft = loffset +"px";
  820.     _pexcanvas.style.marginTop = toffset +"px";
  821. }
  824. window.requestAnimFrame = (function(){
  825.     return  window.requestAnimationFrame       ||
  826.     window.webkitRequestAnimationFrame ||
  827.     window.mozRequestAnimationFrame    ||
  828.     window.oRequestAnimationFrame      ||
  829.     window.msRequestAnimationFrame     ||
  830.     function( callback ){
  831.         window.setTimeout(callback, 1000 / 60);
  832.     };})();
  836.     var fps = 60;
  839.     var nfcount = 0;
  841. function animated() {
  842.     requestAnimFrame(animated);
  843.     enginestep();
  845.        nfcount++;
  846.     ctx.fillStyle='#00ffff';
  847.     ctx.font = "12px arial";
  848.     ctx.textAlign = "left"; 
  849.     ctx.fillText("FPS: "+Math.floor(fps),10,stage.h-20);
  850. }
  852. _pexresize();
  853. animated();
  856. function countfps() {
  857.     fps = nfcount;
  858.     nfcount = 0;
  859. }
  860. setInterval(countfps,1000);

发表评论

表情：
评论列表 （有 0 条评论，290人围观）

还没有评论，来说两句吧...

相关阅读