实际上我要发的这个小项目是我写崩了的,因为我一直使用C语言,所以写各个模块都用了函数,等到我把这个小项目做到稍微有点样子,我才发现,要做成雷电的样子,这他喵的应该用对象才对吧⊙﹏⊙b
于是我选择把这个小项目改了一下,变成了类似打飞镖的小游戏。
因为刚开始学习JS,所以代码肯定是瑕疵很多,主要是希望想要做点小项目的新手可以有一些参考。(比较我去网上找飞机大战的项目都是天花乱坠复杂的一批,作为一名萌新只能说是脑阔疼)
话不多说,放代码
<!DOCTYPE html>
<html>
<head>
<title>方块移动</title>
<!-- 至于为啥名字叫方块移动,其实刚开始我就只写了一个键盘事件,控制
方块移动,后来我把方块换了个飞机皮然后一直增加内容,最后有了这副身躯。
所以这刚开始是一个很小的程序,这也就是为啥我把CSS和JS都写在一个文件里的原因-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#ammo{
width: 3px;
height: 10px;
background-image:url("ammo.png") ;
background-size: cover;
position: absolute;
border: red 1px solid;
}
.blockL{
width: 800px;
height: 800px;
background-color: aquamarine;
border: 2px red solid;
}
#blockS{
width: 50px;
height: 50px;
background-image: url("plane.png");
background-size: cover;
position: absolute;
left: 500px;
top: 700px;
}
#enemy01{
width: 50px;
height: 50px;
background-image: url("enemy01.png");
background-size: cover;
position: absolute;
left: 400px;
top: 100px;
}
</style>
</head>
<body>
<div class="blockL" id='borde'>
<p id="blockS"></p>
<p id='enemy01'></p>
</div>
<script>
var a=0;
var ammop;
var big;
var enemy01=document.getElementById("enemy01");
function enemymove(){
var moveto = 10*Math.random();//使用math.random来产生一个随机数,让他移动
if(moveto>=5)
enemy01.style.left=enemy01.offsetLeft + 20+'px';
else
enemy01.style.left=enemy01.offsetLeft - 20+'px';
}
function enemyc(){
if(hit!=1)
{
var emove = setInterval( enemymove,200);//setInterval随时间调用函数
}
}//该函数调用随机移动函数控制敌机移动
function leftmove(){
if(blockS.offsetLeft>=0)
blockS.style.left=blockS.offsetLeft-30+'px';
}
function rightmove(){
if(blockS.offsetLeft<=750)
blockS.style.left=blockS.offsetLeft+30+'px';
}
function topmove(){
if(blockS.offsetTop>=0)
blockS.style.top=blockS.offsetTop-30+'px';
}
function buttommove(){
if(blockS.offsetTop<=730)
blockS.style.top=blockS.offsetTop+30+'px';
}
function hit(){
if(ammop.offsetTop<=enemy01.offsetTop+50&&ammop.offsetLeft<=enemy01.offsetLeft+50&&ammop.offsetLeft>=enemy01.offsetLeft+0){
a=0;
big.removeChild(ammop);
big.removeChild(enemy01);
return 1;
}//使用if语句判断是否击中
}
function shoot(){
a=1;
big = document.getElementById('borde');
ammop = document.createElement('p'); //创建一个P标签
ammop.id='ammo'; //给P设置CSS属性
big.appendChild(ammop); //在DIV中生成P
ammop.style.top=blockS.offsetTop - 30+'px';
ammop.style.left=blockS.offsetLeft + 15+'px';
var int = setInterval(function(){
if(hit()==1){
clearInterval(int);
alert("你赢了");
window.location.reload();
}
if(ammop.offsetTop>=10)
ammop.style.top = ammop.offsetTop - 25 + 'px';
else{
a=0;
big.removeChild(ammop);
clearInterval(int);
}
},20);
//if(ammop.offsetTop<200)
//big.removeChild(ammop);
//var ammo = document.getElementById("ammo");
//ammo.style.top=blockS.offsetTop - 30+'px';
//ammo.style.left=blockS.offsetLeft + 15+'px';
};
window.onload = function(){
var blockS = document.getElementById('blockS');
enemyc();
document.onkeydown=function(event){
console.log(event.keyCode);//键盘事件
switch(event.keyCode){
case 65:leftmove();break;
case 68:rightmove();break;
case 83:buttommove();break;
case 87:topmove();break;
case 32:if(a==0)shoot();break;
}//65 A;68 D;83 S;87 W;32 空格;
};
};
</script>
</body>
</html>
其实这个小游戏只有三点比较复杂,第一个是键盘事件,第二个是setInterval() 方法,第三个是使用JS创建HTML标签
这三点网上的大佬肯定比我讲的更清楚,大家如果不明白还是问问度娘吧~
不过还是提示一点,要注意一下clearInterval()和removeChild()这两种方法,要知道如果不加注意的话,很容易创建容易删除难呀。
这篇文章就到这里了,希望能够给需要的朋友一点帮助吧。作为一名萌新欢迎大佬指正,也希望能和大家一起进步=w=