這篇文章主要介紹“HTML5實現(xiàn)一個能夠移動的小坦克代碼分享”,在日常操作中,相信很多人在HTML5實現(xiàn)一個能夠移動的小坦克代碼分享問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”HTML5實現(xiàn)一個能夠移動的小坦克代碼分享”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

代碼如下:
<!DOCTYPE html>
<html>
<head>
</head>
<body onkeydown="changeDirect()">
<canvas id="tankMap" width="500px" height="300px" >您的瀏覽器不支持canvas標簽</canvas>
<script type="text/javascript">
var canvas1=document.getElementById('tankMap');
var ctx=canvas1.getContext('2d');
var myX=30;
var myY=30;
function drawBall(){
ctx.shadowBlur=30,ctx.shadowColor="#008C46";
ctx.fillStyle='#008C46';
ctx.fillRect(myX,myY,5,30);
ctx.fillRect(myX+17,myY,5,30);
ctx.fillRect(myX+6,myY+5,10,20);
ctx.beginPath();
ctx.fillStyle='#004020';
ctx.arc(myX+11,myY+15,5,0,Math.PI*1.5);
ctx.closePath();
ctx.fill();
ctx.strokStyle="#008C46";
ctx.moveTo(myX+11,myY+15);
ctx.lineTo(myX+11,myY-5);
ctx.stroke();
}
drawBall();
function changeDirect(){
var code=event.keyCode;
switch(code){
case 87:
myY--;
break;
case 68:
myX++;
break;
case 83:
myY++;
break;
case 65:
myX--;
break;
}
ctx.clearRect(0,0,500,300);
//重新繪制
drawBall();
}
</script>
</body>
</html>到此,關于“HTML5實現(xiàn)一個能夠移動的小坦克代碼分享”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注創(chuàng)新互聯(lián)網站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
文章題目:HTML5實現(xiàn)一個能夠移動的小坦克代碼分享-創(chuàng)新互聯(lián)
本文網址:http://www.yijiale78.com/article18/cesegp.html
成都網站建設公司_創(chuàng)新互聯(lián),為您提供動態(tài)網站、服務器托管、全網營銷推廣、虛擬主機、小程序開發(fā)、品牌網站建設
聲明:本網站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)