<!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;
}
.tank{/*坦克的样式*/
position: fixed;
background-size: 100% 100%;
}
.tank > h5{/*坦克头上的文字*/
color: #fff;
position: absolute;
top: -30px;
font-size: 5px;
}
.bullets{
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 999999;
}
.bullet{
position: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<!-- 用于渲染别的坦克 -->
<div class="bg" id="bg">
<div id="ff1ufcv432" class="tank">
<h5 id="tank_name"></h5>
</div>
</div>
<!-- 用于放子弹的div -->
<div id="bullets" class="bullets">
<div class="bullet">
</div>
</div>
</body>
<script type="text/javascript">
//找到放坦克的位置
var bg = document.getElementById("bg");
//获取子弹层
var bullets = document.getElementById("bullets");
//（坦克 渲染模块）
var myTank = document.getElementById("ff1ufcv432");
//用来放子弹的容器
var bulletList = [];
//坦克的类
class Tank{
constructor(id,name,x,y,img) {//构造函数
this.id = id;//用户ID 每个人不能一样
this.name = name;
this.width = 50;//坦克的宽
this.height = 50;//坦克的高
this.speed = 1;//速度
this.hp = 5;//血量
this.direction = "center";//移动方向【left right top bottom center】
this.x = x;//x坐标
this.y = y;//y坐标
this.isShow = true;//显示
this.img = img;//坦克的皮肤
}
}
//子弹
class Bullet{
constructor(direction,x,y,img,w,h) {
this.width = w;//子弹的宽
this.height = h;//子弹的高
this.hurt = 1;//伤害
this.speed = 5;//速度
this.direction = direction;//移动方向【left right top bottom】
this.x = x;//x坐标
this.y = y;//y坐标
this.img = img;//子弹的皮肤
this.distance = 0;//子弹的距离
}
}
//变成对象
const tank = new Tank("ff1ufcv432","二营长",100,500,"img/t_top.png");
//（独立团 游戏引擎-方向控制）
setInterval(function(){
//判断移动方向
if(tank.direction == "left"){
//x减去速度
tank.x -= tank.speed;
}else if(tank.direction == "right"){
tank.x += tank.speed;
}else if(tank.direction == "top"){
tank.y += tank.speed;
}else if(tank.direction == "bottom"){
tank.y -= tank.speed;
}
},1);//每一毫秒执行一次
setInterval(function(){//把对象的属性渲染给div
//把对象的属性渲染到页面上
myTank.style.width = tank.width + "px";
myTank.style.height = tank.height + "px";
myTank.style.backgroundImage = `url(${tank.img})`;
myTank.style.left = tank.x + "px";
myTank.style.bottom = tank.y + "px";
},1);
//监听键盘事件
document.onkeydown = function(event){
//固定语法（获取事件）
event = event || window.event;
//获取键盘状态码
var number = event.keyCode;
//alert(number);
//左上右下 37 38 39 40
//WASD 87 65 83 68
if(number == 37){
//给对象的属性赋值
tank.direction = "left";
tank.img = "img/t_left.png";
}else if(number == 38){
tank.direction = "top";
tank.img = "img/t_top.png";
}else if(number == 39){
tank.direction = "right";
tank.img = "img/t_right.png";
}else if(number == 40){
tank.direction = "bottom";
tank.img = "img/t_buttom.png";
}else if(number == 32){//空格
tank.direction = "center";
}else if(number == 16){//shift
if(tank.speed == 1){//必须是原始速度才能加速
tank.speed = 5;
setTimeout(function(){//多少秒之后执行一次
tank.speed = 1;
},2000);
}
}else if(number == 17){//ctrl 发送子弹
if(tank.direction == "left"){
//坦克的y + 1/2坦克的高 - 1/2子弹的高
var y = tank.y + (0.5 * tank.height) - (0.5 * 17);
const bullet = new Bullet(tank.direction,tank.x,y,"img/b_left.png",78,17);
//把创建好的对象放数组里面
bulletList.push(bullet);
}else if(tank.direction == "right"){
var y = tank.y + (0.5 * tank.height) - (0.5 * 17);
var x = tank.x + tank.width;
const bullet = new Bullet(tank.direction,x,y,"img/b_right.png",78,17);
bulletList.push(bullet);
}else if(tank.direction == "top"){
var y = tank.y + tank.height;
var x = tank.x + (0.5 * tank.width) - (0.5 * 16);
const bullet = new Bullet(tank.direction,x,y,"img/b_top.png",16,55);
bulletList.push(bullet);
}else if(tank.direction == "bottom"){
var x = tank.x + (0.5 * tank.width) - (0.5 * 16);
const bullet = new Bullet(tank.direction,x,tank.y,"img/b_buttom.png",16,55);
bulletList.push(bullet);
}
}
}
//渲染子弹放在页面上
setInterval(function(){
bullets.innerHTML = "";
//循环子弹数组
for(var i=0; i<bulletList.length; i++){
//创建一个子弹div
var bulletDiv = document.createElement("div");
bulletDiv.className = "bullet";//给div添加class
bulletDiv.style.width = bulletList[i].width + "px";//样式宽等于对象宽
bulletDiv.style.height = bulletList[i].height + "px";
bulletDiv.style.backgroundImage = `url(${bulletList[i].img})`;//子弹背景图片
bulletDiv.style.left = bulletList[i].x + "px";
bulletDiv.style.bottom = bulletList[i].y + "px";
bullets.insertBefore(bulletDiv,bullets.lastChild);//追加到子弹层
}
},1);
</script>
</html>
最后修改于 2022-05-18 15:06:55
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
