模仿cnGameJs写的简单的坦克大战

最新推荐文章于 2024-01-26 11:22:19 发布
最新推荐文章于 2024-01-26 11:22:19 发布
阅读量1.9k 收藏
点赞数
分类专栏： javascript 文章标签： function numbers timer insert delete up
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kunkkaCoco/article/details/7790550
版权

此次只简单地实现了地图的绘制和基本的碰撞检测，感觉如果再深一步写下去估计要花一年时间才能搞定，目前暂时只支持IE

很多地方的实现没有找到原作者的代码，只靠自己的一点想法简单的完成了类似的功能



















(function(){
	var _kdGame = {
			init:function(id,options){
				options = options || {};
				this.width = options.width||800;
				this.height = options.height||600;
				
			},
			addModule:function(moduleName,func){
				var moduleArray = moduleName.split('.');
				var parent = window;
				for(var i = 0;i< moduleArray.length;i++){
					if(typeof(parent[moduleArray[i]]) == 'undefined')
						parent[moduleArray[i]] = {};
					parent = parent[moduleArray[i]];
				}
				if(func)
					func.call(parent,this);
				return parent;
			}
	};
	
	
	
	
	kdGame = _kdGame;
	
	//添加一个功能模块 
	kdGame.addModule('kdGame.core',function(cg){
		this.name = "kdGameCore";
		this.$=function(id){
			return document.getElementById(id);		
		};
		this.$$=function(tagName,parent){
			parent=parent||document;
			return parent.getElementsByTagName(tagName);	
		};
		this.extend = function(des,sou){
			for(name in sou)
				des[name] = sou[name];
			return des;
		};
		this.bindHandler=(function(){
			if(window.addEventListener){
				return function(elem,type,handler){
					elem.addEventListener(type,handler,false);
				};
			}
			else if(window.attachEvent){
				return function(elem,type,handler){
					elem.attachEvent("on"+type,handler);
				};
			}
	})();

	this.removeHandler=(function(){
				if(window.removeEventListerner){
					return function(elem,type,handler){
						elem.removeEventListerner(type,handler,false);
						
					};
				}
				else if(window.detachEvent){
					return function(elem,type,handler){
						elem.detachEvent("on"+type,handler);
					};
				}
	})();
	/**获取指定元素在数组中的下标*/
	Array.prototype.indexOf = function(value){
		for ( var i = 0; i < this.length; i++) {
			if(this[i] == value)
				return i;
		}
		return -1;
	};
	});
	
	
	
	kdGame.addModule('kdGame',function(cg){
		var map = function(gameData){
				//判断用什么方式调用，this instanceof arguments.callee这种方式是用来判断是否是用new运算符调用的
				if(!(this instanceof arguments.callee)){
		            return new arguments.callee(gameData);
		        }
		   this.init(gameData);
		};
		map.prototype = {
				init:function(gameData){
					var defaults = {
							cellSize:[40,40],
							width:200,
							height:200,
							beginX:0,
							beginY:0
					};
					
					options = gameData.startOptions || {};
					options = cg.core.extend(defaults,options);
					this.mapMatrix = gameData.mapMatrix;
					this.cellSize = options.cellSize;
					this.beginX = options.beginX;
					this.beginY = options.beginY;
					this.width = options.width;
					this.height = options.height;
					this.srcObj = options.srcObj;
					this.srcArray = [];
					var i = 0;
					for(name in this.srcObj){
						this.srcArray[i] = this.srcObj[name]; 
						i++;
					}
				},
				getImg:function(type){
					if(!this.srcArray[type])
						this.srcArray[type] = "images/grass.png";
					return this.srcArray[type];
				},
				draw:function(){
					var cellHeight = this.cellSize[1];
					var cellWidth = this.cellSize[0];
					var beginY = this.beginY;
					var beginX = this.beginX;
					var selfPosition = this.selfPosition;
					var srcObj = this.srcObj;
					var curRow = 0;
					var curCol = 0;
					var curObj;
					var mapMatrix = this.mapMatrix;
					for(var i = beginY,len = beginY+mapMatrix.length*cellHeight;i < len ;i += cellHeight){
						curRow = (i-beginY)/cellHeight;
						for ( var j = 0,xlen = beginX+mapMatrix[j].length*cellWidth; j < xlen; j += cellWidth) {
							curCol = (j-beginX)/cellWidth;
							var curImg = document.createElement("img");
							curObj = this.getImg(mapMatrix[curRow][curCol]);
							curImg.src = curObj;
							curImg.style.position = 'absolute';
							curImg.style.left = j;
							curImg.style.top = i;
							curImg.id = "map"+j+i;
							curImg.cellType = mapMatrix[curRow][curCol];
							cg.core.$$('body')[0].appendChild(curImg);
						}
					}
				}
		};
		this.Map = map;
	});
	kdGame.addModule('kdGame.input',function(cg){
		var keydown_callbacks={};
		var keyup_callbacks={};
		
		var k=[];
		k[8] = "backspace",
		k[9] = "tab",
		k[13] = "enter",
		k[16] = "shift",
		k[17] = "ctrl",
		k[18] = "alt",
		k[19] = "pause",
		k[20] = "capslock",
		k[27] = "esc",
		k[32] = "space",
		k[33] = "pageup",
		k[34] = "pagedown",
		k[35] = "end",
		k[36] = "home",
		k[37] = "left",
		k[38] = "up",
		k[39] = "right",
		k[40] = "down" ,
		k[45] = "insert",
		k[46] = "delete",
		
		k[91] = "leftwindowkey",
		k[92] = "rightwindowkey",
		k[93] = "selectkey",
		k[106] = "multiply",
		k[107] = "add",
		k[109] = "subtract",
		k[110] = "decimalpoint",
		k[111] = "divide",
		
		k[144] = "numlock",
		k[145] = "scrollock",
		k[186] = "semicolon",
		k[187] = "equalsign",
		k[188] = "comma",
		k[189] = "dash",
		k[190] = "period",
		k[191] = "forwardslash",
		k[192] = "graveaccent",
		k[219] = "openbracket",
		k[220] = "backslash",
		k[221] = "closebracket",
		k[222] = "singlequote";
		
		var numpadkeys = ["numpad1","numpad2","numpad3","numpad4","numpad5","numpad6","numpad7","numpad8","numpad9"];
		var fkeys = ["f1","f2","f3","f4","f5","f6","f7","f8","f9"];
		var numbers = ["0","1","2","3","4","5","6","7","8","9"];
		var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];
		for(var i = 0; numbers[i]; i++)     { k[48+i] = numbers[i]; }
		for(var i = 0; letters[i]; i++)     { k[65+i] = letters[i]; }
		for(var i = 0; numpadkeys[i]; i++)  { k[96+i] = numpadkeys[i]; }
		for(var i = 0; fkeys[i]; i++)       { k[112+i] = fkeys[i]; }
		var timer; 
		var targetMove = function(eve){
			eve = eve||win.event;
			var keyname = k[eve.keyCode];
			//addKeyPressListener(keyname,listener);
			//keydown_callbacks[keyname]();
				var target = cg.core.$('targetPlayer');
				if(cg.player.dirs[cg.player.dir] != keyname){
					var n = cg.player.rotateAngle(keyname);
					target.style.filter =  'progid:DXImageTransform.Microsoft.BasicImage(rotation='+n+')';//旋转方向
					return;
				}
				var speed = cg.player.movespeed;
				switch(keyname){
					case "up": 
						if(cg.collision.isBottomTo(target))
							target.style.top = parseInt(target.style.top) - speed;
						break;	
					case "left": 
						if(cg.collision.isRightTo(target))
							target.style.left = parseInt(target.style.left) - speed;			
						break;	
					case "down":
						if(cg.collision.isTopTo(target))
							target.style.top = parseInt(target.style.top) + speed;
						break;	
					case "right": 
						if(cg.collision.isLeftTo(target))
							target.style.left = parseInt(target.style.left) + speed;						
						break;	
				}
		};
		var targetStopMove = function(eve){
			clearInterval(timer);
		};
		var addKeyPressListener = function(eventType,handler){
			keydown_callbacks[eventType] = handler;
		};
		
		
		cg.core.bindHandler(document,'keydown',targetMove);
		//cg.core.bindHandler(document,'keyup',targetStopMove);
	});
	
	kdGame.addModule('kdGame.collision',function(cg){
		//四个判断碰撞检测的方法有点冗余后面再优化
			this.isBottomTo = function(curObj){
				var curX = parseInt(curObj.style.left);
				var curY = parseInt(curObj.style.top);
				if(curX <= 0 || curY <= 0)
					return false;
				curObj.position = [curX,curY];
				if(curY%40!=0)
					return true;
				var nextObjX = curX;
				var nextObjY = curY-40;
				var result = false;
				if(nextObjX%40==0){
					result = this.isInner(nextObjX,nextObjY);
					if(!result)
						return result;
				}else{
					result = this.isInner(Math.floor(nextObjX/40)*40,nextObjY);
					if(!result)
						return result;
					result = this.isInner(Math.ceil(nextObjX/40)*40,nextObjY);
					if(!result)
						return result;
				}
				return true;
			};
			this.isRightTo = function(curObj){
				var curX = parseInt(curObj.style.left);
				var curY = parseInt(curObj.style.top);
				if(curX <= 0 || curY <= 0)
					return false;
				curObj.position = [curX,curY];
				if(curX%40!=0)//如果已经进入了一个单位，则不需要继续碰撞检测
					return true;
				var nextObjX = curX-40;
				var nextObjY = curY;
				var result = false;
				if(nextObjY%40==0){
					result = this.isInner(nextObjX,nextObjY);
					if(!result)
						return result;
				}else{
					result = this.isInner(nextObjX,Math.floor(nextObjY/40)*40);
					if(!result)
						return result;
					result = this.isInner(nextObjX,Math.ceil(nextObjY/40)*40);
					if(!result)
						return result;
				}
				return true;
			};
			this.isTopTo = function(curObj){
				var curX = parseInt(curObj.style.left);
				var curY = parseInt(curObj.style.top);
				if(curX <= 0 || curY <= 0)
					return false;
				curObj.position = [curX,curY];
				if(curY%40!=0)
					return true;
				var nextObjX = curX;
				var nextObjY = curY+40;
				var result = false;
				if(nextObjX%40==0){
					result = this.isInner(nextObjX,nextObjY);
					if(!result)
						return result;
				}else{
					result = this.isInner(Math.floor(nextObjX/40)*40,nextObjY);
					if(!result)
						return result;
					result = this.isInner(Math.ceil(nextObjX/40)*40,nextObjY);
					if(!result)
						return result;
				}
				return true;
			};
			this.isLeftTo = function(curObj){
				var curX = parseInt(curObj.style.left);
				var curY = parseInt(curObj.style.top);
				if(curX <= 0 || curY <= 0)
					return false;
				curObj.position = [curX,curY];
				if(curX%40!=0)//如果已经进入了一个单位，则不需要继续碰撞检测
					return true;
				var nextObjX = curX+40;
				var nextObjY = curY;
				var result = false;
				if(nextObjY%40==0){
					result = this.isInner(nextObjX,nextObjY);
					if(!result)
						return result;
				}else{
					result = this.isInner(nextObjX,Math.floor(nextObjY/40)*40);
					if(!result)
						return result;
					result = this.isInner(nextObjX,Math.ceil(nextObjY/40)*40);
					if(!result)
						return result;
				}
				return true;
			};
			this.isInner = function(nextObjX,nextObjY){
				var nextObj = cg.core.$('map'+nextObjX+nextObjY);
				if(nextObj && nextObj.cellType == 3){
					alert("you are the winner");
					return true;
				}
				if(nextObj && nextObj.cellType!=0){
					return false;					
				}
				return true;
			};
	});
	
	//add player
	kdGame.addModule('kdGame.player',function(cg){
		this.init = function(playerObj){
					var defaults = {
						icon:'images/player1.png',
						name:'palyer1',
						position:[0,0],
						dir:0,
						movespeed:10
					};
					var options = defaults || {};
					options = cg.core.extend(options,playerObj);
					this.icon = options.icon;
					this.name = options.name;
					this.dir = options.dir;
					this.movespeed = options.movespeed;
					this.position = options.selfPosition;
					this.dirs = ['left','up','right','down'];
					this.draw();
				};
			this.draw = function(){
					var selfPosition = this.position;
					var curImg = document.createElement("img");
					curImg.id = "targetPlayer";
					curImg.src = this.icon;
					curImg.style.position = 'absolute';
					curImg.style.left = selfPosition[0];
					curImg.style.top = selfPosition[1];
					kdGame.core.$$('body')[0].appendChild(curImg);
				};
				this.rotateAngle = function(dir){
					var nextDir = this.dirs.indexOf(dir);
					this.dir = nextDir;
					return nextDir;
				};
	});
	
})();



