html5学习（3）——坦克大战一

最新推荐文章于 2021-05-30 19:27:47 发布

原创最新推荐文章于 2021-05-30 19:27:47 发布 · 438 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5canvas坦克大战

本文介绍如何使用HTML5创建一个经典的坦克大战游戏，包括游戏界面设计、基本元素绘制和交互逻辑实现。

新建tank_game.html

<!doctype html>
<html>
<head>
   <meta charset="utf-8"/>
	<title>
		坦克大战
	</title>
</head>
<body>
	<h1>html5-经典坦克大战</h1>
	<canvas id="tankMap" width="400px" height="300px" style="background-color:black">
	<script type="text/javascript">
	   var canvas1=document.getElementById("tankMap");
	   var cxt=canvas1.getContext("2d");
	   var pointX=200;
	   var pointY=280;
	   //画出自己的坦克
	   cxt.fillStyle="#DED284";
	   //坦克左边轮
	   cxt.fillRect(pointX-10,pointY-15,5,30);
	   //坦克右边轮
	   cxt.fillRect(pointX+5,pointY-15,5,30);
	   //坦克中间身体矩形
	   cxt.fillRect(pointX-5,pointY-10,10,20);
	   //画出中间的圆
	   cxt.beginPath();
	   cxt.arc(pointX,pointY,3.5,0,2*Math.PI);
	   cxt.closePath();
	   cxt.stroke();
	   //炮管
	   cxt.strokeStyle="#FFD902";
	   cxt.lineWidth=1.5;
	   cxt.beginPath();
	   cxt.moveTo(pointX,pointY);
	   cxt.lineTo(pointX,pointY-15);
	   cxt.closePath();
	   cxt.stroke();
	</script>
</body>
</html>