master

分支 (1)

管理

管理

master

aircraft_war
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>游戏</title>
    <style>
    /*        body {
            width: 960px;
            height: 600px;
        }*/

    @media (max-width: 960px) and (max-height: 600px) {
        body {
            background: url(./images/background-1.jpg);
        }
        .main {
            width: 950px;
            height: 600px;
            /*margin: 0 auto;*/
        }
        .plant {
            position: absolute;
            left: 900px;
            top: 300px;
            display: none;
            width: 100px;
        }
    }

    @media (min-width: 961px) and (min-height: 601px) {
        body {
            width: 100%;
        }
        .main {
            background: url(./images/background-1.jpg);
            width: 960px;
            height: 600px;
            margin: 0 auto;
            margin-top: 40px;
        }
        .plant {
            width: 100px;
            position: absolute;
            top: 200px;
            left: 850px;
            display: none;
        }
    }

    body {
        width: 100%;
    }

    .main {
        background: url(./images/background-1.jpg);
        width: 960px;
        height: 600px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .plant {
        width: 100px;
        position: absolute;
        top: 200px;
        left: 850px;
        display: none;
    }

    .logo {
        width: 220px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .logo img {
        margin-top: 40px;
    }

    .welcome {
        width: 120px;
        margin: 0 auto;
        text-align: center;
        border-radius: 10px;
        background-color: #f10d0d;
        padding: 10px;
        margin-top: 40px;
    }

    .start {
        margin: auto;
        line-height: 30px;
        width: 120px;
        height: 30px;
        background-color: #f19d0d00;
    }

    .start a {
        text-decoration: none;
        color: rgb(0, 0, 0);
    }

    .start:active {
        background-color: #f19e0d;
        border-radius: 100px;
        transition: background-color 0.2s ease-in;
    }

    .score {
        position: relative;
        top: 10px;
        right: 10px;
        width: 150px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.5);
        border-radius: 50px;
        display: none;
    }

    .meteorite {
        position: absolute;
    }

    .power {
        position: absolute;
        width: 50px;
    }

    .foe {
        background: url('./images/ship_1.png');
        position: absolute;
        height: 80px;
        width: 80px;
    }

    .foe_1 {
        background-position-x: 0px;
    }

    .foe_2 {
        background-position-x: 80px;
    }

    .foe_3 {
        background-position-x: 160px;
    }

    .foe_4 {
        background-position-x: 240px;
    }

    .shot {
        width: 10px;
        height: 10px;
        background-color: red;
        position: absolute;
        border-radius: 50%;
    }

    .hit {
        opacity: 0.5;
    }
    /* div,img {
            border: 1px solid #fff;

        }*/

    progress {
        position: relative;
        display: none;
        /*margin-top: -10px; */
    }

    .power {
        width: 30px;
        height: 30px;
        border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
        background-color: #ff3434;
        transform: rotate(-45deg);
    }

    .foeShot {
        width: 10px;
        height: 10px;
        background-color: #ff5;
        position: absolute;
        border-radius: 50%;
    }
    </style>
    <link rel="stylesheet" type="text/css" href="jquery-ui.css">
    <script src="jquery-3.2.1.min.js"></script>
    <script src="jquery-ui.js"></script>
</head>

<body>
    <div class="main">
        <progress max="30" value="0"></progress>
        <div class="score">当前分数：
            <b>0</b>
        </div>
        <div class="logo">
            <img src="./images/logo/logo-01.png">
        </div>
        <div class="welcome">
            <div class="start">
                <a href="javascript:;">START GAME</a>
            </div>
        </div>
        <img class="plant" src="./images/plant.png">
    </div>
</body>

</html>
<script>
	const plant = $('.plant');
	const moveNum = 10
	const isPad = (parseInt($('body').width()) <= 960 && parseInt($('body').height()) <= 600);
	const width = $('body').width();
	const height = $('body').height();

	var game_life = null;
	var max_right = width;
	var max_bottom = height;
	var max_top = 0;
	var max_left = 0;


	if (!isPad) {
	    max_top = $('.main').offset().top;
	    max_bottom = max_top + $('.main').height();
	    max_left = $('.main').offset().left;
	    max_right = max_left + $('.main').width();
	    // max_top = width - (width-960)/2;
	}

	$('.start a').on('click', start);

	function start() {
	    $('.start').addClass('on');
	    $('.welcome, .logo, .start').hide();
	    $('progress, .score').slideDown();
	    plant.animate({
	        left: (max_right - plant.width()) + 'px',
	        top: (max_bottom - 300) + 'px',
	    }, 'slow', function() {
	        sound(background, true, false, true, false);
	        plantMove();
	        game_life = setInterval(run, 20);
	    }).show();
	}

	var soundsObj = [];
	var muted = false;
	const sounds = ['sound/background.mp3', 'sound/destroyed.mp3', 'sound/shoot.mp3'];
	const background = 0,
	    destroyed = 1,
	    shoots = 2;
	$.each(sounds, function(index, el) {
	    var s = new Audio;
	    s.src = el;
	    soundsObj[index] = s;
	});
	/**
	 * 声音控制
	 * @param  {int} name  资源名
	 * @param  {bool} play  控制播放/暂停
	 * @param  {bool} once  是否覆盖播放
	 * @param  {bool} muted 是否静音
	 * @param  {bool} loop  是否循环播放
	 * @return {void}
	 */
	function sound(name, play, once, loop, _muted) {
	    var audio = null;
	    // return;
	    // console.log(typeof sounds[name]);return;
	    if (once) {
	        audio = new Audio;
	        audio.src = sounds[name];
	    } else {
	        audio = soundsObj[name];
	    }
	    if (muted || _muted) {
	        audio.muted = true;
	    }
	    if (loop) {
	        audio.loop = true;
	    }
	    if (play) {
	        audio.play();
	    } else {
	        audio.pause();
	    }
	}
	//运行
	var time = 0;
	var backgroundPositionX = 0;
	var power = 15;

	function run() {
	    if (time == 100) {
	        if (time % 50 == 0) {}
	        if (shuffle(0, 9) % 2 == 0) {
	            appendMet();
	        } else {
	            appendFoe();
	        }
	        $('progress').val(power);
	        if (power <= 0) {
	            // alert('时间到了');
	            gameOver();
	            sound(background, false);
	            return;
	        }

	        if (power % 5 == 0 && power != 30) {
	            appendPower();
	        };
	        power--;
	        time = 0;
	    }
	    //背景滚动
	    if (isPad) {
	        $('body').css('backgroundPositionX', backgroundPositionX + "px");
	    } else {
	        $('.main').css('backgroundPositionX', backgroundPositionX + "px");
	    }
	    if (backgroundPositionX == width) {
	        backgroundPositionX = 0;
	    }
	    backgroundPositionX += 0.5;
	    $.each($('.meteorite, .foe'), function(index, item) {
	        let item_l = item.offsetLeft;
	        var speed = 1;
	        if ($(item).is('.meteorite')) {
	            speed = parseInt($(item).attr('speed')) / 2;
	        } else {
	        	shotByFoe(item);
	        };
	        // console.log(speed);
	        item.style.left = (item_l + speed) + 'px';
	        checkCrach(item);
	        checkHit(item);
	    })
	    $.each($('.shot'), function(index, item) {
	        let shot_l = item.offsetLeft - 5;
	        item.style.left = shot_l + 'px';
	    })
	    $.each($('.power'), function(index, item) {
	        let power_t = item.offsetTop + 1;
	        if (power_t >= max_bottom - item.offsetHeight) {
	            $(item).fadeOut(200);
	        };
	        // console.log(power_t, max_bottom-item.offsetHeight)
	        item.style.top = power_t + 'px';
	        addPower(item);
	    });

	    $.each($('.foeShot'), function (index, item) {
	    	let l = item.offsetLeft + 2;
	    	item.style.left = l + 'px';
	    });

	    time++;
	}

	function gameOver() {
	    stop = true;
	    clearInterval(game_life);
	    plant.toggle('explode');
	    // alert('游戏结束');
	}
	// $(document).on('mousemove', function(ev) {
	//     var ev = ev|| e;

	//     console.log(ev.pageX, ev.pageY);
	// });
	function addPower(item) {
	    if (checkBoom($(item), plant)) {
	        $(item).fadeOut('200').remove();
	        power = power > 15 ? 30 : power + 15;
	    };
	}

	function checkBoom(first, second) {
	    var Ft = first.offset().top,
	        Fl = first.offset().left,
	        Fh = first.height(),
	        Fw = first.width(),
	        St = second.offset().top,
	        Sl = second.offset().left,
	        Sh = second.height(),
	        Sw = second.width();
	    var x, y;
	    x = Fl <= Sl ? Sl : Fl;
	    y = Ft <= St ? St : Ft;

	    if (x >= Fl && x <= Fl + Fw && y >= Ft && y <= Ft + Fh && x >= Sl && x <= Sl + Sw && y >= St && y <= St + Sh) {
	        return true;
	    } else {
	        return false;
	    }


	}
	//获取随机数
	function shuffle(min, max) {
	    parseInt(Math.random() * (max - min + 1) + min, 10);
	    return Math.floor(Math.random() * (max - min + 1) + min);
	}

	const yunshis = ['aestroid_brown', 'aestroid_dark', 'aestroid_gray_2', 'aestroid_gray'];
	//添加陨石
	function appendMet() {
	    var img = document.createElement('img');
	    $(img).prop('src', './images/' + yunshis[shuffle(0, 3)] + '.png').addClass('meteorite').attr('score', 15);
	    img.style.left = max_left + 'px';
	    img.style.top = shuffle(max_top, max_bottom - 300) + 'px';
	    img.width = shuffle(1, 5) * 50;
	    $(img).attr('speed', img.width / 50);
	    $('.main').append(img);
	}
	//追加敌人
	var foeNum = 0;
	function appendFoe() {
	    var div = document.createElement('div');
	    $(div).addClass('foe').addClass('foe_' + shuffle(1, 4)).attr('score', 10).prop('id', 'Foe_'+foeNum);
	    div.style.left = max_left + 'px';
	    div.style.top = shuffle(max_top, max_bottom - 80) + 'px';
	    $('.main').append(div);
	    foeNum++;
	}
	function shotByFoe(item) {
		var foe_id = $(item).attr('id');
		if ($('.foeShot[foe-id='+foe_id+']').length > 1) return;
		var l = item.offsetLeft;
		var t = item.offsetTop;
		var h = item.offsetHeight;
		var w = item.offsetWidth;
		var shot = document.createElement('div');
		$(shot).addClass('foeShot').attr('foe-id', $(item).attr('id')).css({
			left: (l+w)+'px',
			top: (t+h/2)+'px'
		}).appendTo('.main');
	}
	function appendPower() {
	    var p = document.createElement('div');
	    $(p).addClass('power');
	    p.style.top = max_top + 'px';
	    p.style.left = shuffle(max_left, (max_right - p.offsetWidth)) + 'px';
	    $('.main').append(p);
	}
	//发射子弹
	function sendShot() {
	    // var shots = $('.shot');
	    if (stop) {
	        return false;
	    }
	    var shot = document.createElement('div');
	    $(shot).addClass('shot');
	    shot.style.top = (plant.offset().top + (plant.height() / 2)) + 'px';
	    shot.style.left = (plant.offset().left - 2) + 'px';
	    $('.main').append(shot);
	    sound(shoots, true, true)
	    // if (shots.length < 3) {
	    // }
	}

	//检测碰撞
	function checkCrach(item) {
	    if (stop) {
	        return false;
	    }

	    let item_t = item.offsetTop;
	    let item_l = item.offsetLeft;
	    let item_h = item.offsetHeight;
	    let item_w = item.offsetWidth;
	    if ($(item).is('img')) {
	        item_h *= 0.8;
	        item_w *= 0.8;
	    }
	    if (Math.abs(item_t - plant.offset().top) < item_h && Math.abs(item_l - plant.offset().left) < item_w) {
	        $(item).toggle('explode', { pieces: 64 }).remove();
	        power -= 15;
	        sound(destroyed, true, true);
	        if (power <= 0) {
	            // plant.toggle('explode').remove();
	            gameOver();
	        }
	        return;
	    }
	    if (item_l >= max_right - item_w) {
	        $(item).remove();
	    }
	}

	//检测命中
	function checkHit(item) {
	    if (stop) {
	        return false;
	    }

	    let t = parseInt(item.style.top);
	    let l = parseInt(item.style.left);
	    let w = $(item).width();
	    let h = $(item).height();
	    let score = parseInt($('.score>b').html());
	    var item_s = parseInt($(item).attr('score'));

	    $.each($('.shot'), function(index, shot) {
	        let left = parseInt(shot.style.left);
	        let top = parseInt(shot.style.top);
	        if (parseInt(shot.style.left) <= max_left) {
	            $(shot).remove();
	            return;
	        }
	        if (Math.abs(t - top) < h && Math.abs(l - left) < w) {
	            if ($(item).is('.meteorite')) {
	                if (!$(item).hasClass('hit')) {
	                    $(item).addClass('hit');
	                    $(shot).remove();
	                    return;
	                }
	            }
	            $(item).toggle('explode', { pieces: 25 }).remove();
	            $(shot).remove();
	            sound(destroyed, true, true);
	            $('.score>b').html(score + item_s);
	            return;
	        }
	    });
	}

	//飞机移动
	var stop = false;
	var keyDown = true;

	function plantMove() {
	    $(document).on('keydown', function(e) {
	        if (stop && e.which != 13) {
	            return false;
	        }
	        let left = plant.offset().left;
	        let top = plant.offset().top;
	        // console.log(e.which)
	        switch (e.which) {
	            case 37:
	                //left
	                left = left - moveNum;
	                if (left <= max_left) {
	                    left = max_left;
	                }
	                $('.plant').css('left', (left) + 'px');
	                return false;
	                break;
	            case 38:
	                //top
	                top = top - moveNum;
	                if (top <= max_top) {
	                    top = max_top;
	                }
	                $('.plant').css('top', (top) + 'px');
	                return false;
	                break;
	            case 39:
	                //right
	                left = left + moveNum;
	                if (left >= max_right - plant.width()) {
	                    left = max_right - plant.width();
	                }

	                $('.plant').css('left', (left) + 'px');
	                return false;
	                break;
	            case 40:
	                //down
	                top = top + moveNum;
	                if (top >= max_bottom - plant.height()) {
	                    top = max_bottom - plant.height();
	                }
	                $('.plant').css('top', (top) + 'px');
	                return false;
	                break;
	            case 32:
	                //space
	                // keyDown = true;
	                if (keyDown) {
	                    sendShot();
	                } else {
	                    return false;
	                }
	                keyDown = false;
	                return false;
	                break;
	            case 13:
	                //enter
	                if ($('.start').hasClass('on')) {
	                    clearInterval(game_life);
	                    $('.start').removeClass('on');
	                    sound(background, false);
	                    stop = true;
	                } else {
	                    clearInterval(game_life);
	                    game_life = setInterval(run, 20);
	                    $('.start').addClass('on');
	                    sound(background, true);
	                    stop = false;
	                }
	                //return false;
	                break;
	            default:
	                break;
	        }
	    }).on('keyup', function(e) {
	        var ev = e || ev;
	        switch (ev.which) {
	            case 32:
	                keyDown = true;
	                break;
	        }
	    });
	}
</script>