js+css实现简易接球小游戏_css小游戏-CSDN博客

本文链接：https://blog.csdn.net/qq_75222206/article/details/131582013

文章详细介绍了如何利用JavaScript创建一个接球小游戏，包括设置小球和挡板的模型，通过CSS定位和border-radius属性制作图形，再用JavaScript处理碰撞检测和动态行为，如小球反弹和游戏结束条件。同时，文章还涉及到了键盘事件监听以控制挡板移动。

摘要由CSDN通过智能技术生成

实现工具

JavaScript可以用于动态网页制作，其语法结构借鉴了Java。因此，可以使用该技术实现前端后端的结合，由此可以制作一个简易版的接球小游戏

实现思路及过程

首先要绘制出小球的模型。小球的模型可以使用border-radius属性进行设置，注意小球所处在的位置（top和left）由于小球自身有一定的体积，所以不能忽略半径对距离的影响

代码展示：

 <style>
    .f{
      position: relative;
      width:1200px;
      height:800px;
      border:1px solid red;
    }
    .z1{
      width:100px;
      height:100px;
      border-radius: 50%;
      background-color: aqua;
      position: absolute;
      left:550px;
      top:350px;
    }
  </style>

然后绘制出挡板的模型，挡板这里建议长度设置大一点。设置原理同上

代码展示：

<style>
 .z2{
      width:400px;
      height:50px;
      background-color: black;
      position: absolute;
      top:750px;
      left:350px;
    }
</style>

接下来就是动作设置。动作则为小球碰到墙壁反弹，碰到地面结束游戏，碰到挡板继续反弹。反弹我们可以使用dx=-dx,dy=-dy来实现，而碰到挡板或者碰到地面的设置，需要使用if语句加限制条件，条件则为当小球下落到挡板左边和右边且小球高度低于挡板最上方（小球最下面接触地面）则为游戏失败

代码展示：

<script>
      //生成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
      //获取小球的dom对象
      let ball=document.getElementById('ball')
      //点击父元素任意位置，开始游戏
      function startGame(){
        //alert('游戏开始')
        let game=setInterval(() => {
          //位移改变坐标
          x+=dx
          y+=dy
          //上下碰撞
 
          if(y<=50||(y==y1&&x>=x1&&x<=x1+400)){
            dy=-dy

          }
      
          //左右碰撞
          if(x<=50||x>=1150){
            dx=-dx
          }
          //游戏结束条件
          if((y==y1+50&&x<x1)||(x>x1+400&&y==y1+50)){
            clearInterval(game)
            console.log('游戏结束')
          }
          //把坐标作用与实际的定位上
          ball.style.left=x-50+'px'
          ball.style.top=y-50+'px'
        },0.01);
      
      }
      //控制键盘
      let keyboard=document.getElementById('keyboard')
      let x1=0;
      let y1=700;
      let dy1=20;let dx1=20;
      document.onkeydown=function(e){
        console.log(e.keyCode)
        switch(e.keyCode){

    case 37:
      x1-=dx1
      keyboard.style.left=x1-50+'px'
        console.log('左')
        break;
    case 39:
    x1+=dx1
   keyboard.style.left=x1-50+'px'
        console.log('右')
        break;
        }
    }
  </script>

最后是完整的代码展示

<!DOCTYPE html>
<html>
<head>
  <title>Game</title>
  <style>
    .f{
      position: relative;
      width:1200px;
      height:800px;
      border:1px solid red;
    }
    .z1{
      width:100px;
      height:100px;
      border-radius: 50%;
      background-color: aqua;
      position: absolute;
      left:550px;
      top:350px;
    }
    .z2{
      width:400px;
      height:50px;
      background-color: black;
      position: absolute;
      top:750px;
      left:350px;
    }
    </style>
    </head>
    <body>
<div class="f" onclick="startGame()">
<h1>鼠标点击即可开始游戏</h1>
<h4>游戏过程中，请勿点击鼠标以免造成游戏崩溃</h4>
<h4>游戏规则及玩法：左右箭头键控制方向，目的是保护小球不落到地面,小球落地后游戏结束</h4>
   <div class="z1" id="ball">

   </div>
   <div class="z2" id="keyboard">

   </div>
   
</div>
    </body>
  <script>
      //生成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
      //获取小球的dom对象
      let ball=document.getElementById('ball')
      //点击父元素任意位置，开始游戏
      function startGame(){
        //alert('游戏开始')
        let game=setInterval(() => {
          //位移改变坐标
          x+=dx
          y+=dy
          //上下碰撞
 
          if(y<=50||(y==y1&&x>=x1&&x<=x1+400)){
            dy=-dy

          }
      
          //左右碰撞
          if(x<=50||x>=1150){
            dx=-dx
          }
          //游戏结束条件
          if((y==y1+50&&x<x1)||(x>x1+400&&y==y1+50)){
            clearInterval(game)
            console.log('游戏结束')
          }
          //把坐标作用与实际的定位上
          ball.style.left=x-50+'px'
          ball.style.top=y-50+'px'
        },0.01);
      
      }
      //控制键盘
      let keyboard=document.getElementById('keyboard')
      let x1=0;
      let y1=700;
      let dy1=20;let dx1=20;
      document.onkeydown=function(e){
        console.log(e.keyCode)
        switch(e.keyCode){

    case 37:
      x1-=dx1
      keyboard.style.left=x1-50+'px'
        console.log('左')
        break;
    case 39:
    x1+=dx1
   keyboard.style.left=x1-50+'px'
        console.log('右')
        break;
        }
    }
  </script>
</html>

执行效果