Comentario: Creo que todos ya se han hecho conocidos por la palabra HTML5, y sus funciones son muy poderosas. Este artículo le presenta implementar un tanque pequeño que se pueda mover a través de él. Los detalles son los siguientes. Los amigos que les gusta HTML pueden referirse a él.
<! Doctype html>
<html>
<Evista>
</ablo>
<Body OnKeyDown = "Changedirect ()">
<VaS> Su navegador no admite la etiqueta de lienzo </lienvas>
<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 ();
función cambiableirect () {
VAR CODE = EVENT.KEYCODE;
switch (código) {
Caso 87:
myy--;
romper;
Caso 68:
myx ++;
romper;
Caso 83:
myy ++;
romper;
Caso 65:
myx--;
romper;
}
CTX.ClearRect (0,0,500,300);
// repintar
drawball ();
}
</script>
</body>
</html>