jQuery实现弹弹球小游戏

本文实例为大家分享了jQuery实现弹弹球小游戏的具体代码,供大家参考,具体内容如下

效果展示:

CSS样式:

#box {
       width: 600px;
       height: 650px;
       border: 5px solid rgb(245, 164, 96);
       position: relative;
       left: 500px;
       top: 50px;
       background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff),to(rgba(0, 0, 255, 0.5)));
            }

             /*小球的设置*/
            #ball {
                width: 20px;
                height: 20px;
                border-radius: 10px;
                background-color: white;
                position: absolute;
                top: 560px;
                box-shadow: 0px 0px 3px 3px aqua;
            }

            /*开始游戏按钮设置*/
            #btn {
                width: 150px;
                height: 90px;
                position: fixed;
                left: 730px;
                top: 400px;
                border-radius: 10px;
                box-shadow: #BBBBBB;
                font-size: 24px;
                cursor: pointer;
            }
              /*滑块的设置*/
            #slider {
                width: 120px;
                height: 20px;
                background-color: lightpink;
                position: absolute;
                top: 585px;
                border-radius: 10px;
                box-shadow: 0px 0px 2px 2px white;
                cursor: pointer;
            }
             /*每个方块的边框*/
            #brick div {
                width: 98px;
                height: 20px;
                float: left;
                border: 1px solid black;
            }
             /*游戏规则边框*/
            #tip {
                width: 280px;
                position: fixed;
                top: 200px;
                left: 100px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 20px;
            }
           /*难度得分边框*/
            #grade {
                width: 180px;
                position: fixed;
                top: 100px;
                left: 1150px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 20px;
            }

             /*h3字体设置*/
            #grade h3 {
                font-weight: 500;
            }
            #phb{
                width: 180px;
                position: fixed;
                top: 50px;
                left: 1150px;
                border: 1px solid black;
                text-indent: 2em;
                padding: 10px;
                border-radius: 10px;

            }

js代码:

js完整代码:

