打飞机小游戏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的知识已经忘得差不多了。作为一个大学生,还是要时常复习,以前学习过的知识。要不慢慢地就不知道还给谁了,
顺便提一句余华的《活着》把我看感动了,那种真心的感动。
打飞机小游戏html代码,JavaScript用200行代码制作打飞机小游戏相关推荐
- blockchain 区块链200行代码:在JavaScript实现的一个简单的例子
blockchain 区块链200行代码:在JavaScript实现的一个简单的例子 了解blockchain的概念很简单(区块链,交易链块):它是分布式的(即不是放置在同一台机器上,不同的网络设备上 ...
- JavaScript开发区块链只需200行代码
JavaScript开发区块链只需200行代码 用JavaScript开发实现一个简单区块链.通过这一开发过程,你将理解区块链技术是什么:区块链就是一个分布式数据库,存储结构是一个不断增长的链表,链表 ...
- 2048左移JAVA代码实现,200 行代码实现 2048 游戏
原标题:200 行代码实现 2048 游戏 作者:Guolanzhe 原文: http://www.guolanzhe.com/?p=522创建游戏文件 2048.py 首先导入需要的包: impor ...
- js websocket同步等待_WebSocket硬核入门:200行代码,教你徒手撸一个WebSocket服务器...
本文原题"Node.js - 200 多行代码实现 Websocket 协议",为了提升内容品质,有较大修订. 1.引言 最近正在研究 WebSocket 相关的知识,想着如何能自 ...
- C# winform 简单五子棋 200行代码实现人机对战
1.功能需求 接上篇博文,本文描述简单人机对战实现过程,只是简单实现考虑走一步策略,如果要想实现走多步策略,可以在本文估值算法的基础上用极大极小值配合剪枝算法,实现考虑多步策略,这样ai会显得更加聪明 ...
- 200行代码如何实现人脸识别开锁应用?
多种条件限制之下,如何完成真人实景游戏场景下的人脸识别开锁功能?云加社区邀请到腾讯科技产品经理-高树磊,分享他是如何用200行代码,从系统架构.硬件选型.到系统搭建,一步步地实现此精致小巧的人脸识别开 ...
- 爬虫python代码-Python爬虫教程:200行代码实现一个滑动验证码
Python爬虫教程:教你用200行代码实现一个滑动验证码 做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大 ...
- 不到 200 行代码,教你如何用 Keras 搭建生成对抗网络(GAN)
不到 200 行代码,教你如何用 Keras 搭建生成对抗网络(GAN) 生成对抗网络(Generative Adversarial Networks,GAN)最早由 Ian Goodfello ...
- 蒋金楠:200行代码7个对象《ASP.NET Core框架揭密》苏州.NET俱乐部课程分享
[课程名称] <ASP.NET Core框架揭密> [老师介绍] 蒋金楠,同程艺龙机票事业部技术专家,微软最有价值专家(MVP,连续12),多本.NET专著作者.博客园Artech,公众号 ...
- 前端 验证码隐藏怎么实现_Python爬虫教程:200行代码实现一个滑动验证码
Python爬虫教程:教你用200行代码实现一个滑动验证码 做网络爬虫的同学肯定见过各种各样的验证码,比较高级的有滑动.点选等样式,看起来好像挺复杂的,但实际上它们的核心原理还是还是很清晰的,本文章大 ...
最新文章
- python对共轭复数的定义_python print出共轭复数的方法详解
- 那个能力很强的程序员学历造假,被辞退了!
- IIS7.5 HTTP 错误 500.19 - Internal Server Error 问题的解决方案
- numpy添加元素_科研速递 | 花费15年众望所归!NumPy论文终登上Nature!
- ubuntu下各个目录的含义
- android 函数名注册,Android JNI 函数注册的两种方式(静态注册/动态注册)
- 一文详细分析公式树开源库
- 2. Vue基础语法
- oracle解密des乱码,Oracle定义DES加密解密及MD5加密函数示范
- 开工利是!循序渐进~
- Feature Statistics Mixing Regularization for Generative Adversarial Networks
- 仿真软件测试报告,仿真软件实验实验报告.doc
- 【深度学习风格化/生成艺术】图像融合--毫无违和
- html 表单 设计编辑器,可视化页面编辑器的架构设计
- 2019中国区块链开发者大会 | Conflux 伍鸣:性能问题仍是区块链的应用阻碍
- python提取txt数据到excel
- Excel 轻松制作 二级联动 下拉列表清单
- 公众平台模板消息所在行业_微信公众号模板消息群发第三方平台可以免费试用吗?...
- windows10新增本地账户
- 【Ubuntu18.04】移动固态硬盘安装ubuntu18.04、NIVDIA、CUDA、CUDNN——01