实现打砖块小游戏(10.9—10.11)

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量138 收藏
点赞数
分类专栏： 练习 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ohnk_/article/details/108997955
版权

我的问题

1. 构造函数的使用

2. 为什么不在构造函数里面定义功能，而要在原型链上去写功能？

在构造函数中定义方法,方法也就是函数,函数是引用类型,每一次new 实例化的时候 都会在堆内存新建一个空间存储函数,这样就造成了 内存浪费.在原型上添加方法,那么所的实例化的对象都会共用这个方法,优点就是减小内存占用利于代码复用

我的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打砖块</title>
    <link rel="stylesheet" href="../拉勾网首页/common.css">
    <link rel="stylesheet" href="../拉勾网首页/reset.css">
</head>
<style>
.container{
    position: relative;
    width: 1000px;
    height: 550px;
    margin: 0 auto;
    margin-top: 20px;
    border: 2px solid gold;
    padding-top: 20px;
    padding-left: 40px;
    padding-right: 20px;
}
.container .gameBox{
    width: 690px;
    height: 500px;
    border: 2px solid gold;
    box-shadow:  3px 3px 7px #999;
    position: relative;
}
.container .gameBox ul li{
    position: absolute;
    width: 69px;
    height: 20px;
    left: 0;
    top: 0;
}
.container .gameBox #bubble{
    position: absolute;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color:gold;
    left: 59px;
    top: 466px;
}
.container .gameBox #board{
    position: absolute;
    background-color: brown;
    width: 150px;
    height: 8px;
    border-radius: 3px;
    left: 0px;
    top: 492px;
}
.container .showBox{
    width: 250px;
    height: 500px;
    background-color: #555;
}
.container .showBox span{
    display: block;
    border-bottom: 1px solid #fff;
    padding: 20px 0 10px 20px;
    color: #fff;
}
.container .showBox span:first-child{
    font-weight: bold;
}
.container .showBox span p{
    margin-bottom: 10px;
}
.container button{
    height: 30px;
    width: 80px;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    background-color:#666;
    margin-top: 10px;
    margin-left: 310px;
}
.container .alBox{
    display: none;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    text-align: center;
    line-height: 200px;
    position: absolute;
    width: 300px;
    height: 200px;
    background-color: rgba(85, 85, 85, .6);
    top: 175px;
    left: 250px;
}
</style>
<body>
    <div class="container clearfix">
        <div class="gameBox left">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <div id = "bubble"></div>
            <div id = "board"></div>
        </div>
        <div class="showBox right">
                <span>游戏重要信息</span>
                <span>
                    <p>当前时间</p>
                    <p id="time">加载中...</p>
                </span>
                <span id="">
                    <p>游戏状态</p>
                    <p id="statu">加载中...</p>
                </span>
                <span id="">
                    <p>挡板打球次数</p>
                    <p id="times">加载中...</p>
                </span>
                <span id="">
                    <p>游戏得分</p>
                    <p id="score">加载中...</p>
                </span>
        </div>
        <button>开始游戏</button>
        <div class="alBox">游戏结束!</div>
    </div>
    <script src="./tools.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }
        function rand(){
            var r = Math.floor(Math.random()*256);
            var g = Math.floor(Math.random()*256);
            var b = Math.floor(Math.random()*256);
            var rgb = `rgb(${r}, ${g}, ${b})`;
            return rgb;
        }
        function Blockbreak(){//这是个构造函数，用大驼峰式命名
            this.list = document.getElementsByTagName('li');
            this.len = this.list.length;//这里不能直接写list, 要写this.list,下面也是！
            this.liwidth = changeCss(this.list[0], 'width');
            this.liheight = changeCss(this.list[0], 'height');
            this.board = $('board');
            this.boardtop = changeCss(this.board, 'top');
            this.boardleft = changeCss(this.board, 'left');
            this.boardwidth = changeCss(this.board, 'width');
            this.gameBox = document.getElementsByClassName('gameBox')[0];
            this.gbwidth = changeCss(this.gameBox, 'width');
            this.gbheight = changeCss(this.gameBox, 'height');
            this.bubble = $('bubble');
            this.bubbleleft = changeCss(this.bubble, 'left');
            this.bubbletop = changeCss(this.bubble, 'top');
            this.bubblewidth = changeCss(this.bubble, 'width');
            this.bubbleheight = changeCss(this.bubble, 'height');
            this.times = 0;
            this.score = 0;
            this.alBox = document.getElementsByClassName('alBox')[0];
        }
        Blockbreak.prototype.init = function(){
            for(var i = 0; i < this.len; i++){//初始化砖块
                changeCss(this.list[i], 'background-color', rand());
                changeCss(this.list[i], 'left', i%10*parseInt(this.liwidth) + 'px');
                changeCss(this.list[i], 'top', Math.floor(i/10)*parseInt(this.liheight) + 'px');
            }
        }
        Blockbreak.prototype.keydown = function(){
            var that = this;//终于知道这里为啥要用that指向this了，因为到下面的函数里，如果直接用this的话，指向的不是构造函数
            addEvent(document, 'keydown', function(e){
                var event = e || window.event;
                if(event.keyCode == 37){
                    if(parseInt(that.boardleft) <= 0){
                        changeCss(that.board, 'left', '0px');
                    }else{
                        changeCss(that.board, 'left', (parseInt(that.boardleft) - 15) + 'px');
                        that.boardleft = changeCss(that.board, 'left');//实时更新left值
                    }
                }
                if(event.keyCode == 39){
                    if(parseInt(that.boardleft) >= (parseInt(that.gbwidth) - parseInt(that.boardwidth))){
                        changeCss(that.board, 'left', (parseInt(that.gbwidth) - parseInt(that.boardwidth)) + 'px');
                    }else{
                        changeCss(that.board, 'left', (parseInt(that.boardleft) + 15)+ 'px');
                        that.boardleft = changeCss(that.board, 'left');
                    }
                }
            });
        }
        Blockbreak.prototype.move =function(){
            var that = this;
            var timer = null;
            var speedX = 2;
            var speedY = 2;
            timer = setInterval(function(){
                //小球运动部分
                changeCss(that.bubble, 'left', (parseInt(that.bubbleleft) + speedX) + 'px');
                changeCss(that.bubble, 'top', (parseInt(that.bubbletop) - speedY) + 'px');
                that.bubbleleft = changeCss(that.bubble, 'left');//实时更新
                that.bubbletop = changeCss(that.bubble, 'top');
                //小球碰撞反弹
                //上
                if(parseInt(that.bubbletop) <= 0){
                    speedY *= -1;
                }
                if(parseInt(that.bubbletop) >= parseInt(that.gbheight) - parseInt(that.bubbleheight)){
                    clearInterval(timer);
                    changeCss(that.alBox, 'display', 'block');
                    $('statu').innerHTML = '游戏结束';
                }
                //左右
                if(parseInt(that.bubbleleft) <= 0 || parseInt(that.bubbleleft) >= parseInt(that.gbwidth) - parseInt(that.bubblewidth)){
                    speedX *= -1;
                }
                //挡板(注意这里用三个if嵌套表示同时满足这些条件)三个方向的情况
                if(parseInt(that.bubbletop) + parseInt(that.bubbleheight) >= parseInt(that.boardtop)){
                    if(parseInt(that.bubbleleft) + parseInt(that.bubblewidth) >= parseInt(that.boardleft)){
                        if(parseInt(that.bubbleleft) <= parseInt(that.boardleft) + parseInt(that.boardwidth)){
                            speedY *= -1;
                            that.times ++;
                            $('times').innerHTML = that.times;
                        }
                    }  
                }
                //和砖块的碰撞
                for(var j = 0; j < that.len; j ++){
                    //以下注释掉的代码这种方式不太行，得换成下面的offsetTop
                    // var litop = parseInt(changeCss(that.list[j], 'top'));
                    // var lileft = parseInt(changeCss(that.list[j], 'left'));
                    if(parseInt(that.bubbletop) <= that.list[j].offsetTop + parseInt(that.liheight)){
                        if(parseInt(that.bubbleleft) >= that.list[j].offsetLeft){
                            if(parseInt(that.bubbleleft) <= that.list[j].offsetLeft + parseInt(that.liwidth)){
                                speedY *= -1;
                                changeCss(that.list[j], 'display', 'none');
                                that.score ++;
                                $('score').innerHTML = that.score;
                            }
                        }
                    }
                }

            },20)
        }
        Blockbreak.prototype.btnevent= function(){
            var that = this;
            var button = document.getElementsByTagName('button')[0];
            var now = new Date();
            addEvent(button, 'click', function(){
            bb.init();
            bb.keydown();
            bb.move();
            for(var j = 0; j < that.len; j ++){
                changeCss(that.list[j], 'display', 'block');
            }
            changeCss(that.alBox, 'display', 'none');
            $('time').innerHTML = now.getFullYear() + '/' + parseInt(now.getMonth() + 1) + '/' + now.getDate();
            $('statu').innerHTML = '游戏开始';
        });
        }
        var bb = new Blockbreak();
        bb.btnevent();
    </script>
