コメント:私は誰もがすでにHTML5という言葉でよく知られていると信じており、その機能は非常に強力です。この記事では、移動できる小さなタンクを実装することを紹介します。詳細は次のとおりです。 HTMLが好きな友達はそれを参照できます。
<!doctype html>
<html>
<head>
</head>
<body onkeydown = "chaderionirect()">
<canvas>ブラウザはCanvasタグ</canvas>をサポートしていません
<script type = "text/javascript">
var canvas1 = document.getElementById( 'tankmap');
var ctx = canvas1.getContext( '2d');
var myx = 30;
var myy = 30;
関数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 chandedirect(){
var code = event.keycode;
switch(code){
ケース87:
myy-;
壊す;
ケース68:
myx ++;
壊す;
ケース83:
myy ++;
壊す;
ケース65:
myx--;
壊す;
}
CTX.ClearRect(0,0,500,300);
//塗り直し
drawball();
}
</script>
</body>
</html>