jQuery-植物大战僵尸
2020-01-16 本文已影响0人
薛定谔的程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="../css/植物大战僵尸.css">
</head>
<body>
<div id="container">
<button >stop</button>
<button>begin</button>
<button>加速</button>
<div id="bg1" class="bg"></div>
<div id="bg2" class="bg"></div>
<div id="name" onselectstart="return false">植物大战僵尸2.0</div>
<div id="begin"><span>开始游戏</span></div>
<div id="plane"></div>
<div id="img"></div>
<div id="imga"></div>
<!-- <div class="boss"></div>-->
</div>
<script src="../js/植物大战僵尸.js"></script>
</body>
</html>
//生成随机数
function randomNum(min, max) {
let num = parseInt(Math.random() * (max - min) + min);
return num;
}
let T = -50;
(function ($) {
$.fn.extend({
//背景循环
bgCycle: function () {
setInterval(function () {
$('#bg1,#bg2').css({top: '+=1'});
if (parseInt($('#bg1').css('top')) > 600) {
$('#bg1').css('top', '0')
}
if (parseInt($('#bg2').css('top')) > 0) {
let count = -600;
$('#bg2').css({top: count})
}
}, 20)
},
//小蜜蜂移动
move: function () {
$(this).on('mousedown', function (e) {
let Left = Math.round($("#container").offset().left);//container距离页面left的值
let W = Math.round($('#container').width());
let H = Math.round($('#container').height());
let w = Math.round($('#plane').width());
let h = Math.round($('#plane').height());
let l = parseInt($(this).css("left"));
let t = parseInt($(this).css("top"));
//鼠标和div的间距
let disX = e.pageX - Left - l;
let disY = e.pageY - t;
$(document).on('mousemove', function (e) {
let x = e.pageX - disX - Left;
let y = e.pageY - disY;
if (x < -10) {
x = -10
}
if (x > W - w + 10) {
x = W - w + 10
}
if (y < 0) {
y = 0
}
if (y > H - h) {
y = H - h
}
$('#plane').css({left: x, top: y});
});
$(document).on('mouseup', function () {
$(document).off('mousemove');
})
})
},
//生成子弹
shoot: function () {
let creat_time = setInterval(function () {
let newel = $('<div class="shoot"></div>');
let x = parseInt($("#plane").css("left")) + 25;
let y = parseInt($("#plane").css("top"));
newel.css({left: x, top: y});
newel.appendTo($('#container'));
}, 200)
},
//子弹运动
shoot_move: function () {
let s_timer = setInterval(function () {
$('.shoot').css({top: '-=10'});
let allShoot = document.querySelectorAll('.shoot');
for (let i = 0; i < allShoot.length; i++) {
if (allShoot[i].offsetTop < 0) {
allShoot[i].parentNode.removeChild(allShoot[i]);
}
}
}, 30);
},
//点击stop
stop: function () {
$(this).on('click', function () {
for (let i = 0; i < 100; i++) {
clearInterval(i);
}
let audio = document.getElementById('audio');
if (audio.played) {
audio.pause();
}
});
},
//生成敌方
bad: function () {
setInterval(() => {
let bad = $('<div class="bad"></div>');
bad.appendTo($('#container'));
bad.css({left: randomNum(0, 350), top: T});
}, 900)
},
//敌方移动
bad_move: function () {
setInterval(() => {
$('.bad').css({top: '+=1'});
if (parseInt($('.bad').css('top')) > 550) {
let over_window = $('<div class="over_window">Game over</div>');
over_window.appendTo($('#container'));
for (let i = 0; i < 100; i++) {
clearInterval(i);
}
let audio = document.getElementById('audio');
if (audio.play) {
audio.pause();
}
$('button').hide();
$('<button class="restart">Try again</button>').appendTo($('#container'));
$(".restart").animate({borderRadius: 30, left: 25, width: 350}, 1000);
$('.restart').on('mouseup', function () {
location.reload();
})
}
}, 10)
},
//boss生成
boss: function () {
setTimeout(() => {
setInterval(() => {
let B = $('<div class="boss"></div>');
B.appendTo($("#container"));
//必须设置B添加到container中，下行用B来设置样式，用$('.boss')设置存在问题
B.css({left: randomNum(0, 250), top: T});
}, 2000);
}, 2000);
},
//boss移动
boss_move: function () {
setInterval(() => {
$('.boss').css({top: '+=1'});
//到达下方
if (parseInt($(".boss").css('top')) > 450) {
$('<div class="over_window">Game over</div>').appendTo($('#container'));
for (let i = 0; i < 100; i++) {
clearInterval(i);
}
let audio = document.getElementById('audio');
if (audio.play) {
audio.pause();
}
$('button').hide();
$('<button class="restart">Try again</button>').appendTo($('#container'));
$(".restart").animate({borderRadius: 30, left: 25, width: 350}, 1000);
$('.restart').on('mouseup', function () {
location.reload();
})
}
}, 10)
},
//boss碰撞检测
boss_check: function () {
function check(obj1, obj2) {
let obj1Left = obj1.offsetLeft;
let obj1Width = obj1.offsetWidth + obj1Left;
let obj1Top = obj1.offsetTop;
let obj1Height = obj1Top + obj1.offsetHeight;
let obj2Left = obj2.offsetLeft;
let obj2Width = obj2.offsetWidth + obj2Left;
let obj2Top = obj2.offsetTop;
let obj2Height = obj2Top + obj2.offsetHeight;
if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {
return true;
} else {
return false;
}
}
setInterval(() => {
let shoot = document.getElementsByClassName('shoot');
let con = document.getElementById('container');
let boss = document.getElementsByClassName('boss');
for (let i=0;i<shoot.length;i++){
for (let j=0;j<boss.length;j++){
let a = shoot[i];
let b = boss[j];
if (check(a,b)){
console.log(parseInt($('.boss').css('fontSize')));
con.removeChild(a);
$('.boss').css({fontSize:'-=20'});
}
if (parseInt($('.boss').css('fontSize'))<=0){
con.removeChild(b);
}
}
}
}, 10)
},
//碰撞检测+计分
check_block_collision: function () {
function check(obj1, obj2) {
let obj1Left = obj1.offsetLeft;
let obj1Width = obj1.offsetWidth + obj1Left;
let obj1Top = obj1.offsetTop;
let obj1Height = obj1Top + obj1.offsetHeight;
let obj2Left = obj2.offsetLeft;
let obj2Width = obj2.offsetWidth + obj2Left;
let obj2Top = obj2.offsetTop;
let obj2Height = obj2Top + obj2.offsetHeight;
if (!(obj1Left > obj2Width || obj1Width < obj2Left || obj1Top > obj2Height || obj1Height < obj2Top)) {
return true;
} else {
return false;
}
}
setInterval(() => {
let shoot = document.getElementsByClassName('shoot');
let bad = document.getElementsByClassName('bad');
let con = document.getElementById('container');
for (let i = 0; i < shoot.length; i++) {
for (let j = 0; j < bad.length; j++) {
let a = shoot[i];
let b = bad[j];
if (check(a, b)) {
con.removeChild(a);
con.removeChild(b);
}
}
}
}, 10)
},
//小蜜蜂变身
changebg: function () {
setInterval(function () {
$('#plane').css({
background: 'url("../img/mifeng1.png") no-repeat 5px',
backgroundSize: '100% 100%'
})
}, 500)
},
//背景音乐
mucis: function () {
},
//stop/begin切换
begin: function () {
$('button:first').on('click', function () {
$(this).hide();
$("button:eq(2)").hide();
$('button:eq(1)').css({display: 'block'}).animate({
width: 400,
height: 100,
opacity: 0.8,
fontSize: 50,
top: 200
})
});
$('button:eq(1)').on('click', function () {
$('button:first').show();
$("button:eq(2)").show();
$(this).animate({width: 50, height: 30, top: 0, left: 0, fontSize: 1, opacity: 0});
setTimeout(function () {
for (let i = 0; i < 100; i++) {
clearInterval(i);
}
$('#container').bgCycle();
$('#plane').move();
$('#plane').shoot();
$('#plane').shoot_move();
$('#img').bad();
$('#container').bad_move();
$('#container').check_block_collision();
// $("#plane").changebg();
$('button:first').stop();
$("#button:eq(1)").begin();
let audio = document.getElementById('audio');
if (audio.pause) {
audio.play();
}
}, 0)
});
},
//加速
speed: function () {
$('button:eq(2)').on('mousedown', function () {
$('#container').bgCycle();
$('#plane').move();
$('#plane').shoot();
$('#plane').shoot_move();
$('#img').bad();
$('#container').bad_move();
$('#container').check_block_collision();
// $("#plane").changebg();
$('button:first').stop();
$("#button:eq(1)").begin();
})
}
})
})(jQuery);
//开始游戏
$('#begin').on('mouseup', function () {
$(this).animate({opacity: 0, top: 800}, 500);
$("#img").animate({opacity: 0}, 1000);
$('#plane').show();
$('#container').bgCycle();
$('#plane').move();
$('#plane').shoot();
$('#plane').shoot_move();
$('#img').bad();
$('#container').bad_move();
$('#container').check_block_collision();
// $("#plane").changebg();
$('button:first').stop();
$("#button:eq(1)").begin();
$('<audio id="audio" src="../img/植物大战僵尸bgm.mp3" autoplay></audio>').appendTo($('#container'))
$('#name').animate({left: -400}, 1000);
$('button:eq(2)').speed();
$('#imga').animate({top: 600}, 1000);
$('#container').boss();
$("#container").boss_move();
$("#container").boss_check();
});
* {
margin: 0;
padding: 0
}
#container {
position: relative;
width: 400px;
height: 600px;
margin: 0 auto;
background: #a3a3a3;
overflow: hidden;
box-shadow: 0 0 2px 2px rgba(100,100,100,0.5);
}
.bg {
width: 400px;
height: 600px;
position: absolute;
/*background: url("../img/bgthree.jpg");*/
background: url("../img/gamebg_03.png");
/*transform: rotate(90deg);*/
/*background-size: 100% 100%;*/
}
#bg2 {
top: -600px;
}
button:first-child {
width: 50px;
height: 30px;
position: absolute;
z-index: 2;
filter: opacity(50%);
border-radius: 10px;
color: white;
background-color: #11213b;
font-size: 1rem;
}
button:nth-child(2) {
width: 400px;
height: 100px;
position: absolute;
z-index: 1;
filter: opacity(80%);
border-radius: 10px;
color: white;
background-color: #11213b;
font-size: 4rem;
font-weight: bold;
display: none;
top: 200px;
/*background: url("../img/zhiwuda.jpg");*/
/*background-size: 100% 100%;*/
}
button:nth-child(2):hover{
color: #46ffff;
}
button:nth-child(3){
position:absolute;
top: 0;
left: 55px;
width: 50px;
height: 30px;
z-index: 1;
filter: opacity(50%);
border-radius: 10px;
color: white;
background-color: #11213b;
}
#plane {
width: 100px;
height: 80px;
position: absolute;
background: url("../img/豌豆.png") no-repeat;
transform: rotate(-90deg);
background-size: 100% 100%;
top: 400px;
left: 150px;
display: none;
}
.shoot {
width: 20px;
height: 20px;
border-radius: 50%;
background: radial-gradient(farthest-side at 60% 10%, greenyellow, black);
position: absolute;
/*border-top-left-radius: 5px;*/
/*border-top-right-radius: 5px;*/
}
.bad {
width: 50px;
height: 80px;
background: url("../img/bad.png") no-repeat;
background-size: 100%;
position: absolute;
}
.over_window {
position: absolute;
top: 30%;
left: -50px;
width: 500px;
height: 100px;
background: linear-gradient(white 10%, greenyellow 10%, #46ffff);
font-weight: bold;
font-size: 50px;
color: #a3a3a3;
text-align: center;
transform: rotate(-20deg);
}
body {
background: url("../img/gamebg_03.png");
}
#begin {
position: absolute;
top: 300px;
left: -5px;
width: 410px;
height: 100px;
text-align: center;
font-size: 60px;
cursor: pointer;
font-family: 方正粗黑宋简体, serif;
background: linear-gradient(200deg, orange, orchid, wheat, #f4511e, blue);
text-shadow: 0 0 0 #cccccc, 1px 1px 0 #3e8e41, 2px 2px 0 #92bde7, 3px 3px 0 #cccccc, 4px 4px 0
#cccccc, 5px 5px 0 #cccccc;
text-decoration: none;
outline: none;
color: #fff;
border: none;
border-radius: 15px;
box-shadow: 0 9px #999;
}
#begin:hover {
background: linear-gradient(90deg, #727d8f, wheat, black);
}
#begin:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}
#begin span{
}
#name{
color: yellow;
font-size: 30px;
font-family: "Adobe Arabic";
position: absolute;
top: 20px;
width: 400px;
text-align: center;
font-weight: bold;
}
#img{
position: absolute;
top: 80px;
width: 400px;
height: 220px;
background: url("../img/zhiwuda.jpg");
background-size: 100% 100%;
}
#imga{
position: absolute;
top: 400px;
width: 400px;
height: 200px;
background: url("../img/zhiwuda2.jpg");
background-size: 100% 100%;
}
.restart{
position: absolute;
top: 400px;
width: 250px;
height: 100px;
/*box-shadow: 0 0 1px 1px rgba(000,100,255,0.6);*/
left: 50px;
background: linear-gradient(60deg,darkslateblue 10%,green 50%,darkmagenta);
text-align: center;
font-size: 30px;
font-weight: bold;
color: #d7ddde;
filter: hue-rotate(200deg);
outline: none;
}
.restart:hover{
filter: none;
}
.boss{
position: absolute;
width: 150px;
height: 150px;
background: url("../img/僵尸.png") -10px -50px;
background-size: 135% 130%;
font-size: 100px;
}
image.png
image.png
image.png
image.png
bandicam-2020-01-16-20-55-33-22.gif
