从零开始手把手教你使用javascript+canvas开发一个塔防游戏03敌人一波一波的出

简介: 从零开始手把手教你使用javascript+canvas开发一个塔防游戏03敌人一波一波的出

项目演示

image.png


项目演示地址:

体验一下

项目源码:

项目源码

代码结构


image.png

本节做完效果


image.png


game.js修改


image.png


修改initEnemy

//出敌人
    initEnemy : function(){
        if(Game.missionLazy > 0){
            Game.missionLazy -= 20;
            return false;
        }
        if(Game.enemyLazy > 0){
            Game.enemyLazy -= 20;
            return false;
        }
        else{
            Game.enemyLazy = Game.enemyTime;
        }
        if(Game.missionEnemy > 20){
            Game.missionEnemy = 1;
            Game.mission += 1;
            Info.updateMission();
            Game.missionLazy = Game.missionTime;
            if(Game.mission >= 20){
                Game.initEnemy = function(){
                    if(Game.enemyList.length <= 0)Game.win();
                };
                return false;
            }
            return false;
        }
        Game.missionEnemy += 1;
        //新增一个敌人
        var enemy = new Enemy(Game.canvasList.main,Game.imgList.enemy_img,Game.mission,55,0,40,40);
        enemy.num = Game.mission*20+Game.missionEnemy;
        Game.enemyList.push(enemy);
    }


项目源码:


项目源码


目录
相关文章
|
3天前
|
JavaScript
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
vue中使用 HotKeys.js 教程(按键响应、快捷键开发)
8 0
|
3天前
|
移动开发 前端开发 JavaScript
使用JavaScript和Canvas进行绘图
Canvas是HTML5的绘图工具,借助JavaScript实现网页上的图形、图像及动画创作。通过Canvas元素和2D渲染上下文,开发者能绘制图形、处理图像、制作动画,甚至用于游戏开发。基本步骤包括获取Canvas元素、设置绘图属性、绘制形状、处理图像以及实现动画。同时,注意性能优化,如减少不必要的重绘和使用Web Workers。Canvas结合WebGL还能实现3D效果,与Web Audio API结合则能做音频可视化。分享你的Canvas经验,探讨更多创意应用!
|
5天前
|
运维 JavaScript 前端开发
前端 JS 经典:vue 开发中的 base 和 publicPath
前端 JS 经典:vue 开发中的 base 和 publicPath
12 1
|
9天前
|
JavaScript 前端开发 程序员
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
14 1
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的使命召唤游戏助手附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的使命召唤游戏助手附带文章源码部署视频讲解等
8 0
|
3天前
|
开发框架 监控 JavaScript
企业级node.js开发框架 【egg.js】 实用教程
企业级node.js开发框架 【egg.js】 实用教程
7 0
|
5天前
|
移动开发 JavaScript
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
thinkPHP5.0开发微信H5页面分享接口signature验证失败,signature与微信 JS 接口签名校验工具返回结果不一致
12 0
|
JSON JavaScript 前端开发
20+个超级实用的 JavaScript 开发技巧(下)
今天来分享几个JavaScript开发技巧,希望对你有所帮助~
108 0
|
JavaScript 前端开发
20+个超级实用的 JavaScript 开发技巧(上)
今天来分享几个JavaScript开发技巧,希望对你有所帮助~
106 0
|
2天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的个人健康管理系统小程序附带文章源码部署视频讲解等
10 2

相关实验场景

更多