原生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è)面操作方法
這篇文章主要給大家介紹了關(guān)于微信小程序掃描普通二維碼跳轉(zhuǎn)到小程序指定頁(yè)面操作的相關(guān)資料,為了分享方便,或者制作宣傳海報(bào)之類(lèi)的,經(jīng)常需要用到微信小程序指定頁(yè)面的二維碼,讓用戶掃碼直達(dá)頁(yè)面,需要的朋友可以參考下2023-08-08javascript:window.open彈出窗口的位置問(wèn)題
這篇文章主要介紹了javascript:window.open彈出窗口的位置問(wèn)題,需要的朋友可以參考下2014-03-03JavaScript forEach的幾種用法小結(jié)
forEach()是JavaScript中一個(gè)常用的方法,用于遍歷數(shù)組或類(lèi)數(shù)組對(duì)象中的每個(gè)元素,本文就來(lái)介紹一下JavaScript forEach的幾種用法小結(jié),具有一定的參考價(jià)值,感興趣的可以了解一下2023-11-11簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04JavaScript學(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-08javascript firefox兼容ie的dom方法腳本
js firefox下兼容ie的dom的實(shí)現(xiàn)方法小結(jié)。利用我們?yōu)榱思嫒荻酁g覽器寫(xiě)出更好的效果代碼2008-05-05