html5坦克大战

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

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

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

接着我们引入modernizr-1.6.min.js和main.js，modernizr-1.6.min.js主要是让html5,css3等兼容各大浏览器，可以说它干的事情目的与jQuery.support一样一样的。

<script src="js/modernizr-1.6.min.js"></script>
<script src="js/main.js"></script>

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();
}