每一行都有注释，下来好好复习 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>面向对象 - 坦克大战</title>
		<style>
			*{margin: 0;padding: 0;}
			html,body{height: 100%;}
			.bg{
				width: 100%;
				height: 100%;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<!-- 用于渲染别的坦克 -->
		<div class="bg" id="bg">
			
		</div>
	</body>
	<script type="text/javascript">
		//坦克的类
		class Tank{
			constructor(name,x,y,img) {//构造函数
				this.name = name;
			    this.width = 200;//坦克的宽
				this.height = 200;//坦克的高
				this.speed = 1;//速度
				this.hp = 5;//血量
				this.direction = "center";//移动方向【left right top buttom center】
				this.x = x;//x坐标
				this.y = y;//y坐标
				this.isShow = true;//显示
				this.img = img;//坦克的皮肤
			}
		}
		//子弹
		class Bullet{
			constructor(direction,x,y,img) {
			    this.width = 30;
				this.height = 30;
				this.hurt = 1;//伤害
				this.speed = 5;//速度
				this.direction = direction;//移动方向【left right top buttom】
				this.x = x;//x坐标
				this.y = y;//y坐标
				this.img = img;//子弹的皮肤
			}
		}
		//变成对象
		const tank = new Tank("二营长",100,500,"/150/t_top.png");
		
		
		//放坦克的容器
		const tanks = [tank];
		
		
		//（独立团 游戏引擎-方向控制）
		setInterval(function(){
			//循环坦克容器
			for(var i = 0;i < tanks.length; i++){
				//取出循环的坦克对象
				const this_tank = tanks[i];
				//判断移动方向
				if(this_tank.direction == "left"){
					//x减去速度
					this_tank.x -= this_tank.speed;
				}
			}
		},1);//每一毫秒执行一次
		
	</script>
</html>

 

最后修改于 2022-05-11 17:27:22
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
上一篇