球球大战版打飞机（原创）

PROMULGATOR

╁╊仲?ャ`

湖南省长沙市

← js拖动改变div

→ 轮播图，幻灯片，焦点图

相关代码

球球大战版打飞机（原创）

CSS打地鼠游戏

简易打方块666

CSS实现打勾

打勾动画(原创)

打地鼠css（原创）

简易五子棋游戏

Html

Css

Js

#container {
	margin:0 auto;
	text-align:center;
}
#bt {
	display:none;
	width:100px;
	height:auto;
	position:absolute;
	top:380px;
	background:#2365a7;
	font:1.5em Arial;
	font-color:#ceceec;
	border-radius:15px;
}
#bt:hover {
	background:#3c4e61;
}

var ctx = document.getElementById('mycanvas').getContext("2d");
var W = ctx.canvas.width;
var H = ctx.canvas.height;
var RESTART = document.getElementById('bt');
var SCORE = 0;

function windowTocanvas(dx, dy) {
    var p = {};
    var bbox = ctx.canvas.getBoundingClientRect();
    p.x = dx - bbox.left;
    p.y = dy - bbox.top;
    return p;
}
var isDown = false;
var curp = {
    x: W / 2,
    y: H * 0.75
};
ctx.canvas.onmousemove = function(e) {
    e.preventDefault();
    if (isDown) {
        var p = windowTocanvas(e.clientX, e.clientY);
        hero.x = p.x;
        hero.y = p.y;
        curp = p;
    }
}
ctx.canvas.onmousedown = function(e) {
    e.preventDefault();
    var p = windowTocanvas(e.clientX, e.clientY);
    var s = Math.sqrt((p.x - curp.x) * (p.x - curp.x) + (p.y - curp.y) * (p.y - curp.y))
    if (s - hero.r < hero.r / 3) {
        isDown = true;
    }
}
ctx.canvas.onmouseup = function(e) {
    e.preventDefault();
    isDown = false;
}

function getRandom(a, b) {
    if (a < b) {
        var c = b;
        b = a;
        a = c;
    }
    return Math.random() * (a - b + 1) + b;
}
/*敌人*/
var ememys = [];
var ememycolors = ["rgba(0, 153, 255, 1)", "rgba(102, 255, 255, 1)", "rgba(204, 153, 255, 1)"];
var ememy = function(dx, dy, dr, ds, sc, l) {
    this.x = dx;
    this.y = dy;
    this.r = dr;
    this.c = ememycolors[Math.floor(getRandom(3, 1)) - 1];
    this.s = ds;
    this.sc = sc;
    this.life = l;
    this.boom = false;
    this.die = false;
    this.o = 1; //透明度
}
var createEmemy = function() {
    var x, y, r, s, sc, l;
    r = Math.floor(getRandom(30, 16));
    x = Math.floor(getRandom(W - r, r));
    y = -r;
    sc = r * 10;
    var ds = SCORE < 30000 ? 0 : SCORE < 60000 ? 1 : SCORE < 120000 ? 2 : 3;
    s = Math.floor(8 - r / 5) + ds;
    if (r < 20)
        l = 2;
    else if (r < 26)
        l = 4;
    else if (r < 31)
        l = 6;
    var e = new ememy(x, y, r, s, sc, l);
    ememys.push(e);
    console.log(ememys);
}
setInterval(createEmemy, 500);

function setcolor(c, i) {
    var ac = c.split(' ');
    i -= 0.2;
    ac[3] = i + ')';
    var result = ac.reduce(function(x, y) {
        return x + ' ' + y;
    });
    return result;
}
var flag = 0; //模拟爆炸，淡出的刷新频率
var drawEmemys = function() {
    if (ememys.length <= 0) {
        return;
    }
    for (var i = 0; i < ememys.length; i++) {
        if (ememys[i].boom && flag % 3 === 0) {
            var cc = setcolor(ememys[i].c, ememys[i].o);
            ememys[i].o -= 0.2;
            ememys[i].c = cc;
            flag = 0;
            if (ememys[i].o <= 0) {
                ememys[i].die = true;
                SCORE += ememys[i].sc;
            }
        }
        flag++;
        if (ememys[i].die) {
            ememys.splice(i, 1);
            i--;
            continue;
        }
        if (ememys[i].y < -ememys[i].r) {
            ememys.splice(i, 1);
            i--;
            continue;
        }
        ctx.beginPath();
        ctx.fillStyle = ememys[i].c;
        ctx.arc(ememys[i].x, ememys[i].y, ememys[i].r, 0, 2 * Math.PI);
        ctx.fill();
        ememys[i].y += ememys[i].s;
    }
}
/*发射子弹*/
var bullets = [];
var bullet = function(dx, dy) {
    this.x = dx;
    this.y = dy;
    this.speed = 10;
    this.r = 8;
    this.boom = false;
}

var drawbullet = function() {
    if (bullets.length > 0) {
        for (var i = 0; i < bullets.length; i++) {
            if (bullets[i].boom) {
                bullets.splice(i, 1);
                i--;
                continue;
            }
            if (bullets[i].y < -bullets[i].r) {
                bullets.splice(i, 1);
                i--;
                continue;
            }
            ctx.beginPath();
            ctx.fillStyle = "rgba(114,19,19,1)";
            ctx.arc(bullets[i].x, bullets[i].y, bullets[i].r, 0, 2 * Math.PI);
            ctx.fill();
            bullets[i].y -= bullets[i].speed;
        }
    }
}
var createBullet = function() {
    if (!hero.boom) {
        var x = hero.x;
        var y = hero.y - hero.r - 10;
        var b = new bullet(x, y);
        bullets.push(b);
    } else {
        if (bullets.length > 0) {
            bullets.splice(0, bullets.length);
        }
    }
    //console.log(bullets);
}
setInterval(createBullet, 200);

/*碰撞检测*/
function hitObj(bul, obj) {
    var distant = Math.sqrt((bul.x - obj.x) * (bul.x - obj.x) + (bul.y - obj.y) * (bul.y - obj.y));
    if (distant <= (bul.r + obj.r)) {
        return true;
    } else {
        return false;
    }
}

function AllHitObjTest() {
    for (var i = 0; i < bullets.length; i++) {
        for (var j = 0; j < ememys.length; j++) {
            if (!ememys[j].boom) {
                if (hitObj(bullets[i], ememys[j])) {
                    ememys[j].life -= 2;
                }
                if (ememys[j].life <= 0) {
                    bullets[i].boom = true;
                    ememys[j].boom = true;
                }
            }
        }
    }
    for (var i = 0; i < ememys.length; i++) {
        if (hitObj(hero, ememys[i])) {
            hero.boom = true;
        }
    }
}

var hero = {
    x: W / 2,
    y: H * 0.75,
    r: 50,
    c: "rgba(123,187,73,1)",
    boom: false,
    die: false,
    b: bullets,
    f: 2,

draw: function() {
        if (!hero.boom) {
            ctx.beginPath();
            ctx.fillStyle = hero.c;
            ctx.arc(hero.x, hero.y, hero.r, 0, 2 * Math.PI);
            ctx.fill();
        } else {
            ctx.beginPath();
            ctx.font = "30px Verdana";
            ctx.fillStyle = "red";
            ctx.fillText("GAME OVER", W / 2 - 80, H / 2);
            ctx.fill();
            RESTART.style.display = "block";
            var bbox = ctx.canvas.getBoundingClientRect();
            RESTART.style.left = bbox.left + W / 2 - 50 + 'px';
        }
    },
    shot: function() {
        if (!hero.boom)
            drawbullet();
    }

}

function drawGround() {
    ctx.beginPath();
    ctx.fillStyle = "#cecece";
    ctx.fillRect(0, 0, W, H);
    ctx.fill();

ctx.font = "20px Verdana";
    ctx.fillStyle = "red";
    ctx.fillText("得分:" + SCORE, 10, 25);
    ctx.fill();
}

var restart = function() {
    RESTART.style.display = "none";
    ctx.clearRect(0, 0, W, H);
    ememys = [];
    SCORE = 0;
    hero.boom = false;
}
var updata = function() {
    if (!hero.die) {
        ctx.clearRect(0, 0, W, H);
        drawGround();
        hero.draw();
        hero.shot();
        drawEmemys();
        AllHitObjTest();
        requestAnimationFrame(updata);
    }
}
requestAnimationFrame(updata);

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

球球大战版打飞机（原创）

代码描述：自己写的简单的打飞机游戏

游戏逻辑比较简单，初学者很好的学习教材。我也时刚学习，有疑问可以留言，一起交流，共同进步。

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>球球大战版打飞机（原创）-jq22.com</title> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号