suchen

Heim >Web-Frontend >js-Tutorial >Native JS kombiniert mit HTML5, um einen einfachen springenden Ball für die kleinen Javascript-Fähigkeiten des fliegenden Drachen zu erstellen

Native JS kombiniert mit HTML5, um einen einfachen springenden Ball für die kleinen Javascript-Fähigkeiten des fliegenden Drachen zu erstellen

WBOY
WBOYOriginal
2016-05-16 16:07:101253Durchsuche

Demo-Adresse: http://runjs.cn/detail/yjpvqhal

HTML-Code

<html>
  <head>
    <meta charset="utf-8"/>
    <title>小飞龙的跳球</title>
  </head>
  <body onload="init()">
    <canvas id="game" width="400" height="400" style="border:1px solid #c3c3c3">
      你的游览器不支持html5的画布元素，请升级到IE9+或使用firefox、chrome这类高级的智能游览器！
    </canvas>
    <script>
      var canvas = document.getElementById('game');
      var ctx = canvas.getContext('2d');
      var grad;
      //盒子的起始位置和大小以及球的半径
      var box = {x:20,y:20,w:350,h:350,r:20};
      //球的中心位置和偏移位置
      var inbox = {//box内的限制范围
          bx:(box.w+box.x-box.r),
          by:(box.h+box.y-box.r),
          ix:box.x+(box.r*2),
          iy:box.y+(box.r*2)
        };
      //球的初始位置和变化位置  
      var ball = {x:50,y:50,vx:4,vy:8};
      var img = new Image();
      img.src = 'images/qiuqiu.png';
      var hue = [[255,0,0],[255,255,0],[0,255,0],[0,255,255],[0,0,255],[255,0,0]];
      function init(){
        grad = ctx.createLinearGradient(box.x,box.y,box.w,box.h);
        for(var i=0;i<hue.length;i++){
          var color = 'rgb('+hue[i][0]+','+hue[i][1]+','+hue[i][2]+')';
          grad.addColorStop(i/hue.length,color);
        }
        ctx.lineWidth = box.r;
        ctx.fillStyle = 'rgb(200,0,50)';
        ctx.fillStyle = grad;
        moveBall();
        setInterval(moveBall,50);
      }  
      //碰撞检测并重新确定球的位置
      function moveBallEndCheck(){
        var nx = ball.x + ball.vx;
        var ny = ball.y + ball.vy;
        if(nx > inbox.bx){//当前x大于上边框边界
          ball.vx = -ball.vx;//球的变化x坐标当前当前变化x坐标的负数
          nx = inbox.bx;//当前位置为上边框的位置
        }
        if(nx < inbox.ix){//当前位置小于下边框
          nx = inbox.ix;//当前位置为下边框的x
          ball.vx = -ball.vx;//球的变化x坐标翻转取负
        }
        if(ny > inbox.by){
          ny = inbox.by;
          ball.vy = -ball.vy;
        }
        if(ny < inbox.iy){
          ny = inbox.iy;
          ball.vy = -ball.vy;
        }
        ball.x = nx;
        ball.y = ny;
      }
      function moveBall(){
        ctx.clearRect(box.x,box.y,box.w,box.h);
        moveBallEndCheck();
        ctx.beginPath();
        //console.log(ball.x+"\t"+ball.y+"\t"+ball.vx+"\t"+ball.vy+"\t"+(ball.x-box.r)+"\t"+(ball.y-box.r));
        ctx.drawImage(img,(ball.x-box.r),(ball.y-box.r));
        ctx.fillRect(box.x,box.y,box.r,box.h);
        ctx.fillRect((box.x+box.w-box.r),box.y,box.r,box.h);
        ctx.fillRect(box.x,box.y,box.w,box.r);
        ctx.fillRect(box.x,(box.y+box.h-box.r),box.w,box.r);
        ctx.closePath();
        ctx.fill();
      }
    </script>
  </body>
</html>

Demobilder

Das Obige ist der gesamte Code dieses Artikels. Ich hoffe, er gefällt Ihnen allen.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Native JS kombiniert mit HTML5, um ein einfaches zweifarbiges Unterspiel zu erstellen_Javascript-FähigkeitenNächster Artikel：Native JS kombiniert mit HTML5, um ein einfaches zweifarbiges Unterspiel zu erstellen_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen