用原生js编写一个简单的打砖块游戏

最新推荐文章于 2021-05-29 14:25:31 发布
最新推荐文章于 2021-05-29 14:25:31 发布
阅读量418 收藏
点赞数
分类专栏： 学习 文章标签： javascript css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ordnary/article/details/108308271
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        #div2{width:510px;height:600px;border: 1px solid black;margin: 50px 500px;position: relative;float: left;display:block;background-image: url(girl.jpg);background-size:contain;}
        #div2 #title{font-size: 100px;margin :50px auto;}
        #div2 #kaishi{width:150px;height:40px;font-size: 30px;position: absolute;left:180px;top:500px;}
        #div1{width:510px;height:600px;border: 1px solid black;margin: 50px 500px;position: relative;display: none;}
        #ball{width:15px;height:15px;border-radius: 50%;background-color: red;position: absolute;left:250px;top:560px;}
        #block{width:90px;height:15px;background-color: blue;position: absolute;left:200px;top:585px;}
        #daizi div {width:100px; height: 20px;border: 1px solid black; float: left;}
    </style>
    <script>
        window.onload = function(){
            //找到小球和大的框
            var oDiv1 = document.getElementById("div1");
            var oBall = document.getElementById("ball");
            var oBlock = document.getElementById("block");
            var oDiv2 = document.getElementById("div2");
            var kaishi = document.getElementById("kaishi");
            var title = document.getElementById("title");
            var oDaizi = document.getElementById("daizi");
            var daiziDiv = oDaizi.getElementsByTagName("div");
            var timer2 = setInterval(function(){
                title.style.color = randomColor();
            },500);  
            kaishi.onclick = function(){
                clearInterval(timer2);
                oDiv2.style.display = "none";
                oDiv1.style.display = "block";
                ballMove(); //调用小球移动函数里面包含小球的碰撞检测
                blockMove(oBlock);//调用拖动滑块函数
                creatDiv(60)//调用滑块函数    
            }
            //小球移动函数
            function ballMove(){               
                    //设置小球速度
                    var speedX =4;
                    var speedY =-4;
                    var timer =null;
                //设置定时器
                setInterval(function(){
                    clearInterval(timer);
                    //小球的移动范围设置 
                    if(oBall.offsetLeft <= 0  || oBall.offsetLeft >=495){
                        speedX*=-1;
                    }if(oBall.offsetTop <=0){
                        speedY *= -1;
                    }if(oBall.offsetTop >=585){
                        setTimeout(function(){
                            window.location.reload();
                            alert("游戏结束,请重新开始");
                            // clearInterval(timer); 
                            oDiv2.style.display = "block";
                            oDiv1.style.display = "none";    
                        },100)
                        
                    }
                    //小球的左和上的移动距离
                    oBall.style.left = oBall.offsetLeft + speedX +"px";
                    oBall.style.top = oBall.offsetTop + speedY +"px";

                    // 小球和滑块的碰撞检测
                    if(pengzhuang(oBall,oBlock)){
                        speedY *= -1;
                    }
                    // 小球和方块的碰撞检测
                    for(var i =0; i<daiziDiv.length;i++){
                        if(pengzhuang(oBall,daiziDiv[i])){//如果碰撞了
                            switch(daiziDiv.length/10){
                                case 5 :speedX=4;speedY =-4;break;
                                case 4 :speedX=6;speedY =-6;break;
                                case 3 :speedX=8;speedY =-8;break;
                                case 2 :speedX=10;speedY =-10;break;
                                case 1 :speedX=12;speedY =-12;break;
                                default :break;
                            }
                            speedY *= -1;
                            oDaizi.removeChild(daiziDiv[i]);
                            if(daiziDiv.length == 0){
                                    setTimeout(function(){
                                        window.location.reload();
                                        alert("恭喜你，游戏通关啦~~~");},100); 
                                }
                            break;
                        }   
                    }
                },30); 
            }
        }
             //碰撞函数（在小球函数中调用检测碰撞）
             function pengzhuang(node1,node2){
                    var l1 = node1.offsetLeft;
                    var r1 = node1.offsetLeft + node1.offsetWidth;
                    var t1 = node1.offsetTop;
                    var b1 = node1.offsetTop + node1.offsetHeight;

                    var l2 = node2.offsetLeft;
                    var r2 = node2.offsetLeft + node2.offsetWidth;
                    var t2 = node2.offsetTop;
                    var b2 = node2.offsetTop + node2.offsetHeight;

                    if(l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1){
                        return false;
                    }else{
                        return true;
                    }
            }
        //创建滑块函数
        function creatDiv(n){     
            var oDaizi = document.getElementById("daizi");
            for(var i =0; i<n;i++){
                var newdiv = document.createElement("div");
                newdiv.style.background =randomColor();
                oDaizi.appendChild(newdiv);
            }
            //文档流转换
            var daiziDiv = oDaizi.getElementsByTagName("div"); 
            //找到所有的砖块的位置
                for(var i = 0; i < daiziDiv.length; i++){
                    daiziDiv[i].style.left = daiziDiv[i].offsetLeft + 'px';
                    daiziDiv[i].style.top = daiziDiv[i].offsetTop + 'px'; 
                }
            //把这些砖块的位置全部设置为绝对定位
                for(var i = 0; i < daiziDiv.length; i++){
                    daiziDiv[i].style.position = 'absolute';
                }
        }
        //滑块拖动函数
        function blockMove(block){
            block.onmousedown = function(ev){
                var e = ev || window.event;
                offsetX = e.clientX - block.offsetLeft;
                document.onmousemove = function(ev){
                    var e = ev || window.event;
                    var l = e.clientX -offsetX;
                    if(l <= 0){
                        l = 0;
                    }if(l >= 410){
                        l = 410;
                    }
                    block.style.left = l + "px";
                }
            }   
             block.onmouseup = function(){
                document.onmousemove = null;
            } 
            window.onkeydown = function(ev){
                    var e = event || window.event;
                    var which = e.which || e.keyCode;//获取键盘时间
                    //键盘速度
                    var speed = 30;
                    switch(which){
                        case 37://左
                        if(block.offsetLeft <= 0){//左边界
                             block.style.left = 0 +"px";
                        }else{
                            block.style.left = block.offsetLeft - speed + 'px';
                        }console.log(block.offsetLeft);
                            break;
                        case 39://右
                        if(block.offsetLeft >= 420){    //右边界
                            block.style.left = 420 +"px";
                        }else{
                            block.style.left = block.offsetLeft + speed + 'px';
                        }console.log(block.offsetLeft);
                            break;
                        default:
                            break;       
                    }
            }
            window.onkeyup = function(){
                    document.onkeydown = null;
            }          
        }
        //随机颜色函数
        function randomColor(){
                var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
                return str;
            }
    </script>
