头像

html5坦克大战

来源:https://www.daimasucai.com/html5/96.html 代码素材管理员 2017-01-30浏览()

儿时玩的一款经典游戏:坦克大战。本文主要介绍了基本的html5标签、绘图和游戏案例。按空格键发射子弹,上下左右键控制方向

程序员,你不是一个人;网站开发QQ群:  在线充值,或联系QQ 3078847178直接充值

html5坦克大战
分类:首页>>网页特效>>html5 阅读次数:
查看演示 下载次数: 14

手机扫码访问:

下载资源 下载积分: 20

  HTML

  首先我们把坦克游戏绘制到一块画布上:

<canvas id="canvasOne" width="650" height="384" top=50px; left=50px;>Your browser does not support the HTML 5 Canvas. </canvas>

  main.js

//坦克实施 

function render() { 

    context.save(); 

    context.setTransform(1, 0, 0, 1, 0, 0) 

    var angleInRadians = tankmove.tankAngle * Math.PI / 180; 

    context.translate(tankmove.x + 16, tankmove.y + 16) 

    context.rotate(angleInRadians); 

    var tankshapeX = Math.floor(tankmove.tankshape % 8) * 32; 

    var tankshapeY = Math.floor(tankmove.tankshape / 8) * 32; 

    context.drawImage(tank, tankshapeX, tankshapeY, 32, 32, -16, -16, 32, 32); 

    context.restore(); 

 

    context.clearRect(496, 16, 138, 352); 

    context.fillStyle = "#3cb371"; 

    context.fillRect(496, 16, 138, 352); 

    context.save(); 

    context.fillStyle = "#000000"; 

    context.font = "italic bold 23px serif"; 

    context.fillText("关  卡:" + level + "", 500, 80); 

    context.fillText("敌  人:" + surplus + "", 500, 110); 

    context.fillText("生  命:" + life + "", 500, 140); 

    context.fillText("得  分:" + score + "", 500, 170); 

    context.fillText("最高分:" + record + "", 500, 200); 

    context.restore(); 

 

    context.save(); 

    context.fillStyle = "#000000"; 

    context.font = "normal bold 15px normal"; 

    context.fillText("游戏说明: 玩家", 500, 270); 

    context.fillText("操控坦克进行战", 500, 290); 

    context.fillText("斗,击毁敌方得", 500, 310); 

    context.fillText("分,被击毁或相", 500, 330); 

    context.fillText("相撞减分。", 500, 350); 

    context.restore(); 

}


声明:本文为原创文章,如需转载,请注明来源daimasucai.com并保留原文链接:https://www.daimasucai.com/html5/96.html
如果您觉得本文的内容对您的学习有所帮助,您可以扫描下面的二维码请我喝杯茶,感谢!
alipay转账 alipay转账 扫扫加qq群

评论(0)


温馨提示:为规范评论内容,垃圾评论一律封号...

后面还有条评论,点击查看>>