使用javascript实现植物大战僵尸部分功能

实现了植物的种植，随机僵尸的在随机道路上出现，射手们的攻击，土豆雷的生长等，但还有很多bug。

放上代码（判断是用多个定时器写的，比较辣鸡）

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="js/jquery3.6.0.js"></script><title>植物大战僵尸</title><style>body {background: url(img/background1.jpg) no-repeat fixed;background-position: 0% 50%;background-size: 130% 100%;transition: all 1s;z-index: -999;width: 99vw;height: 95.5vh;overflow: hidden;}#dave {position: absolute;bottom: 0px;left: 0px;width: auto;height: 666px;/* display: none; */}.sentence {width: 600px;height: 50px;/* border: 2px solid red; */font-size: 1.7em;line-height: 50px;font-family: cursive;font-weight: bold;position: absolute;bottom: 500px;left: 310px;text-align: center;cursor: pointer;}.readyzombie {width: 300px;height: 75%;/* border: 2px solid red; */position: absolute;top: 100px;right: 180px;display: none;}.readyzombie img {width: 170px;height: auto;display: inline-block;position: absolute;top: 5px;left: 5px;top: calc(var(--i)*50px);left: calc(var(--n)*50px);}#PrepareGrowPlants {width: 280px;height: 100px;/* border: 2px solid red; */position: absolute;top: 45%;left: 45%;background: url(img/PrepareGrowPlants.png) no-repeat;background-position-y: 0%;animation: PrepareGrowPlants 1.5s steps(2) forwards;display: none;}@keyframes PrepareGrowPlants {0% {}100% {background-position-y: 96%;}}#fightingplant {position: absolute;top: 50px;left: 0px;/* border: 1px solid red; */list-style: none;display: none;}#fightingplant li {width: auto;height: 60px;overflow: hidden;margin-bottom: 10px;position: relative;/* border: 1px solid rgb(0, 47, 255); */}#fightingplant img {width: 100%;height: auto;cursor: pointer;/* margin-top: -60px; */}#follow {width: 80px;height: auto;position: fixed;left: -100px;/* z-index: 99; */}#plantedarea {position: absolute;top: 100px;left: 380px;display: none;}#plantedarea tr td {width: 80px;height: 100px;/* background-color: rgba(65, 189, 65, 1); */border-radius: 50%;margin-right: 32px;margin-bottom: 22px;display: inline-block;position: relative;}#plantedarea tr td img {position: absolute;bottom: 10px;/* background-color: red; */}#fightingzombies img {position: absolute;z-index: -1;top: 60px;left: 1330px;}.fightingzombiesimgleft {animation: fightingzombiesimgleft 50s linear forwards;}@keyframes fightingzombiesimgleft {0% {}100% {left: 0px;}}.bullet {position: absolute;top: 25px;left: -5px;z-index: 9;opacity: 0;/* background-color: red; *//* width: 100px; *//* height: 100px; */animation: bullet 4s linear infinite;}@keyframes bullet {0% {}5% {opacity: 1;}51% {opacity: 1;left: 1111px;}52% {opacity: 0;}100% {opacity: 0;left: -5px;}}.PotatoMine {width: 80px;height: 60px;position: absolute;bottom: 10px;background: url(img/PotatoMineNotReady.gif) no-repeat;animation: PotatoMine 1s 5s forwards;}@keyframes PotatoMine {0% {}100% {background: url(img/PotatoMine.gif) no-repeat;}}#ZombiesWon {position: fixed;z-index: 999;width: auto;height: 100%;top: 0px;left: 20%;display: none;}</style>
</head><body><!-- <div class="bullet"></div> --><img src="img/transparent.png" id="follow"><img src="img/Dave3.gif" id="dave"><div class="sentence">哈喽，我的邻居</div><audio src="音频/crazydaveshort1.mp3" autoplay id="daveaudio"></audio><audio src="音频/uraniwani.mp3" autoplay loop id="backgroundaudio"></audio><div class="readyzombie"><img src="img/Zombie.gif" style="--i:1;--n:1.3;"><img src="img/FlagZombie.gif" style="--i:2;--n:2;"><img src="img/Conehead.gif" style="--i:3;--n:2.5;"><img src="img/Buckethead.gif" style="--i:4;--n:1.5;"><img src="img/Zombie.gif" style="--i:5;--n:1;"><img src="img/FlagZombie.gif" style="--i:6;--n:2.5;"><img src="img/Conehead.gif" style="--i:7;--n:1;"><img src="img/Buckethead.gif" style="--i:8;--n:1.9;"></div><div id="PrepareGrowPlants"></div><ul id="fightingplant"><li><img src="img/SunFlower.png" data-thissrc="img/SunFlower1.gif"></li><li><img src="img/Peashooter.png" data-thissrc="img/Peashooter.gif"></li><li><img src="img/Squash.png" data-thissrc="img/Squash.gif"></li><li><img src="img/SnowPea.png" data-thissrc="img/SnowPea.gif"></li><li><img src="img/WallNut.png" data-thissrc="img/WallNut.gif"></li><li><img src="img/PotatoMine.png" data-thissrc="img/PotatoMineNotReady.gif"></li><li><img src="img/Repeater.png" data-thissrc="img/Repeater.gif"></li><li><img src="img/Chomper.png" data-thissrc="img/Chomper1.gif"></li></ul><table id="plantedarea" cellspacing="0px"><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr></table><div id="fightingzombies"></div><img src="img/ZombiesWon.png" id="ZombiesWon"><script>let follow = document.querySelector('#follow')let dave = document.querySelector('#dave')let sentence = document.querySelector('.sentence')let daveaudio = document.querySelector('#daveaudio')let body = document.bodylet sentencenum = 1let daveaudionum = 1let fightingzombiesimgleft = 1330const fightingzombiesimgtop = ['60px', '190px', '320px', '425px', '560px']const fightingzombies = ['img/Zombie.gif','img/FlagZombie.gif','img/ConeheadZombie.gif','img/BucketheadZombie.gif']let startfighting = falsefunction accident() {daveaudio.play}accident()const sentencearr = ['哈喽，我的邻居','我姓疯，名戴夫，不过大家都喜欢叫我疯狂戴夫','听好，现在有一批僵尸来到镇上，包围了我们!','你必须用花园里那些不起眼的植物来消灭它们','祝你好运!!!']const daveaudioarr = ['音频/crazydaveshort1.mp3','音频/crazydavelong2.mp3','音频/crazydavelong3.mp3','音频/crazydaveshort3.mp3','音频/crazydavelong2.mp3']sentence.addEventListener('selectstart', (e) => {e.preventDefault();});sentence.addEventListener('click', () => {dave.setAttribute('src', 'img/Dave3.gif')if (sentencenum < 4) {sentencenum++sentence.innerHTML = sentencearr[sentencenum]}if (daveaudionum < 4) {daveaudionum++daveaudio.setAttribute('src', daveaudioarr[daveaudionum])}if (daveaudionum == 4 || sentencenum == 4) {$('#dave,.sentence,#daveaudio').fadeOut(3000)setTimeout(() => {body.style.backgroundPositionX = 100 + '%'}, 2500);setTimeout(() => {$('#SeedChooser,.plantbox').fadeIn(1000)}, 3500);setTimeout(() => {$('.readyzombie').show()}, 3300);setTimeout(() => {$('.readyzombie').fadeOut(500)}, 5500);setTimeout(() => {body.style.backgroundPositionX = 0 + '%'}, 6500);setTimeout(() => {$('#PrepareGrowPlants').show()$('#backgroundaudio').attr('src', '音频/readysetplant.mp3')daveaudio.setAttribute('src', '音频/readysetplant.mp3')}, 7000);setTimeout(() => {$('#PrepareGrowPlants').hide()$('#fightingplant').show()$('#backgroundaudio').attr('src', '音频/ultimate battlel.mp3')$('#plantedarea').show()startfighting = true}, 9000);}})daveaudio.addEventListener('ended', () => {dave.setAttribute('src', 'img/Dave.gif')});$('#fightingplant img').click(function () {let planting = $(this).attr('data-thissrc')follow.setAttribute('src', planting)document.addEventListener('mousemove', (e) => {let x = e.clientXlet y = e.clientYlet w = $(document).height()follow.style.left = x - 40 + 'px'follow.style.bottom = w - y - 40 + 'px'})$('#plantedarea tr td').click(function () {// let followsrc = follow.getAttribute('src')// let demo = $("<td><img src= " + followsrc + " ></td>")// $(this).replaceWith(demo)if ($('#follow').attr('src') == 'img/Peashooter.gif') {let followsrc = follow.getAttribute('src')let demo = $("<td><img src= " + followsrc +" ><img src='img/PB00.gif' class='bullet' ></td>")$(this).replaceWith(demo)} else if ($('#follow').attr('src') == 'img/SnowPea.gif') {let followsrc = follow.getAttribute('src')let demo = $("<td><img src= " + followsrc +" ><img src='img/PB-10.gif' class='bullet' ></td>")$(this).replaceWith(demo)} else if ($('#follow').attr('src') == 'img/Repeater.gif') {let followsrc = follow.getAttribute('src')let demo = $("<td><img src= " + followsrc +" ><img src='img/PB11.png' class='bullet' ></td>")$(this).replaceWith(demo)} else if ($('#follow').attr('src') == 'img/PotatoMineNotReady.gif') {let demo = $("<td><div class='PotatoMine'></div></td>")$(this).replaceWith(demo)} else {let followsrc = follow.getAttribute('src')let demo = $("<td><img src= " + followsrc + " ></td>")$(this).replaceWith(demo)}})})let zombiesindex = 1setInterval(() => {if (startfighting) { //startfightinglet fightingzombiesimgtopnum = Math.floor(Math.random() * 5)let fightingzombiesimgtypenum = Math.floor(Math.random() * 4)let createzombies = $('<img src=' + fightingzombies[fightingzombiesimgtypenum] +' data-thistop=' + fightingzombiesimgtop[fightingzombiesimgtopnum] + ' >')$("#fightingzombies").append(createzombies);$(`#fightingzombies img:nth-child(${zombiesindex})`).css({'top': fightingzombiesimgtop[fightingzombiesimgtopnum]})$(`#fightingzombies img:nth-child(${zombiesindex})`).addClass('fightingzombiesimgleft')zombiesindex++}}, 5000);// let scream = true //僵尸吃掉了你的脑子！// setInterval(() => {//     if ($('#fightingzombies img').offset().left <= 20) {//         if (scream) {//             $('#ZombiesWon').show()//             $('#backgroundaudio').attr('src', '音频/scream.mp3')//             setTimeout(() => {//                 document.querySelector('#backgroundaudio').pause()//             }, 3000);//         }//         scream = false//     }// }, 500);setInterval(() => {if ($('#plantedarea tr:nth-child(1) .bullet').offset().left >= $('#fightingzombies img[data-thistop="60px"]').offset().left) {$('#fightingzombies img[data-thistop="60px"]').hide()setTimeout(() => {$('#fightingzombies img[data-thistop="60px"]').show()}, 2000);}}, 300);setInterval(() => {if ($('#plantedarea tr:nth-child(2) .bullet').offset().left >= $('#fightingzombies img[data-thistop="190px"]').offset().left) {$('#fightingzombies img[data-thistop="190px"]').hide()setTimeout(() => {$('#fightingzombies img[data-thistop="190px"]').show()}, 2000);}}, 300);setInterval(() => {if ($('#plantedarea tr:nth-child(3) .bullet').offset().left >= $('#fightingzombies img[data-thistop="320px"]').offset().left) {$('#fightingzombies img[data-thistop="320px"]').hide()setTimeout(() => {$('#fightingzombies img[data-thistop="320px"]').show()}, 2000);}}, 300);setInterval(() => {if ($('#plantedarea tr:nth-child(4) .bullet').offset().left >= $('#fightingzombies img[data-thistop="425px"]').offset().left) {$('#fightingzombies img[data-thistop="425px"]').hide()setTimeout(() => {$('#fightingzombies img[data-thistop="425px"]').show()}, 2000);}}, 300);setInterval(() => {if ($('#plantedarea tr:nth-child(5) .bullet').offset().left >= $('#fightingzombies img[data-thistop="560px"]').offset().left) {$('#fightingzombies img[data-thistop="560px"]').hide()setTimeout(() => {$('#fightingzombies img[data-thistop="560px"]').show()}, 2000);}}, 300);// setInterval(() => { //土豆地雷的判断//     if ($('.PotatoMine').offset().left >= $(//             '#fightingzombies img[data-thistop="60px"]').offset().left) {//         $('#fightingzombies img[data-thistop="60px"]').attr('src', 'img/BoomDie.gif')//     }// }, 300);</script>
</body></html>

使用javascript实现植物大战僵尸部分功能相关推荐

植物大战僵尸详细设计
目次第1章需求分析....................................................................... 3 1.1 项目分析...... ...
java swing 编写的植物大战僵尸功能完善完整代码下载即可以运行
今天为大家继续分享一个界面漂亮.功能完整的围棋程序的开发与制作 430,目前系统已经完成了初步功能,后续会进一步完善.整个系统界面漂亮,有完整得源码,希望大家可以喜欢.喜欢的帮忙点赞和关注.一起编程. ...
java swing 植物大战僵尸精品游戏432 功能完善完整代码下载即可以运行
上一期分享了一个比较复杂的植物大战僵尸游戏后,今天为大家继续分享一个非常优秀的对植物大战僵尸游戏432,该游戏编写的漂亮.整个系统是学习的优秀demo,整个项目提供完整的项目源码,希望大家可以喜欢.喜 ...
Java项目:植物大战僵尸(java+swing)
源码获取:博客首页 "资源" 里下载! 功能简介: 植物大战僵尸.冒险模式.生存模式.解谜模式小车服务类: public class CarThread extends Thre ...
Python开发植物大战僵尸游戏（附github项目地址）
今天给大家分享一个仿<植物大战僵尸>的小游戏开发案例. 开发思路引入需要的模块,配置图片路径,设置界面宽高背景颜色,创建游戏主入口. #1引入需要的模块 import pygame im ...
c语言游戏call调用,C语言-植物大战僵尸-刷僵尸call；fps游戏CS-方框透视（矩阵+传统）...
C语言-植物大战僵尸-刷僵尸call:fps游戏CS-方框透视(矩阵+传统)前言:大家好,我是向上先生,嘿嘿~最近在学习逆向.反汇编等等,首先我在非常感谢52pojie这个平台,差不多很多学习资源都是 ...
用Java写一个植物大战僵尸简易版！
点击上方蓝色"程序猿DD",选择"设为星标" 回复"资源"获取独家整理的学习资料! 来源 | https://urlify.cn/byeEj ...
用Java语言，写一个植物大战僵尸简易版！
前言有谁没玩过植物大战僵尸吗? 小灰的一位读者,用Java语言开发了自己的植物大战僵尸游戏.虽然系统相对简单,但是麻雀虽小五脏俱全,对游戏开发感兴趣的小伙伴可以学习一下哦~~ 游戏设计植物大战僵尸 ...
用 Java 写一个植物大战僵尸简易版！
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:2 个月的面试亲身经历告诉大家,如何进入大厂? 有谁没玩过植物大战僵尸吗?一位读者用Java语言开发了自己的植物 ...

使用javascript实现植物大战僵尸部分功能

使用javascript实现植物大战僵尸部分功能相关推荐

最新文章

热门文章