使用html5画出一个简单的坦克

最新推荐文章于 2022-03-18 00:25:30 发布

weixin_33724570

最新推荐文章于 2022-03-18 00:25:30 发布

阅读量351

点赞数

CC 4.0 BY-SA版权

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/shuming/blog/619991

本文介绍了一个使用HTML5 Canvas实现的经典坦克大战游戏示例。通过简单的JavaScript代码绘制了坦克的各个部分，包括轮子、车身、盖子及炮筒等，并展示了如何设置颜色和尺寸来呈现坦克。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h1>html5经典的坦克大战</h1>
<canvas id="tankMap" height="400px" width="500px" style="background-color:black"></canvas>

<script type="text/javascript">
	//1.得到画布
	var canvas1 = document.getElementById("tankMap");
	//2.得到绘图的上下文（画笔）
	var cxt = canvas1.getContext("2d");
	
	//坦克坐标
	var myTankX = 230;
	var myTankY = 230;
	
	//控制坦克宽度
	var tank_width = 5;
	
	//画出自己的坦克
	//设置颜色
	cxt.fillStyle="#DED284";
	//先画出左边的矩形（左轮子）
	cxt.fillRect(myTankX,myTankY,5,30);
	//画出右边的矩形（右轮子）
	cxt.fillRect(myTankX+15+tank_width,myTankY,5,30);
	//画出中间的矩形（身体）
	cxt.fillRect(myTankX+6,myTankY+5,8+tank_width,20);
	//画出圆（坦克的盖子）
	cxt.fillStyle="#FFCF31";
	cxt.arc(myTankX+10+tank_width/2,myTankY+15,4+tank_width/2,0,2*Math.PI,true);
	cxt.fill();
	//画出直线（炮筒）
	cxt.strokeStyle="#FFCF31";
	//设置线条的宽度
	cxt.lineWidth=2;
	cxt.beginPath();
	cxt.moveTo(myTankX+10+tank_width/2,myTankY+15);
	cxt.lineTo(myTankX+10+tank_width/2,myTankY-5);
	cxt.closePath();
	cxt.stroke();
</script>
</body>
</html>

转载于:https://my.oschina.net/shuming/blog/619991