<script type="text/javascript">
            var box = document.getElementById("box");
            var ball = document.getElementById("ball");
            var btn = document.getElementById("btn");
            var slider = document.getElementById("slider");
            var obrick = document.getElementById("brick");
            var brickArr = obrick.getElementsByTagName("div");
            var grade = document.getElementById("grade");

            var rank = grade.children[1]
            var score = grade.children[3]
            var sco = 0; //分数
            var timer; //小球运行

            var isRunning = false;
            var speedX = rand(3, 12);
            var speedY = -rand(3, 12);
            var num = speedX - speedY;
            //随机选择难度
            var num = Math.ceil((Math.random() * 9));
            console.log("num为:" + num);
            switch (num) {
                case 1:
                case 2:
                case 3:
                    rank.innerHTML = "简单";
                    break;
                case 4:
                case 5:
                case 6:
                    rank.innerHTML = "中等";
                    slider.style.width = 80 + "px";
                    break;
                case 7:
                case 8:
                case 9:
                    rank.innerHTML = "困难";
                    slider.style.width = 60 + "px";
                    break;
            }

            //随机生成小球与滑块的初始位置
            var beginGo = rand(100, 500);
            ball.style.left = beginGo + 40 + "px";
            slider.style.left = beginGo + "px";

            //开始按钮点击事件
            btn.onclick = function() {
                btn.style.display = "none"; //隐藏按钮
                isRunning = true;
                clearInterval(timer);
                timer = setInterval(function() {

                    //获取小球初始位置
                    var ballLeft = ball.offsetLeft;
                    var ballTop = ball.offsetTop;

                    //获取小球运动之后位置
                    var nextleft = ballLeft + speedX;
                    var nexttop = ballTop + speedY;

                    //水平边界判断,当小球的left值小于容器左边界或者大于容器右边界时,将水平方向速度取反
                    if (nextleft <= 0 || nextleft >= box.offsetWidth - ball.offsetWidth - 10) {
                        speedX = -speedX;
                    }
                    //垂直边界判断,当小球的top值小于容器上边界时,将垂直方向速度取反
                    if (nexttop <= 0) {
                        speedY = -speedY;
                    }
                    //当小球触碰到下边界时,提示“游戏失败”,重新刷新页面
                    if (nexttop > box.offsetHeight - ball.offsetHeight) {
                        location.reload();
                        alert("Game Over!");
                    }

                    //将运动后的位置重新赋值给小球
                    ball.style.left = nextleft + "px";
                    ball.style.top = nexttop + "px";

                    //小球与滑块的碰撞
                    if (knock(ball, slider)) {
                        speedY = -speedY;
                    }

                    //小球与方块的碰撞
                    for (var j = 0; j < brickArr.length; j++) {
                        if (knock(brickArr[j], ball)) {
                            speedY = -speedY
                            obrick.removeChild(brickArr[j]);
                            sco++;
                            score.innerHTML = sco;
                            break;
                        }
                    }

                    //当容器中方块数量为0时,宣布“游戏胜利”,刷新页面
                    if (brickArr.length <= 0) {
                        location.reload();
                        alert("You win!");
                    }
                }, 20)
            }

            //鼠标控制滑块
            slider.onmousedown = function(e) {
                var e = e || window.event;
                //获取滑块初始位置
                var offsetX = e.clientX - slider.offsetLeft;
                if (isRunning) {
                    document.onmousemove = function(e) {
                        var e = e || window.event;
                        var l = e.clientX - offsetX;
                        if (l <= 0) {
                            l = 0;
                        }
                        if (l >= box.offsetWidth - slider.offsetWidth - 10) {
                            l = box.offsetWidth - slider.offsetWidth - 10;
                        }
                        slider.style.left = l + "px";
                    }
                }
            }
            document.onmouseup = function() {
                document.onmousemove = null; //鼠标移动时
            }

            //按键控制滑块
            document.onkeydown = function(e) {
                var e = e || window.event;
                var code = e.keyCode || e.which;
                var offsetX = slider.offsetLeft;
                if (isRunning) {
                    switch (code) {
                        case 37: //左
                            if (offsetX <= 0) {
                                slider.style.left = 0
                                break;
                            }
                            slider.style.left = offsetX * 4 / 5 + "px";
                            break;
                        case 39: //右
                            if (offsetX >= box.offsetWidth - slider.offsetWidth - 10) {
                                slider.style.left = box.offsetWidth - slider.offsetWidth;
                                break;
                            }
                            slider.style.left = (box.offsetWidth - slider.offsetWidth - offsetX) / 5 + offsetX + "px";
                            break;
                    }
                }

            }
            //一共有66块方块
            createBrick(66);

            //容器内创建方块
            function createBrick(n) {
                var oBrick = document.getElementById("brick");
                //在大盒子brick中插入n个div方块,并给予随机颜色
                for (var i = 0; i < n; i++) {
                    var node = document.createElement("div");
                    node.style.backgroundColor = color();
                    oBrick.appendChild(node);
                }
                //获取所有的方块
                var brickArr = obrick.getElementsByTagName("div")

                //根据每个方块当前所在位置,将left与top值赋给方块
                for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.left = brickArr[i].offsetLeft + "px";
                    brickArr[i].style.top = brickArr[i].offsetTop + "px";
                }
                //将所有方块设置成绝对定位,注意这一步与上一步顺序不能调换
                for (var i = 0; i < brickArr.length; i++) {
                    brickArr[i].style.position = "absolute";
                }
            }
            //随机生成颜色
            function color() {
                var result = "#";
                for (var i = 0; i < 6; i++) {
                    result += rand(0, 15).toString(16)

                }
                return result;
            }
            //随机数生成
            function rand(n, m) {
                return n + parseInt(Math.random() * (m - n + 1));
            }

            //碰撞检测函数
            function knock(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;
                }
            }
</script>

