素材下载
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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;
}
.bulletsEnemy{
width: 100%;
height: 100%;
position: fixed;
top: 0;
z-index: 999999;
}
.bulletEnemy{
position: fixed;
background-size: 100% 100%;
}
.hp{
height: 30px;
background-color:red;
position: fixed;
top: 0;
left: 0;
border-radius: 30px;
z-index: 9999999;
color: #FFFFFF;
text-align: center;
line-height: 30px;
}
.message{
width: 900px;
height: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 9999999999;
text-align: center;
line-height: 300px;
color: #fff;
font-size: 40px;
font-weight: 900;
border: 5px solid #FFFFFF;
}
.timer{
width: 250px;
height: 40px;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 9999999999;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: 500;
border: 2px solid #FFFFFF;
}
.gkStep{
width: 250px;
height: 40px;
position: fixed;
bottom: 60px;
right: 10px;
z-index: 9999999999;
text-align: center;
line-height: 40px;
color: #fff;
font-size: 20px;
font-weight: 500;
border: 2px solid #FFFFFF;
}
</style>
</head>
<body>
<div class="gkStep" id="gkStep">
</div>
<div class="timer" id="timer">
</div>
<div class="message" id="message">
</div>
<div class="hp" id="tankHp" style="width: 100%">血条</div>
<!-- 用于渲染别的坦克 -->
<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>
<!-- 用于放敌人子弹的div -->
<div id="bulletsEnemy" class="bulletsEnemy">
<div class="bulletEnemy">
</div>
</div>
</body>
<script type="text/javascript">
//关卡配置
var stepList = {
step:0,//当前关卡
data:[//关卡时间配置
{'tankTime':1000,time:20},
{'tankTime':900,time:8},
{'tankTime':800,time:9},
{'tankTime':700,time:10},
{'tankTime':600,time:11},
{'tankTime':500,time:10},
{'tankTime':500,time:11},
{'tankTime':800,time:12},
{'tankTime':500,time:20},
{'tankTime':900,time:30},
{'tankTime':500,time:20},
{'tankTime':1000,time:30},
{'tankTime':500,time:12},
{'tankTime':800,time:13},
{'tankTime':500,time:13},
{'tankTime':900,time:10},
{'tankTime':500,time:13},
{'tankTime':800,time:14},
{'tankTime':500,time:12},
{'tankTime':900,time:13}
]
};
//找到放坦克的位置
var bg = document.getElementById("bg");
//获取子弹层
var bullets = document.getElementById("bullets");
//（坦克 渲染模块）
var myTank = document.getElementById("ff1ufcv432");
//敌人坦克层
var tankEnemy = document.getElementById("tankEnemy");
//敌人子弹层
var bulletsEnemy = document.getElementById("bulletsEnemy");
//血条
var tankHp = document.getElementById("tankHp");
//消息层
var message = document.getElementById("message");
//关卡信息
var gkStep = document.getElementById("gkStep");
//坚持
var timer = document.getElementById("timer");
//用来放子弹的容器
var bulletList = [];
//子弹冷却 - 状态
var bulletCD = true;
//子弹冷却 - 时间
var bulletCDTime = 300;
//放敌方坦克的容器
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 = 10;//现在血量
this.hpMax = 10;//最大血量
this.direction = direction;//移动方向【left right top bottom center】
this.lastDirection = ""
this.x = x;//x坐标
this.y = y;//y坐标
this.isShow = true;//显示
this.img = img;//坦克的皮肤
}
}
//变成对象
const tank = new Tank("ff1ufcv432","二营长",100,500,"img/t_top.png","center",1);
//子弹
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;//子弹的距离
}
}
//（独立团 游戏引擎-方向控制）
function fxkz(){
//判断移动方向
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;
}
}
//把对象的属性渲染给div
function tkxr(){
if(tank.isShow == true){
//把对象的属性渲染到页面上
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";
//血量
var hpWidth = (tank.hp / tank.hpMax) * 100;
tankHp.style.width = hpWidth+"%";
tankHp.innerText = "血量："+tank.hp;
}else{
tankHp.style.width = "0%";
tankHp.innerText="";
message.innerText="GAME OVER";
message.style.display = "block";
//结束关卡和倒计时
clearInterval(sctkInter);
clearInterval(gkInter);
}
}
//监听键盘事件
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.lastDirection = "left";
tank.img = "img/t_left.png";
}else if(number == 38){
tank.direction = "top";
tank.lastDirection = "top";
tank.img = "img/t_top.png";
}else if(number == 39){
tank.direction = "right";
tank.lastDirection = "right";
tank.img = "img/t_right.png";
}else if(number == 40){
tank.direction = "bottom";
tank.lastDirection = "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 = 1.7;
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);
}else if(tank.direction == "center"){
if(tank.lastDirection == "left"){
//坦克的y + 1/2坦克的高 - 1/2子弹的高
var y = tank.y + (0.5 * tank.height) - (0.5 * 6);
const bullet = new Bullet(tank.lastDirection,tank.x,y,"img/b_left.png",47,6,5);
//把创建好的对象放数组里面
bulletList.push(bullet);
}else if(tank.lastDirection == "right"){
var y = tank.y + (0.5 * tank.height) - (0.5 * 6);
var x = tank.x + tank.width;
const bullet = new Bullet(tank.lastDirection,x,y,"img/b_right.png",47,6,5);
bulletList.push(bullet);
}else if(tank.lastDirection == "top"){
var y = tank.y + tank.height;
var x = tank.x + (0.5 * tank.width) - (0.5 * 6);
const bullet = new Bullet(tank.lastDirection,x,y,"img/b_top.png",6,47,5);
bulletList.push(bullet);
}else if(tank.lastDirection == "bottom"){
var x = tank.x + (0.5 * tank.width) - (0.5 * 6);
const bullet = new Bullet(tank.lastDirection,x,tank.y,"img/b_buttom.png",6,47,5);
bulletList.push(bullet);
}
}
}
}
//渲染子弹放在页面上 - 自己
function zdxrmy(){
bullets.innerHTML = "";
//循环子弹数组
for(var i=0; i<bulletEnemys.length; i++){
//创建一个子弹div
var bulletDiv = document.createElement("div");
bulletDiv.className = "bullet";//给div添加class
bulletDiv.style.width = bulletEnemys[i].width + "px";//样式宽等于对象宽
bulletDiv.style.height = bulletEnemys[i].height + "px";
bulletDiv.style.backgroundImage = `url(${bulletEnemys[i].img})`;//子弹背景图片
bulletDiv.style.left = bulletEnemys[i].x + "px";
bulletDiv.style.bottom = bulletEnemys[i].y + "px";
bullets.insertBefore(bulletDiv,bullets.lastChild);//追加到子弹层
}
}
//渲染子弹放在页面上 - 敌方
function zdxrdf(){
bulletsEnemy.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";
bulletsEnemy.insertBefore(bulletDiv,bulletsEnemy.lastChild);//追加到子弹层
}
}
//改变子弹的位置 - 自己
function zdwzmy(){
//循环子弹数组
for(var i=0; i<bulletList.length; i++){
//从数组里取出对象
var bulletObj = bulletList[i];
//给子弹对象加距离
//当前的距离加上子弹的速度
bulletObj.distance = bulletObj.distance + bulletObj.speed;
if(bulletObj.distance > 6000){
bulletList.splice(i,1);
//结束本次循环
continue;
}
//console.log("数组长度",bulletList.length);
if(bulletObj.direction == "left"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.x = bulletObj.x - bulletObj.speed;
if(bulletObj.x<0){
bulletObj.direction = "right";
}
}
if(bulletObj.direction == "right"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.x = bulletObj.x + bulletObj.speed;
if(bulletObj.x > 1920){
bulletObj.direction = "left";
}
}
if(bulletObj.direction == "top"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.y = bulletObj.y + bulletObj.speed;
if(bulletObj.y > 1080){
bulletObj.direction = "bottom";
}
}
if(bulletObj.direction == "bottom"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.y = bulletObj.y - bulletObj.speed;
if(bulletObj.y < 0){
bulletObj.direction = "top";
}
}
//把修改完成的对象返回给数组
bulletList[i] = bulletObj;
}
}
//改变子弹的位置 - 敌方
function zdwzdf(){
//循环子弹数组
for(var i=0; i<bulletEnemys.length; i++){
//从数组里取出对象
var bulletObj = bulletEnemys[i];
//给子弹对象加距离
//当前的距离加上子弹的速度
bulletObj.distance = bulletObj.distance + bulletObj.speed;
if(bulletObj.distance > 2000){
bulletEnemys.splice(i,1);
//结束本次循环
continue;
}
//console.log("数组长度",bulletList.length);
if(bulletObj.direction == "left"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.x = bulletObj.x - bulletObj.speed;
if(bulletObj.x<0){
bulletObj.direction = "right";
}
}
if(bulletObj.direction == "right"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.x = bulletObj.x + bulletObj.speed;
if(bulletObj.x > 1920){
bulletObj.direction = "left";
}
}
if(bulletObj.direction == "top"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.y = bulletObj.y + bulletObj.speed;
if(bulletObj.y > 1080){
bulletObj.direction = "bottom";
}
}
if(bulletObj.direction == "bottom"){
//子弹的位置 = 子弹位置 - 子弹速度
bulletObj.y = bulletObj.y - bulletObj.speed;
if(bulletObj.y < 0){
bulletObj.direction = "top";
}
}
//把修改完成的对象返回给数组
bulletEnemys[i] = bulletObj;
}
}
//生成人机坦克
function scrjtk(){
//随机数 0 - 3 随机数 随机方向
var num = Math.floor(Math.random()*6);
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);
}else if(num == 4){
const tank1 = new Tank("c","二营长",tank.x,-60,"img/t1_bottom.png","top",1.6);
const tank2 = new Tank("d","二营长",-60,tank.y,"img/t1_left.png","right",1.6);
tankEnemys.push(tank1);
tankEnemys.push(tank2);
}else if(num == 5){
const tank1 = new Tank("a","二营长",tank.x,1100,"img/t1_top.png","bottom",1.6);
const tank2 = new Tank("b","二营长",1950,tank.y,"img/t1_right.png","left",1.6);
tankEnemys.push(tank1);
tankEnemys.push(tank2);
}
}
//让敌人坦克动起来
function drtkmove(){
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;
}
}
//把敌人坦克渲染到页面上
function sftkxr(){
//清除敌人坦克层的数据
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);
}
}
//让敌人坦克发射子弹
function dftkfs(){
//循环所有坦克
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);
//把创建好的对象放数组里面
bulletEnemys.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);
bulletEnemys.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);
bulletEnemys.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_bottom.png",30,30,3);
bulletEnemys.push(bullet);
}
}
}
//己方子弹伤害
function jfshpd(){
//循环子弹数组
for(var i=0; i<bulletList.length; i++){
//从数组里取出对象
var bulletObj = bulletList[i];
for(var j=0; j<tankEnemys.length; j++){
var tank = tankEnemys[j];
//子弹在坦克的右边
if((bulletObj.x + bulletObj.width) >= tank.x){
//又在坦克的左边
if(bulletObj.x <= (tank.x + tank.width)){
//在坦克的上边
if((bulletObj.y + bulletObj.height) >= tank.y){
//又在坦克的下边
if(bulletObj.y <= (tank.y + tank.height)){
//击中后移除子弹
tankEnemys.splice(j,1);
}
}
}
}
}
}
}
//判断子弹是否打中坦克 和坦克间是否碰撞 tank
function shpd(){
//循环子弹数组
for(var i=0; i<bulletEnemys.length; i++){
//从数组里取出对象
var bulletObj = bulletEnemys[i];
//子弹在坦克的右边
if((bulletObj.x + bulletObj.width) >= tank.x){
//又在坦克的左边
if(bulletObj.x <= (tank.x + tank.width)){
//在坦克的上边
if((bulletObj.y + bulletObj.height) >= tank.y){
//又在坦克的下边
if(bulletObj.y <= (tank.y + tank.height)){
//击中后移除子弹
bulletEnemys.splice(i,1);
//被击中
tank.hp = tank.hp - bulletObj.hurt;
if(tank.hp == 0){//挂掉
tank.isShow = false;
}
}
}
}
}
}
}
var djsTime = 5;
//关卡计时器
var djsTimeInterval = setInterval(function(){
message.innerText = "游戏还有:"+djsTime+"秒开始";
djsTime--;
if(djsTime == 0){
message.style.display = "none";
//方向控制
setInterval("fxkz()",1);
//坦克渲染
setInterval("tkxr()",1);
//子弹渲染
setInterval("zdxrmy()",1);
//子弹渲染 - 敌方
setInterval("zdxrdf()",1);
//子弹位置
setInterval("zdwzmy()",1);
//子弹位置 - 敌方
setInterval("zdwzdf()",1);
//敌人坦克移动
setInterval("drtkmove()",1);
//敌人天坦克到页面
setInterval("sftkxr()",1);
//敌人坦克发射子弹
drzd = setInterval("dftkfs()",700);
//伤害判断
setInterval("shpd()",1);
//己方子弹伤害
setInterval("jfshpd()",1);
//倒计时结束
clearInterval(djsTimeInterval);
//关卡加载
gkjz();
}
},1000);
//生成敌方坦克
var sctkInter;
//关卡倒计时
var gkInter;
var drzd;
//定时器
var djsNum = 0;
function gkjz(){
gkStep.innerHTML = "第"+(stepList.step+1)+"关";
//生成人机坦克
sctkInter = setInterval("scrjtk()",stepList.data[stepList.step].tankTime);
djsNum = stepList.data[stepList.step].time;
gkInter = setInterval(function(){
timer.innerText = "坚持:" + djsNum + "秒";
djsNum--;
if(djsNum == 0){
if(tank.hpMax - tank.hp >= 1){
tank.hp = tank.hp + 3;
}
// if(stepList.step > 9){
// clearInterval(drzd);
// drzd = setInterval("dftkfs()",700);
// }
// if(stepList.step > 13){
// clearInterval(drzd);
// drzd = setInterval("dftkfs()",600);
// }
clearInterval(sctkInter);
clearInterval(gkInter);
stepList.step = stepList.step+1;
message.innerHTML = "第:"+(stepList.step+1)+"关 坚持"+stepList.data[stepList.step].time+"秒";
message.style.display = "block";
setTimeout(function(){
message.style.display = "none";
gkjz();
},10000);
}
},1000);
}
//屏幕外掉血
function BUG1(){
if(tank.x < 0 || tank.x > 1920 || tank.y < 0 || tank.y > 1080){
tank.hp = tank.hp - 1;
if(tank.hp == 0){
tank.isShow = false;
}
}
}
setInterval("BUG1()",1000);
class Car{//类
constructor(a) {//构造函数
this.money = a;//属性
}
}
const car = new Car(1000);//实例化类
car.money = 500;//修改对象属性
</script>
</html>
最后修改于 2022-05-26 11:54:02
如果觉得我的文章对你有用，请随意赞赏
扫一扫支付
