JavaScript实现球球大作战

题目：用js实现一个球球游戏，也就是，当球遇到障碍物的时候，障碍物会消失，并且会相应的加一分，要是没有接到球就会结束游戏

案例分析：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>球球游戏</title><style>body {margin: 0px;width: 1920px;height: 800px;}#ball {width: 100px;height: 100px;background-color: pink;border-radius: 50%;position: absolute;margin-top: 30px;}#board {width: 200px;height: 20px;background-color: #371cff;position: absolute;}#score {width: 150px;height: 20px;margin-top: 0px;background-color: skyblue;margin: 0 auto;}</style>
</head>
<body>
<div id="ball"></div>
<div id="board"></div>
<div id="score">得分：</div><script>let directH = "right"; // 水平方向let directV = "bottom"; // 垂直方向let speed = 2;let boardSpeed = 20;var sum = 0;window.onload = function () {creatTree()// 改变下面板子的位置var board = document.querySelector("#board");var w = document.documentElement.clientWidth || document.body.clientWidth;var h = document.documentElement.clientHeight || document.body.clientHeight;board.style.top = (h - 20) + "px";board.style.left = "0px";document.onkeydown = function () {let which = event.keyCode || event.which;let left = board.style.left == "" ? 0 : parseInt(board.style.left);if (which == 37) {if (left - boardSpeed > 0)board.style.left = (left - boardSpeed) + "px";} else if (which == 39) {if (left + boardSpeed + 200 < w)board.style.left = (left + boardSpeed) + "px";}}intervalId = setInterval(move, 10);}//障碍物创建//这里也可以用随机数来产生障碍物function creatTree() {for (let i = 0; i < 10; i++) {var treeDiv = document.createElement("div");treeDiv.className = "tree"treeDiv.style.position = "absolute"treeDiv.style.backgroundColor = "red"treeDiv.style.width = "50px";treeDiv.style.height = "50px";let left = 50;let right = i * 200;treeDiv.style.marginTop = left + "px";treeDiv.style.marginLeft = right + "px";document.body.appendChild(treeDiv)}}//球球移动方法function move() {let left = ball.style.left == "" ? 0 : parseInt(ball.style.left);let top = ball.style.top == "" ? 0 : parseInt(ball.style.top);if (directH == "left") {left -= speed;} else {left += speed;}if (directV == "top") {top -= speed;} else {top += speed;}ball.style.left = left + "px";ball.style.top = top + "px";var w = document.documentElement.clientWidth || document.body.clientWidth;var h = document.documentElement.clientHeight || document.body.clientHeight;if (directH == "left" && left <= 0) {directH = "right";}if (directH == "right" && left + 100 >= w) {directH = "left";}if (directV == "top" && top <= 0) {directV = "bottom";}//反弹 改变方向var board = document.querySelector("#board");let boardLeft = board.style.left == "" ? 0 : parseInt(board.style.left);if (left + 50 >= boardLeft && left + 50 <= boardLeft + 200) {if (directV == "bottom" && top + 100 >= h - 40) {directV = "top";}} else if (Math.pow((boardLeft - left - 50), 2) + Math.pow((h - 20 - top - 50), 2) <= 2500) { // 碰到左边的点directH = "left";directV = "top";} else if (Math.pow((boardLeft + 200 - left - 50), 2) + Math.pow((h - 20 - top - 50), 2) <= 2500) { // 碰到左边的点directH = "right";directV = "top";} else if (directV == "bottom" && top + 100 >= h) {alert("game over!!!");clearInterval(intervalId);}//碰到障碍物的操作var trees = document.querySelectorAll(".tree");var score = document.querySelector("#score");for (let i = 0; i < trees.length; i++) {let treeTop = parseInt(trees[i].style.marginTop) + 25;let treeLeft = parseInt(trees[i].style.marginLeft) + 25;let ballTop = parseInt(ball.style.top) + 50;let ballLeft = parseInt(ball.style.left) + 50;//每一个矩形和园的最远距离let distanceMax = Math.sqrt(800) + 50;//实际矩形和圆心的距离let distanceZhen = Math.sqrt(Math.pow((ballTop - treeTop), 2) + Math.pow((ballLeft - treeLeft), 2));if (distanceZhen <= distanceMax) {//意味着挨着了  就消失if ((ballLeft < treeLeft) || ballLeft > treeLeft) {if (directH == "right") {directH = "left";} else if (directH == "left") {directH = "right";}sum++;console.log(sum)score.innerHTML = "得分：" + sum;trees[i].remove();} else if ((ballTop > treeTop) || (ballTop < treeTop)) {if (directV == "top") {directV = "button";} else if (directV == "button") {directV = "top";}sum++;console.log(sum)score.innerHTML = "得分：" + sum;trees[i].remove();}}}}</script>
</body></html>

