撞球游戏源码

最新推荐文章于 2022-12-08 10:15:24 发布
最新推荐文章于 2022-12-08 10:15:24 发布
阅读量270 收藏
点赞数
分类专栏： jQuery 文章标签： HTML 小球碰撞 jQuery使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39892395/article/details/95610263
版权

今天学习了jQuery的一个小案例：

运行效果：

小球碰撞运行效果

首先是对页面的布局

HTML文件index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>撞球游戏</title>
    <link rel="stylesheet" href="main.css">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div class="title">撞球游戏</div>
    <canvas id="bricksCanvas" width="480" height="460"></canvas>
    <div class="start" flage="flage">开始游戏</div>
    <strong>空格暂停</strong>
    <script src="main.js"></script>
</body>
</html>

CSS文件main.css

*{
    margin: 0;
    padding: 0;
    list-style: none;
    outline: none;
    background-color: #81aa52;
}
canvas{
    background-color: antiquewhite;
    display: block;
    margin: 0 auto;
    padding: 20px auto;
    border: 1px solid #8f63cc;
    margin-top: 10px;
}
.title{
    color: #00c;
    text-align: center;
    margin-top: 20px;
    font-size: 2em;
    background: #cfc;
    width: 480px;
    margin: 0 auto;
    margin-top: 20px;
}
.start{
    color: #00c;
    text-align: center;
    margin-top: 20px;
    font-size: 1em;
    background: #8f63cc;
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
    cursor: pointer;
}
strong{
    display: block;
    color: #00c;
    text-align: center;
    font-size: 1em;
    background: #8f63cc;
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
}

JavaScript文件main.js

var canvas = $("#bricksCanvas")[0];
var ctx = canvas.getContext("2d");//创建画布上的绘图环境
var stop_ststus = true;//停止键是否有效
var stop;
var canvas_status = true;

var ballRadius = 10;
var ballColor = "#f44";
//小球位置
var x = canvas.width/2;
var y = canvas.height-25;
//球移动速度
var dx = -2;
var dy = -2;

var paddleHeight = 15;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;

var rightPressed = false;
var leftPressed = false;

//砖块
var brickRowCount = 5;
var brickColumnCount = 6;
var brickWidth = 70;
var brickHeight = 20;//砖块高度
var brickPadding = 6;
var brickOffsetTop = 35;
var brickOffsetLeft = 15;

var score = 0;
var lives = 3;

//初始化二维数组，存储砖块信息 status ：1表示砖块显示，0 表示消失
var bricks = [];
for(c=0;c<brickColumnCount;c++){
    bricks[c] = [];
    for(r=0;r<brickRowCount;r++){
        bricks[c][r] = {x:0,y:0,status:1};//砖块显示
    }
}

//画球
function drawBall(){
    ctx.beginPath();
    ctx.arc(x,y,ballRadius,0,Math.PI*2);//画一个圆，底部居中
    ctx.fillStyle = ballColor;
    ctx.fill();
    ctx.closePath();

}
//滑盘
function drawPalle(){
    ctx.beginPath();
    ctx.rect(paddleX,canvas.height-paddleHeight,paddleWidth,paddleHeight);
    ctx.fill();
    ctx.closePath();
}
//画砖块
function drawBricks(){
    for(c=0;c<brickColumnCount;c++){
        for(r=0;r<brickRowCount;r++){
            if(bricks[c][r].status == 1){
                var brickX = (c*(brickWidth + brickPadding))+brickOffsetLeft;
                var brickY = (r*(brickHeight + brickPadding))+brickOffsetTop;
                bricks[c][r].x = brickX;
                bricks[c][r].y = brickY;
                ctx.beginPath();
                ctx.rect(brickX,brickY,brickWidth,brickHeight);
                ctx.fillStyle = "#8f63cc";
                ctx.fill();
                ctx.closePath();
            }
        }

    }
}
//份数
function drawScore(){
    ctx.font = "16px Arial";
    ctx.fillStyle = "#f44280";
    ctx.fillText("Score:" + score,15,20)
}
//生命值
function drawLives(){
    ctx.font = "16px Arial";
    ctx.fillStyle = "#f44280";
    ctx.fillText("Lives:" + lives,canvas.width-70,20)
}
//game over
function drawGo(){
    ctx.font = "30px Arial";
    ctx.fillStyle = "#f44280";
    ctx.fillText("GAME OVER！！" ,150,200)
}
//砖块消失和小球碰撞砖块条件
function collisionDatection(){
    for(c=0;c<brickColumnCount;c++){
        for(r=0;r<brickRowCount;r++){
            var b = bricks[c][r];
            if(b.status == 1){
                if(x>b.x && x<b.x+brickWidth && y>b.y && y<b.y+brickHeight){
                    dy = -dy;
                    b.status = 0;
                    score++;
                    if(score == brickColumnCount*brickRowCount){
                        document.location.reload();
                        x = canvas.width/2;
                        y = canvas.height-30;
                        dx = 3;
                        dy = -3;
                        paddleX = (canvas.width-paddleWidth)/2;
                    }
                }
            }
        }
    }
}

function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    drawBall();
    drawPalle();
    drawBricks();
    drawScore();
    drawLives();
    collisionDatection();
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius){
        dx = -dx;//碰壁反向运动
    }
    if(y + dy < ballRadius){
        dy = -dy;
    }
    else if(y + dy > canvas.height -(ballRadius + paddleHeight)){
        if(x > paddleX && x< paddleX + paddleWidth){
            dy = -dy;
        }
        else{
            lives --;
            if(lives == 0){
                drawGo();
                $(".start").attr("flage","flage");
                lives = 4;
                score = 0;
                stop_ststus = false;
                return;
            }
            else{
                x = canvas.width/2;
                y = canvas.height - 30;
                dx = 3;
                dy = -3;
                paddleX = (canvas.width-paddleWidth)/2;
            }
        }
    }
    if(rightPressed && paddleX < canvas.width- paddleWidth){
        paddleX+=5;
    }
    else if(leftPressed && paddleX > 0){
        paddleX-=5;
    }
    x +=dx;
    y +=dy;
    stop = requestAnimationFrame(draw);
}
function mouseMoveHeader(e){
    var relativeX = e.clientX - canvas.offsetLeft;
    if(relativeX > 0&& relativeX < canvas.width){
        paddleX = relativeX - paddleWidth/2;
    }
}
//键盘数值
function keyDownHeadle(e){
    if(e && e.keyCode == 39){
        rightPressed = true;
    }
    else if(e && e.keyCode == 37){
        leftPressed = true;
    }
}

$(function(){
    drawBall();
    drawPalle();
    drawBricks();
    drawScore();
    drawLives();
    $(".start").click(function(){
        stop_ststus = true;
        if($(".start").attr("flage")=="flage"){
            for(c=0;c<brickColumnCount;c++){
                for(r=0;r<brickRowCount;r++){
                    bricks[c][r].status = 1;
                }
            }
            $(".start").attr("flage","");
            draw();
            document.addEventListener("mousemove",mouseMoveHeader,false)
            document.addEventListener("keymove",keyDownHeadle,false)
        }
    })
    // drawGo();
})

 

Howe_Hzc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
python趣味编程-使用 Python 的简单台球游戏及其源代码
xiaoshun007的专栏
12-07 259
使用 Python 的简单台球游戏及其源代码是一款单人游戏，您的主要目标是将所有彩球放入洞中。您只需点击球杆即可击打白球。该系统的目的是在工作后享受愉快的时光。关于该项目Simple是使用 Python 模块构建的，它有一个多个库，其中包含开发应用程序的不同平台。该游戏是在一个带有对象和精灵的简单窗口界面中进行的。玩家可以使用鼠标左键来玩游戏。游戏非常简单，你只需击中白球即可将彩球推入洞中。游戏竞争非常激烈，您只需要正确击球即可将许多彩球放入洞中并得分。简单。
JS抖音弹球打砖块游戏代码
06-24
JS抖音弹球打砖块游戏代码是一款一个球弹来弹去的游戏特效下载。
C语言版桌球游戏台球游戏源代码，含完整程序设计文档及答辩PPT，含可执行文件
Python代码大全
12-08 2522
C语言版桌球游戏台球游戏源代码，含完整程序设计文档及答辩PPT，含可执行文件 C语言实现，图形库使用Easy_X,开发环境使用VS2013。 init 初始化 show 游戏画面显示 refreshWithInput 与输入有关的刷新 refreshWithoutInput 与输入无关的刷新 碰撞模型： 碰撞条件： 球移动到边界或者两球的距离小于阈值 碰撞过程： 假设所有的球质量相等，，根据动量定理，一个球碰撞一个静止的小球或者两个运动的球相撞，两个球交换速度，根据矢量合成，两球交换x y上的速度; 判断碰
funcode桌球小游戏源码
03-09
符合指导书要求编写完成的。
Html/Javascript 做游戏的第一步： 2球碰撞游戏（附全部代码）
m0_60558800的博客
12-21 3723
本来一心一意学Python, 结果在做爬虫的时候，发现如果不懂Html/Javascript 的话， 很难做好。 好吧， Html/Javascript 确实很枯燥， 只好先做个小游戏： 2 球动态碰撞， 碰撞后自动分开。这样， 学习起来应该更有趣一些。 代码如下：
有难度的VB撞球游戏源代码
05-07
内容索引:VB源码,游戏编程,撞球游戏　为什么说这个撞球游戏是有难度的呢？因为一般的撞球游戏是只有下边有挡板，而这一个是四面都有，四面的挡板都栏到了小球，才算获胜了，一般你要是能玩过两关就算高手了~
撞球游戏源代码
11-08
类似于dx-ball，只不过这是四面都有拦板，难度更大些。源代码全部奉送！
VB撞球游戏源代码.7z
07-11
为什么说这个撞球游戏是有难度的呢？因为一般的撞球游戏是只有下边有挡板，而这一个是四面都有，四面的挡板都栏到了小球，才算获胜了，一般你要是能玩过两关就算高手了~
撞球游戏源码20121102
02-22
撞球游戏源码 源码描述： 撞球游戏 用键盘左右键控制板子的移动球撞到了要反弹。 网上看到高手分享的代码，一时兴起，分享一下自己的，代码很简单。 欢迎感兴趣的用户下载学习
VB.NET撞球游戏源码2012918
09-18
VB.NET撞球游戏源码 功能介绍： 　经典的VB.NET撞球游戏源代码，有人把这款游戏叫乒乓球游戏， 因为玩起来像是用球拍来接球一样，把球反弹回去，去撞击方块，把 所有方块撞消失，就算赢了。 玩法： 撞板会随着鼠标...
HTML重力感应碰撞球动画特效源码
02-07
HTML重力感应碰撞球动画特效源码，鼠标点击增加碰撞球
趣味桌球源码-CocosCreator
10-13
趣味桌球源码-CocosCreator
Unity3D台球游戏源码
11-16
unity3D台球游戏源码-游戏源码，用C#编写，可用Unity5.4版本打开，注释详细。Unity3D台球游戏源码
台球游戏源码
08-28
台球 源码 用于android手机的一款台球游戏，打架可以玩一下
桌球辅助--简易的辅助程序
08-07
桌球辅助，对于离洞较远的目标球有很好的效果。各位看官，人生苦短，我有Py """ 环境： Python 3 包：time -- sleep 暂停 pyautogui -- 获取鼠标坐标 pynput -- 监听鼠标、键盘输入 tkinter -- 在一个窗口创建画布，以显示路线 操作：运行后程序监听来自键盘的输入 > 输入q退出程序 -- 没有标题栏故没有关闭按钮； > 将鼠标移至桌球中央的白点，输入e或'左Ctrl'显示画布 -- 与窗口大小相等。 ^ 点击鼠标中键关闭画布，q在此无效 鼠标右键单击将隐藏画布1秒 """ import timeq import pyautogui as pag from pynput import mouse,keyboard import tkinter
Python基于OpenCV＆YOLO台球击球路线规划系统（源码＆部署教程）
m0_74341485的博客
11-11 1550
Python基于OpenCV＆YOLO台球击球路线规划系统（源码＆部署教程）
Canvas学习之路（七）
weixin_33810006的博客
05-08 66
小球的碰撞检测 1.定义小球 ball = { x: 100, y: 100, r: 5, speed: 3, direction: Math.PI * 2 * Math.random() }; 2.绘制小球： update函数是更新小球用的，ctx.fillStyle = 'rgba(255, ...
我正在编写一个祖玛程序，使用cball来定义了祖玛球，c是结构变量cball储存颜色的变量，使用的是C语言，用了EasyX图形库，请你帮我实现一个功能，就是在按空格键的时候，变换碰撞球的颜色，在按m键的时候，开启或关闭背景音乐
最新发布
06-09
// 游戏循环 while (1) { // 空格键切换祖玛球颜色 if (GetAsyncKeyState(VK_SPACE) & 0x8000) { ball.c = RGB(rand() % 256, rand() % 256, rand() % 256); // 随机颜色 } // m键切换音乐 if ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值