html5坦克大战

来源:https://www.sucaihuo.com/js/106.html 2015-05-07 08:55浏览(3752) 收藏

儿时玩的一款经典游戏:坦克大战。本文主要介绍了基本的html5标签、绘图和游戏案例。按空格键发射子弹,上下左右键控制方向,其他操作键请详看main.js
html5坦克大战
分类:游戏 > 益智 难易:高级
查看演示 下载资源 下载积分: 20 积分

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();
}
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2