欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery+css+html實現(xiàn)飛機(jī)大戰(zhàn)游戲

 更新時間：2022年05月09日 09:40:02   作者：Jay953641513  
這篇文章主要為大家詳細(xì)介紹了jquery+css+html實現(xiàn)飛機(jī)大戰(zhàn)游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了jquery+css+html實現(xiàn)飛機(jī)大戰(zhàn)游戲的具體代碼，供大家參考，具體內(nèi)容如下

本文運用html+css+jquery寫了個飛機(jī)大戰(zhàn)的游戲 分享下自己的思路：

界面構(gòu)建

首先，先用HTML+CSS構(gòu)建基本的頁面結(jié)構(gòu)，這里的設(shè)計如下圖：

/*先給網(wǎng)頁上所有元素添加一個紅色的邊框 方便布局 布局完畢后移除*/
*{
? ?box-sizing: border-box;
? ?border:1px solid red;
}

HTML代碼：

<div class="header">
?? ??? ??? ?<!--<div id="time" class="time"></div>-->
?? ??? ??? ?<div id="score" class="score">0000</div>
?? ??? ?</div>
?? ??? ?
?? ??? ?<div id="content" class="content">
?? ??? ??? ?<div id="player" class="player" style="left: 375px;"></div>
?? ??? ?</div>
?? ??? ?
?? ??? ?<div class="footer">
?? ??? ??? ?<div class="lifePoints" :duration="4000"><div class="lifeBar"></div></div>
?? ??? ??? ?<div class="skills">
?? ??? ??? ??? ?<div id="ASkill" class="skill" style="background:firebrick;color:#fff">A</div>
?? ??? ??? ??? ?<div id="SSkill" class="skill" style="background:lightskyblue;color:#fff">S</div>
?? ??? ??? ??? ?<div id="DSkill" class="skill" style="background:purple;color:#fff">D</div>
?? ??? ??? ??? ?<div id="FSkill" class="skill" style="background:lightgoldenrodyellow">F</div>
?? ??? ??? ??? ?
?? ??? ??? ?</div>
?? ??? ??? ?<div class="magicPoints"><div class="magicBar"></div></div>
</div>

css代碼：

