HTML5实现一个能够移动的小坦克示例代码_html5教程技巧_HTML/Xhtml_青云站长教程网
欢迎来到站长教程网!
  • 秒到短信接口 免费试用
  • 微信支付宝接口 秒结算
  • 中文网站排名|申请加入
  • 搜索引擎全站查询
  • 查询移动网站权重数据
  • 海外主机 台湾公司直销
  • HTML/Xhtml

    当前位置:主页 > 网页制作 > HTML/Xhtml >

    HTML5实现一个能够移动的小坦克示例代码_html5教程技巧

    时间:2019-07-22|栏目:HTML/Xhtml|点击:
  • 点评:HTML5一词想必大家早已如雷贯耳,其功能很强大,本文为大家介绍下通过其实现一个能够移动的小坦克,具体如下,喜欢HTML的朋友可以参考下
    复制代码代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body onkeydown="changeDirect()">
    <canvas id="tankMap" width="500px" height="300px" style="border:1px solid #d3d3d3;">您的浏览器不支持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 贪吃蛇游戏实现思路及源代码_html5教程技巧

    栏    目:HTML/Xhtml

    下一篇:PSD模板转XHTML/CSS文档教程

    本文标题:HTML5实现一个能够移动的小坦克示例代码_html5教程技巧

    本文地址:http://www.jh-floor.com/wangyezhizuo/HTML_Xhtml/8661.html

    您可能感兴趣的文章

    广告投放 | 联系我们 | 版权申明

    重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

    如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

    联系QQ:888888 | 邮箱:888888#qq.com(#换成@)

    Copyright © 2002-2017 青云站长教程网 版权所有 琼ICP备xxxxxxxx号