今天水一下。。
目录
一、小球反弹游戏
二、键盘控制挡板移动
三、合体终极版本:挡板小球游戏
一、小球反弹游戏
先看图片:(仅供参考,以实物为准)
再看代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>小球游戏</title>
<style>
.f{
width: 1200px;
height: 800px;
border: 1px solid red;
position: relative;
}
.z{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: royalblue;
position: absolute;
/* 正中心 */
left:550px;
top: 350px;
}
</style>
</head>
<body>
<div class="f" onclick="startGame()">
<div id="ball" class="z"></div>
</div>
</body>
<script>
//1.生成0-1200的随机整数
let r=Math.floor(Math.random()*1200)
console.log(r)
//小球球心着落的随机点坐标(r,50)
//小球球心的坐标(x,y)
let x=600,y=400
//计算x和y之间运动距离的倍数关系
let x_y=(x-r)/(y-50)
let dy=-1//表示 单位时间 沿着y轴向上运动1
let dx=x_y*dy//表示单位时间 沿着x轴 的位移
//获取小球的dom对象
let ball =document.getElementById('ball')
//点击父元素任意位置,开始游戏
function startGame(){
setInterval(()=>{
//上下碰撞
if(y<=50||y>=750){
dy=-dy
}
//左右碰撞
if(x<=50||x>=1150){
dx=-dx
}
//把单位时间的位移作用在坐标上
x+=dx
y+=dy
//把坐标作用在实际的定位上
ball.style.left=x-50+'px'
ball.style.top=y-50+'px'
} ,10);
}
</script>
</html>
下面是示例代码:
1.
let r=Math.floor(Math.random()*1200)
console.log(r)
这段代码通过 Math.random() 函数生成一个随机数,并将其乘以 1200。然后使用 Math.floor() 函数对结果进行向下取整,得到一个范围在 0 到 1199 之间的整数。
最后,通过 console.log(r) 输出这个随机整数 r 到控制台。
通过这段代码,你可以在控制台看到一个随机生成的整数,该整数的范围是 0 到 1199(包含 0 和 1199)。
2.
//小球球心着落的随机点坐标(r,50)
//小球球心的坐标(x,y)
let x=600,y=400
//计算x和y之间运动距离的倍数关系
let x_y=(x-r)/(y-50)
let dy=-1//表示 单位时间 沿着y轴向上运动1
let dx=x_y*dy//表示单位时间 沿着x轴 的位移
//获取小球的dom对象
let ball =document.getElementById('ball')
这段代码,首先定义了变量 x 和 y 分别表示小球球心的坐标,分别初始化为 600 和 400。
然后,通过计算 (x-r)/(y-50) 得到一个倍数关系 x_y,用来计算单位时间内沿着 x 轴的位移量。其中 r 是球心着落的随机点的 x 坐标。
接下来,定义了变量 dy 表示单位时间内沿着 y 轴向上运动的距离,初始值为 -1。通过将 dy 乘以 x_y 得到变量 dx,表示单位时间内沿着 x 轴的位移量。
最后,通过 document.getElementById('ball') 获取小球的 DOM 对象,并将其赋值给变量 ball。
需要注意的是,这段代码中使用了变量 r 和 ball,你需要确保这些变量已经被正确定义和赋值。
3.
//点击父元素任意位置,开始游戏
function startGame(){
setInterval(()=>{
//上下碰撞
if(y<=50||y>=750){
dy=-dy
}
//左右碰撞
if(x<=50||x>=1150){
dx=-dx
}
//把单位时间的位移作用在坐标上
x+=dx
y+=dy
//把坐标作用在实际的定位上
ball.style.left=x-50+'px'
ball.style.top=y-50+'px'
} ,10);
}
这段代码,定义了一个 startGame() 函数用于开始游戏。在函数中,使用 setInterval 函数来执行一段代码,该代码会以每 10 毫秒的间隔重复执行。
在代码执行过程中,首先检查小球是否与上下边界发生碰撞(边界坐标为 50 和 750)。如果小球的纵坐标 y 小于等于 50 或者大于等于 750,就将 dy(y 轴方向的位移量)取反,实现小球的上下反弹。
接着,检查小球是否与左右边界发生碰撞(边界坐标为 50 和 1150)。如果小球的横坐标 x 小于等于 50 或者大于等于 1150,就将 dx(x 轴方向的位移量)取反,实现小球的左右反弹。
然后,通过将 dx 和 dy 应用到坐标变量 x 和 y 上,实现单位时间内的位置更新。
最后,通过将更新后的坐标应用到小球元素的 left 和 top 样式属性上,使小球的可视化位置与实际位置保持一致。
需要注意的是,代码中对于 x、y、dx、dy 和 ball 这些变量的赋值和初始化,你需要确保它们已经被正确定义和赋值。
二、键盘控制挡板移动
图片如下:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>挡板移动</title>
</head>
<style>
.f{
width: 600px;
height:600px;
border: 1px solid red;
position: relative;
}
.z{
width: 100px;
height: 100px;
border-radius: 50%;
background-color:rebeccapurple;
position: absolute;
}
</style>
<body>
<div class="f">
<div class="z" id="ball"></div>
</div>
</body>
<script>
//1.根据id获取dom获取元素
let ball=document.getElementById('ball')
let x=50,y=50 //球心的初始坐标
let dy=10; //按一次键盘,y轴方向移动的距离
let dx=10;//按一次键盘,x轴方向移动的距离
//2.感知键盘 keyCode下 40 上 38 左 37 右 39
document.onkeydown=function(e){
console.log(e.keyCode)
switch(e.keyCode){
case 38:
console.log('上')
y-=dy
ball.style.top=y-50+'px'
break;
case 40:
console.log('下')
y+=dy
ball.style.top=y-50+'px'
break;
case 37:
console.log('左')
x-=dx
ball.style.left=x-50+'px'
break;
case 39:
console.log('右')
x+=dx
ball.style.left=x-50+'px'
break;
}
}
</script>
</html>
示例代码:
1.
let ball=document.getElementById('ball')
这段代码的作用是通过调用 document.getElementById('ball') 方法来获取页面上 ID 为 "ball" 的元素,并将其赋值给变量 ball。
这样做的目的是为了在后续的代码中使用变量 ball 来操作和控制小球的样式、位置或其他属性。通过获取到小球的 DOM 元素,可以通过修改这个元素的属性来实现对小球的可视化效果进行控制,例如修改其位置、颜色、形状等。
需要注意的是,在使用这段代码之前,确保页面上存在一个具有 ID 为 "ball" 的元素,否则代码将无法正确获取到元素,导致后续操作出错。
2.
//2.感知键盘 keyCode下 40 上 38 左 37 右 39
document.onkeydown=function(e){
console.log(e.keyCode)
switch(e.keyCode){
case 38:
console.log('上')
y-=dy
ball.style.top=y-50+'px'
break;
case 40:
console.log('下')
y+=dy
ball.style.top=y-50+'px'
break;
case 37:
console.log('左')
x-=dx
ball.style.left=x-50+'px'
break;
case 39:
console.log('右')
x+=dx
ball.style.left=x-50+'px'
break;
}
}
这段代码是用于监听键盘事件,并根据按下的键盘按键来移动小球的位置。
当用户按下键盘上的某个键时,document.onkeydown 事件将被触发。在事件处理程序中,首先通过 console.log(e.keyCode) 打印出按下键盘的 keyCode 值,以便进行调试和查看。
然后,通过使用 switch 语句来判断按下的键盘按键是哪一个。根据不同的按键码,执行相应的操作。
如果按下的是 "上箭头" 键(keyCode 为 38),则将小球的纵坐标 y 减去 dy(y 轴方向的位移量),并将更新后的坐标应用到小球元素的 top 样式属性上。
如果按下的是 "下箭头" 键(keyCode 为 40),则将小球的纵坐标 y 加上 dy,并将更新后的坐标应用到小球元素的 top 样式属性上。
如果按下的是 "左箭头" 键(keyCode 为 37),则将小球的横坐标 x 减去 dx,并将更新后的坐标应用到小球元素的 left 样式属性上。
如果按下的是 "右箭头" 键(keyCode 为 39),则将小球的横坐标 x 加上 dx,并将更新后的坐标应用到小球元素的 left 样式属性上。
通过不同的按键操作,实现了根据用户的按键来控制小球的移动。
三、合体终极版本:挡板小球游戏
首先图片开道:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>挡板小球游戏</title>
<style>
.f{
width: 900px;
height: 600px;
border: 1px solid red;
position: relative;
}
.z1{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: royalblue;
position: absolute;
left:550px;
top: 350px;
}
.z2{
width: 150px;
height: 50px;
background-color:red;
position: absolute;
top: 600px;
left: 0px;
}
</style>
</head>
<body>
<div class="f" onclick="startGame()">
<div id="ball" class="z1"></div>
<div id="ban" class="z2"></div>
</div>
</body>
<script>
let r=Math.floor(Math.random()*900)
console.log(r)
//小球球心着落的随机点坐标(r,50)
//小球球心的坐标(x,y)
let x=600,y=400
//计算x和y之间运动距离的倍数关系
let x_y=(x-r)/(y-50)
let dy=-1//表示 单位时间 沿着y轴向上运动1
let dx=x_y*dy//表示单位时间 沿着x轴 的位移
//获取小球的dom对象
let ball =document.getElementById('ball')
//点击父元素任意位置,开始游戏
function startGame(){
setInterval(()=>{
//上下碰撞
if(y<=50||y>=550){
dy=-dy
}
//左右碰撞
if(x<=50||x>=850){
dx=-dx
}
if(y>=550&&(x<l-50||x>l+100)){
clearInterval
alert('游戏结束')
}
//把单位时间的位移作用在坐标上
x+=dx
y+=dy
//把坐标作用在实际的定位上
ball.style.left=x-50+'px'
ball.style.top=y-50+'px'
} ,20);
}
</script>
<script>
let ban=document.getElementById('ban')
//挡板
let l=50,t=625
let dt=50;
let dl=50;
//2.感知键盘 keyCode下 40 上 38 左 37 右 39
document.onkeydown=function(e){
console.log(e.keyCode)
switch(e.keyCode){
case 37:
console.log('左')
l-=dl
ban.style.left=l-50+'px'
break;
case 39:
console.log('右')
l+=dl
ban.style.left=l-50+'px'
break;
}}
</script>
</html>
然后是示例代码:
1.
//点击父元素任意位置,开始游戏
function startGame(){
setInterval(()=>{
//上下碰撞
if(y<=50||y>=550){
dy=-dy
}
//左右碰撞
if(x<=50||x>=850){
dx=-dx
}
if(y>=550&&(x<l-50||x>l+100)){
clearInterval
alert('游戏结束')
}
//把单位时间的位移作用在坐标上
x+=dx
y+=dy
//把坐标作用在实际的定位上
ball.style.left=x-50+'px'
ball.style.top=y-50+'px'
} ,20);
}
其中重点在
if(y>=550&&(x<l-50||x>l+100)){
clearInterval
alert('游戏结束')
}
这段代码上。
它使用条件 y >= 550 && (x < l - 50 || x > l + 100) 来判断小球是否触发了游戏结束的条件。该条件判断包括两个部分:
y >= 550:表示小球的纵坐标 y 是否大于等于 550。当小球超过或达到页面底部时,满足这个条件。
(x < l - 50 || x > l + 100):表示小球的横坐标 x 是否小于 l - 50 或者大于 l + 100。其中 l 是一个未定义的变量,你需要自行确定其值。这个条件用来判断小球是否超出了指定的左右边界。
如果以上条件均满足,即小球触发了游戏结束的条件,那么代码会执行以下操作:
clearInterval:这里代码中缺少了 clearInterval 函数的参数,你需要补充进去。clearInterval 用于清除之前设置的定时器,以停止小球的移动。
alert('游戏结束'):弹出一个提示框,显示游戏结束的消息。
2.
//2.感知键盘 keyCode下 40 上 38 左 37 右 39
document.onkeydown=function(e){
console.log(e.keyCode)
switch(e.keyCode){
case 37:
console.log('左')
l-=dl
ban.style.left=l-50+'px'
break;
case 39:
console.log('右')
l+=dl
ban.style.left=l-50+'px'
break;
}}
当用户按下键盘上的某个键时,document.onkeydown 事件将被触发。在事件处理程序中,首先通过 console.log(e.keyCode) 打印出按下键盘的 keyCode 值,以便进行调试和查看。
然后,通过使用 switch 语句来判断按下的键盘按键是哪一个。根据不同的按键码,执行相应的操作。
如果按下的是 "左箭头" 键(keyCode 为 37),则会执行下面的代码:
打印出 '左',用于调试和查看。
将变量 l 减去 dl(一个未定义的变量),并将更新后的值应用到名为 ban 的元素的 left 样式属性上,使其向左移动。
如果按下的是 "右箭头" 键(keyCode 为 39),则会执行下面的代码:
打印出 '右',用于调试和查看。
将变量 l 加上 dl(一个未定义的变量),并将更新后的值应用到名为 ban 的元素的 left 样式属性上,使其向右移动。
以上就是今天的全部内容了,后面接着鬼扯。。