植物大战僵尸【源代码分享+核心思路讲解】

ops/2024/9/22 23:59:06/
htmledit_views">

植物大战僵尸已经正式完结,今天和大家分享一下,话不多说,直接上链接!!!(如果大家在运行这个游戏遇到了问题或者bug,那么请私我谢谢)

大家写的时候可以参考一下我的代码思路

git地址:--- 植物大战僵尸源代码---

不下载直接玩: --- 植物大战僵尸浏览器页面直接玩 ---(也可以在手机里面点开,但是放置植物时会有些卡(可以点一下植物然后再点一下草坪,也可以实现功能),电脑莫有问题)大家第一次玩这个可能会有些卡顿,第二次就好了

界面介绍:

进入游戏开始界面:

 游戏主菜单界面:

 游戏界面:

 

界面底层使用和js思路分析:                                               

HTML的内容(所有) :

javascript"><div class="total wrapper"><!-- 整个页面的内容 --><div class="entire wrapper"><!-- 设置游戏开始是的场景 --><div class="startJframe"><!-- 放置我事件监听的按钮 --><div class="startGame-btn wrapper"><div class="begin-text"></div></div></div><div class="menu"><div class="menu_btn"></div></div><div class="game-jframe"><canvas id="canvas" style="width: 1120px; height: 620px;"></canvas></div></div></div>

我这里只有3个页面,你们写的时候可以多加几个关卡,我这里相当于只有一个关卡,然后我将讲解一下我的这三个界面都是如何构成的

第一个页面:纯HTML(div startjframe)+CSS

第二个页面:纯HTML(div menu)+CSS

第三个页面:HTML(div game-jframe)里面的 canvas 绘画和 js(僵尸植物除了草坪的所有东西都是通过canvas绘画的)                               

 

 canvas js代码思路:

我一共写了4个js,在这里和大家系统介绍一下:

mcommon是我用来存储图片路径

mscene是我来定义类的(里面只有类 【植物,僵尸,小卡车,太阳,铲子,子弹,植物卡片】 )

(大家在创建类的时候可能会有些麻烦,如果遇到问题可以在评论区问我,我会尽力帮大家解决的)

mgame是我用来通过调用mscene中的类对象的draw方法来进行页面绘制的(通过canvas中的drawImage方法绘制的)-(下面的那个图片中的cxt就是context【canvas的上下文】)

mmain是我用来初始化一些东西的【僵尸数组,植物数组,小车数组,卡片数组,一个太阳全局生成定时器,一个reset退出游戏界面清空僵尸植物和太阳的数组,并将太阳数量重置】

js游戏运行核心:

整个游戏我是通过定时器来实现我的页面运行的,因为我还没有学到其他的一些知识,所以现在只能如此

通过游戏进度的判断然后来调用game类中定义的方法实现的

javascript">      g.drawPlants()g.drawZombies()g.drawStepImg()g.drawPic()g.drawShovel()g.drawReturn()g.drawCars()

就比如上面这个就是当我的游戏在进行时,在页面中绘画植物,僵尸,进度条,鼠标点击植物时出现的卡片,小铲子,小车等等...  g是我的class game类,然后后面是我在这个类中定义的方法

到这里就结束了,真心希望大家可以通过我的分享学习到一些东西


http://www.ppmy.cn/ops/114481.html

相关文章

小琳AI课堂:大语言模型如何符合伦理限制

大家好&#xff0c;这里是小琳AI课堂。今天我们来聊聊大语言模型是如何符合伦理限制的&#xff0c;这可是一个非常重要的话题哦&#xff01;&#x1f31f; 首先&#xff0c;我们要知道&#xff0c;大语言模型的伦理限制实现主要通过以下几个方面&#xff1a; 数据筛选和清洗&a…

C++速通LeetCode中等第6题-找到字符串中所有字母异位词(滑动窗口最详细代码注释)

滑动窗口法&#xff1a; class Solution { public:vector<int> findAnagrams(string s, string p) {unordered_map<char,int> need,window;for(char c : p) need[c];int left 0,right 0;int valid 0;vector<int> res;//窗口数据更新while(right < s.s…

面向对象程序设计——set容器の简析

1.set的介绍 • 序列式容器和关联式容器 • 我们已经接触过STL中的部分容器如&#xff1a;string、vector、list、deque、array、forward_list等&#xff0c;这些容器统称为序列式容器&#xff0c;因为逻辑结构为线性序列的数据结构&#xff0c;两个位置存储的值之间⼀般没有紧…

android 14分屏实战之小米su7的3分屏实现方案讨论及线索征集

背景&#xff1a; hi&#xff0c;粉丝朋友们&#xff1a; 近来有学员朋友询问到了马哥一个问题关于小米su7的分屏实现方案问题&#xff0c;具体小米su7的实现现象如下&#xff1a; 具体源头视频详细地址&#xff1a;https://www.bilibili.com/video/BV1UK421a7iB 针对小米su…

three.js shader 实现天空中白云

three.js shader 实现天空中白云 预览&#xff1a; https://threehub.cn/#/codeMirror?navigationThreeJS&classifyshader&idwhiteCloud 更多案例 可见 预览&#xff1a; https://threehub.cn import * as THREE from "three"; import { OrbitControls …

基于协同过滤+python+django+vue的音乐推荐系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于协同过滤pythondjangovue…

Facebook运营:账号类型有哪些?有必要用静态住宅IP吗?

Facebook作为月活跃用户数高达几十亿的社交媒体平台&#xff0c;一直不断有新用户选择加入。从个人用户的生活分享到企业用户的商务宣传推广&#xff0c;Facebook提供各大功能和模块来满足用户需求。相应的&#xff0c;用户也需要了解平台特点来进行相应的操作。本文从账号类型…

windows安装docker 本地打包代码

参考文章1&#xff1a;https://gitcode.csdn.net/65ea814b1a836825ed792f4a.html 参考文章2&#xff1a; Windows 安装docker&#xff08;详细图解&#xff09;-CSDN博客 一 下载 Docker Desktop 在官网上下载 Docker Desktop&#xff0c;可以从以下链接下载最新版本&#x…