案例1:挡板接小球
思路:首先设计出游戏的基本图样,一个游戏区域,然后写出一个小球和一个挡板。首先要计算好挡板的位置和球的位置,以页面左上角为坐标原点,高度是y轴,水平是x轴。球跟挡板碰撞时的圆心跟挡板的距离。然后写出小球从游戏区域的中心向上随机点着落,然后通过镜面反射弹射继续移动,可以以单位时间沿着y轴向上运动,算出x和y之间的弧度关系,上下碰撞为沿y轴的位移取反,左右碰撞为沿x轴的位移取反,最后将坐标作用在实际定位上。、
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小球游戏</title> <style> .f1{ width: 1200px; height: 800px; border: 1px solid red; position: relative; } .z1{ width: 40px; height: 40px; border-radius: 50%; background-color: aqua; position: absolute; /*正中心*/ left: 580px; top: 380px; } /*.f2{ width: 1200px; height: 20px; border: 0px solid red; position: relative; }*/ .z2{ width: 160px; height: 20px; left: 530px; top: 780px; background-color: red; position: absolute; } </style> </head> <body> <div class="f1" onclick="startGame()"> <div id="ball1" class="z1"></div> <div id="ball2" class="z2"></div> </div> <!--<div class="f2"> <div id="ball2" class="z2"></div> </div>--> </body> <script> let ball2=document.getElementById('ball2') let x2=520//挡板的初始坐标 let dx2=10//按一次键盘,x轴方向移动的距离 //2.感知键盘keyCode 下40 上38 左37 右39 document.onkeydown=function (e){ console.log(e.keyCode) switch (e.keyCode){ case 37: if (x2<10){ x2=10 } x2-=dx2 console.log('左') ball2.style.left=x2+'px' break; case 39: if (x2>1030){ x2=1030 } x2+=dx2 console.log('右') ball2.style.left=x2+'px' break; } } /*1.生成0-1200的随机整数*/ let r=Math.floor(Math.random()*1200) console.log(r) //小球球心着落的随机点的坐标是(r,50) //小球球心的坐标(x,y) let x1=600,y1=400 //计算x和y之间运动距离的倍数关系 let x_y=(x1-r)/(y1-20) let dy=-1//表示单位时间沿着y轴向上运动1 let dx=x_y*dy//表示单位时间沿着x轴的位移 //获取小球的dom对象 let ball1=document.getElementById('ball1') //点击父元素任意位置,开始游戏 function startGame(){ let xx=setInterval(()=>{ //上下碰撞 if (y1<=20){ dy=-dy } if (y1>=760){ if (x1>=x2&&x1<=x2+160){ dy=-dy }else{ // clearInterval(xx) alert("Game Over"); } } //左右碰撞 if (x1<=20||x1>=1180){ dx=-dx } //把单位时间的位移作用在坐标上 x1+=dx y1+=dy //把坐标作用在实际的定位上 ball1.style.left=x1-20+'px' ball1.style.top=y1-20+'px' },10) } </script> </html>
效果图演示:
案例2:图片移动归位
思路:首先写出大致框架,上面六张照片依次排放,下面六个方框,等待将图片归位到方框内。使用页面布局子绝父相,在JavaScript区写入函数,感知键盘keyCode 下40 上38 左37 右39。使用switch语句来控制图片的移动坐标,再写出六个调用函数,来绑定点击事件,使每个函数对应一个图片。
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>三国英雄归位</title> <style> /* 鼠标放上去,有个阴影 */ button{ border: none; border-radius: 8px; font-size: large; color: white; outline: none; font-size:large; cursor: pointer; } /* 鼠标放上去,有个阴影 */ img:hover{ box-shadow: 10px 10px 10px rebeccapurple; } h2{ color: rebeccapurple; text-align: center; line-height: 300px; } .f2{ display: flex; justify-content: space-around; } .z22{ width: 200px; height: 350px; border: 1px solid rebeccapurple; } .f1{ width: 1600px; height: 400px; position: relative; } .z1{ left: 220px; position: absolute; } .z2{ left: 420px; position: absolute; } .z3{ left: 620px; position: absolute; } .z4{ left: 820px; position: absolute; } .z5{ left: 1020px; position: absolute; } .z6{ left: 1220px; position: absolute; } img{ width: 200px; height: 350px; position: absolute; } </style> </head> <body> <div class="f1"> <div id="a" class="z1"><button onclick="a1()"><img src="曹操.jpg"></button></div> <div id="b" class="z2"><button onclick="b1()"><img src="貂蝉.webp"></button></div> <div id="c" class="z3"><button onclick="c1()"><img src="关羽.webp"></button></div> <div id="d" class="z4"><button onclick="d1()"><img src="刘备.jpg"></button></div> <div id="e" class="z5"><button onclick="e1()"><img src="刘协.webp"></button></div> <div id="f" class="z6"><button onclick="f1()"><img src="孙权.webp"></button></div> </div> <hr> <div class="f2" > <div class="z22"><h2>刘协</h2></div> <div class="z22"><h2>刘备</h2></div> <div class="z22"><h2>关羽</h2></div> <div class="z22"><h2>曹操</h2></div> <div class="z22"><h2>孙权</h2></div> <div class="z22"><h2>貂蝉</h2></div> </div> </body> <script> //根据id获取dom元素 let ball=document.getElementById('ball') function a1(){ y=350,x=200 ball=document.getElementById('a') ff(ball,x,y) } function b1(){ y=350,x=400 ball=document.getElementById('b') ff(ball,x,y) } function c1(){ y=350,x=600 ball=document.getElementById('c') ff(ball,x,y) } function d1(){ y=350,x=800 ball=document.getElementById('d') ff(ball,x,y) } function e1(){ y=350,x=1000 ball=document.getElementById('e') ff(ball,x,y) } function f1(){ y=350,x=1200 ball=document.getElementById('f') ff(ball,x,y) } //2.感知键盘keyCode 下40 上38 左37 右39 function ff(ball,x,y) { document.onkeydown = function (e) { console.log(e.keyCode) switch (e.keyCode) { case 38: console.log('上') ball.style.top = ball.offsetTop - 10 + 'px' break; case 40: console.log('下') ball.style.top = ball.offsetTop + 10 + 'px' break; case 37: console.log('左') ball.style.left = ball.offsetLeft - 10 + 'px' break; case 39: console.log('右') ball.style.left = ball.offsetLeft + 10 + 'px' break; } } function generateTab() { //调用函数 createTab(emps) } } </script> </html>
效果显示图: