html,css,js,简单飞机游戏

游戏效果实现如下：

游戏代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>猿说教育飞机大战V1.0</title>
<style type="text/css">
#gameBox{
width: 500px;
height: 500px;
/* border: 1px solid #000; */
margin: 50px auto;
box-shadow: 0px 0px 5px 2px #565a72;
position:relative;
overflow:hidden;
}
h3{
text-align: center;
font-size: 30px;
padding-top: 20px;
text-shadow: 0px 0px 1px #666;
}
.btn{
margin: 200px auto;
width: 200px;
height: 40px;
line-height: 40px;
border: 1px solid #000;
text-align: center;
cursor: pointer;
}
.btn:hover{
box-shadow: 0px 0px 2px 2px #666;
background: #cecece;
color: #fff;
}
.plane{
height: 65px;
position: absolute;
top: 10px;
left: 20px;
}
.bullet{
position: absolute;
height:22px;
}
.enemy{
position:absolute;
height:40px;
}
</style>
</head>
<body>


<div id="gameBox"></div>
<script type="text/javascript">
window.onload = function(){
game.init();
}
//用json的方式定义一个对象 new Object();
//var person = {name:"jame",sex:"帅气的男人"}
var game = {
img:function(){//加载游戏素材
game.oPlane = document.createElement("img");
game.oPlane.src="img/my_2.png";
game.oPlane.className = "plane";
},
box:document.getElementById("gameBox"),
init:function(){
game.img();
//游戏的标题
//浏览器也有内存划分，createElement只是在内存中创建
var title = document.createElement("h3");
title.innerHTML="猿说飞机大战-Jame";
//将内存中ddom对象添加到浏览器渲染
game.box.appendChild(title);
//添加游戏开始按钮
var btn = document.createElement("div");
btn.className = "btn";
btn.innerHTML = "Start Game";
game.box.appendChild(btn);
btn.onclick=function(event){
game.box.innerHTML = "";
game.plane(event);
}
btn.onmouseover = function(){
var audio = document.createElement("audio");
audio.src="music/button.mp3";
audio.play();
}
},
plane:function(ev){
game.box.appendChild(game.oPlane);
//计算飞机的初始定位在鼠标位置
var tmpTop = game.box.offsetTop+game.box.clientTop+game.oPlane.clientHeight/2;
var tmpLeft = game.box.offsetLeft+game.box.clientLeft+game.oPlane.clientWidth/2;
var top = ev.pageY - tmpTop;
var left = ev.pageX - tmpLeft;
game.oPlane.style.cssText = "top:"+top+"px;left:"+left+"px";
//找到四个方位的边界
//顶部 top不能小于0
var topMin = 0;
//底部 top不能大于游戏面板高度-飞机高度的一半
var topMax = game.box.clientHeight-game.oPlane.clientHeight/2;
//左边 left不能小于-飞机宽度的一半
var leftMin= 0-game.oPlane.clientWidth/2;
//右边 left 不能大于面板的宽度-飞机的宽度的一半
var leftMax = game.box.clientWidth-game.oPlane.clientWidth/2;
document.onmousemove = function(event){
top = event.pageY - tmpTop;
left = event.pageX - tmpLeft;
if(top<topMin){
top = topMin;
}else if(top>topMax){
top = topMax;
}
if(left<leftMin){
left = leftMin;
}else if(left>leftMax){
left = leftMax;
}
game.oPlane.style.cssText = "top:"+top+"px;left:"+left+"px";
}
//用一个定时任务来产生子弹
game.bulletTimer = setInterval(function(){
game.bullet(top,left);
},100);
game.enemyTimer = setInterval(function(){
game.enemy();
},200);
},
bullet:function(top,left){
var oB = document.createElement("img");
oB.src="img/myb_3.png";
oB.className = "bullet";
game.box.appendChild(oB);
top = top - oB.clientHeight;
left = left+game.oPlane.clientWidth/2-oB.clientWidth/2;
oB.style.cssText = "top:"+top+"px;left:"+left+"px";
oB.time = setInterval(function(){
top-=5;
oB.style.top = top+"px";
if(top<0){//top小于0 代表子弹已经飞出顶部
clearInterval(oB.time);
try{
oB.parentNode.removeChild(oB);
}catch(e){}
}
},10);
},
enemy:function(){
var oEnemy = document.createElement("img");
oEnemy.src="img/ep_6.png";
oEnemy.className = "enemy";
var top = - oEnemy.clientHeight;
var left = Math.random()*(game.box.clientWidth-oEnemy.clientWidth);
oEnemy.style.top = top+"px";
oEnemy.style.left = left+"px";
game.box.appendChild(oEnemy);
var topMax = game.box.clientHeight;
oEnemy.timer = setInterval(function(){
top+=5;
oEnemy.style.top = top+"px";
if(top>topMax){
clearInterval(oEnemy.timer);
oEnemy.parentNode.removeChild(oEnemy);
}
},50);
//子弹的碰撞
oEnemy.boom = setInterval(function(){
//敌机的四个方向的值要算出来
var eT = parseInt(oEnemy.style.top);
var eB = eT+oEnemy.clientHeight;
var eL = parseInt(oEnemy.style.left);
var eR = eL+oEnemy.clientWidth;
//拿到现在所有的子弹
var bullets = document.getElementsByClassName("bullet");
for(var i = 0 ; i < bullets.length;i++){
var bullet = bullets[i];
var bT = parseInt(bullet.style.top);
var bB = bT+bullet.clientHeight;
var bL = parseInt(bullet.style.left);
var bR = bL+bullet.clientWidth;
if(bB > eT && bT < eB&& bR > eL && bL < eR){
var audio = document.createElement("audio");
audio.src="music/enemy3_down.mp3";
audio.play();
oEnemy.src="img/boom.png";
game.box.removeChild(bullet);
setTimeout(function(){game.box.removeChild(oEnemy);},500);
clearInterval(oEnemy.boom);
clearInterval(oEnemy.timer);
}
}
},30);
}
};
</script>
</body>
</html>

html,css,js,简单飞机游戏

猜你喜欢