素材
<!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%;
}
.tank-enemy{
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 9999;
}
</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>
<div id="tankEnemy" class="tank-enemy">
</div>
</body>
<script type="text/javascript">
//找到放坦克的位置
var bg = document.getElementById("bg");
//获取子弹层
var bullets = document.getElementById("bullets");
//（坦克 渲染模块）
var myTank = document.getElementById("ff1ufcv432");
//敌人坦克层
var tankEnemy = document.getElementById("tankEnemy");
//用来放子弹的容器
var bulletList = [];
//子弹冷却 - 状态
var bulletCD = true;
//子弹冷却 - 时间
var bulletCDTime = 1000;
//放敌方坦克的容器
var tankEnemys = [];
//敌方坦克的子弹容器
var bulletEnemys = [];
//坦克的类
class Tank{
constructor(id,name,x,y,img,direction,speed) {//构造函数
this.id = id;//用户ID 每个人不能一样
this.name = name;
this.width = 50;//坦克的宽
this.height = 50;//坦克的高
this.speed = speed;//速度
this.hp = 5;//血量
this.direction = direction;//移动方向【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,speed) {
this.width = w;//子弹的宽
this.height = h;//子弹的高
this.hurt = 1;//伤害
this.speed = speed;//速度
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","center",1);
//（独立团 游戏引擎-方向控制）
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 = 2;
setTimeout(function(){//多少秒之后执行一次
tank.speed = 1;
},2000);
}
}else if(number == 17){//ctrl 发送子弹
//判断是否在冷却
if(bulletCD != true){
//结束下面的代码（跳出）
return;
}
//开始冷却
bulletCD = false;
//冷却倒计时定时器
setTimeout(function(){
bulletCD = true;
},bulletCDTime);
if(tank.direction == "left"){
//坦克的y + 1/2坦克的高 - 1/2子弹的高
var y = tank.y + (0.5 * tank.height) - (0.5 * 6);
const bullet = new Bullet(tank.direction,tank.x,y,"img/b_left.png",47,6,5);
//把创建好的对象放数组里面
bulletList.push(bullet);
}else if(tank.direction == "right"){
var y = tank.y + (0.5 * tank.height) - (0.5 * 6);
var x = tank.x + tank.width;
const bullet = new Bullet(tank.direction,x,y,"img/b_right.png",47,6,5);
bulletList.push(bullet);
}else if(tank.direction == "top"){
var y = tank.y + tank.height;
var x = tank.x + (0.5 * tank.width) - (0.5 * 6);
const bullet = new Bullet(tank.direction,x,y,"img/b_top.png",6,47,5);
bulletList.push(bullet);
}else if(tank.direction == "bottom"){
var x = tank.x + (0.5 * tank.width) - (0.5 * 6);
const bullet = new Bullet(tank.direction,x,tank.y,"img/b_buttom.png",6,47,5);
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);
//改变子弹的位置
setInterval(function(){
//循环子弹数组
for(var i=0; i<bulletList.length; i++){
//从数组里取出对象
var bulletObj = bulletList[i];
//给子弹对象加距离
//当前的距离加上子弹的速度
bulletObj.distance = bulletObj.distance + bulletObj.speed;
if(bulletObj.distance > 1920){
bulletList.splice(i,1);
//结束本次循环
continue;
}
//console.log("数组长度",bulletList.length);
if(bulletObj.direction == "left"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.x = bulletObj.x - bulletObj.speed;
}
if(bulletObj.direction == "right"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.x = bulletObj.x + bulletObj.speed;
}
if(bulletObj.direction == "top"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.y = bulletObj.y + bulletObj.speed;
}
if(bulletObj.direction == "bottom"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.y = bulletObj.y - bulletObj.speed;
}
//把修改完成的对象返回给数组
bulletList[i] = bulletObj;
}
},1);
//生成人机坦克
setInterval(function(){
//随机数 0 - 3 随机数 随机方向
var num = Math.floor(Math.random()*4);
if(num == 0){//上
var x = Math.floor(Math.random()*1871);
const tank = new Tank("a","二营长",x,1100,"img/t1_top.png","bottom",1.5);
tankEnemys.push(tank);
}else if(num == 1){//右
var y = Math.floor(Math.random()*1031);
const tank = new Tank("b","二营长",1950,y,"img/t1_right.png","left",1.5);
tankEnemys.push(tank);
}else if(num == 2){//下
var x = Math.floor(Math.random()*1871);
const tank = new Tank("c","二营长",x,-60,"img/t1_bottom.png","top",1.5);
tankEnemys.push(tank);
}else if(num == 3){//左
var y = Math.floor(Math.random()*1031);
const tank = new Tank("d","二营长",-60,y,"img/t1_left.png","right",1.5);
tankEnemys.push(tank);
}
},400);
//让敌人坦克动起来
setInterval(function(){
for(var i = 0; i<tankEnemys.length;i++){
var tank = tankEnemys[i];
//判断移动方向
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;
}
tankEnemys[i] = tank;
}
},1);
//把敌人坦克渲染到页面上
setInterval(function(){
//清除敌人坦克层的数据
tankEnemy.innerHTML = ""
for(var i = 0; i<tankEnemys.length;i++){
var tank = tankEnemys[i];
//判断如果超出屏幕
if(tank.x < -60 || tank.x > 1950){
//数组里移除坦克对象
tankEnemys.splice(i,1);
}
if(tank.y < -60 || tank.y > 1150){
tankEnemys.splice(i,1);
}
var tankDiv = document.createElement("div");
tankDiv.className = "tank";//给div添加class
tankDiv.style.width = tank.width + "px";//样式宽等于对象宽
tankDiv.style.height = tank.height + "px";
tankDiv.style.backgroundImage = `url(${tank.img})`;//子弹背景图片
tankDiv.style.left = tank.x + "px";
tankDiv.style.bottom = tank.y + "px";
//追加到敌人坦克层
tankEnemy.insertBefore(tankDiv,tankEnemy.lastChild);
}
},1);
//让敌人坦克发射子弹
setInterval(function(){
//循环所有坦克
for(var i = 0; i<tankEnemys.length;i++){
var tank = tankEnemys[i];
if(tank.direction == "left"){
//坦克的y + 1/2坦克的高 - 1/2子弹的高
var y = tank.y + (0.5 * tank.height) - (0.5 * 30);
const bullet = new Bullet(tank.direction,tank.x,y,"img/b1_left.png",30,30,3);
//把创建好的对象放数组里面
bulletList.push(bullet);
}else if(tank.direction == "right"){
var y = tank.y + (0.5 * tank.height) - (0.5 * 30);
var x = tank.x + tank.width;
const bullet = new Bullet(tank.direction,x,y,"img/b1_right.png",30,30,3);
bulletList.push(bullet);
}else if(tank.direction == "top"){
var y = tank.y + tank.height;
var x = tank.x + (0.5 * tank.width) - (0.5 * 30);
const bullet = new Bullet(tank.direction,x,y,"img/b1_top.png",30,30,3);
bulletList.push(bullet);
}else if(tank.direction == "bottom"){
var x = tank.x + (0.5 * tank.width) - (0.5 * 30);
const bullet = new Bullet(tank.direction,x,tank.y,"img/b1_buttom.png",30,30,3);
bulletList.push(bullet);
}
}
},1000);
</script>
</html>
最后修改于 2022-05-25 15:08:21
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
