打飞机小游戏html代码,JavaScript用200行代码制作打飞机小游戏

我去，我的图片分数被这个录屏软件的水印盖上了，扎心。

打飞机

这个程序的文件以及代码全部上传到了github

程序下载链接传送门

这是自己第一次通过js写的小游戏，那个时候对象的原理跟结构体的概念不是特别的清晰，所以没用对象来写，所以直接导致后期我对这个程序进行修改的时候出现问题，太过于复杂了，我终于了解什么叫做牵一发动全身了。所以这个程序教会我一定一定要用对象的思想处理以后的问题，尤其是这种带属性明显的东西。

当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创。

所用到的图片

代码部分我是通过一个大的函数直接进行所有的封装，当然写这个的时候的我完完全全对jquery么有一丁点认识，所以自己写了渐隐渐现的函数。所以开始的代码很简单。

window.onload = function(){

var Base = new base();

var start = document.getElementById('start');

start.onclick = function(){

Base.fadehide('start');

getId('path').style.display='block';

Base.fadeshow('path');

Base.createBullteAndMovePlain();

}

}

这就是开始接入的函数。渐隐渐现的函数是这个。

this. fadehide = function (name){

var i = 1;

var odiv = document.getElementById(name);

function show(){

odiv.style.opacity = i;

i-=0.1;

if(i<0){odiv.style.display = 'none';clearInterval(t);

}

}

var t = setInterval(show,10);

return this;

}

this.fadeshow = function (name){

var i = 0;

var odiv = document.getElementById(name);

function show(){

odiv.style.opacity = i;

i+=0.1;

if(i>1){clearInterval(t);}

}

var t = setInterval(show,100);

return this;

}

剩下的代码，懒得解释了，里面有注释。

//生成子弹

this.createBullteAndMovePlain = function (){

var arr= [];

var bulletNum=[];

var way = path.getElementsByClassName('way');

var play =document.getElementById('bullet');

var flag =0;

var score=0;

//获取按键

document.onkeydown = function(evt){

var ev = evt||event;

//left keyCode is 39

//right keyCode is 37

switch(ev.keyCode){

case 39:

flag=(flag+1)%5;

break;

case 37:

if(flag==0){

flag=Math.abs(flag-4);

}else if(flag>0){

flag=(flag-1)%5;

}

break;

}

//移动飞机

function movePlain (){

var plain = document.getElementById('player');

switch(flag){

case 0:player.style.left='0px';break;

case 1: player.style.left='100px';break;

case 2: player.style.left='200px';break;

case 3: player.style.left='300px';break;

case 4:player.style.left='400px';break;

}

}

movePlain();

}

function createBulltes(){

//生成敌人

var newenemy = document.createElement('img');

newenemy.src = 'img/enemy.png';

newenemy.style.position='absolute';

newenemy.style.zIndex='5';

var enemyTop=0;

var sign=0;

var randomNum = Math.random()*5;

sign=Math.floor(randomNum);

newenemy.style.top='0px';

switch(sign){

case 0:newenemy.style.left='0px';break;

case 1: newenemy.style.left='100px';break;

case 2: newenemy.style.left='200px';break;

case 3: newenemy.style.left='300px';break;

case 4:newenemy.style.left='400px';break;

}way[0].appendChild(newenemy);

arr.unshift(newenemy);

//生成子弹

var bullet = document.getElementById('bullet');

var newbullet = document.createElement('img');

var plain = document.getElementById('player');

newbullet.className='bullet';

newbullet.style.position='absolute';

newbullet.style.top='560px';

newbullet.src='img/bullet.png';

newbullet.style.zIndex='4';

var bulletTop=0;

switch(flag){

case 0: newbullet.style.left='45px';player.style.left='0px';;break;

case 1: newbullet.style.left='145px';player.style.left='100px';;break;

case 2: newbullet.style.left='245px';player.style.left='200px';break;

case 3: newbullet.style.left='345px';player.style.left='300px';break;

case 4: newbullet.style.left='445px';player.style.left='400px';break;

}way[2].appendChild(newbullet);

bulletNum.unshift(newbullet);

//分数图片

function scoreup(score){

var imgs = document.getElementsByClassName('score');

var imgsnum=score.toString().split('');

for(var i=0; i

imgs[4-i].src='img/'+imgsnum[i]+'.png';

}

}

//判定触碰

function decide(){

for(var i = 0;i

for(var j=0; j

if(arr[i].offsetLeft==(bulletNum[j].offsetLeft-45)&&((arr[i].offsetTop+98)>bulletNum[j].offsetTop-10&&(arr[i].offsetTop+98)

score++;

scoreup(score);

arr[i].parentNode.removeChild(arr[i]);

bulletNum[j].parentNode.removeChild(bulletNum[j]);

}

}

var player=document.getElementById('player');

for(var i=0; arr.length; i++){

if(arr[i].offsetLeft==player.offsetLeft&&(arr[i].offsetTop+70)==player.offsetTop){

alert('game over');location.reload();

}

}

}

//放在一起的移动

function bulletmove (){

bulletTop=newbullet.offsetTop;

enemyTop=newenemy.offsetTop;

// alert('buller:'+newbullet.offsetLeft);

// alert(newenemy.offsetLeft);

function move (){

bulletTop-=6;

enemyTop+=1;

newbullet.style.top=bulletTop+'px';

newenemy.style.top=enemyTop+'px';

decide();

if(bulletTop==0&&enemyTop==560){

newbullet.style.opacity='0';

newenemy.style.opacity='0';

clearInterval(t);

}else if(bulletTop==0){

newbullet.parentNode.removeChild(newbullet);

bulletNum.pop();

}else if(enemyTop==560){

newenemy.parentNode.removeChild(newenemy);arr.pop();

}

}

var t = setInterval(move,20);

}

bulletmove();

}

var s=setInterval(createBulltes,3000);

}

}

虽然写的不怎么样，但是代码这个东西写的多了，自然而然就会了，而且我发现我对javascript的知识已经忘得差不多了。作为一个大学生，还是要时常复习，以前学习过的知识。要不慢慢地就不知道还给谁了，

顺便提一句余华的《活着》把我看感动了，那种真心的感动。