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.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
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值