先上结果图
相当简易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. 通过监听键盘控制自己的坦克。
上面代码是不能做到即时游戏的,不过会以此为基础进行扩展开发。