小强的HTML5移动开发之路（7）——坦克大战游戏1

来自：http://blog.csdn.net/dawanganban/article/details/17693145

上一篇中我们介绍了关于Canvas的基础知识，用Canvas绘制各种图形和图片，在上一篇的基础上我们来做一个基于HTML5的坦克大战游戏，下面我们开始吧小强的HTML5移动开发之路（7）——坦克大战游戏1

一、用Canvas画出我们的坦克

我们设计的坦克结构如下图所示，如果有的朋友有更好的设计，希望分享和交流一下。

小强的HTML5移动开发之路（7）——坦克大战游戏1

如上图所示，我们的坦克基本上是由三个矩形和一个圆形一个线段组成，每个部件的尺寸进行了标记，单位为px,下面我们用上一篇中讲到的知识来画出我们的坦克，注意：我们在画坦克的时候应该选择一个参考点，这里我们选择的是坦克的左上角，如图所示。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5-坦克大战</h1>
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript">
//得到画布
var canvas1 = document.getElementById("tankMap");
//定义一个位置变量
var heroX = 80;
var heroY = 80;
//得到绘图上下文
var cxt = canvas1.getContext("2d");
//设置颜色
cxt.fillStyle="#BA9658";
//左边的矩形
cxt.fillRect(heroX,heroY,5,30);
//右边的矩形
cxt.fillRect(heroX+17,heroY,5,30);
//画中间的矩形
cxt.fillRect(heroX+6,heroY+5,10,20);
//画出坦克的盖子
cxt.fillStyle="#FEF26E";
cxt.arc(heroX+11,heroY+15,5,0,360,true);
cxt.fill();
//画出炮筒
cxt.strokeStyle="#FEF26E";
cxt.lineWidth=1.5;
cxt.beginPath();
cxt.moveTo(heroX+11,heroY+15);
cxt.lineTo(heroX+11,heroY);
cxt.closePath();
cxt.stroke();
</script>
</body>
</html>

小强的HTML5移动开发之路（7）——坦克大战游戏1

二、怎么让坦克动起来？

在研究怎么让坦克动起来之前，我们先来研究一下怎么让一个小球通过键盘操作使其动起来。

首先我们给<body>标签添加一个监听函数

<body onkeydown="test()">

;

var ballY = 80;

//得到绘图上下文

var cxt = canvas1.getContext("2d");

drawBall();

function drawBall(){

//画出一个红色的圆球

cxt.beginPath(); //要注意闭合路径

cxt.fillStyle="#FF0000";

cxt.arc(ballX,ballY,10,0,360,true);

cxt.closePath();

cxt.fill();

}

//现在按键盘上ASDW移动小球

//说明：当我们按下一个键，实际上触发了一个onkeydown事件

function test(){

var code = event.keyCode; //键盘上字幕的ASCII码

switch(code){

case 87:

ballY--;

break;

case 68:

ballX++;

break;

case 83:

ballY++;

break;

case 65:

ballX--;

break;

}

//把画布清理

cxt.clearRect(0,0,400,300);

//重新绘制

drawBall();

}

</script>

</body>

</html>

秒客网

小强的HTML5移动开发之路（7）——坦克大战游戏1

相关文章