コメント：私は誰もがすでに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>