【HTML5游戏】碰撞球游戏

最新推荐文章于 2023-04-23 13:50:29 发布

白月光soul

最新推荐文章于 2023-04-23 13:50:29 发布

阅读量834

点赞数

分类专栏： HTML5游戏开发实战文章标签： HTML

本文链接：https://blog.csdn.net/burningdzb/article/details/90519810

版权

HTML5游戏开发实战专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.对h5自己的理解

html用于将内容表现出来，css用于格式,javascript用于动态表示加各种特性

2.代码

html代码，先用一个div弄一个计分板，style里画了两个方块，一个球，一个背景的格式，然后放在一个新的div里面.

声明是HTML5，规定是utf-8编码，header页眉，footer页脚，

$是jQuery的快捷方式，调用 $(something)时就是调用jQuery()

背景应该设置为相对位置以网页左上角为参照，将里面的物体设置为绝对位置

<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "utf-8">
	<title>Crash Ball</title>
</head> 
<body>
	<style>
		#playground{  
			background: #eaf7ea;
			width: 400px;
			height: 200px;
			position: relative;
			overflow: hidden;
		}
		#ball{
			background: #fbb2fb;
			position: absolute;
			width: 20px;
			height: 20px;
			left: 150px;
			top: 100px;
			border-radius: 10px;
		}
		.paddle{
			background: #bbf;
			left: 50px;
			top: 70px;
			position: absolute;
			width: 30px;
			height: 70px;
		}
		#paddleB{
			left: 320px;
		}
	</style>
	<header>
		<span style="color:blue;font-weight:bold"><h1>Crash</h1></span>
	</header>
	<div id = "scoreboard">
		<div class = "score">Player A : <span id = "scoreA">0</span></div>
		<div class = "score">Player B : <span id = "scoreB">0</span></div>
	</div>
	<div id = "game">
		<div id = "playground">
			<div id = "paddleA" class = "paddle"></div>
			<div id = "paddleB" class = "paddle"></div>
			<div id = "ball"></div>
		</div>
	</div>
	<footer>
		This is an example of creating a Ping Pong Game
	<footer>
	<script src = "js/jquery-1.4.4.min.js"></script>
	<script src = "js/html5games.pingpong.js"></script>
	<script>
	$(function(){
		alert("Welcome to the Ping Pong battle.");
	});
	</script>
</body>
</html>

javascript代码

var KEY = {  //定义键盘操作
    UP: 38,
    DOWN: 40,
    W: 87,
    S: 83
}


var pingpong = {   //定义玩家分数
    scoreA : 0,
    scoreB : 0
};
pingpong.pressedKeys = [];

//乒乓球
pingpong.ball = {
    speed: 5,
    x: 150,
    y: 100,
    directionX: 1,
    directionY: 1
}

$(function(){
    pingpong.timer = setInterval(gameloop, 30); //创建定时器

    $(document).keydown(function(e){
        pingpong.pressedKeys[e.which] = true;
    });

    $(document).keyup(function(e){
        pingpong.pressedKeys[e.which] = false;
    });
});

function gameloop(){
    moveBall();
    movePaddles();
}

function movePaddles(){
    if(pingpong.pressedKeys[KEY.UP]){
        var top = parseInt($("#paddleB").css("top"));
        $("#paddleB").css("top", top-5);
    }
    if(pingpong.pressedKeys[KEY.DOWN]){
        var top = parseInt($("#paddleB").css("top"));
        $("#paddleB").css("top", top+5);
    }
    if(pingpong.pressedKeys[KEY.W]){
        var top = parseInt($("#paddleA").css("top"));
        $("#paddleA").css("top", top-5);
    }
    if(pingpong.pressedKeys[KEY.S]){
        var top = parseInt($("#paddleA").css("top"));
        $("#paddleA").css("top", top+5);
    }
}

function moveBall(){
    var playgroundHeight = parseInt($("#playground").height());
    var playgroundWidth  = parseInt($("#playground").width());
    var ball = pingpong.ball;

    //检测球台边缘和底边
    if(ball.y + ball.speed*ball.directionY > playgroundHeight)
    {
        ball.directionY = -1;
    }
 
    //检测顶边
    if(ball.y + ball.speed*ball.directionY < 0)
    {
        ball.directionY = 1;
    }

    //检测右边
    if(ball.x + ball.speed*ball.directionX > playgroundWidth)
    {
        ball.directionX = -1;
    }

    //检测左边
    if(ball.x + ball.speed*ball.directionX < 0)
    {
        ball.directionX = 1;
    }

    ball.x += ball.speed * ball.directionX;
    ball.y += ball.speed * ball.directionY;

    //和球拍的碰撞测试
    //检测左边球拍 
    var paddleAX = parseInt($("#paddleA").css("left")) + parseInt($("#paddleA").css("width"));
    var paddleAYBottom = parseInt($("#paddleA").css("top")) + parseInt($("#paddleA").css("height"));
    var paddleAYTop = parseInt($("#paddleA").css("top"));
    if(ball.x + ball.speed*ball.directionX < paddleAX)
    {
        if(ball.y + ball.speed*ball.directionY <= paddleAYBottom &&
            ball.y + ball.speed*ball.directionY >= paddleAYTop)
            {
                ball.directionX = 1;
            }
    }

    //检测右边球拍
    var paddleBX = parseInt($("#paddleB").css("left"))
    var paddleBYBottom = parseInt($("#paddleB").css("top")) + parseInt($("#paddleB").css("height"));
    var paddleBYTop = parseInt($("#paddleB").css("top"));
    if(ball.x + ball.speed*ball.directionX >= paddleBX)
    {
        if(ball.y + ball.speed*ball.directionY <= paddleBYBottom &&
            ball.y + ball.speed*ball.directionY >= paddleBYTop)
            {
                ball.directionX = -1;
            }
    }

    //检测和球台边缘
    //检测右边
    if(ball.x + ball.speed*ball.directionX > playgroundWidth)
    {
        //玩家B丢分，重置乒乓球
        ball.x = 250;
        ball.y = 100;
        $("#ball").css({
            "left": ball.x,
            "top": ball.y
        });
        ball.directionX = -1;
        pingpong.scoreA++;
        $("#scoreA").html(pingpong.scoreA);
    }
    //检测左边
    if(ball.x + ball.speed*ball.directionX < 0)
    {
        //玩家A丢分，重置乒乓球
        ball.x = 150;
        ball.y = 100;
        $("#ball").css({
            "left": ball.x,
            "top": ball.y
        });
        ball.directionX = 1;
        pingpong.scoreB++;
        $("#scoreB").html(pingpong.scoreB);
    }


    $("#ball").css({
        "left" : ball.x,
        "top" : ball.y
    });
}

parseInt(string)可以将字符串转为int类型, 否则100px+5不是一个整数，其实写游戏和其他语言写一样，创建一个乒乓对象，里面定义了socreA和socreB两个属性，ball属性这里面又定义了其他属性，还有一个按键属性用来记录哪些按键被按下和松开,设置一个定时器每30毫秒调用一次，所以1秒等于1000毫秒，1000/30等于33.3，所以1秒钟游戏重绘33次

白月光soul

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
【HTML5游戏】碰撞球游戏

1.对h5自己的理解 html用于将内容表现出来，css用于格式,javascript用于动态表示加各种特性2.代码 html代码，先用一个div弄一个计分板，style里画了两个方块，一个球，一个背景的格式，然后放在一个新的div里面. 声明是HTML5，规定是utf-8编码，header页眉，footer页脚，JavaScript代码放在所有代码结束之前，防止javascript...
复制链接

扫一扫