23、svn与打飞机
svn与git
打飞机
css
*{margin:0; padding:0;}
html,body{width:100%; height:100%; overflow: hidden;}
.main{
margin: auto;
height: 100%;
background: url(images/bg.jpg) repeat-y;
background-position-y: 0px;
width: 480px;
}
.options{
position: absolute;
list-style: none;
margin: auto;
left: 0; right: 0; top: 100px;
width: 200px;
height: 300px;
}
.options li{
border-radius: 5px;
box-shadow: 0 0 2px 1px black;
float: left;
width: 200px;
height: 75px;
text-align: center;
line-height: 75px;
margin-bottom: 20px;
background: #f40;
color: white;
font: "微软雅黑";
font-size: 28px;
cursor: pointer;
}
.logo{
position: absolute;
left: 0; right: 0; top: 25%;
margin: auto;
width: 428px; height: 104px;
background: url(images/logo.png) no-repeat;
}
.loading{
position: absolute;
left: 0; right: 0; top: 60%;
margin: auto;
width: 192px; height: 41px;
background: url(images/loading1.png) no-repeat;
}
.my-warplain{
position: absolute;
width: 98px; height: 122px;
background: url(images/me.png) no-repeat;
cursor: none;
}
.bullet{
position: absolute;
width: 7px; height: 18px;
background: url(images/bullet.png) no-repeat;
}
.bullet_die{
position: absolute;
width: 41px; height: 39px;
background: url(images/die1.png) no-repeat;
margin-left: -18px;
}
.enemy-small{
position: absolute;
z-index: 1;
width: 59px; height: 36px;
background: url(images/plane1.png) no-repeat;
}
.enemy-middle{
position: absolute;
width: 70px; height: 92px;
background: url(images/plane2.png) no-repeat;
}
.enemy-large{
position: absolute;
width:165px; height: 256px;
background: url(images/plane3.png) no-repeat;
}
一.ES5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="dahuiji.css" />
<script type="text/javascript">
window.onload = function(){
new Engine();
}
//引擎
function Engine(){
//属性
this.ele = document.getElementById("body_main");//获取引擎
//获取li
this.oUllis = this.ele.children[0].children;
//记录this
var that = this;
//遍历li，添加事件
for(var i = 0,len = this.oUllis.length;i < len;i ++){
//记录下标
this.oUllis[i].index = i;
//添加点击事件
this.oUllis[i].onclick = function(){
//删除ul选项
this.parentNode.remove();
//调用加载页面的方法
that.loadPage();
that.frequency = this.index;
}
}
}
//原型方法
Engine.prototype.loadPage = function(){
//创建logo
var logo = $create('div','logo');
//加到页面
$addBody(logo);
//创建loading
var loading = $create('div','loading');
//加到页面
$addBody(loading);
//设置loading动画
var index = 1;
var timer = setInterval(function(){
loading.style.background = 'url(images/loading' + (index ++ % 3 + 1) + '.png) no-repeat';
},500);
//设置背景动画
var that = this;
var positionY = 1;
setInterval(function(){
that.ele.style.backgroundPositionY = ++ positionY + 'px';
},30)
//3秒到达战场
setTimeout(function(){
//清场
//删除logo
logo.remove();
//删除loading
loading.remove();
//停止loading动画
clearInterval(timer);
//开始游戏
that.gameStart();
},3000)
}
Engine.prototype.gameStart = function(){
//我方飞机入场
Plane.init();
//我方飞机开火
Plane.fire(this.frequency);
//创建敌机
this.createEnemy();
}
Engine.prototype.createEnemy = function(){
//设置敌机的类型和产生的概率
//敌小机
setInterval(function(){
Math.random() > 0.5 ? new Enemy(0) : "";
},500)
//敌中机
setInterval(function(){
Math.random() > 0.5 ? new Enemy(1) : "";
},1000)
//敌大机
setInterval(function(){
Math.random() > 0.2 ? new Enemy(2) : "";
},8000)
}
//我方飞机
var Plane = {
//创建我方飞机
ele : $create('div','my-warplain'),
//初始化我方飞机
init : function(){
//放到页面
$addBody(this.ele);
//我方飞机定位
this.ele.style.left = document.documentElement.clientWidth / 2 - this.ele.offsetWidth / 2 + 'px';
this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + 'px';
//调用我方飞机运动
this.fly();
},
fly : function(){
var that = this;
//获取引擎div
var bodyMain = document.getElementById("body_main");
//鼠标跟随
document.onmousemove = function(evt){
var e = evt || window.event;
//设置边界
var left = e.pageX - that.ele.offsetWidth / 2;
var top = e.pageY - that.ele.offsetHeight / 2;
if(left <= bodyMain.offsetLeft){
left = bodyMain.offsetLeft;
}
if(left >= bodyMain.offsetLeft + bodyMain.offsetWidth - that.ele.offsetWidth){
left = bodyMain.offsetLeft + bodyMain.offsetWidth - that.ele.offsetWidth;
}
that.ele.style.left = left + 'px';
that.ele.style.top = top + 'px';
}
},
fire : function(frequency){
var frequencyMe = 200; //默认的开火频率
switch(frequency){
case 0 : frequencyMe = 500;break;
case 1 : frequencyMe = 400;break;
case 2 : frequencyMe = 200;break;
case 3 : frequencyMe = 50;break;
}
//设置子弹ID
var bulletId = 0;
var that = this;
setInterval(function(){
that.bullet.push(new Bullet(bulletId));
bulletId ++;
console.log(that.bullet);
},frequencyMe)
},
bullet : []
}
//子弹
function Bullet(id){
this.id = id;
//创建子弹
this.ele = $create('div','bullet');
//初始化
this.init();
}
Bullet.prototype.init = function(){
//加到页面
$addBody(this.ele);
//给子弹添加id
this.ele.id = this.id;
//定位子弹
this.ele.style.left = Plane.ele.offsetLeft + Plane.ele.offsetWidth / 2 - this.ele.offsetWidth / 2 + 'px';
this.ele.style.top = Plane.ele.offsetTop - this.ele.offsetHeight + 'px';
//让子弹飞
this.fly();
}
Bullet.prototype.fly = function(){
var that = this;
this.timer = setInterval(function(){
that.ele.style.top = that.ele.offsetTop - 15 + 'px';
if(that.ele.offsetTop <= 10){
that.boom(); //子弹爆炸
}
},30)
}
Bullet.prototype.boom = function(){
this.ele.className = 'bullet_die';
clearInterval(this.timer);
var that = this;
setTimeout(function(){
that.ele.remove();
for(var i = 0,len = Plane.bullet.length;i < len;i ++){
if(that.ele.id == Plane.bullet[i].id){
Plane.bullet.splice(i,1);
}
}
},100)
}
//敌机
function Enemy(type){
this.type = type;
this.init();
}
Enemy.prototype.init = function(){
switch(this.type){
case 0 : this.ele = $create('div','enemy-small');this.hp = 1;this.speed = 10;break;
case 1 : this.ele = $create('div','enemy-middle');this.hp = 5;this.speed = 8;break;
case 2 : this.ele = $create('div','enemy-large');this.hp = 50;this.speed = 2;break;
}
//加到页面
$addBody(this.ele);
//定位敌机
this.position();
}
Enemy.prototype.position = function(){
var bodyMain = document.getElementById("body_main");
this.ele.style.left = $random(bodyMain.offsetLeft,bodyMain.offsetLeft + bodyMain.offsetWidth - this.ele.offsetWidth) + 'px';
this.ele.style.top = - this.ele.offsetHeight + 'px';
//敌机起飞
this.fly();
}
Enemy.prototype.fly = function(){
var that = this;
this.timer = setInterval(function(){
that.ele.style.top = that.ele.offsetTop + that.speed + 'px';
//碰撞检测
that.collision();
if(that.ele.offsetTop >= document.documentElement.clientHeight){
that.ele.remove();
clearInterval(that.timer);
}
},30)
}
Enemy.prototype.collision = function(){
for(var i = 0;i < Plane.bullet.length;i ++){
if(!(this.ele.offsetTop + this.ele.offsetHeight < Plane.bullet[i].ele.offsetTop || Plane.bullet[i].ele.offsetTop + Plane.bullet[i].ele.offsetHeight < this.ele.offsetTop)){
if(!(Plane.bullet[i].ele.offsetLeft + Plane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < Plane.bullet[i].ele.offsetLeft)){
Plane.bullet[i].boom();
this.hp --;
if(this.hp == 0){
this.ele.remove();
clearInterval(this.timer);
}
}
}
}
}
//工具箱
//删除元素
Element.prototype.remove = function(){
this.parentNode.removeChild(this);
}
//创建对象并添加类名
function $create(tagName,className){
var ele = document.createElement(tagName);
ele.className = className;
return ele;
}
//将元素对象添加到页面中
function $addBody(obj){
document.body.appendChild(obj);
}
//随机整数
function $random(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</head>
<body>
<div id="body_main" class="main">
<ul id="options" class="options">
<li value="1">超级困难</li>
<li value="2">非常困难</li>
<li value="3">比较困难</li>
<li value="4">就选我吧</li>
</ul>
</div>
</body>
</html>
二.ES5原型对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="dahuiji.css" />
<script type="text/javascript">
window.onload = function(){
new Engine();
}
//引擎
function Engine(){
//属性
this.ele = document.getElementById("body_main");//获取引擎
//获取li
this.oUllis = this.ele.children[0].children;
//记录this
var that = this;
//遍历li，添加事件
for(var i = 0,len = this.oUllis.length;i < len;i ++){
//记录下标
this.oUllis[i].index = i;
//添加点击事件
this.oUllis[i].onclick = function(){
//删除ul选项
this.parentNode.remove();
//调用加载页面的方法
that.loadPage();
that.frequency = this.index;
}
}
}
//原型方法
Engine.prototype = {
loadPage : function(){
//创建logo
var logo = $create('div','logo');
//加到页面
$addBody(logo);
//创建loading
var loading = $create('div','loading');
//加到页面
$addBody(loading);
//设置loading动画
var index = 1;
var timer = setInterval(function(){
loading.style.background = 'url(images/loading' + (index ++ % 3 + 1) + '.png) no-repeat';
},500);
//设置背景动画
var that = this;
var positionY = 1;
setInterval(function(){
that.ele.style.backgroundPositionY = ++ positionY + 'px';
},30)
//3秒到达战场
setTimeout(function(){
//清场
//删除logo
logo.remove();
//删除loading
loading.remove();
//停止loading动画
clearInterval(timer);
//开始游戏
that.gameStart();
},3000)
},
gameStart : function(){
//我方飞机入场
Plane.init();
//我方飞机开火
Plane.fire(this.frequency);
//创建敌机
this.createEnemy();
},
createEnemy : function(){
//设置敌机的类型和产生的概率
//敌小机
setInterval(function(){
Math.random() > 0.5 ? new Enemy(0) : "";
},500)
//敌中机
setInterval(function(){
Math.random() > 0.5 ? new Enemy(1) : "";
},1000)
//敌大机
setInterval(function(){
Math.random() > 0.2 ? new Enemy(2) : "";
},8000)
}
};
//我方飞机
var Plane = {
//创建我方飞机
ele : $create('div','my-warplain'),
//初始化我方飞机
init : function(){
//放到页面
$addBody(this.ele);
//我方飞机定位
this.ele.style.left = document.documentElement.clientWidth / 2 - this.ele.offsetWidth / 2 + 'px';
this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + 'px';
//调用我方飞机运动
this.fly();
},
fly : function(){
var that = this;
//获取引擎div
var bodyMain = document.getElementById("body_main");
//鼠标跟随
document.onmousemove = function(evt){
var e = evt || window.event;
//设置边界
var left = e.pageX - that.ele.offsetWidth / 2;
var top = e.pageY - that.ele.offsetHeight / 2;
if(left <= bodyMain.offsetLeft){
left = bodyMain.offsetLeft;
}
if(left >= bodyMain.offsetLeft + bodyMain.offsetWidth - that.ele.offsetWidth){
left = bodyMain.offsetLeft + bodyMain.offsetWidth - that.ele.offsetWidth;
}
that.ele.style.left = left + 'px';
that.ele.style.top = top + 'px';
}
},
fire : function(frequency){
var frequencyMe = 200; //默认的开火频率
switch(frequency){
case 0 : frequencyMe = 500;break;
case 1 : frequencyMe = 400;break;
case 2 : frequencyMe = 200;break;
case 3 : frequencyMe = 50;break;
}
//设置子弹ID
var bulletId = 0;
var that = this;
setInterval(function(){
that.bullet.push(new Bullet(bulletId));
bulletId ++;
console.log(that.bullet);
},frequencyMe)
},
bullet : []
}
//子弹
function Bullet(id){
this.id = id;
//创建子弹
this.ele = $create('div','bullet');
//初始化
this.init();
}
Bullet.prototype = {
init : function(){
//加到页面
$addBody(this.ele);
//给子弹添加id
this.ele.id = this.id;
//定位子弹
this.ele.style.left = Plane.ele.offsetLeft + Plane.ele.offsetWidth / 2 - this.ele.offsetWidth / 2 + 'px';
this.ele.style.top = Plane.ele.offsetTop - this.ele.offsetHeight + 'px';
//让子弹飞
this.fly();
},
fly : function(){
var that = this;
this.timer = setInterval(function(){
that.ele.style.top = that.ele.offsetTop - 15 + 'px';
if(that.ele.offsetTop <= 10){
that.boom(); //子弹爆炸
}
},30)
},
boom : function(){
this.ele.className = 'bullet_die';
clearInterval(this.timer);
var that = this;
setTimeout(function(){
that.ele.remove();
for(var i = 0,len = Plane.bullet.length;i < len;i ++){
if(that.ele.id == Plane.bullet[i].id){
Plane.bullet.splice(i,1);
}
}
},100)
}
};
//敌机
function Enemy(type){
this.type = type;
this.init();
}
Enemy.prototype = {
init : function(){
switch(this.type){
case 0 : this.ele = $create('div','enemy-small');this.hp = 1;this.speed = 10;break;
case 1 : this.ele = $create('div','enemy-middle');this.hp = 5;this.speed = 8;break;
case 2 : this.ele = $create('div','enemy-large');this.hp = 50;this.speed = 2;break;
}
//加到页面
$addBody(this.ele);
//定位敌机
this.position();
},
position : function(){
var bodyMain = document.getElementById("body_main");
this.ele.style.left = $random(bodyMain.offsetLeft,bodyMain.offsetLeft + bodyMain.offsetWidth - this.ele.offsetWidth) + 'px';
this.ele.style.top = - this.ele.offsetHeight + 'px';
//敌机起飞
this.fly();
},
fly : function(){
var that = this;
this.timer = setInterval(function(){
that.ele.style.top = that.ele.offsetTop + that.speed + 'px';
//碰撞检测
that.collision();
if(that.ele.offsetTop >= document.documentElement.clientHeight){
that.ele.remove();
clearInterval(that.timer);
}
},30)
},
collision : function(){
for(var i = 0;i < Plane.bullet.length;i ++){
if(!(this.ele.offsetTop + this.ele.offsetHeight < Plane.bullet[i].ele.offsetTop || Plane.bullet[i].ele.offsetTop + Plane.bullet[i].ele.offsetHeight < this.ele.offsetTop)){
if(!(Plane.bullet[i].ele.offsetLeft + Plane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < Plane.bullet[i].ele.offsetLeft)){
Plane.bullet[i].boom();
this.hp --;
if(this.hp == 0){
this.ele.remove();
clearInterval(this.timer);
}
}
}
}
}
}
//工具箱
//删除元素
Element.prototype.remove = function(){
this.parentNode.removeChild(this);
}
//创建对象并添加类名
function $create(tagName,className){
var ele = document.createElement(tagName);
ele.className = className;
return ele;
}
//将元素对象添加到页面中
function $addBody(obj){
document.body.appendChild(obj);
}
//随机整数
function $random(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</head>
<body>
<div id="body_main" class="main">
<ul id="options" class="options">
<li value="1">超级困难</li>
<li value="2">非常困难</li>
<li value="3">比较困难</li>
<li value="4">就选我吧</li>
</ul>
</div>
</body>
</html>
三.ES6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="dahuiji.css" />
<script type="text/javascript">
window.onload = function(){
new Engine();
}
//引擎
class Engine{
constructor(){
//属性
this.ele = document.getElementById("body_main");//获取引擎
//获取li
this.oUllis = this.ele.children[0].children;
//记录this
let that = this;
//遍历li，添加事件
for(let i = 0,len = this.oUllis.length;i < len;i ++){
//添加点击事件
this.oUllis[i].onclick = function(){
//删除ul选项
this.parentNode.remove();
//调用加载页面的方法
that.loadPage();
that.frequency = i;
}
}
}
//原型方法
loadPage(){
//创建logo
let logo = $create('div','logo');
//加到页面
$addBody(logo);
//创建loading
let loading = $create('div','loading');
//加到页面
$addBody(loading);
//设置loading动画
let index = 1;
let timer = setInterval(()=>{
loading.style.background = 'url(images/loading' + (index ++ % 3 + 1) + '.png) no-repeat';
},500);
//设置背景动画
let positionY = 1;
setInterval(()=>{
this.ele.style.backgroundPositionY = ++ positionY + 'px';
},30)
//3秒到达战场
setTimeout(()=>{
//清场
//删除logo
logo.remove();
//删除loading
loading.remove();
//停止loading动画
clearInterval(timer);
//开始游戏
this.gameStart();
},3000)
}
gameStart(){
//我方飞机入场
Plane.init();
//我方飞机开火
Plane.fire(this.frequency);
//创建敌机
this.createEnemy();
}
createEnemy (){
//设置敌机的类型和产生的概率
//敌小机
setInterval(function(){
Math.random() > 0.5 ? new Enemy(0) : "";
},500)
//敌中机
setInterval(function(){
Math.random() > 0.5 ? new Enemy(1) : "";
},1000)
//敌大机
setInterval(function(){
Math.random() > 0.2 ? new Enemy(2) : "";
},8000)
}
};
//我方飞机
var Plane = {
//创建我方飞机
ele : $create('div','my-warplain'),
//初始化我方飞机
init : function(){
//放到页面
$addBody(this.ele);
//我方飞机定位
this.ele.style.left = document.documentElement.clientWidth / 2 - this.ele.offsetWidth / 2 + 'px';
this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + 'px';
//调用我方飞机运动
this.fly();
},
fly : function(){
//获取引擎div
let bodyMain = document.getElementById("body_main");
//鼠标跟随
document.onmousemove = (evt)=>{
var e = evt || window.event;
//设置边界
var left = e.pageX - this.ele.offsetWidth / 2;
var top = e.pageY - this.ele.offsetHeight / 2;
if(left <= bodyMain.offsetLeft){
left = bodyMain.offsetLeft;
}
if(left >= bodyMain.offsetLeft + bodyMain.offsetWidth - this.ele.offsetWidth){
left = bodyMain.offsetLeft + bodyMain.offsetWidth - this.ele.offsetWidth;
}
this.ele.style.left = left + 'px';
this.ele.style.top = top + 'px';
}
},
fire : function(frequency){
let frequencyMe = 200; //默认的开火频率
switch(frequency){
case 0 : frequencyMe = 500;break;
case 1 : frequencyMe = 400;break;
case 2 : frequencyMe = 200;break;
case 3 : frequencyMe = 50;break;
}
//设置子弹ID
let bulletId = 0;
setInterval(()=>{
this.bullet.push(new Bullet(bulletId));
bulletId ++;
},frequencyMe)
},
bullet : []
}
//子弹
class Bullet{
constructor(id){
this.id = id;
//创建子弹
this.ele = $create('div','bullet');
//初始化
this.init();
}
init(){
//加到页面
$addBody(this.ele);
//给子弹添加id
this.ele.id = this.id;
//定位子弹
this.ele.style.left = Plane.ele.offsetLeft + Plane.ele.offsetWidth / 2 - this.ele.offsetWidth / 2 + 'px';
this.ele.style.top = Plane.ele.offsetTop - this.ele.offsetHeight + 'px';
//让子弹飞
this.fly();
}
fly(){
this.timer = setInterval(()=>{
this.ele.style.top = this.ele.offsetTop - 15 + 'px';
if(this.ele.offsetTop <= 10){
this.boom(); //子弹爆炸
}
},30)
}
boom(){
this.ele.className = 'bullet_die';
clearInterval(this.timer);
setTimeout(()=>{
this.ele.remove();
for(var i = 0,len = Plane.bullet.length;i < len;i ++){
if(this.ele.id == Plane.bullet[i].id){
Plane.bullet.splice(i,1);
}
}
},100)
}
};
//敌机
class Enemy{
constructor(type){
this.type = type;
this.init();
}
init (){
switch(this.type){
case 0 : this.ele = $create('div','enemy-small');this.hp = 1;this.speed = 10;break;
case 1 : this.ele = $create('div','enemy-middle');this.hp = 5;this.speed = 8;break;
case 2 : this.ele = $create('div','enemy-large');this.hp = 50;this.speed = 2;break;
}
//加到页面
$addBody(this.ele);
//定位敌机
this.position();
}
position(){
let bodyMain = document.getElementById("body_main");
this.ele.style.left = $random(bodyMain.offsetLeft,bodyMain.offsetLeft + bodyMain.offsetWidth - this.ele.offsetWidth) + 'px';
this.ele.style.top = - this.ele.offsetHeight + 'px';
//敌机起飞
this.fly();
}
fly (){
this.timer = setInterval(()=>{
this.ele.style.top = this.ele.offsetTop + this.speed + 'px';
//碰撞检测
this.collision();
if(this.ele.offsetTop >= document.documentElement.clientHeight){
this.ele.remove();
clearInterval(this.timer);
}
},30)
}
collision(){
for(let i = 0;i < Plane.bullet.length;i ++){
if(!(this.ele.offsetTop + this.ele.offsetHeight < Plane.bullet[i].ele.offsetTop || Plane.bullet[i].ele.offsetTop + Plane.bullet[i].ele.offsetHeight < this.ele.offsetTop)){
if(!(Plane.bullet[i].ele.offsetLeft + Plane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < Plane.bullet[i].ele.offsetLeft)){
Plane.bullet[i].boom();
this.hp --;
if(this.hp == 0){
this.ele.remove();
clearInterval(this.timer);
}
}
}
}
}
}
//工具箱
//删除元素
Element.prototype.remove = function(){
this.parentNode.removeChild(this);
}
//创建对象并添加类名
function $create(tagName,className){
var ele = document.createElement(tagName);
ele.className = className;
return ele;
}
//将元素对象添加到页面中
function $addBody(obj){
document.body.appendChild(obj);
}
//随机整数
function $random(min,max){
return Math.floor(Math.random() * (max - min + 1) + min);
}
</script>
</head>
<body>
<div id="body_main" class="main">
<ul id="options" class="options">
<li value="1">超级困难</li>
<li value="2">非常困难</li>
<li value="3">比较困难</li>
<li value="4">就选我吧</li>
</ul>
</div>
</body>
</html>