注意：这里最需要注意的就是球和障碍物相撞的判断，我利用的是球心和障碍物中心两者之间的距离来判断的，最远的相撞点肯定就是障碍物角和球相撞的时候，所以只要两者中心之间的距离小于等于这个最大距离就代表碰到了，就会消失

关于JavaScript的详细介绍，可以点击这里JavaScript详细介绍、了解、使用查看我的另外一篇具体js的详解

JavaScript实现球球大作战相关推荐

Python版见缝插针小游戏源代码，球球旋转大作战源程序
见缝插针游戏是一款非常考验玩家手眼协调能力的休闲益智虐心虐脑小游戏,玩法很简单,但要过关却很有挑战性哟! 主要是将一系列的小球,插入到旋转的摩天轮转盘当中,插入过程中不能碰到旋转的摩天轮上的其他小球, ...
java实现简单窗体小游戏----球球大作战
java实现简单窗体小游戏----球球大作战需求分析 1.分析小球的属性: 坐标.大小.颜色.方向.速度 2.抽象类:Ball 设计类:BallMain-创建窗体 BallJPanel- ...
全球首届“AI球球大作战：Go-Bigger多智能体决策智能挑战赛”开启
<球球大作战>是一款风靡全球的休闲电子竞技游戏,以大球吃小球为目标,简单有趣却又斗智斗勇. 你不知道的是,AI世界也拥有了自己的<球球大作战>. 前不久,OpenDILab开源 ...
球球大作战为什么显示服务器神游,球球大作战不能玩怎么解决_球球大作战不能玩解决方案详细分析_好特教程...
球球大作战不能玩怎么办?下面就是小编为大家带来的关于球球大作战不能玩的问题分析和就解决方法,希望能够帮助到小伙伴们. 1.网络问题由于球球大作战是需要进行联网游戏,如果网络信号不好或者使用信号较强的 ...
《球球大作战》游戏优化之路（下）
演讲内容大家好,我叫徐宇峰,负责<球球大作战>的性能优化. <球球大作战>现在拥有五亿多的玩家,为了吸引如此庞大的玩家群体,我们提供给玩家更炫更酷的皮肤,这些美轮美奂的皮肤, ...
《球球大作战》游戏优化之路（上）
自从2015年<球球大作战>发布以来,现已拥有五亿多的玩家.如此庞大的玩家群体,对游戏的画面,性能要求是非常高的.在Unite Shanghai 2019大会中,<球球大作战> ...
球球大作战体验服找不到团战服务器6,球球大作战常见问题汇总新版本问题解决方法...
下面波比为大家带来球球大作战新版本的问题汇总,大版本更新以来,球球大作战的玩家们遇到了各种各样的小问题,下面就来看看要如何解决吧. 1.为什么我的账号没有签到功能,如何开启签到功能? 答:开启宝箱功能 ...
球球大作战测试服android版,球球大作战10.0体验服
在球球大作战10.0体验服中,2019球球们将迎来全新的冒险,多重外观,更加的绚丽夺目,探索新的地图,与不同的对手较量一番,无限吞噬,热血竞技,灵活的走位,搭配强力道具,热血赛事开启,荣耀联盟互动,感 ...
棒棒糖球球机器人_球球大作战刷棒棒糖_球球大作战刷龙蛋攻略
玩过球球大作战的玩家们都知道我们要获得棒棒糖和龙蛋是很不容易的,那么游戏中我们要怎么免费获得龙蛋和棒棒糖呢,而通过怎么才能快速获得龙蛋和棒棒糖,同时通过刷的方式要怎么操作呢,接下来就由小编一起来详细给 ...

JavaScript实现球球大作战

JavaScript实现球球大作战相关推荐

最新文章

热门文章