html5坦克大战

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

程序员，你不是一个人；网站开发QQ群：136483411  在线充值，或联系QQ 304534221直接充值

查看演示 下载次数： 3次

手机扫码访问：

下载资源 下载积分： 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(); 
}