原生js結合html5制作小飛龍的簡易跳球

2019-11-20 12:50:39

字體：大中小

來源：轉載

供稿：網友

演示地址:http://runjs.cn/detail/yjpvqhal

html代碼

<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>

演示圖片