</body>
</html>
Rest257
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
增强学习系列之（三）：实现一个打砖块的游戏
superCally的专栏
01-30 1万+
增强学习 breakout 实现
打砖块小游戏
weixin_49813550的博客
04-10 247
打砖块 这是用原生js来写的一个打砖块小游戏，平时太闲了，没事就写了一个小游戏。感兴趣的小伙伴可以直接复制到自己电脑上玩一下 这里有一个浏览器兼容问题，在谷歌浏览器上结束的时候点击确定不能够重新开始，在火狐浏览器上是没有问题的。 下面直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=
java编写打砖块小游戏
qq_35273452的博客
05-17 2149
打砖块源码 源码共包含两个文件 文件1：play_zhuankuai.java import java.awt.*; import javax.swing.JPanel; @SuppressWarnings("serial") public class play_zhuankuai extends JPanel implements Runnable{ boolean e
c++实现打砖块游戏——童年回忆
weixin_45710519的博客
08-04 824
采用分文件来进行书写，便于后续的维护和改良，首先声明自己需要用到的函数，准备好球类、木板类。 #pragma once #include<easyx.h> //木板类 class Board { public: Board(int x,int y,int width,int height,int speed,COLORREF color); int x; int y; int width; int height; int speed; COLORREF color; }; .
【STM32单片机】打砖块游戏设计
Hello_Muyi的博客
10-24 1740
系统运行后，TFTLCD触摸屏显示游戏界面，通过按键任意键进入游戏界面， 然后通过按键KEY2和KEY0键控住方向左右。当接住大到砖块且接住小球时， 分数加10。当游戏结束后可按任意键重新回到主界面开始。
Mac 操作系统下载大全 10.8 10.9 10.10 10.11 10.12
04-28
不少朋友经常要问起各种本本的Mac OS X 下载. 这里总结下方便大家下载. Mac 操作系统下载大全 10.8 10.9 10.10 10.11 10.12
Y460p 10.11.x.zip
06-11
标题中的“Y460p 10.11.x.zip”表明这是一个针对联想Y460p笔记本电脑，用于安装或更新Mac OS X 10.11（El Capitan）操作系统的EFI（Extensible Firmware Interface）固件的压缩包。EFI是苹果电脑上的一种引导加载...
mac10.11 alc887 驱动
06-12
标题中的“mac10.11 alc887 驱动”指的是为苹果Mac OS X 10.11（El Capitan）操作系统设计的ALC887声卡驱动程序。ALC887是一款由Realtek公司生产的高性能音频编解码器，常见于许多台式机和笔记本电脑的主板上，用于...
os x 10.11 变色龙
09-16
适用于OS10.11的变色龙驱动
MacOSX10.11.sdk.tar.xz
04-02
MacOSX10.11 SDK tar.xz压缩包，支持MacOSX10.12编译Android 6.0源码
打砖块游戏代码
06-23
课堂资源，这是老师上课教做的一个简单的打砖块游戏，用lua编的，挺有趣的一个小东西
【DP】打砖块
Maple的博客
10-07 337
Description KXT是一个很无聊的小朋友，一天到晚都在打坐… 　　一天，被他发现了一个比打坐更无聊的事情——打砖块。很多块砖分布在一个mm的矩阵中，他可以消掉以他为左上角顶点的一个nn的矩阵里的所有砖块。 　　喜欢偷懒的他请来了你帮他计算可以消掉最多的砖块数（只能消一次）。 Input 第一行：用空格隔开的三个整数n、m、k。 　　接下来k行，每行2个用空格隔开的整数Xi、Yi，表示第i...
VUE+Canvas 实现桌面弹球消砖块小游戏
denglouhen的博客
04-07 6195
大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。 那么用VUE+Canvas如何来实现呢？实现思路很简单，首先来拆分一下要画在画布上的内容： （1）用键盘左右按键控制平移的木板； （2）在画布内四处弹跳的小球； （3）固定在画面上方，并且被球碰撞后就消失的一堆砖块。 将上述三种对象，用requestAnimationFrame()函数平移运动起来，再结合各种碰撞检查，就可以得到最终的结果。 先看看最终的效果： 一、左右平移的木板
一个简单的打砖块游戏实现
In my way
01-11 1738
#brick-wall{ width: 600px; height: 500px; position:relative; margin:20px auto; background-color: white; position:relative; border: 4px solid black; box-shadow: 0px 0px 10px #123456; }
Python实现打砖块小游戏
热门推荐
momobaba2018的博客
09-24 3万+
这次用Python实现的是一个接球打砖块的小游戏，需要导入pygame模块，有以下两条经验总结： 1.多父类的继承 2.碰撞检测的数学模型 知识点稍后再说，我们先看看游戏的效果和实现： 一、游戏效果 二、游戏代码 #导入模块 import pygame from pygame.locals import * import sys,random,time,math class GameWindo...
前端JavaScript——打砖块小游戏
tingyu_的博客
07-21 2384
游戏效果图所示： 打砖块小游戏实现的步骤： 1.搭建整体的三个盒子： 最外面的大盒子，游戏屏幕盒子，游戏信息盒子 2.右侧信息的初始化（搭建好结构，以及样式） 3.游戏屏幕盒子中 未加JavaScript效果时的初始样子（砖块，小球，挡板） 4.给砖块设置随机颜色以及砖块的位置 5.键盘上的左右键控制挡板的左右移动 6.小球的运动效果：小球遇到挡板、盒子边沿、砖块的反弹效果 7.小球的运动过程中游戏信息的实时显示。 一、首先搭建游戏初始样子（未加JavaScript的样子） ...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 630
JavaScript青少年简明教程：函数及其相关知识（下）
10.11.33.75
04-20
10.11.33.75是一个IP地址，它是一个用于在计算机网络中标识设备的唯一地址。IP地址分为IPv4和IPv6两种类型，10.11.33.75是IPv4地址的一种。IPv4地址由四个由点分隔的十进制数表示，每个数的取值范围是0到255。 关于...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值