Комментарий: я считаю, что все уже стали известны словами HTML5, и его функции очень мощные. Эта статья знакомит вас с реализацией небольшого танка, который можно перемещать через него. Детали следующие. Друзья, которые любят HTML, могут ссылаться на это.
<! Doctype html>
<html>
<голова>
</head>
<body onkeydown = "mediceRect ()">
<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 ();
}
Drawlall ();
Функция madesirect () {
var code = event.keycode;
Switch (код) {
Случай 87:
myy--;
перерыв;
Случай 68:
myx ++;
перерыв;
Случай 83:
myy ++;
перерыв;
Случай 65:
myx--;
перерыв;
}
ctx.clearrect (0,0,500 300);
// перекрасить
Drawlall ();
}
</script>
</body>
</html>