欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生js結(jié)合html5制作小飛龍的簡(jiǎn)易跳球

 更新時(shí)間:2015年03月30日 09:47:15   投稿:hebedich  
這篇文章主要介紹了原生js結(jié)合html5制作小飛龍的簡(jiǎn)易跳球的方法和代碼分享,推薦給大家,有需要的小伙伴可以參考下。

演示地址: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的畫(huà)布元素,請(qǐng)升級(jí)到IE9+或使用firefox、chrome這類(lèi)高級(jí)的智能游覽器!
    </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內(nèi)的限制范圍
          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);
      }  
      //碰撞檢測(cè)并重新確定球的位置
      function moveBallEndCheck(){
        var nx = ball.x + ball.vx;
        var ny = ball.y + ball.vy;
        if(nx > inbox.bx){//當(dāng)前x大于上邊框邊界
          ball.vx = -ball.vx;//球的變化x坐標(biāo)當(dāng)前當(dāng)前變化x坐標(biāo)的負(fù)數(shù)
          nx = inbox.bx;//當(dāng)前位置為上邊框的位置
        }
        if(nx < inbox.ix){//當(dāng)前位置小于下邊框
          nx = inbox.ix;//當(dāng)前位置為下邊框的x
          ball.vx = -ball.vx;//球的變化x坐標(biāo)翻轉(zhuǎn)取負(fù)
        }
        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>

演示圖片

以上所述就是本文的全部代碼,希望大家能夠喜歡。

相關(guān)文章

  • 微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作方法

    微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作方法

    這篇文章主要給大家介紹了關(guān)于微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作的相關(guān)資料,為了分享方便,或者制作宣傳海報(bào)之類(lèi)的,經(jīng)常需要用到微信小程序指定頁(yè)面的二維碼,讓用戶掃碼直達(dá)頁(yè)面,需要的朋友可以參考下
    2023-08-08
  • 微信小程序?qū)崿F(xiàn)文字滾動(dòng)

    微信小程序?qū)崿F(xiàn)文字滾動(dòng)

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字滾動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-03-03
  • javascript:window.open彈出窗口的位置問(wèn)題

    javascript:window.open彈出窗口的位置問(wèn)題

    這篇文章主要介紹了javascript:window.open彈出窗口的位置問(wèn)題,需要的朋友可以參考下
    2014-03-03
  • js實(shí)現(xiàn)文件上傳表單域美化特效

    js實(shí)現(xiàn)文件上傳表單域美化特效

    本文為大家分享的是一款效果非??岬奈募蟼鞅韱斡蛎阑匦АS?種不同的美化文件上傳域的效果,很時(shí)尚,感興趣的小伙伴們可以參考一下
    2015-11-11
  • JavaScript forEach的幾種用法小結(jié)

    JavaScript forEach的幾種用法小結(jié)

    forEach()是JavaScript中一個(gè)常用的方法,用于遍歷數(shù)組或類(lèi)數(shù)組對(duì)象中的每個(gè)元素,本文就來(lái)介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下
    2023-11-11
  • 得到元素真實(shí)的背景顏色的js代碼

    得到元素真實(shí)的背景顏色的js代碼

    這個(gè)函數(shù)來(lái)自Rico,Longbill及Dnew.cn修改。 說(shuō)明: 傳入?yún)?shù)一個(gè),為元素的id值或元素本身,返回為元素的真實(shí)背景色值(字符串)。背景值均為16進(jìn)制的值(原代碼是是IE里面返回的是16進(jìn)制的值,而Mozilla則是rgb值,Dnew.cn將其修改為均返回16進(jìn)制的值)。
    2007-12-12
  • 簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能

    簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能

    這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-04-04
  • js活用事件觸發(fā)對(duì)象動(dòng)作

    js活用事件觸發(fā)對(duì)象動(dòng)作

    現(xiàn)在基本上我很少在對(duì)象里面寫(xiě)事情觸發(fā)行為了,因?yàn)楦杏X(jué)那樣做相同的對(duì)象代碼利用率太低,容易導(dǎo)致代碼冗余.
    2008-08-08
  • JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4

    JavaScript學(xué)習(xí)筆記之DOM基礎(chǔ) 2.4

    DOM(Document Object Model),即“文檔對(duì)象模型”?;谡Z(yǔ)義的邏輯結(jié)構(gòu),DOM將網(wǎng)頁(yè)內(nèi)的元素與內(nèi)容呈現(xiàn)為一個(gè)清晰、易讀的樹(shù)狀模型,下面小編把最近整理有關(guān)javascript筆記之DOM基礎(chǔ)分享給大家,有需要的朋友可以參考下
    2015-08-08
  • javascript firefox兼容ie的dom方法腳本

    javascript firefox兼容ie的dom方法腳本

    js firefox下兼容ie的dom的實(shí)現(xiàn)方法小結(jié)。利用我們?yōu)榱思嫒荻酁g覽器寫(xiě)出更好的效果代碼
    2008-05-05

最新評(píng)論