从零开始手把手教你使用javascript+canvas开发一个塔防游戏07塔的升级和出售

简介: 从零开始手把手教你使用javascript+canvas开发一个塔防游戏07塔的升级和出售

项目演示


image.png


项目演示地址:

体验一下

项目源码:

项目源码

代码结构


image.png

本节做完效果


image.png


info.js

//画出塔的攻击范围以及升级等信息
    drawScope : function(tower){
        var select = Game.canvasList.select;
        Canvas.clear(select,500,500);
        Canvas.fillArc(select,tower.x+25,tower.y+25,TowerType[tower.type]["level_"+tower.level].scope,"rgba(25,174,70,0.5)");
        if(tower.level < 3)Canvas.drawImg(select,Game.imgList.btn_img,0,0,20,20,tower.x,tower.y,20,20);
        Canvas.drawImg(select,Game.imgList.btn_img,20,0,20,20,tower.x+30,tower.y+30,20,20);
    },
    //升级或卖掉
    upgradeOrSell : function(x,y){
        var tower = Game.nowSelectTower;
        //升级
        if(tower.level < 3 && T.pointInRect({x:x,y:y},{x:tower.x,y:tower.y,width:20,height:20})){
            if(this.score - TowerType[tower.type]["level_"+(tower.level+1)].buyIt < 0)return false;
            tower.level += 1;
            this.updateScore(TowerType[tower.type]["level_"+tower.level].buyIt * -1);
            this.drawScope(tower);
            //update
        }
        //卖掉
        else if(T.pointInRect({x:x,y:y},{x:tower.x+30,y:tower.y+30,width:20,height:20})){
            var money = Math.floor((tower.level * TowerType[tower.type]["level_1"].buyIt)/2);
            this.updateScore(money);
            delete this.installTower[Math.floor(tower.x/50)+"_"+Math.floor(tower.y/50)];
            Game.towerList.remove(tower);
            Canvas.clearRect(Game.canvasList.tower,tower.x,tower.y,tower.width,tower.height);
            Canvas.clear(Game.canvasList.select,500,500);
            tower = null;
            //sell
        }
    }


enemy.js


image.png


game.js


image.png


新增initBind 函数

//初始化绑定塔的事件
    initBind : function(){
        var select = document.getElementById("select");
        select.onclick = function(e){
            var x = e.offsetX || e.layerX,
                y = e.offsetY || e.layerY;
            //遍历塔的列表
            for(var i=0,l=Game.towerList.length;i<l;i++){
                //判断是否选择到了塔
                if(T.pointInRect({x:x,y:y},Game.towerList[i])){
                    //画出范围
                    Info.drawScope(Game.towerList[i]);
                    if(Game.nowSelectTower){
                        //升级或卖掉
                        Info.upgradeOrSell(x,y);
                    }
                    Game.nowSelectTower = Game.towerList[i];
                    break;
                }
            }
            //没有选中,清除
            if(i == l){
                Canvas.clear(Game.canvasList.select,500,500);
                Game.nowSelectTower = null;
            }
        }
    }

//重新开始
    restart : function(){
        this.stop();
        this.towerList = [];
        this.enemyList = [];
        this.bulletList = [];
        this.mission = 0;
        this.missionEnemey = 0;
        this.missionLazy = 2000;
        this.enemyLazy = 0;
        this.nowSelectTower = null;
        Info.score = 100;
        Info.life = 10;
        Info.mission = 1;
        Info.installTower = {};
        Canvas.clear(this.canvasList.map,500,500);
        Canvas.clear(this.canvasList.main,500,500);
        Canvas.clear(this.canvasList.tower,500,500);
        Canvas.clear(this.canvasList.select,500,500);
        Info.redraw();
        this.start();
    },
    //停止
    stop : function(){
        clearInterval(this.timer);
    },
    //结束
    over : function(){
        this.stop();
        alert("你输了!");
    },
    //赢了
    win : function(){
        this.stop();
        alert("你赢了!");
    }


项目源码:


项目源码


豆约翰
+关注
目录
打赏
0
0
0
0
42
分享
相关文章
通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
通义灵码基于自然语言需求,快速生成完整Vue组件。例如,用Vue 2和JavaScript实现贪吃蛇游戏:包含键盘控制、得分系统、游戏结束判定与Canvas动态渲染。AI生成的代码符合规范,支持响应式数据与事件监听,还能进阶优化(如增加启停按钮、速度随分数提升)。传统需1小时的工作量,使用通义灵码仅10分钟完成,大幅提升开发效率。操作简单:安装插件、输入需求、运行项目即可实现功能。
151 4
 通义灵码2.5实战评测:Vue.js贪吃蛇游戏一键生成
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
202 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
Node.js开发
Node.js开发
154 13
深入浅出Node.js后端开发
在数字化时代的浪潮中,后端开发作为连接用户与数据的桥梁,扮演着至关重要的角色。本文将以Node.js为例,深入探讨其背后的哲学思想、核心特性以及在实际项目中的应用,旨在为读者揭示Node.js如何优雅地处理高并发请求,并通过实践案例加深理解。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的视角和思考。
深入浅出Node.js后端开发
本文将带你领略Node.js的魅力,从基础概念到实践应用,一步步深入理解并掌握Node.js在后端开发中的运用。我们将通过实例学习如何搭建一个基本的Web服务,探讨Node.js的事件驱动和非阻塞I/O模型,以及如何利用其强大的生态系统进行高效的后端开发。无论你是前端开发者还是后端新手,这篇文章都会为你打开一扇通往全栈开发的大门。
深入理解Node.js事件循环及其在后端开发中的应用
本文旨在揭示Node.js的核心特性之一——事件循环,并探讨其对后端开发实践的深远影响。通过剖析事件循环的工作原理和关键组件,我们不仅能够更好地理解Node.js的非阻塞I/O模型,还能学会如何优化我们的后端应用以提高性能和响应能力。文章将结合实例分析事件循环在处理大量并发请求时的优势,以及如何避免常见的编程陷阱,从而为读者提供从理论到实践的全面指导。
深入浅出Node.js后端开发
本文将带领读者从零基础开始,一步步深入到Node.js后端开发的精髓。我们将通过通俗易懂的语言和实际代码示例,探索Node.js的强大功能及其在现代Web开发中的应用。无论你是初学者还是有一定经验的开发者,这篇文章都将为你提供新的见解和技巧,让你的后端开发技能更上一层楼。
8个最佳的JavaScript移动应用开发框架
随着智能手机和平板电脑的普及,移动应用的开发越来越流行,基于JavaScript的移动开发框架也逐渐成为主流。移动开发与桌面应用的开发相比,有个显著的不同,那就是,移动应用绝大多数是基于触摸屏的应用。
1277 0
8个最佳的JavaScript移动应用开发框架
版权声明:本文为博主chszs的原创文章,未经博主允许不得转载。 https://blog.csdn.net/chszs/article/details/9935445 《8个最佳的JavaScript移动应用开发框架》 作者:chszs,转载需注明。
1086 0
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
210 2

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问