JS实现简单打砖块弹球小游戏
本文实例为大家分享了JS实现打砖块弹球小游戏的具体代码，供大家参考，具体内容如下
使用原生JS写的，还有一点瑕疵。代码直接复制到html就能使用
速度随机的 因为设涉及横向和纵向速度，所以显示的小球速度值是他们的和速度（立方和开根号）。
按回车或者在滑块上单机左键开始游戏。鼠标滑动或者键盘A（左）或者D（右）控制滑块方向接小球。
这个小demo的意义主要为了锻炼逻辑能力：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
<style>
.container{
width: 500px;
height: 500px;
border:1px solid #000;
margin:auto;
position:relative;
}
.brickBox{
width: 500px;
height: 300px;
/* background-color: yellowgreen; */
position:absolute;
left: 0;
top: 0;
}
.ball{
width: 15px;
height: 15px;
background-color:purple;
border-radius:50%;
position:absolute;
bottom:30px;
left:235px;
/* margin-left:-15px; */
}
.slider{
width: 150px;
height: 30px;
background-color: #00f;
position:absolute;
/* left:50%; */
left:175px;
/* margin-left:-75px; */
bottom:0;
}
</style>
</head>
<body>
<div class="container">
<div class="brickBox"></div>
<div class="ball"></div>
<div class="slider"></div>
</div>
<div style="margin-left: 40%;font-size: 25px;">当前速度: <span id="speed"></span> </div>
<div style="margin-left: 40% ;font-size: 25px;">当前打掉的方块数: <span id="count"></span> </div>
</body>
<script>
// 获取当前所有标签
var container = document.querySelector('.container')
var brickBox = container.querySelector('.brickBox')
var ball = container.querySelector('.ball')
var slider = container.querySelector('.slider')
// 动态创建砖块
// 定义砖块大小
var brickWidth = 50;
var brickHeight = 15;
// 计算砖块数量
var brickNum = brickBox.clientWidth * brickBox.clientHeight / (brickWidth * brickHeight)
// console.log(brickNum);
var brickColNum = brickBox.clientWidth / brickWidth
// 根据数量去创建
for(var i=0;i<brickNum;i++){
var div = document.createElement('div')
setStyle(div,{
width:brickWidth + "px",
height:brickHeight + "px",
backgroundColor:getColor(true),
position:'absolute',
top:parseInt(i/brickColNum)*brickHeight + 'px',
left:(i%brickColNum)*brickWidth + 'px'
})
brickBox.appendChild(div)
}
// 点击滑块让小球开始运动
// 定义横向移动的值和纵向移动的值
var speedX = getRandom(1,8);
var speedY = getRandom(1,8);
document.querySelector("#speed").innerHTML= Math.sqrt(Math.pow(speedX,2)+Math.pow(speedY,2))
var timer;
//点击移动
slider.onclick = move;
//回车键开始弹
function move(){
var count=0;
clearInterval(timer)
timer = setInterval(function(){
// 开始移动
// 获取小球的left和top
let left = ball.offsetLeft;
let top = ball.offsetTop;
// 让left和top增加速度
// 小球和滑块相撞
if(boom(slider,ball)){
speedY = -speedY
}
// 小球和大盒子相撞
if(left<=0 || left>=container.clientWidth - ball.offsetWidth){
speedX = -speedX
}
if(top<=0){
speedY = -speedY
}
// 检测所有砖块和小球是否相撞
for(let i=0;i<brickBox.children.length;i++){
if(boom(brickBox.children[i],ball)){
speedY = -speedY
brickBox.removeChild(brickBox.children[i]);
count++;
}
}
console.log(count)
document.querySelector("#count").innerHTML=count
// GAME OVER
if(top>=container.clientHeight-ball.offsetHeight){
clearInterval(timer)
if(confirm("GAME OVER,是否重玩")){
location.reload();
}else{alert('您最终分数'+count)}
}
left += speedX
top += speedY
// 设置给小球的left和top
ball.style.left = left + "px"
ball.style.top = top + "px"
},20)
}
// 让滑块跟着鼠标移动
slider.onmouseover = function(){
document.onmousemove = function(e){
var e = e || window.event;
var x = e.pageX;
var l = x - container.offsetLeft - 1 - slider.offsetWidth/2
if(l<0){
l = 0
}
if(l > container.clientWidth - slider.offsetWidth){
l = container.clientWidth - slider.offsetWidth
}
slider.style.left = l + "px"
}
}
//让滑块跟着左右键盘移动
window.onload= function(){
document.onkeydown = e=>{
var e = e || window.event;
var keycode = e.keyCode || e.which;
var keyword = String.fromCharCode(keycode).toLowerCase();
if(keycode==13){
move();
}
if(keyword=='a'){
console.log("1111")
slider.style.left= slider.offsetLeft-15+"px"
}else if(keyword=='d'){
console.log("222")
slider.style.left=slider.offsetLeft+15+"px"
}
console.log(slider.offsetLeft)
}
}
// 封装检测相撞的函数
function boom(node1,node2){
// 不撞在一起的只有4中可能
if(node1.offsetLeft+node1.offsetWidth<node2.offsetLeft || node1.offsetTop+node1.offsetHeight<node2.offsetTop || node2.offsetLeft+node2.offsetWidth<node1.offsetLeft || node2.offsetTop+node2.offsetHeight<node1.offsetTop){
return false;
}else{
return true;
}
}
// 封装获取随机颜色的函数
function getColor(hex=true){
if(hex){
var color = '#'
for(var i=0;i<3;i++){
var rgb = getRandom(256).toString(16);
rgb = rgb.length===1?'0'+rgb:rgb;
color += rgb
}
return color;
}
return `rgb(${getRandom(256)},${getRandom(256)},${getRandom(256)})`
}
// 封装设置样式的函数
function setStyle(ele,styleObj){
for(var attr in styleObj){
ele.style[attr] = styleObj[attr]
}
}
// 封装获取随机数的函数
function getRandom(a,b=0){
var max = Math.max(a,b);
var min = Math.min(a,b)
return Math.floor(Math.random() * (max-min)) + min
}
</script>
</html>
效果图如图所示
没用插件 略微样式丑了点。
然后还存在的BUG是左右方向键没设置终止值。偶尔会出现位置精度丢失导致小球在滑块上抽搐。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
非html5实现js版弹球游戏示例代码
开始前的html页面 开始后的html游戏界面 html页面布局,即index.html文件源码如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" co
-
javaScript实现网页版的弹球游戏
利用javeScript对象以及方法实现的网页弹球游戏,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <tilie>呼呼哈嘿的网页弹球</title> </head> <body> <canvas id="canvas"width="400"height="400"></canvas> <scr
-
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
-
JS实现简单打砖块弹球小游戏
本文实例为大家分享了JS实现打砖块弹球小游戏的具体代码,供大家参考,具体内容如下 使用原生JS写的,还有一点瑕疵.代码直接复制到html就能使用 速度随机的 因为设涉及横向和纵向速度,所以显示的小球速度值是他们的和速度(立方和开根号). 按回车或者在滑块上单机左键开始游戏.鼠标滑动或者键盘A(左)或者D(右)控制滑块方向接小球. 这个小demo的意义主要为了锻炼逻辑能力: <!DOCTYPE html> <html> <head> <meta charset=&q
-
用js编写简单的贪吃蛇小游戏
本文实例为大家分享了js编写简单的贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 代码如下: HTML 5 部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta n
-
js实现一款简单踩白块小游戏(曾经很火)
效果图如下所示: html <div class="bigbox"> <!-- 显示游戏的区域 --> <div class="gamequyu"> <!-- 上面显示一个游戏开始的按钮 --> <div class="start">游戏开始</div> <!-- 再显示一个游戏的主体部分 --> <div class="zhuti"&g
-
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,
-
Python实现弹球小游戏
本文主要给大家分享一个实战项目,通过python代码写一款我们儿时大多数人玩过的游戏---小弹球游戏.只不过当时,我们是在游戏机上玩,现在我们通过运行代码来玩,看看大家是否有不一样的体验,是否可以重温当年的乐趣呢! 整个游戏实现比较简单,只需在安装python的电脑上即可运行,玩游戏,通过键盘键控制弹球挡板的移动即可.原理不多说,且让我们去看看吧. 1.代码运行后,游戏界面如下所示: 2.游戏过程中,界面如下所示: 3.游戏结束后,界面如下所示: 游戏实现部分源码如下: def main():
-
java实现弹球小游戏
GUI实现弹球小游戏,供大家参考,具体内容如下 先看一下游戏效果图. 一个简单的Demo.也比较简单,新手试着做一做完善改进. 源代码 import Com.Style.FontStyle; import javax.swing.*; import java.awt.*; import java.awt.event.*; /** * @Author: 冀十三 * @DescIption: 弹球小游戏 * @Date:2021--06--10--17:08 */ public class Demo
-
C++实现简易的弹球小游戏
本文实例为大家分享了C++实现弹球小游戏的具体代码,供大家参考,具体内容如下 操作说明:键盘A和D键控制左右移动,让球不要落下. #include <graphics.h> #include <conio.h> #include <time.h> int i; int xx=0; int yy = 0; class Ball { public: int x, y; clock_t b; void draw() { setfillcolor(RGB(200, 399, 1
-
使用原生JS快速写出一个五子棋小游戏
目录 1.棋盘和棋子的绘制. 2.轮流下棋的点击事件 3.获胜条件判断 3.1横轴获胜 3.2数轴获胜 3.3正斜轴获胜 3.4反斜轴获胜 4.悔棋功能 总结 1.棋盘和棋子的绘制. let arr = [ [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},], [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {},], [{}, {}, {}, {}, {},
-
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