js 面向对象 打气球小游戏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        
        html,body {
            height:100%;
            background-color:#ccc;
        } 
        
        div {
            width:250px;
            height:333px;
            position:absolute;
            background: url(img/ballons.png) no-repeat 0px 0;
        }
    </style>
</head>
    
<body>
    <!--<div></div>-->
    <h2></h2>
    <h2></h2>
    <script>
        var balloons = [];
        var allScore = 0;
        /*面向对象创建气球的构造函数*/
        function Balloon(){
            this.dom = null;
            this.x = 0;
            this.y = 0;        
            this.score = 0;
            this.init();
            balloons.push(this);
            this.bindEvent();
        }
        
        Balloon.prototype.init = function(){
            this.dom = document.createElement('div');
            document.body.appendChild(this.dom);
            this.x = parseInt(Math.random()*(document.documentElement.clientWidth-250));
            this.y = document.documentElement.clientHeight;
            this.score = parseInt(Math.random()*12)+1; //[1~13);
            this.dom.style.left = this.x+"px";
            this.dom.style.top = this.y+"px";
            var curX = -((this.score-1)%4)*250;
            var curY = -parseInt(((this.score-1)/4))*333;
            this.dom.style.backgroundPosition = curX+"px "+curY+"px";
            
            /*
                1   2   3    4        (0 -250 -250*2 250*3) 0
                5   6   7    8        (0 -250 -250*2 250*3) -333
                9  10  11   12         (0 -250 -250*2 250*3) -333*2
            
            */
        };
        
        Balloon.prototype.bindEvent = function(){
            var _this = this;
            this.dom.onclick = function(){
                /*每次点击计算分数,下树,从数组中下线*/
                allScore += _this.score;
                _this.goDied();
            };
        }
        
        Balloon.prototype.update = function(){
            this.y -= this.score*3;
            if(this.y < -333){
                this.goDied();
            }
            this.dom.style.top = this.y+"px";
        };
        
        Balloon.prototype.goDied = function(){
            document.body.removeChild(this.dom);
            for(var i=0;i<balloons.length;i++){
                if(balloons[i] == this){
                    balloons.splice(i,1);
                }
            }
        };
        
        var allTime = 20;
        var iframe = 0;
        /*给new 出来的每一个this对象添加对应的属性
            每秒创建4个气球 */
        var timer = setInterval(function(){
            iframe++;
            if(iframe %10 == 0){
                allTime--;
                for(var i=0;i<4;i++){
                    new Balloon();
                }
            }
            
            for(var i=0;i<balloons.length;i++){
                balloons[i]&&balloons[i].update();
            }
            document.getElementsByTagName('h2')[0].innerHTML = "你剩余的时间为:"+allTime+"";
            document.getElementsByTagName('h2')[1].innerHTML = "你目前的分数:"+allScore+"";
            if(!allTime){
                alert("Game over ,你的总分数为:"+allScore+"");
                clearInterval(timer);
            }
        },100);
        
        
        
    </script>
</body>
</html>

图片见文件中

 

转载于:https://www.cnblogs.com/moon-yyl/p/9844950.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,我可以给你提供一个简单的爆气球小游戏的Java代码框架,你可以在此基础上进行开发: ```java import javax.swing.*; import java.awt.*; import java.awt.event.*; public class BalloonGame extends JPanel implements ActionListener, MouseListener { private static final int WIDTH = 800; private static final int HEIGHT = 600; private static final int MAX_BALLOONS = 20; private static final int BALLOON_RADIUS = 30; private static final int BALLOON_SPEED = 5; private Timer timer; private Balloon[] balloons; private int numBalloons; public BalloonGame() { setPreferredSize(new Dimension(WIDTH, HEIGHT)); setBackground(Color.WHITE); balloons = new Balloon[MAX_BALLOONS]; numBalloons = 0; timer = new Timer(50, this); timer.start(); addMouseListener(this); } public void paintComponent(Graphics g) { super.paintComponent(g); for (int i = 0; i < numBalloons; i++) { balloons[i].draw(g); } } public void actionPerformed(ActionEvent e) { for (int i = 0; i < numBalloons; i++) { balloons[i].move(); } repaint(); } public void mouseClicked(MouseEvent e) { int x = e.getX(); int y = e.getY(); for (int i = 0; i < numBalloons; i++) { if (balloons[i].contains(x, y)) { balloons[i].pop(); return; } } } public void mousePressed(MouseEvent e) {} public void mouseReleased(MouseEvent e) {} public void mouseEntered(MouseEvent e) {} public void mouseExited(MouseEvent e) {} private class Balloon { private int x; private int y; private int radius; private int dx; private int dy; private boolean popped; public Balloon() { radius = BALLOON_RADIUS; x = (int) (Math.random() * (WIDTH - 2 * radius)) + radius; y = (int) (Math.random() * (HEIGHT - 2 * radius)) + radius; dx = (int) (Math.random() * 2 * BALLOON_SPEED) - BALLOON_SPEED; dy = (int) (Math.random() * 2 * BALLOON_SPEED) - BALLOON_SPEED; popped = false; } public void draw(Graphics g) { if (!popped) { g.setColor(Color.RED); g.fillOval(x - radius, y - radius, 2 * radius, 2 * radius); } } public void move() { if (!popped) { x += dx; y += dy; if (x < radius || x > WIDTH - radius) { dx = -dx; } if (y < radius || y > HEIGHT - radius) { dy = -dy; } } } public boolean contains(int x, int y) { return !popped && Math.sqrt((this.x - x) * (this.x - x) + (this.y - y) * (this.y - y)) < radius; } public void pop() { popped = true; } } public static void main(String[] args) { JFrame frame = new JFrame("Balloon Game"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setContentPane(new BalloonGame()); frame.pack(); frame.setVisible(true); } } ``` 这个代码框架中定义了一个 `BalloonGame` 类,实现了 `ActionListener` 和 `MouseListener` 接口,同时定义了一个 `Balloon` 类,用于表示气球的属性和行为。在 `BalloonGame` 类的构造方法中初始化了气球数组、定时器和鼠标事件监听器,并且在 `paintComponent` 方法中绘制气球。在 `actionPerformed` 方法中更新气球的位置,在 `mouseClicked` 方法中判断鼠标点击的位置是否在气球范围内,并弹掉气球。最后,在 `main` 方法中创建一个 `JFrame` 对象,并将 `BalloonGame` 对象作为其内容面板。你可以根据这个代码框架进行开发,实现你自己的爆气球小游戏

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值