</head>
<body>
    <div id="div2">
        <div id="title">打砖块游戏</div>
        <button id="kaishi">开始游戏</button>
    </div>
    <div id="div1">
        <div id="ball"></div>
        <div id="block"></div>
        <div id="daizi">
            <!-- 创建滑块 -->
            <!-- <div></div>
            <div></div> -->
        </div>  
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

OrdnAry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React简记
生活在别处
03-17 861
文章目录背景什么是React官网资料核心技术JSX概念嵌入表达式JSX 也是一个表达式JSX 中指定属性JSX 防止注入攻击组件概念组件的代码定义将函数组件转换成 class 组件使用组合而非继承来实现组件间的代码重用PropsProps的代码定义JSX 中的子元素Props 的只读性State数据是向下流动的State 每次只需更新部分变量不要直接修改 StateState 的更新可能是异步的生命周期方法React 元素的事件处理定义事件函数内使用this时需要先绑定向事件处理程序传递参数组件列表依据数组
Android------面试简答题
热门推荐
leehbhs的博客
08-03 2万+
一。.简单概述SVN与Git的区别？ 1.GIT是分布式的，SVN不是 2.GIT把内容按元数据方式存储，而SVN是按文件 3.GIT分支和SVN的分支不同 4.GIT没有一个全局的版本号，而SVN有 5.GIT的内容完整性要优于SVN 二.简述listview的优化策略？ 1.复用convertView，减少findViewById的次数 2.ListView中数
【前端】利用JavaScript做打砖块小游戏
雲松的博客
07-18 1886
本篇文章介绍的是博主在学习前端的JavaScript时跟着教程，稍作改良的一个打砖块的小游戏，这个可能与大家见到的简易版打砖块不大一样，会稍微复杂一点点。写这篇文章有两个目的，一是作为学习记录，二是希望对大家有点帮助，对于不足之处，也希望各路大佬可以不吝赐教。本文为作者原创文章，文中所示的图片、代码皆来自网络或博主自制，仅做学习、记录使用，如果某些东西涉及侵权，请作者大大告知博主，可以对此进行补充说明。如有人私自引入商业使用构成侵权或违法犯罪，则博主概不负责
纯javascript制作的汉诺塔游戏-有源码
05-15
纯javascript制作的汉诺塔游戏-有源码
原生js打砖块游戏1.1
眉目成书
05-20 2310
已更新1.2~ 新版 本IE FireFox Opera Chrome都可以 正常运行，各位看官移步哈~~                 *{     margin:0;     padding:0;     }     body{     background:u
原生js打砖块游戏（一）——基础框架
隐秀_
06-02 2864
前言    最近看到了萧井陌的几个游戏的源码，好奇也跟着打了打，真的是很有收获。    最后会实现一个打方块的游戏，完全由原生js编写，当然，用了canvas。接下来会连续发几篇文章一步步建立并完善我的小游戏，并记录萧大比较酷的观点以及我自己的一些想法。游戏效果    只是一个比较基础的版本，只有球和挡板，障碍物和界面效果记录数据什么的都没有加，以后会逐渐完善。完整代码    先给出完整的代码吧，...
纯原生JS用面向对象class方法实现简易扫雷小游戏
qq_23539691的博客
05-29 1755
Demo介绍 纯原生js 实现 且用ES6语法class写的扫雷小游戏：布局为10*10的网格，随机生成10-20个雷。 左键点击扫雷。右键标记该地方有雷。该demo下载下来复制到html文件中直接可以使用。不需要下载任何插件和引入任何框架。 小游戏源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
breakout-game_前端小游戏_breakout_
10-02
【标题】"breakout-game_前端小游戏_breakout_" 指的是一款利用原生JavaScript编写的打砖块游戏。在Web开发领域，前端小游戏是一种常见的练习项目，它可以帮助开发者提升JavaScript编程技能，同时也能增强对HTML、...
javascript怎么用
最新发布
03-28
3. 交互式游戏：可以使用JavaScript来创建简单的游戏，例如跳跃游戏或打砖块游戏。 4. 移动应用程序：可以使用JavaScript来编写移动应用程序，例如在iOS或Android上编写原生应用程序。 5. 数据可视化：可以使用...
头脑风暴--原生JS实现汉诺塔游戏
qq_44197554的博客
05-06 1234
介绍 今天写了一个汉诺塔游戏，我想大家应该都玩过，先给大家看看具体是什么样吧。 源码已上传github：github链接 很遗憾，也就只有3个圆盘我可以顺利通过，哈哈~~~，如果谁可以玩更高的级别，还请不吝赐教啦。话不多说，先看怎么实现吧。 游戏规则 整个小游戏是可以自己调整难度的，演示里我是使用的3个圆盘，大家可以自行调整。当然，也可以改成闯关模式，这就靠大家发挥啦。 汉诺塔游戏规则：只有宽度...
原生JS实现简单打砖块弹球小游戏
qq_23539691的博客
05-26 832
使用原生JS写的，还有一点瑕疵。代码直接复制到html就能使用 速度随机的 因为设涉及横向和纵向速度，所以显示的小球速度值是他们的和速度（立方和开根号）。 按回车或者在滑块上单机左键开始游戏。鼠标滑动或者键盘A（左）或者D（右）控制滑块方向接小球。 这个小demo的意义主要为了锻炼逻辑能力 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>document</title
用javascript编写的小游戏-打砖块
weixin_39417722的博客
04-23 7969
用javascript编写的小游戏-打砖块前言新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 前言 这是我在C...
Js版游戏打砖块开发过程详细
haierboos
08-29 445
最近对js的小游戏开发来了兴趣，前段时间由于回答度娘知道的提问写了个贪吃蛇，虽然难度不大并不复杂，感觉还挺有意思。感觉小时候玩过的什么俄罗斯方块，坦克大战什么的都可以试着用js实现下，这天来了兴致又想写一个，其实我小时候最喜欢玩的游戏就是打砖块了，当时五年级时在学校上微机课时总是在那偷偷玩打砖块还有个雪地的保龄球还有个潜艇在深海的游戏，都忘了名字了，玩儿的不亦乐乎。可能叫法不一样，就是下图这种，想...
一个用JS实现的简单的汉诺塔
qq592049153的专栏
04-07 1744
汉诺塔             *{margin:0;padding:0;}         #bd{position:fixed;top:50%;left:50%;width:800px;height:200px;margin:-100px 0 0 -400px;}         .pillar{position:relative;margin-left:200px;float:le
汉诺塔小游戏 - 原生Javascript制作
AquamanTrident的博客
10-16 1059
本次介绍的是汉诺塔游戏的制作：界面非常简单，主要利用CSS3的flex布局，很快就可以完成。接下来主要分享一下js的功能实现 // 一些基本配置 var config = { minWidth: 50, addWidth: 30, column1: document.getElementsByClassName('column')[0], column2: ...
JSP连接MySQL学生信息管理系统（实现增删改查）github求点赞
OrdnAry的博客
05-06 1万+
1.首页面shujuku.jsp shujuku.jsp <%@ page contentType ="text/html ;charset = UTF-8" pageEncoding="UTF-8" import="java.sql.*"%> <HTML> <head> <meta http-equil="Content-Type" content...
用 gulp require.js 和 jQuery 写一个小米项目之-----轮播图和左侧导航栏的实现
OrdnAry的博客
12-06 9442
gulofile.js中的配置 /* 把 .scss文件 => csswenjian =>压缩 => min.css */ const gulp = require("gulp"); const scss = require("gulp-sass"); const minifyCSS = require("gulp-minify-css"); const rename = require("gulp-rename"); gulp.task("scss",function(){
web前端----------网易云音乐播放器简单的实现（素材自行下载）
OrdnAry的博客
07-24 3574
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> body,ul,li,p{margin:0;padding:0;} ul{list-style:none;} #main{ width:400px; height:600px;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值