var gameData = {
		/* 地图矩阵：0.空地 1.墙壁 2.石头 3.目的地 4.敌人基地*/
		mapMatrix:[
														[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
														[1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1],
														[1,0,1,0,0,2,2,0,0,0,2,2,0,0,0,1],
														[1,0,1,0,0,0,2,0,0,0,4,0,0,0,2,1],
														[1,0,1,0,0,0,0,0,2,0,0,0,0,0,0,1],
														[1,0,2,0,0,0,0,0,2,0,0,0,0,0,0,1],
														[1,0,2,0,0,0,0,0,0,0,0,0,0,0,0,1],
														[1,1,1,1,1,1,1,0,0,0,1,1,1,2,0,1],
														[1,0,0,0,0,2,0,0,0,1,1,3,0,0,0,1],
														[1,0,0,0,0,2,0,2,0,0,1,0,0,0,0,1],
														[1,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1],
														[1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
			   					],
	 startOptions:{
	   			//游戏资源字典
	   		srcObj:{
	   			ground:"images/desert2.png",
	   			wall:"images/wall.png",
	   			stone:"images/stone1.png",
	   			destination:"images/destination.png",
	   			source:"images/source.png",
	   			bullet:"images/bullet1.png",
	   			goods:"images/goods.png",
	   			boom:"images/boom.png",
	   			enemy:"images/enemy2.png",
   				player:"images/player1.png"
	   		},
  		movespeed:10
	   }
};			   
var playerObj = {//玩家对象
		name:'liubei',
		selfPosition:[360,360],
		movespeed:10
};
var mapObj = new kdGame.Map(gameData); //地图对象
function startGame(){
	mapObj.draw();	
	var player = kdGame.player.init(playerObj);
}




kunkkaCoco
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html 游戏 精灵,HTML5游戏框架cnGameJS开发实录-精灵对象篇
weixin_31978571的博客
05-31 349
返回目录1.什么是精灵对象(sprite)？所谓的精灵对象，就是游戏中的一个具有行为的元素，以超级玛丽为例，玛丽，敌人都算是一个精灵对象。在cnGameJS框架中，精灵对象如下几个特点：1.添加动画：在之前的动画篇中，我们介绍过cnGameJS如何实现帧动画。而作为精灵对象，就是动画的使用者。例如我们控制玛丽向不同方向的行走，玛丽会产生行走的动画。2.包含图像：对于另外一些精灵对象，它可能不需要运...
js动态创建table节点并通过appendChild拼接子元素的问题
热门推荐
kunkkaCoco的专栏
07-17 1万+
今天看到一同学的贴子http://topic.csdn.net/u/20120717/10/51e85309-55e5-4f5a-bf0e-bef98c31ae23.html?seed=386935035&r=79147953#r_79147953，发现了常用的table中的一个误区，总结了一下 代码： //创建任意类型tag function make(tagname,attr
Unity入门案例-Tanks坦克大战
MY Blog
01-11 9934
这是我的第一个Unity项目精简版的坦克大战看着siki视频学着做的历时一天半。 游戏描述： 游戏由2个玩家控制，每个玩家可以控制坦克前进后退左转右转和攻击，每个玩家有100hp基础血量每次攻击随机造成10-20点伤害。当某个玩家血量低于0时他操控的坦克被摧毁并且游戏结束。 我的工作： 一、坦克的移动脚本 using System.Collections; using System.Co
【CSON原创】HTML5游戏框架cnGameJS开发实录
weixin_34253539的博客
02-14 86
　　cnGameJS是本人开发的一个基于HTML5的游戏框架，包括资源加载，碰撞检测，动画等模块。本系列文章主要介绍各个模块的开发流程，以及附上两个使用该框架进行开发的游戏demo。 目录： 1.核心函数模块 2.资源加载模块 3.基本图形模块 4.外部输入模块 5.碰撞检测模块 6.动画模块 7.精灵对象 8.游戏循环对象 9.游戏地图对象 10.游戏场景对象 11.cn...
C语言实现坦克大战
weixin_53007367的博客
08-21 5990
C语言实现坦克大战 期末设计和两个同学用C语言合伙做了个坦克大战，也给各位做个参考，本人水平有限，可能会有很多表述有误的地方，欢迎指正。 注：虽说是用C语言实现的，但其中用到了C++中的一些东西，比如多线程，vector容器，当遇到时我会提供相应知识点的链接供大家了解因为代码中有较详细的注释，所以只做个人认为比较重要的注释如果各位有疑问可以评论交流，我看到尽量及时回复 效果图 需要工具 1.项目是在vs2019上做出来的，所以推荐大家也使用vs2019进行操作,直接在官网下社区版就行，免费好用，贴个官网地
qt 坦克大战游戏 GUI绘制
01-26 1405
模仿坦克大战游戏，目前只绘制出一辆坦克，并能发射炮弹
Python写的坦克大战
12-21
【Python写的坦克大战】是一款基于Python编程语言，利用pygame库开发的坦克对战游戏，它模仿了经典游戏《坦克大战》的基本玩法。Python是高级编程语言，以其简洁易读的语法和丰富的第三方库深受程序员喜爱，而pygame...
基于设计的坦克大战GUI版完整代码和实验报告
01-12
保留课程设计二完成的坦克大战控制台版本的所有功能，用Qt实现图形界面 以下为课程设计二中实现的功能（略长，可跳过）： 1）模仿设计四类游戏模型/属性： 游戏地形 砖墙：除四周围墙外均可被一级子弹打穿 海水...
模仿坦克大战源码2012825
08-25
模仿坦克大战源码 项目描述 C#编写的一个坦克大战游戏 用键盘的上下左右可以控制坦克的移动， 空格键是开炮，打坏一个坦克得100分。 游戏很有意思，也很值得我们学习。 欢迎感兴趣的用户下载学习。 主要代码： ...
坦克大战GUI版本坦克大战控制台版本的所有功能，用Qt实现图形界面
05-03
1）模仿设计四类游戏模型/属性： 游戏地形 砖墙：除四周围墙外均可被一级子弹打穿 海水：坦克和子弹均不可穿越 铁墙：可被二级子弹打穿 森林：坦克和子弹均可穿越，但显示上会被森林覆盖 基地：“★”表示基地中心，...
坦克大战地图生成代码
01-28
在坦克大战地图生成中，这可能用于确保地图的色彩分布均匀，或者模仿特定的视觉风格。OpenCV中的`equalizeHist`函数可用于执行直方图均衡化。 3. **图像掩模与绘制**：为了生成障碍物，我们可以使用图像掩模和绘图...
IE上传本地文件时，无需改变浏览器设置就能完美得到完整路径的解决方案
kunkkaCoco的专栏
07-28 8629
var obj = document.getElementById(obj_Id);obj.select(); window.parent.document.body.focus(); // <——–添加该行后，真的成功了 path = document.selection.createRange().text; 直接上代码，如果不增加第3行代码，浏览器会报拒绝访问；如果设置了Inter
jquery解除hover事件的绑定方式
kunkkaCoco的专栏
07-27 1235
事实上是hover事件是有两个事件合起来的，所以解除hover事件的时候应该解除两个事件的绑定，$('#id').unbind('mouseenter').unbind('mouseleave');   补充：unbind()只能解绑bind()方法绑定的事件
console.log---被我一直忽视的神器
kunkkaCoco的专栏
10-25 985
今天无意间看论坛上的文章，又一次发现console.log被写在了通用的javascript代码中，以前我一直以为这是firefox特有的打印方式，今天决定亲手在ie中试验一把，结果惊人 的发现没有报错！！（上次我记得用过一次报错了呀？），于是我网上查了一下才发现，这是打印在控制台上的日志，firefox有firebug调试工具，我今天打开的IE8也有自带的开发人员工具，这样控制台就存在了，所以就
firefox、IE之部分属性用法区别
kunkkaCoco的专栏
08-03 856
1.有关style的单位问题 在IE下设置obj.style.left时可以不需要加单位，但是发现在firefox上动态定位需要叫上"px"才有效果，即改成obj.style.left = x + "px";  2.烦人的offsetParent和offsetLeft问题   当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParen
Prototype源码学习之trycatch妙用
kunkkaCoco的专栏
07-17 791
var Try = { these: function() { var returnValue; for (var i = 0, length = arguments.length; i < length; i++) { var lambda = arguments[i]; try { returnValue = lamb
js常用函数之需要注意的地方
kunkkaCoco的专栏
08-10 610
1.parseInt和parseFloat 今天做时间控件的时候发现了一个奇怪，每次到了08接下来就是00，也就是这样的： parseInt("07") 返回8 parseInt("08") 返回0 你知道问题在哪吗？用javascript的parseInt函数时，parseInt("08")或者parseInt("09")返回的居然是0，而parseInt("01")...parse
python 坦克大战PPT
最新发布
06-25
它模仿经典街机游戏《坦克大战》，学生会使用Python编写控制坦克移动、射击以及碰撞检测的代码。 在制作PPT时，你可以包括以下内容： 1. **标题页**： - 标题：“Python坦克大战：入门编程实战” - 子标题：学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值