body{
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?padding:0;
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.header{
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?line-height: 50px;
?? ??? ??? ??? ?top:0;
?? ??? ??? ??? ?left: 0;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ?z-index: 999;
?? ??? ??? ??? ?background:#555;
?? ??? ??? ??? ?color:goldenrod;
?? ??? ??? ??? ?font-size:30px;
?? ??? ??? ?}
?? ??? ??? ?.content{
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?margin: 50px auto 0 auto;
?? ??? ??? ??? ?width:100%;
?? ??? ??? ??? ?/*height: calc(100vh - 170px);*/
?? ??? ??? ??? ?height: 500px;
?? ??? ??? ?}
?? ??? ??? ?.footer{
?? ??? ??? ??? ?position: fixed;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?bottom:0;
?? ??? ??? ??? ?left:0;
?? ??? ??? ??? ?height: 120px;
?? ??? ??? ?}
?? ??? ??? ?.lifePoints{
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ?}
?? ??? ??? ?.lifeBar{
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?left: 0;
?? ??? ??? ??? ?height: 20px;
?? ??? ??? ??? ?width: 0%;
?? ??? ??? ??? ?background:deeppink;
?? ??? ??? ??? ?transition: all ease .5s;?
?? ??? ??? ??? ?border-radius: 10px;
?? ??? ??? ?}
?? ??? ??? ?.skills{
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 75%;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ?}
?? ??? ??? ?.skill{
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?width: 25%;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ??? ?line-height: 100px;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ?}
?? ??? ??? ?.magicPoints{
?? ??? ??? ??? ?position: relative;
?? ??? ??? ??? ?float:left;
?? ??? ??? ??? ?width: 25%;
?? ??? ??? ??? ?height: 100px;
?? ??? ??? ?}
?? ??? ??? ?.magicBar{
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?width: 100%;
?? ??? ??? ??? ?height: 0px;
?? ??? ??? ??? ?background:deepskyblue;
?? ??? ??? ??? ?transition: all ease .5s;?
?? ??? ??? ??? ?border-radius: 30%;
?? ??? ??? ??? ?bottom: 0;
?? ??? ??? ?}
?? ??? ??? ?.player{
?? ??? ??? ??? ?width: 50px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background:red;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?bottom: 0;
?? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.enemy{
?? ??? ??? ??? ?width: 50px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ??? ?background:black;
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top: 0;
?? ??? ??? ?
?? ??? ??? ?}
?? ??? ??? ?.shoot{
?? ??? ??? ??? ?position: absolute;
?? ??? ??? ??? ?top:calc(100% - 50px);
?? ??? ??? ??? ?width:8px;
?? ??? ??? ??? ?height:8px;
?? ??? ??? ??? ?border-radius: 50%;
?? ??? ??? ??? ?background:red;
?? ??? ??? ??? ?z-index: 1;
?? ??? ??? ?}
?? ??? ??? ?[class$=Skill]{
?? ??? ??? ??? ?width:20px;
?? ??? ??? ??? ?height:20px;
?? ??? ??? ?}
?? ??? ??? ?.enemy[type="A"],.enemy[type="S"],.enemy[type="D"],.enemy[type="F"]{
?? ??? ??? ??? ?width:50px;
?? ??? ??? ??? ?height: 50px;
?? ??? ??? ?}

js部分：

var data = {
?? ??? ??? ?playerX: 0, //玩家x軸坐標(biāo)
?? ??? ??? ?playerY: 0, //玩家y軸坐標(biāo)
?? ??? ??? ?enemyX: [], //敵人X坐標(biāo)集
?? ??? ??? ?enemyY: [], //敵人Y坐標(biāo)集
?? ??? ??? ?shootX: [], //子彈X坐標(biāo)集
?? ??? ??? ?shootY: [], //子彈Y坐標(biāo)集
?? ??? ??? ?score: 0, //分?jǐn)?shù)
?? ??? ??? ?lifePoint: 100, //玩家生命值
?? ??? ??? ?magicPoint: 0, //玩家魔力值,滿100能放必殺,通過擊殺敵人獲得
?? ??? ??? ?isBoss:false,//是否Boss
?? ??? ??? ?//隨機(jī)數(shù)方法
?? ??? ??? ?random: function(min, max) {
?? ??? ??? ??? ?return Math.floor(Math.random() * max + min);
?? ??? ??? ?},
?? ??? ??? ?//創(chuàng)建生命條
?? ??? ??? ?createLifeBar:function(){
?? ??? ??? ??? ?$(".lifeBar").css("width",data.lifePoint+"%")
?? ??? ??? ?},
?? ??? ??? ?//創(chuàng)建法力條
?? ??? ??? ?createMagicBar:function(){
?? ??? ??? ??? ?$(".magicBar").css("height",data.magicPoint+"%")?? ?
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?//更新玩家分?jǐn)?shù)
?? ??? ??? ?refreshScore:function(){
?? ??? ??? ??? ?$("#score").html(data.score);
?? ??? ??? ??? ?
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?//創(chuàng)建敵人
?? ??? ??? ?createEnemy:function(){
?? ??? ??? ??? ?var temp=data.random(0,100);//生成0-100的隨機(jī)數(shù)，用作概率判斷
?? ??? ??? ??? ?var windowWidth = $(window).width();//瀏覽器寬度
?? ??? ??? ??? ?var left = data.random(0,windowWidth - 50)//敵人left值
?? ??? ??? ??? ?if(temp>0&&temp<=10){//A類精英,能且只能通過A技能擊殺
?? ??? ??? ??? ??? ?var html = '<div class="enemy" style="background:firebrick;left:'+left+'px" life="200" type="A" lifeUp="0" magicUp="0" score="200">A</div>'
?? ??? ??? ??? ?}else if(temp>10&&temp<=20){//S類精英,能且只能通過S技能擊殺
?? ??? ??? ??? ??? ?var html = '<div class="enemy" style="background:lightskyblue;left:'+left+'px" life="200" type="S" lifeUp="0" magicUp="0" score="200">S</div>'
?? ??? ??? ??? ?}else if(temp>20&&temp<=30){//D類精英,能且只能通過D技能擊殺
?? ??? ??? ??? ??? ?var html = '<div class="enemy" style="background:purple;left:'+left+'px" life="200" type="D" lifeUp="0" magicUp="0" score="200">D</div>'
?? ??? ??? ??? ?}else if(temp>30&&temp<=40){//F類精英,能且只能通過F技能擊殺
?? ??? ??? ??? ??? ?var html = '<div class="enemy" style="background:lightgoldenrodyellow;left:'+left+'px" life="200" type="F" lifeUp="0" magicUp="0" score="200">F</div>'
?? ??? ??? ??? ?}else if(temp>40&&temp<=50){//擊殺回復(fù)一定血量
?? ??? ??? ??? ??? ?var html = '<div class="enemy" style="left:'+left+'px" life="1" type="0" lifeUp="10" magicUp="0" score="10"></div>'
?? ??? ??? ??? ?}else if(temp>50&&temp<=60){//擊殺回復(fù)法力值
?? ??? ??? ??? ??? ?var html = '<div class="enemy" style="left:'+left+'px" life="1" type="0" lifeUp="0" magicUp="10" score="10"></div>'
?? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ?var html = '<div class="enemy" style="left:'+left+'px" life="1" type="0" lifeUp="0" magicUp="0" score="10"></div>'
?? ??? ??? ??? ?}
?? ??? ??? ??? ?$("#content").append(html)
?? ??? ??? ??? ?$(".enemy").animate({
?? ??? ??? ??? ??? ?"top":"+=150%"
?? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ?duration:5000,
?? ??? ??? ??? ??? ?step:function(){
?? ??? ??? ??? ??? ??? ?data.enemyX = [];
?? ??? ??? ??? ??? ??? ?data.enemyY = [];
?? ??? ??? ??? ??? ??? ?$(".enemy").each(function() {
?? ??? ??? ??? ??? ??? ??? ?data.enemyX.push(parseInt($(this).css("left")))
?? ??? ??? ??? ??? ??? ??? ?data.enemyY.push(parseInt($(this).css("top")))
?? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(parseInt($(this).css("top"))>$("#content").height()-50){
?? ??? ??? ??? ??? ??? ??? ?$(this).remove();
?? ??? ??? ??? ??? ??? ??? ?data.lifePoint-=10;
?? ??? ??? ??? ??? ??? ??? ?data.createLifeBar()
?? ??? ??? ??? ??? ??? ??? ?if(data.lifePoint===0){
?? ??? ??? ??? ??? ??? ??? ??? ?alert("game Over")
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?//碰撞方法
?? ??? ??? ?gameRule:function(){
?? ??? ??? ??? ?for(var i=0;i<data.enemyX.length;i++){
?? ??? ??? ??? ??? ?for(var j=0;j<data.shootX.length;j++){
?? ??? ??? ??? ??? ??? ?if(Math.abs(data.shootX[j] - data.enemyX[i])<50&&Math.abs(data.shootY[j] - data.enemyY[i]) < 50){
?? ??? ??? ??? ??? ??? ??? ?var life = $(".enemy").eq(i).attr("life");
?? ??? ??? ??? ??? ??? ??? ?var enemyType = $(".enemy").eq(i).attr("type");
?? ??? ??? ??? ??? ??? ??? ?var shootType = $(".shoot").eq(j).attr("type");
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ?switch(enemyType){
?? ??? ??? ??? ??? ??? ??? ??? ?case "0":
?? ??? ??? ??? ??? ??? ??? ??? ??? ?var score = parseInt($(".enemy").eq(i).attr("score"));
?? ??? ??? ??? ??? ??? ??? ??? ??? ?var lifeUp = parseInt($(".enemy").eq(i).attr("lifeUp"));
?? ??? ??? ??? ??? ??? ??? ??? ??? ?var magicUp = parseInt($(".enemy").eq(i).attr("magicUp"));
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.magicPoint+=magicUp;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.lifePoint+=lifeUp;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.score+=score;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.refreshScore();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createLifeBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createMagicBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".enemy").eq(i).remove();
?? ??? ??? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ??? ??? ?case "A":
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(enemyType===enemyType){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var score = parseInt($(".enemy").eq(i).attr("score"));
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.score+=score;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.refreshScore();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createLifeBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createMagicBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".enemy").eq(i).remove();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ??? ??? ?case "S":
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(enemyType===enemyType){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var score = parseInt($(".enemy").eq(i).attr("score"));
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.score+=score;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.refreshScore();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createLifeBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createMagicBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".enemy").eq(i).remove();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ??? ??? ?case "D":
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(enemyType===enemyType){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var score = parseInt($(".enemy").eq(i).attr("score"));
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.score+=score;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.refreshScore();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createLifeBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createMagicBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".enemy").eq(i).remove();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ??? ??? ?case "F":
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(enemyType===enemyType){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?var score = parseInt($(".enemy").eq(i).attr("score"));
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.score+=score;
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.refreshScore();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createLifeBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.createMagicBar();
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".enemy").eq(i).remove();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?}
?? ??? ??? ?},
?? ??? ??? ?
?? ??? ??? ?//鼠標(biāo)移動控制玩家左右移動
?? ??? ??? ?playerCtrl:function(){
?? ??? ??? ??? ?$("body").mousemove(function(e){
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?if((e.pageX<($(window).width() - $("#content").width())/2+$("#player").width()/2)|| (e.pageX > $(window).width()- ($(window).width() - $("#content").width())/2 -$("#player").width()/2) ){
?? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?data.playerX = e.pageX;
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?$("#player").css({
?? ??? ??? ??? ??? ??? ?"left": data.playerX - ($(window).width() - $("#content").width()) / 2 - $("#player").width() / 2
?
?? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ?})
?? ??? ??? ?},
?? ??? ??? ?//技能
?? ??? ??? ?playerSkills:function(){
?? ??? ??? ??? ?var ASkillRefresh=1000;//A技能冷卻時間
?? ??? ??? ??? ?var SSkillRefresh=1000;//S技能冷卻時間
?? ??? ??? ??? ?var DSkillRefresh=1000;//D技能冷卻時間
?? ??? ??? ??? ?var FSkillRefresh=1000;//F技能冷卻時間
?? ??? ??? ??? ?var starTimeA=new Date().getTime();
?? ??? ??? ??? ?var starTimeS=new Date().getTime();
?? ??? ??? ??? ?var starTimeD=new Date().getTime();
?? ??? ??? ??? ?var starTimeF=new Date().getTime();
?? ??? ??? ??? ?$(document).keyup(function(e) {
?? ??? ??? ??? ??? ?var keys=e.keyCode
?? ??? ??? ??? ??? ?var left =parseInt($("#player").css("left"))
?? ??? ??? ??? ??? ?switch(keys){
?? ??? ??? ??? ??? ??? ?case 32: //普通攻擊(空格)
?? ??? ??? ??? ??? ??? ??? ?var html='<div class="shoot" style="left:'+(left+25)+'px"></div>'
?? ??? ??? ??? ??? ??? ??? ?$("body").append(html)
?? ??? ??? ??? ??? ??? ??? ?$(".shoot").animate({
?? ??? ??? ??? ??? ??? ??? ??? ?"top":"-=150%"
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?duration:1000,
?? ??? ??? ??? ??? ??? ??? ??? ?step:function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".shoot").each(function() {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX.push(parseInt($(this).css("left")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY.push(parseInt($(this).css("top")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.gameRule();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(parseInt($(this).css("top"))<0){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(this).remove()
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?case 65: //A
?? ??? ??? ??? ??? ??? ?var larstTime=new Date().getTime();
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(larstTime-starTimeA<ASkillRefresh){
?? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?starTimeA=larstTime
?? ??? ??? ??? ??? ??? ??? ?var html='<div class="shoot ASkill" type="A" style="left:'+(left+15)+'px"></div>'
?? ??? ??? ??? ??? ??? ??? ?$("body").append(html)
?? ??? ??? ??? ??? ??? ??? ?$(".shoot").animate({
?? ??? ??? ??? ??? ??? ??? ??? ?"top":"-=150%"
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?duration:1000,
?? ??? ??? ??? ??? ??? ??? ??? ?step:function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".shoot").each(function() {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX.push(parseInt($(this).css("left")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY.push(parseInt($(this).css("top")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(parseInt($(this).css("top"))<0){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(this).remove()
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?case 83: //S
?? ??? ??? ??? ??? ??? ?var larstTime=new Date().getTime();
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(larstTime-starTimeS<SSkillRefresh){
?? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?starTimeS=larstTime
?? ??? ??? ??? ??? ??? ??? ?var html='<div class="shoot SSkill" type="S" style="left:'+(left+15)+'px"></div>'
?? ??? ??? ??? ??? ??? ??? ?$("body").append(html)
?? ??? ??? ??? ??? ??? ??? ?$(".shoot").animate({
?? ??? ??? ??? ??? ??? ??? ??? ?"top":"-=150%"
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?duration:1000,
?? ??? ??? ??? ??? ??? ??? ??? ?step:function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".shoot").each(function() {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX.push(parseInt($(this).css("left")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY.push(parseInt($(this).css("top")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.gameRule();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(parseInt($(this).css("top"))<0){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(this).remove()
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?case 68: //D
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?var larstTime=new Date().getTime();
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(larstTime-starTimeD<DSkillRefresh){
?? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?starTimeD=larstTime
?? ??? ??? ??? ??? ??? ??? ?var html='<div class="shoot DSkill" type="D" style="left:'+(left+15)+'px"></div>'
?? ??? ??? ??? ??? ??? ??? ?$("body").append(html)
?? ??? ??? ??? ??? ??? ??? ?$(".shoot").animate({
?? ??? ??? ??? ??? ??? ??? ??? ?"top":"-=150%"
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?duration:1000,
?? ??? ??? ??? ??? ??? ??? ??? ?step:function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".shoot").each(function() {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX.push(parseInt($(this).css("left")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY.push(parseInt($(this).css("top")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.gameRule();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(parseInt($(this).css("top"))<50){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(this).remove()
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?case 70: //F
?? ??? ??? ??? ??? ??? ?var larstTime=new Date().getTime();
?? ??? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ??? ?if(larstTime-starTimeF<FSkillRefresh){
?? ??? ??? ??? ??? ??? ??? ?return false;
?? ??? ??? ??? ??? ??? ?}else{
?? ??? ??? ??? ??? ??? ??? ?starTimeF=larstTime
?? ??? ??? ??? ??? ??? ??? ?var html='<div class="shoot FSkill" type="F" style="left:'+(left+15)+'px"></div>'
?? ??? ??? ??? ??? ??? ??? ?$("body").append(html)
?? ??? ??? ??? ??? ??? ??? ?$(".shoot").animate({
?? ??? ??? ??? ??? ??? ??? ??? ?"top":"-=150%"
?? ??? ??? ??? ??? ??? ??? ?},{
?? ??? ??? ??? ??? ??? ??? ??? ?duration:1000,
?? ??? ??? ??? ??? ??? ??? ??? ?step:function(){
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY=[];
?? ??? ??? ??? ??? ??? ??? ??? ??? ?$(".shoot").each(function() {
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootX.push(parseInt($(this).css("left")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?data.shootY.push(parseInt($(this).css("top")))
?? ??? ??? ??? ??? ??? ??? ??? ??? ?});
?? ??? ??? ??? ??? ??? ??? ??? ??? ?data.gameRule();
?? ??? ??? ??? ??? ??? ??? ??? ??? ?if(parseInt($(this).css("top"))<0){
?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?$(this).remove()
?? ??? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ??? ?})
?? ??? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ??? ?default:
?? ??? ??? ??? ??? ??? ?break;
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ?})
?? ??? ??? ?}
?? ??? ??? ?
?? ??? ?}
?? ??? ?$(function(){
?? ??? ??? ?data.createLifeBar();
?? ??? ??? ?data.createMagicBar();
?? ??? ??? ?data.playerCtrl();
?? ??? ??? ?data.playerSkills();
?? ??? ??? ?//定時器設(shè)置敵人出現(xiàn)的間隔
?? ??? ??? ?var timer=setInterval(function(){
?? ??? ??? ??? ?data.createEnemy()?? ??? ??? ??? ?
?? ??? ??? ?},1000)
?? ??? ?})

由于懶得去找圖片，可以直接用個方塊來代替敵我雙方的飛機(jī) ，當(dāng)然 也可以用數(shù)組遍歷的方法繪制出來：

model.js：

var plaint = [
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0,
?? ?0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0,
?? ?1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
?? ?1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
?? ?1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
?? ?1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
?? ?1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1,
?? ?0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
?? ?0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
?? ?0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
?? ?0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
?? ?0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
?
];
?
$("#player").empty();
var playerStr = '';
for(var i = 0; i < plaint.length; i++) {
?? ?if(plaint[i] == 1) {
?? ??? ?playerStr += '<div class="plainPart"></div>';
?? ?} else if(plaint[i] == 0) {
?? ??? ?playerStr += '<div class="plainNull"></div>';
?? ?}
}
$("#player").append(playerStr);

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • jQuery EasyUI中DataGird動態(tài)生成列的方法

    jQuery EasyUI中DataGird動態(tài)生成列的方法

    EasyUI中使用DataGird顯示數(shù)據(jù)列表中，有時需要根據(jù)需要顯示不同的列，例如，在權(quán)限管理中，不同的用戶登錄后只能查看自己權(quán)限范圍內(nèi)的列表字段，這就需要DataGird動態(tài)組合列，下面介紹EasyUI中DataGird動態(tài)生成列的方法
    2016-04-04
  • jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果示例

    jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果示例

    這篇文章主要介紹了jQuery實現(xiàn)簡單的網(wǎng)頁換膚效果,涉及jQuery事件響應(yīng)及頁面元素屬性動態(tài)變換操作技巧,需要的朋友可以參考下
    2016-09-09
  • Jquery實現(xiàn)搜索框提示功能示例代碼

    Jquery實現(xiàn)搜索框提示功能示例代碼

    數(shù)據(jù)量很大的情況下使用Ajax去實現(xiàn)真的不合適，于是想采用Jquery來實現(xiàn)方法，具體的示例代碼如下，有需求的朋友可以參考下希望對大家有所幫助
    2013-08-08
  • Jquery刪除css屬性的簡單方法

    Jquery刪除css屬性的簡單方法

    下面小編就為大家?guī)硪黄狫query刪除css屬性的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • jquery的ajax提交form表單的兩種方法小結(jié)(推薦)

    jquery的ajax提交form表單的兩種方法小結(jié)(推薦)

    下面小編就為大家?guī)硪黄猨query的ajax提交form表單的兩種方法小結(jié)(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考
    2016-05-05
  • 輕松搞定jQuery+JSONP跨域請求的解決方案

    輕松搞定jQuery+JSONP跨域請求的解決方案

    了解了jsonp之后，大家應(yīng)該也都明白了，jsonp主要就是用來實現(xiàn)跨域的獲取數(shù)據(jù)，今天我們就來詳細(xì)探討下如何在實際中應(yīng)用jsonp實現(xiàn)跨域
    2018-03-03
  • jQuery刪除當(dāng)前節(jié)點元素

    jQuery刪除當(dāng)前節(jié)點元素

    本文給大家分享一段代碼給大家介紹jquery刪除當(dāng)前節(jié)點元素的方法，代碼簡單易懂，非常不錯，需要的朋友參考下吧
    2016-12-12
  • jQuery實現(xiàn)可以編輯的表格實例詳解【附demo源碼下載】

    jQuery實現(xiàn)可以編輯的表格實例詳解【附demo源碼下載】

    這篇文章主要介紹了jQuery實現(xiàn)可以編輯的表格,涉及jQuery響應(yīng)鼠標(biāo)事件動態(tài)操作頁面元素的相關(guān)技巧,需要的朋友可以參考下
    2016-07-07
  • jquery1.4 教程三 新增方法教程

    jquery1.4 教程三 新增方法教程

    接下來幾篇教程，將重點講解jquery1.4新增的16個方法，有幾個方法還是非常實用的。
    2010-02-02
  • 純jQuery實現(xiàn)前端分頁功能

    純jQuery實現(xiàn)前端分頁功能

    本文主要介紹了純jquery實現(xiàn)前端分頁功能的方法。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-03-03

最新評論