萬盛學電腦網 >> 腳本專題 >> javascript >> 原生js結合html5制作小飛龍的簡易跳球
原生js結合html5制作小飛龍的簡易跳球
演示地址:http://runjs.cn/detail/yjpvqhal
html代碼
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 <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>演示圖片
以上所述就是本文的全部代碼，希望大家能夠喜歡。
javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved