springboot+netty开发简易式游戏：让自己的坦克动起来

最新推荐文章于 2024-01-11 19:44:29 发布

不会吃萝卜的兔子

最新推荐文章于 2024-01-11 19:44:29 发布

阅读量565

点赞数

分类专栏： netty初解文章标签： netty spring boot html5

本文链接：https://blog.csdn.net/u013399297/article/details/112441451

版权

netty初解专栏收录该内容

9 篇文章 2 订阅

订阅专栏

先上结果图

相当简易T_T ！！到这里是前台游戏页面开发。

代码

代码很笼统也有点乱，懂不懂看你运气了>_<，我会尽力的。

1. html页面

<!DOCTYPE html>
<html>
<head>
	<title>坦克大战</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/game.css">
</head>
<body>
<!-- 画布 -->
<canvas id="canvas" width="1000" height="500"></canvas>
<!-- 击杀显示面板 -->
<div id="notice">
	<p>你 击杀了 22</p>
</div>
<!-- 账户信息 -->
<div class="score">
	用户名：<span>keke</span>
	颜色：<span>red</span>
	分数：<span>77</span>
	<span style="margin-left:300px">服务器：</span><span id="service">已连接</span>
</div>
<script type="text/javascript" src="js/tank.js"></script>
<script type="text/javascript" src="js/game.js"></script>
</body>
</html>

2. css文件

body,ul,li,p {
	padding: 0;
	margin: 0;
	overflow: hidden;
}
li {
	list-style-type: none;
}
canvas {
	background: black;
	border: 10px solid #ccc;
}
#notice {
	width: calc(100% - 1020px);
	height: calc(500px + 17px);
	border-top: 1px solid #ccc;
	border-bottom: 2px solid #ccc;
	line-height: 20px;
	position: absolute;
	top: 0;
	right: 0;
}
.score {
	padding: 10px;
	font-size: large;
}
.score span {
	margin-right: 10px;
}

都没什么可解释的，如果你不懂可能你有点菜了！！！

3. tank.js文件

/*我方发射子弹集合，这是一个全局对象，可在其他js文件中使用，后期会有很多这种形式的变量*/
var bullets = new Array();

/*坦克父类*/
function Tank(args) {
	this.x = args.x;
	this.y = args.y;
	this.w = 20;
	this.h = 20;
	this.color = args.color;
	this.speed = 2;
	this.isLive = true;
	this.direct = 'up';
}

/*第一类坦克，后面你可以自己扩展，Tank2,3等等，设置不懂的速度、颜色等*/
function Tank1(args) {
	/*下面两行是js实现继承的方式，意为Tank中属性，Tank1中可直接使用*/
	this.tank = Tank;
	this.tank(args);

	/*当前坦克id*/
	this.id = args.id;

	/*上移*/
	this.moveUp = function() {
		this.direct = 'up';
		if (this.y > 0) this.y -= this.speed;
	};

	/*下移*/
	this.moveDown = function() {
		this.direct = 'down';
		if (this.y + this.h < 500) this.y += this.speed;
	}

	/*左移*/
	this.moveLeft = function() {
		this.direct = 'left';
		if (this.x > 0) this.x -= this.speed;
	}

	/*右移*/
	this.moveRight = function() {
		this.direct = 'right';
		if (this.x + this.w < 1000) this.x += this.speed;
	}

	/*射击*/
	this.shot = function() {
		var bullet = null; //创建子弹对象

		/*设置子弹初始位置，根据坦克炮筒方向设置子弹的位置和运动方向*/
		switch(this.direct) {
			case 'up':
				bullet = new BulletOwn(this.x+8, this.y-3, this.direct);
				break;
			case 'down':
				bullet = new BulletOwn(this.x+8, this.y+23, this.direct);
				break;
			case 'right':
				bullet = new BulletOwn(this.x+20, this.y+8, this.direct);
				break;
			case 'left':
				bullet = new BulletOwn(this.x-3, this.y+8, this.direct);
				break;
		}

		bullets.push(bullet); //添加到集合
		/*启动定时器，这两行代码理解起来会有困难，建议看完全部文件在回来理解*/
		var timer = window.setInterval('bullets['+(bullets.length-1)+'].run()', 100);
		bullets[bullets.length-1].timer = timer;
	}
}

/*子弹父类*/
function Bullet(x, y, direct) {
	this.x = x;
	this.y = y;
	this.w = 3;
	this.h = 3;
	this.speed = 10;
	this.timer = null;
	this.isLive = true;
	this.direct = direct;
}

function BulletOwn(x, y, direct) {
	/*继承子弹父类*/
	this.bullet = Bullet;
	this.bullet(x, y, direct);

	/*子弹自运行*/
	this.run = function() {

		/*触碰边界*/
		if (this.x <=0 || this.x >= 1000 || this.y <=0 || this.y >= 500) {
			this.isLive = false;
			window.clearInterval(this.timer);
		}

		/*子弹运动*/
		switch(this.direct) {
			case 'up':
				this.y -= this.speed;
				break;
			case 'down':
				this.y += this.speed;
				break;
			case 'right':
				this.x += this.speed;
				break;
			case 'left':
				this.x -= this.speed;
				break;
		}

		/*判断当前子弹是否碰撞其他坦克*/
		for (var i in other) {
			if (other[i].isLive && collide(this, other[i])) {
				this.isLive = false;
				window.clearInterval(this.timer);
				other[i].isLive = false;
				break;
			}
		}
	}
}

/*碰撞检测，看不懂自行百度矩形碰撞检测算法*/
function collide(obj1, obj2) {
	var mw = (obj1.w + obj2.w) / 2;
	var mh = (obj1.h + obj2.h) / 2;
	if (Math.abs(obj1.x + obj1.w/2 - obj2.x - obj2.w/2) < mw
		&& Math.abs(obj1.y + obj1.h/2 - obj2.y - obj2.h/2) < mh) {
		return true;
	}
	return false;
}

4. game.js文件，主运行文件

/*获取画布*/
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

/*定义己方坦克属性*/
var info1 = {
	x: 20,
	y: 20,
	id: 1,
	color: 'green'
}

/*定义敌方坦克属性*/
var info2 = [{
				x: 400,
				y: 60,
				id: 2,
				color: 'red'
			},{
				x: 300,
				y: 400,
				id: 3,
				color: 'blue'
			}];

/*创建坦克*/
var own = new Tank1(info1);
var other = new Array();
for (var i in info2) {
	other.push(new Tank1(info2[i]));
}

/*绘制坦克*/
function drawTank(tank) {
	if (tank.isLive) {
		ctx.fillStyle = tank.color;
		ctx.fillRect(tank.x, tank.y, tank.w, tank.h);
		ctx.fillStyle = 'white';
		switch(tank.direct) {
			case 'up':
				ctx.fillRect(tank.x+5, tank.y, 10, 10);
				break;
			case 'down':
				ctx.fillRect(tank.x+5, tank.y+10, 10, 10);
				break;
			case 'left':
				ctx.fillRect(tank.x, tank.y+5, 10, 10);
				break;
			case 'right':
				ctx.fillRect(tank.x+10, tank.y+5, 10, 10);
				break;
		}
	} else {
		ctx.fillStyle = 'white';
		ctx.fillRect(tank.x, tank.y, tank.w, tank.h);
	}
}

/*绘制子弹*/
function drawBullet() {
	for (var i in bullets) {
		if (bullets[i].isLive) {
			ctx.fillStyle = bullets[i].color;
			ctx.fillRect(bullets[i].x, bullets[i].y, 3, 3);
		} else {
			delete bullets[i];
		}
	}
}

/*画布刷新函数，每50毫秒进行一次绘制，先清除画布在绘制*/
function flush() {
	ctx.clearRect(0,0,1000,500);
	drawTank(own);
	for (var i in other) {
		drawTank(other[i]);
	}
	drawBullet();
}
setInterval(flush, 50);

/*监听键盘*/
window.onkeydown = function(event) {
	if (own.isLive) {
		var code = event.keyCode;
		switch(code) {
			case 87: //w
				own.moveUp();
				break;
			case 68: //d
				own.moveRight();
				break;
			case 83: //s
				own.moveDown();
				break;
			case 65: //a
				own.moveLeft();
				break;
			case 74: //j
				own.shot();
				break;
		}
	} else {
		alert('你已阵亡');
	}
}

原理

1. 先设置好坦克和子弹的父类，在子类里面添加属于自己的特殊属性，如速度、颜色等。你们自己也可以扩展，如血量、防御等。

2. 在坦克类shot方法中添加子弹运动的定时器，子弹发射之后是不可控制，并且沿一个方向前进。

3. 在子弹的run方法中，设置运动相关规则，不可超越边界、检测是否碰撞其他坦克。

4. 分别设置坦克、子弹的绘制函数，统一在flush方法中刷新。

5. 通过监听键盘控制自己的坦克。

上面代码是不能做到即时游戏的，不过会以此为基础进行扩展开发。

返回目录

上一篇：H5 canvas基础

下一篇：用户后台开发

不会吃萝卜的兔子

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
springboot+netty开发简易式游戏：让自己的坦克动起来

先上结果图相当简易T_T ！！到这里依旧是前台游戏页面开发。代码代码很笼统也有点乱，懂不懂看你运气了>_<，我会尽力的。1. html页面<!DOCTYPE html><html><head> <title>坦克大战</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="css/game
复制链接

扫一扫

专栏目录