坦克大战 js实现
2017-08-30 20:06
435 查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width:600px;
height: 600px;
background-color: black;
border:1px solid gray;
margin :50px auto;
position: relative;
}
.p1{
border :1px solid black;
width :60px;
height :60px;
background-image: url("tankesucai/p1tankU.png");
border-radius: 10px;
position: absolute;
bottom :0;
left :200px;
}
.bullet{
width : 17px;
height : 17px;
position : absolute;
background:url("tankesucai/tankmissile.png");
border-radius: 50%;
}
.enemy{
width :60px;
height :60px;
background: url("tankesucai/enemy1L.gif");
position: absolute;
}
</style>
</head>
<body>
<audio src="tankesucai/start.wav" autoplay ></audio>
<audio id = "fireAudio" src="tankesucai/fire.wav" ></audio>
<audio class = "moveAudio" src="tankesucai/tankeMove.wav"autoplay loop></audio>
<div class="container">
<div class="p1">
</div>
</div>
</body>
<script>
Array.prototype.indexOf = function(val){
for(var i= 0;i < this.length;i++){
if(this[i] == val)return i;
}
return -1;
};
Array.prototype.remove = function(val){
var index = this.indexOf(val);
if(index > -1){
this.splice(index , 1);
}
};
var p1 = document.getElementsByClassName("p1")[0];
var container = document.getElementsByClassName("container")[0];
var p1Direction = "up";
var p1Speed = 5;
var maxWidth = container.offsetWidth - p1.offsetWidth;
var maxHeight = container.offsetHeight - p1.offsetHeight;
// var bgAudio = "";
// bgAudio.play();
var moveAudio = document.getElementsByClassName("moveAudio")[0];
moveAudio.volume = 0;
var gameTimer = "";
var a = 0;
var isKeyDown = false;
var bullets = [];
var bx = 0;
var by = 0;
function Enemy(){
this.element = document.createElement("div");
this.element.className = "enemy";
this.speed = 5;
this.positionX = parseInt(Math.random() * 540) +1;
this.positionY = parseInt(Math.random() * 90) +1;
this.move = function(){
switch(this.direction){
case 1:
this.element.style.backgroundImage = 'url("tankesucai/enemy1L.gif")';
this.element.style.left = this.element.offsetLeft - this.speed + "px";
break;
case 2:
this.element.style.backgroundImage = 'url("tankesucai/enemy1R.gif")';
this.element.style.left = this.element.offsetLeft + this.speed + "px";
break;
case 3:
this.element.style.backgroundImage = 'url("tankesucai/enemy1U.gif")';
this.element.style.top = this.element.offsetTop - this.speed + "px";
break;
case 4:
this.element.style.backgroundImage = 'url("tankesucai/enemy1D.gi
4000
f")';
this.element.style.top = this.element.offsetTop + this.speed + "px";
break;
}
var isLeft = this.element.offsetLeft <= 0;
var isRight = this.element.offsetLeft + this.element.offsetWidth >= container.offsetWidth;
var isTop = this.element.offsetTop <=0;
var isDown = this.element.offsetTop + this.element.offsetHeight >= container.offsetHeight;
if(isLeft || isRight || isTop || isDown){
this.isDie = true;
}
}
this.isDie = false;
this.direction = parseInt(Math.random() * 4) +1;
this.timeout = setTimeout(function() {
}, (Math.random()*4 + 3) * 1000);
}
var enemys = [];
function createOneEnemy(){
var oneEnemy = new Enemy();
container.appendChild(oneEnemy.element);
oneEnemy.element.style.left = oneEnemy.positionX + "px";
oneEnemy.element.style.top = oneEnemy.positionY + "px";
enemys.push(oneEnemy);
return oneEnemy;
}
function Bullet(){
this.element = document.createElement("div");
this.element.className = "bullet";
this.speed = 10;
this.direction = "left";
this.isDie = false;
this.move = function(){
switch(this.direction){
case "left":
this.element.style.left = this.element.offsetLeft - this.speed + "px";
break;
case "right":
this.element.style.left = this.element.offsetLeft + this.speed + "px";
break;
case "up":
this.element.style.top = this.element.offsetTop - this.speed + "px";
break;
case "down":
this.element.style.top = this.element.offsetTop + this.speed + "px";
break;
}
var isLeft = this.element.offsetLeft <= 0;
var isRight = this.element.offsetLeft + this.element.offsetWidth >= container.offsetWidth;
var isTop = this.element.offsetTop <=0;
var isDown = this.element.offsetTop + this.element.offsetHeight >= container.offsetHeight;
if(isLeft || isRight || isTop || isDown){
this.isDie = true;
}
}
this.positionX = 0;
this.positionY = 0;
}
function createOneBullet(bulletDirection , positionX , positionY){
var oneBullet = new Bullet();
oneBullet.direction = bulletDirection;
oneBullet.positionX = positionX;
oneBullet.positionY = positionY;
container.appendChild(oneBullet.element);
oneBullet.element.style.left = oneBullet.positionX + "px";
oneBullet.element.style.top = oneBullet.positionY + "px";
fireAudio.play();
bx = p1.offsetLeft + p1.offsetWidth / 2-5;
by = p1.offsetTop - 17;
return oneBullet;
}
gameTimer = setInterval(function(){
a++;
if(isKeyDown == true){
moveAudio.volume = 1;
p1Move(p1Direction);
}else{
moveAudio.volume = 0;
}
if(bullets.length > 0){
for(var i = 0;i < bullets.length;i++){
if(bullets[i].isDie == false){
bullets[i].move();
}else{
bullets[i].element.remove();
bullets = [];
}
}
}
var suijishu = parseInt(Math.random()*50)+20;
if(a % suijishu == 0 ){
if(enemys.length >=10){
}else{
createOneEnemy();
}
}
if(a >= 2000){
a = 20;
}
if(enemys.length > 0){
for(var i = 0;i < enemys.length;i++){
if(enemys[i]){
if(enemys[i].isDie == false){
enemys[i].move();
}else{
enemys[i].element.remove();
enemys.remove(enemys[i]);
i--;
}
}
}
}
},50);
document.onkeydown = function (event){
switch(event.keyCode){
case 37:
case 65:
p1Direction = "left";
isKeyDown = true;
bx = p1.offsetLeft -17;
by = p1.offsetTop + p1.offsetHeight /2-14;
// p1Move(p1Direction);
break;
case 38:
case 87:
p1Direction = "up";
isKeyDown = true;
bx = p1.offsetLeft + p1.offsetWidth / 2-5;
by = p1.offsetTop - 17;
// p1Move(p1Direction);
break;
case 39:
case 68:
p1Direction = "right";
isKeyDown = true;
bx = p1.offsetLeft + p1.offsetWidth;
by = p1.offsetTop + p1.offsetWidth/2 - 8;
// p1Move(p1Direction);
break;
case 40:
case 83:
p1Direction = "down";
isKeyDown = true;
bx = p1.offsetLeft + p1.offsetWidth /2 -5;
by = p1.offsetTop + p1.offsetHeight;
// p1Move(p1Direction);
break;
case 32:
if(bullets.length > 0){
}else{
var one = createOneBullet(p1Direction , bx , by);
bullets.push(one);
}
break;
default:
break;
}
}
document.onkeyup = function(){
isKeyDown = false;
}
function p1Move(direction){
switch (direction){
case "left":
p1.style.backgroundImage = 'url("tankesucai/p1tankL.png")';
p1.style.left = p1.offsetLeft - p1Speed + "px";
if(p1.offsetLeft <= 0){
p1.style.left = 0 + "px";
}
break;
case "right":
p1.style.backgroundImage = 'url("tankesucai/p1tankR.png")';
p1.style.left = p1.offsetLeft + p1Speed + "px";
if(p1.offsetLeft >= maxWidth){
p1.style.left = maxWidth + "px";
}
break;
case "up":
p1.style.backgroundImage = 'url("tankesucai/p1tankU.png")';
p1.style.top = p1.offsetTop - p1Speed + "px";
if(p1.offsetTop <= 0){
p1.style.top = 0 + "px";
}
break;
case "down":
p1.style.backgroundImage = 'url("tankesucai/p1tankD.png")';
p1.style.top = p1.offsetTop + p1Speed + "px";
if(p1.offsetTop >= maxHeight){
p1.style.top = maxHeight + "px";
}
break;
default:
break;
}
}
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- java实现坦克大战1.0版 在面板上画出坦克
- js面向对象编程小游戏（坦克大战1.0版本）
- JAVA实现坦克大战1.0版本
- node.js websocket+html5实现的简单联网tank大战的游戏模型
- java 实现坦克大战2.1版
- 用java做坦克大战--主要类和基本功能实现
- java 实现坦克大战 3.0版
- JS+canvas实现人机大战之五子棋
- js实现的飞机大战
- JS面向对象实现飞机大战
- 坦克大战1（坦克的绘图实现）
- js_day25--js DOM编程（style对象之 坦克大战转向+切换菜单效果）
- js实现的日历
- js实现时分秒
- php/js获取客户端mac地址的实现代码
- js实现收缩导航树
- JS实现子元素scroll父元素容器不跟随滚动
- js实现随机图片变动
- JS，如果没有方法。。。（不借助任何JS方法实现round方法）
- 用JS实现上传图片前预览