儿时玩的一款经典游戏:坦克大战。本文主要介绍了基本的html5标签、绘图和游戏案例。按空格键发射子弹,上下左右键控制方向,其他操作键请详看main.js
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();
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791