一、效果图
二、代码
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<style type="text/css">
#map{width:700px; height:600px; border:0px solid #CCC; overflow:hidden;}
.maps{width:10px; height:10px; float:left; overflow:hidden;border:1px solid red;}
.enemy{background:black;}
.tank{background:blue;}
.bullet{background:purple;}
</style>
<script type="text/javascript">
// tank运行定时器
var tankInt;
// tank运行状态
var tankIsRunning = false;
// 定义方格
function Box(x,y){
this.x = x;
this.y = y;
}
// 初始化地图
function initMap(){
for(var i=1;i<=50;i++){
for(var j=1;j<=50;j++){
$("<div id=map_"+i+"_"+j+" class='maps'></div>").appendTo($('#map'));
if(j==50){
$('<div style="clear:both;"></div>').appendTo($('#map'));
}
}
}
}
// 定义tank
var tank = [
[new Box(1,1),new Box(2,1),new Box(2,2),new Box(3,2),new Box(1,3),new Box(2,3)],
[new Box(1,1),new Box(1,2),new Box(2,2),new Box(2,3),new Box(3,1),new Box(3,2)],
[new Box(1,2),new Box(2,1),new Box(2,2),new Box(2,3),new Box(3,1),new Box(3,3)],
[new Box(1,2),new Box(1,3),new Box(2,1),new Box(2,2),new Box(3,2),new Box(3,3)]
];
// 坦克头位置
var tankHead = [new Box(3,2),new Box(2,3),new Box(1,2),new Box(2,1)];
// tank运行方向
var tankDirection = 3;
// 横向位移
var xMove = 20;
// 纵向位移
var yMove = 20;
// 当前坦克位置
var nowTank;
// 当前坦克头位置
var nowTankHead;
// 子弹容器
var bullets = [];
// 绘制tank
function drawTank(){
for(var i=0;i<tank[tankDirection].length;i++){
var point = tank[tankDirection][i];
var x = point.x+xMove;
var y = point.y+yMove;
$("#map_"+x+"_"+y).addClass('tank');
}
nowTank = tank[tankDirection];
nowTankHead = tankHead[tankDirection];
}
// 清除tank
function cleanTank(){
for(var i=0;i<nowTank.length;i++){
var point = nowTank[i];
var x = point.x+xMove;
var y = point.y+yMove;
$("#map_"+x+"_"+y).removeClass('tank');
}
}
// 绘制子弹
function drawBullet(bullet){
$("#map_"+bullet.x+"_"+bullet.y).addClass('bullet');
}
// 清除子弹
function cleanBullet(bullet){
$("#map_"+bullet.x+"_"+bullet.y).removeClass('bullet');
}
// tank前进
function tankForward(){
cleanTank();
switch (tankDirection){
case 0:
if(nowTankHead.x + xMove < 50){
xMove ++ ;
}
break;
case 1:
if(nowTankHead.y + yMove < 50){
yMove ++ ;
}
break;
case 2:
if(1 < nowTankHead.x + xMove){
xMove -- ;
}
break;
case 3:
if(1 < nowTankHead.y + yMove){
yMove -- ;
}
break;
}
drawTank();
}
// tank发射子弹 将新发射的子弹放入bullets数组中
function shoot(){
var bulletBox = new Box(nowTankHead.x + xMove, nowTankHead.y + yMove);
switch (tankDirection){
case 0:
bulletBox.x += 1 ;
break;
case 1:
bulletBox.y += 1 ;
break;
case 2:
bulletBox.x -= 1 ;
break;
case 3:
bulletBox.y -= 1 ;
break;
}
var bulletDirection = tankDirection
var bullet = {
bulletBox : bulletBox,
bulletDirection : bulletDirection
}
bullets.push(bullet);
}
// 子弹前进，统一管理子弹运行
function bulletsForward(){
for(var i=0;i<bullets.length;i++){
bullet = bullets[i];
var bulletDirection = bullet.bulletDirection;
var bulletBox = bullet.bulletBox;
cleanBullet(bulletBox);
switch (bulletDirection){
case 0:
bulletBox.x += 1 ;
break;
case 1:
bulletBox.y += 1 ;
break;
case 2:
bulletBox.x -= 1 ;
break;
case 3:
bulletBox.y -= 1 ;
break;
}
drawBullet(bulletBox);
for(var j=0;j<nowEnemy.length;j++){
if(bulletBox.x == nowEnemy[j].x && bulletBox.y == (nowEnemy[j].y + yMoveEnemy)){
cleanEnemy();
nowEnemy = [];
break;
}
}
}
}
// 定义enemy
var enemy = [
[new Box(1,1),new Box(1,2),new Box(2,2),new Box(2,3),new Box(3,1),new Box(3,2)],
[new Box(1,2),new Box(1,3),new Box(2,1),new Box(2,2),new Box(3,2),new Box(3,3)]
];
// 定义enemy头
var enemyHead = [new Box(2,3),new Box(2,1)];
// enemy运行方向
var enemyDirection = 0;
// enemy y轴位移
var yMoveEnemy = 0;
// enemy当前位置
var nowEnemy = enemy[enemyDirection];
// enemy头当前位置
var nowEnemyHead = enemyHead[enemyDirection];
// 绘制enemy
function drawEnemy(){
for(var i=0;i<nowEnemy.length;i++){
var point = nowEnemy[i];
$("#map_"+point.x+"_"+(point.y + yMoveEnemy)).addClass('enemy');
}
}
// 清除enemy
function cleanEnemy(){
for(var i=0;i<nowEnemy.length;i++){
var point = nowEnemy[i];
$("#map_"+point.x+"_"+(point.y + yMoveEnemy)).removeClass('enemy');
}
}
// enemy前进
function enemyForward(){
cleanEnemy();
if(enemyDirection == 0){
if(nowEnemyHead.y + yMoveEnemy < 50){
yMoveEnemy ++ ;
}else{
enemyDirection = 1;
nowEnemy = enemy[enemyDirection];
nowEnemyHead = enemyHead[enemyDirection];
}
}else{
if(nowEnemyHead.y + yMoveEnemy > 0){
yMoveEnemy -- ;
}else{
enemyDirection = 0;
nowEnemy = enemy[enemyDirection];
nowEnemyHead = enemyHead[enemyDirection];
}
}
drawEnemy();
}
$(function(){
// 初始化地图
initMap();
// 初始化tank
drawTank();
// 启动子弹定时器
setInterval(function(){
bulletsForward();
},50);
// 绘制enemy
drawEnemy();
// 启动enemy定时器
setInterval(function(){
enemyForward();
},300);
// 监听按下键盘 37左键 38上建 39右键 下键40 32空格键 发射子弹
$(document).keydown(function(e){
var forwardFlag = false;
switch(e.which){
case 37:
if(tankDirection != 3){
tankDirection = 3;
}
forwardFlag = true;
break;
case 38:
if(tankDirection!=2){
tankDirection = 2;
}
forwardFlag = true;
break;
case 39:
if(tankDirection!=1){
tankDirection = 1;
}
forwardFlag = true;
break;
case 40:
if(tankDirection != 0){
tankDirection = 0;
}
forwardFlag = true;
break;
case 32:
shoot();
break;
}
if(forwardFlag){
if(!tankIsRunning){
gameInt = setInterval(function(){
tankForward();
},100);
tankIsRunning = true;
}
}
});
// 监控弹起键盘 tank停止运行
$(document).keyup(function(e){
switch(e.which){
case 40:
case 39:
case 38:
case 37:
clearInterval(gameInt);
tankIsRunning = false;
break;
}
});
});
</script>
<div id="map"></div>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于