以上代码不是很完美,有需要的还可以进一步的改进

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • jquery制作 随机弹跳的小球特效

    以下是源码: 复制代码 代码如下: <!doctype html>  <html>  <head>  <title>HTML5 随机弹跳的小球</title>  <style>  body{  font-family: 微软雅黑;     }  body,h1{  margin:0;  }  canvas{  display:block;margin-left: auto;margin-right: auto;  border:1px

  • jQuery实现弹弹球小游戏

    本文实例为大家分享了jQuery实现弹弹球小游戏的具体代码,供大家参考,具体内容如下 效果展示: CSS样式: #box { width: 600px; height: 650px; border: 5px solid rgb(245, 164, 96); position: relative; left: 500px; top: 50px; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#ffffff),to(rgba(0,

  • python3实现弹弹球小游戏

    本文实例为大家分享了python3实现弹弹球小游戏的具体代码,供大家参考,具体内容如下 from tkinter import * from tkinter import messagebox import random import time from PIL import Image, ImageTk import sys class Game: def __init__(self): self.tk = Tk() self.times = 0 sw = self.tk.winfo_scre

  • JS实现简单打砖块弹球小游戏

    本文实例为大家分享了JS实现打砖块弹球小游戏的具体代码,供大家参考,具体内容如下 使用原生JS写的,还有一点瑕疵.代码直接复制到html就能使用 速度随机的 因为设涉及横向和纵向速度,所以显示的小球速度值是他们的和速度(立方和开根号). 按回车或者在滑块上单机左键开始游戏.鼠标滑动或者键盘A(左)或者D(右)控制滑块方向接小球. 这个小demo的意义主要为了锻炼逻辑能力: <!DOCTYPE html> <html> <head> <meta charset=&q

  • Python实现的弹球小游戏示例

    本文实例讲述了Python实现的弹球小游戏.分享给大家供大家参考,具体如下: 弹球 1. Ball 类 draw负责移动Ball 碰撞检测,反弹,Ball检测Paddle 2.Paddle类 draw负责移动Paddle 碰撞检测,确定能不能继续 监听键盘事件 3.主循环 绘制Ball和Paddle update sleep 代码 from Tkinter import * import random import time class Ball: def __init__(self, canv

  • JQuery手速测试小游戏实现思路详解

    (-1)写在前面 我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路 两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个p向上移动(更改marginTop值),当鼠标离开div上时,第一个p向下移动. (2)知识储备 a. :nth-child #lol p:nth-child(1),当前元素p相对于他的父元素的所有子元素,如果第一个元素是p则匹配成功. #lol :nth-child(1) 相当于#lol *:nt

  • Python基于Tkinter模块实现的弹球小游戏

    本文实例讲述了Python基于Tkinter模块实现的弹球小游戏.分享给大家供大家参考,具体如下: #!usr/bin/python #-*- coding:utf-8 -*- from Tkinter import * import Tkinter import random import time #创建小球的类 class Ball: def __init__(self,canvas,paddle,color): #参数:画布,球拍和颜色 self.canvas = canvas self

  • python运用pygame库实现双人弹球小游戏

    使用python pygame库实现一个双人弹球小游戏,两人分别控制一个左右移动的挡板用来拦截小球,小球会在两板间不停弹跳,拦截失败的一方输掉游戏,规则类似于简化版的乒乓球. 因为是第一次用pygame写python小游戏并且只用了两三个小时,所以有些粗糙,部分方面有些bug,比如板子可以移动出屏幕外,游戏结束后的提示显示不全. 但是关键部分如小球的移动和基本功能等,还算比较完善. 代码如下: 运行环境为python 3.7,需要安装pygame库 import pygame,sys,time,

  • jQuery实现数字华容道小游戏(实例代码)

    <!DOCTYPE html> <html> <head><meta charset="utf-8"> <title>数字华容道</title> <script type="text/javascript" src="jquery.min.js"></script> <style type="text/css"> *{

  • js实现带积分弹球小游戏

    本文实例为大家分享了js实现带积分的弹球小游戏的具体代码,供大家参考,具体内容如下 注:如果小球与底部方块的角碰撞,积分可能有些许bug <style> #box { width: 400px; height: 400px; border: 1px solid #000000; margin: 50px auto; position: relative; } #ball { height: 60px; width: 60px; border-radius: 50%; background-co

  • Python实现弹球小游戏

    本文主要给大家分享一个实战项目,通过python代码写一款我们儿时大多数人玩过的游戏---小弹球游戏.只不过当时,我们是在游戏机上玩,现在我们通过运行代码来玩,看看大家是否有不一样的体验,是否可以重温当年的乐趣呢! 整个游戏实现比较简单,只需在安装python的电脑上即可运行,玩游戏,通过键盘键控制弹球挡板的移动即可.原理不多说,且让我们去看看吧. 1.代码运行后,游戏界面如下所示: 2.游戏过程中,界面如下所示: 3.游戏结束后,界面如下所示: 游戏实现部分源码如下: def main():

随机推荐