karlew > HTML5小游戏 > canvas实现类躲避子弹游戏

canvas实现类躲避子弹游戏

6-11 5,179 views

类似于是XX就坚持5秒的页游，控制星星躲开球体碰撞。PC端可用键盘上下左右控制，手机端可用重力感应控制。已知的问题是碰撞有点不准确，有功夫的话改用像素检测会好很多。另外在稍低端的手机上会有点卡顿，性能优化是个难题。

demo：http://wx.karlew.com/star/

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <title>你能撑过10秒吗</title>
  7.     <style>
  8.         html,body{
  9.             overflow: hidden;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <canvas id="canvas" width="300px" height="300px">您的浏览器不支持canvas</canvas>
  17.     <div style="display: none;">
  18.         <img id="star_img" src="http://wx.karlew.com/star/star.png">
  19.     </div>
  20. </body>
  21. <script>
  22.     var canvas = document.getElementById("canvas");
  23.     var ctx = canvas.getContext("2d");
  24.     var cw = window.innerWidth;
  25.     var ch = window.innerHeight;
  26.     canvas.width = cw;
  27.     canvas.height = ch;
  29.     var starImg = document.getElementById("star_img");
  31.     var star = {
  32.         x:cw/2,
  33.         y:ch/2,
  34.         speedX:0,
  35.         speedY:0,
  36.         size:60,
  37.         time:0
  38.     }
  40.     items = [];
  41.     itemSize = 12;
  42.     itemsCount = 0;
  43.     itemsMax = 49;
  44.     itemSpeed = 5;
  46.     //先创建十个初始球类
  47.     for(var i=0;i<10;i++){
  48.         pushItem();
  49.     }
  51.     //每0.2秒增加一个球
  52.     intPushItem = setInterval(pushItem, 200);
  54.     function pushItem(){
  55.         var randNum = parseInt(Math.random()*4);
  56.         itemsCount++;
  57.         if(itemsCount>itemsMax){
  58.             clearInterval(intPushItem);
  59.             clearInterval(intDraw);
  60.             if(confirm("you win: "+itemsCount/5+"s, again?")){
  61.                 location.reload();
  62.             }
  63.         }
  64.         var item = {
  65.             x:0,
  66.             y:0,
  67.             speedX:0,
  68.             speedY:0,
  69.             covar:Math.random()+0.2  //自定义随机速度系数，为了让球类速度不一样
  70.         }
  71.         switch (randNum) {
  72.             case 0:
  73.                 item.x=0
  74.                 item.y=Math.random()*ch
  75.                 break;
  76.             case 1:
  77.                 item.x=Math.random()*cw
  78.                 item.y=0
  79.                 break;
  80.             case 2:
  81.                 item.x=cw
  82.                 item.y=Math.random()*ch
  83.                 break;
  84.             case 3:
  85.                 item.x=Math.random()*cw
  86.                 item.y=ch
  87.                 break;
  88.             default:
  89.                 break;
  90.         }
  91.         items.push(item)
  92.     }
  94.     setTime = 18;
  95.     intDraw = setInterval(drawCanvas, setTime);
  97.     function drawCanvas(){
  98.         ctx.clearRect(0,0,cw,ch);
  99.         drawStar();
  100.         drawItem();
  101.         //判断是否碰到四周边缘
  102.         if(star.x-star.size/2<0||star.y-star.size/2<0||star.x+star.size/2>cw||star.y+star.size/2>ch){
  103.             clearInterval(intPushItem);
  104.             clearInterval(intDraw);
  105.             if(confirm("you lose: "+itemsCount/5+"s, again?")){
  106.                 location.reload();
  107.             }
  108.         }
  109.     }
  111.     function drawStar(){
  112.         star.x += star.speedX;
  113.         star.y += star.speedY;
  114.         ctx.save();
  115.         ctx.translate(star.x, star.y);  //重置始点坐标为星星中心点    
  116.         ctx.rotate(star.time * Math.PI / 180);  //旋转角度
  117.         ctx.beginPath();
  118.         ctx.drawImage(starImg,-star.size/2, -star.size/2,star.size,star.size);
  119.         ctx.closePath();
  120.         ctx.restore();
  121.         star.time += 4;
  122.     }
  124.     function drawItem(){
  125.         items.forEach(function(item){
  126.             var dist = Math.sqrt(Math.pow(item.x-star.x,2) + Math.pow(item.y-star.y,2));
  127.             if(Math.abs(dist)<itemSize+star.size/2){
  128.                 clearInterval(intPushItem);
  129.                 clearInterval(intDraw);
  130.                 if(confirm("you lose: "+itemsCount/5+"s, again?")){
  131.                     location.reload();
  132.                 }
  133.             }
  134.             var speedNarrow = 0.007/setTime; //用于限制球类速度
  135.             if(Math.abs(item.speedX+(star.x-item.x)*speedNarrow)<=10){
  136.                 item.speedX += (star.x-item.x)*speedNarrow;
  137.             }
  138.             if(Math.abs(item.speedY+(star.y-item.y)*speedNarrow)<=10){
  139.                 item.speedY += (star.y-item.y)*speedNarrow;
  140.             }
  141.             item.x += item.speedX*item.covar;
  142.             item.y += item.speedY*item.covar;
  143.             ctx.beginPath();
  144.             ctx.arc(item.x, item.y, itemSize, 0, 360, false);
  145.             ctx.closePath();
  146.             ctx.fillStyle = "#D26962";
  147.             ctx.fill();
  148.         })
  149.     }
  151.     //PC端用拖动事件
  152.     //不结合onmousedown和onmouseup做成拖动的原因在于拖动的时候setInterval速度会受影响，导致球体速度变慢
  153.     var dragFlag = false;
  154.     canvas.onclick = function(event){
  155.         x=event.clientX;
  156.         y=event.clientY;
  157.         if(Math.abs(x-star.x)<=star.size/2&&Math.abs(y-star.y)<=star.size/2){
  158.             dragFlag = true;
  159.         }
  160.         console.log(dragFlag);
  161.     }
  162.     canvas.onmousemove = function(){
  163.         if(dragFlag){
  164.             star.x=event.clientX;
  165.             star.y=event.clientY;
  166.         }
  167.     }
  169.     //手机平板类用重力感应事件
  170.     window.addEventListener("deviceorientation", function(event){
  171.         if((event.gamma>=3&&event.gamma<=90)||(event.gamma<=-3&&event.gamma>=-90)){
  172.             star.speedX = 0.5*event.gamma;
  173.         }else{
  174.             star.speedX = 0;
  175.         }
  176.         if((event.beta>=3&&event.beta<=90)||(event.beta<=-3&&event.beta>=-90)){
  177.             star.speedY = 0.5*event.beta;
  178.         }else{
  179.             star.speedY = 0;
  180.         }
  181.     }, true);
  183. </script>
  184. </html>

版权属于: karlew

原文地址: https://www.karlew.com/archives/532

转载时必须以链接形式注明原始出处及本声明。

欢迎留言