编程开源技术交流,分享技术与知识

网站首页 > 开源技术 正文

用 jQuery 手写一个小游戏(编写jquery程序的步骤)

wxchong 2024-08-02 08:58:09 开源技术 16 ℃ 0 评论

作者:王圣松

转发链接:https://juejin.im/post/6844903687307919373

前言

今天给大家带来一个小游戏。

要求:熟悉 JavaScript 继承的概念。

游戏预览



玩法:

开局一个球,两块板子,其中最上方是电脑板子,会跟着球跑,球打到板子上会弹回来,打到你的板子上也是回弹出去,如果达到了上下边界,游戏结束。控制你的板子就用方向左右键。接到一个球+10分。

基础布局部分(HTML+CSS)

游戏部分,我们按照以下图示尺寸设定:

HTML:

<div class="game"> //游戏本体
  <div class="board b1"> //电脑的板子(上板子)
  </div>
  <div class="board b2"> //你的板子(下板子)
  </div>
  <div class="ball"></div> //球体
  <div class="info">
    <h2 class="infoText">开始游戏</h2>
    <button class="start">点击这里</button>
  </div>
  <div class="grade">0</div> //左上角分数卡
</div>

CSS:

.game {
  width: 500px;
  height: 500px;
  position: relative;
  border: 5px solid #fff;
  background-color: #222;
}

.board {
  background-color: #FF644E;
}
.ball {
  background-color: #fff;
}
.info {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  color: white;
  background-color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

逻辑部分(JavaScript)

我们采用 JavaScript 继承的方式来写这个游戏。

首先先定义一个 GameObject:

let GameObject = function (position,size,selector){
  this.$el = $(selector) //选择器
  this.position = position //游戏物体位置
  this.size = size //游戏物体大小
  this.$el.css("position","absolute") //设置其Css为绝对定位
  this.updateCss()
}

首先,$el为选择器,代表 jQuery 的元素选择器。position 为元素定位的位置。size为元素大小。

设置在原型链上的 updateCss 方法为元素位置、大小更新方法。按照当前对象的属性数值更新。

那我们先创建一个球(Ball)对象,继承 GameObject:

let Ball = function () {
  this.size = {width: 15, height: 15}; //球的大小
  this.position = {x: 250, y: 250}; //球的位置
  this.velocity = {x: 5, y: 5}; //球的速度
  GameObject.call(this,this.position,{width: 15, height: 15},".ball") //继承GameObject。并将参数和自身传入
};
Ball.prototype = Object.create(GameObject.prototype); //将Ball的原型链连接GameObjecr的原型链
Ball.prototype.constructor = Ball.constructor //因为连接,所以需要重新指向构造函数。将原型链的构造函数指向自己的构造函数

因为球只有一个,所以参数我们写死在对象里面。

我们实例化一个球对象:

let ball = new Ball();

接着屏幕中央就会有一个球:

接下来开始绘制两个可移动的板子:

let Board = function (position, sel) {
  this.size = { //锁定板子大小
    width: 100,
    height: 15
  };
  GameObject.call(this, position, this.size, sel); //对接父对象
};
Board.prototype = Object.create(GameObject.prototype); //对接父对象原型链
Board.prototype.constructor = Board.constructor; //更改原型链上的构造为自己的构造

然后 new 两块板子:

let board1 = new Board({x: 0, y: 30}, '.b1');
let board2 = new Board({x: 0, y: 455}, '.b2');

然后,我们让球动起来。

我们在 Ball的原型链上定义一个 update 方法来移动小球:

Ball.prototype.update = function () {
  this.position.x += this.velocity.x; //x轴按速度移动
  this.position.y += this.velocity.y; //Y轴按速度移动
  this.updateCss(); //调用父对象的updateCss方法更新界面
  if (this.position.x < 0 || this.position.x > 500) { //如果撞到了左右墙壁
    this.velocity.x = -this.velocity.x; // 回弹
  }
  if (this.position.y < 0 || this.position.y > 500) { //如果撞到了上下墙壁
    this.velocity.y = -this.velocity.y; // 回弹
  }
};

如果球的横向边界小于 0 或者大于 500,说明球碰到了左右墙壁。

如果球的纵向边界小于 0 或者大于 500,说明球碰到了上下墙壁。

然后我们每隔 30ms 调用一下小球的 update 函数,使其位置更新:

setInterval(function () {
  ball.update();
}, 30)

如图 :


这样小球就有了碰到障碍物反弹的能力了。

接着我们删掉这个定时器的代码。

然后,我们定义一个 Game 对象。这个对象不会继承任何父对象,因为它只负责控制其他物体对象。

let Game = function () {
  this.timer = null; //唯一timer 负责开始游戏结束游戏的timer
  this.grade = 0; //分数
  this.initControl(); //键盘监听事件
  this.control = {}; //这个放置各个键盘按键情况的对象
};

因为我们有键盘要控制板子的移动,所以我们要加监听事件。

Game.prototype.initControl = function () {
  let _this = this; //防止this作用域混淆
  $(window).keydown(function (evt) { //按键按下
    _this.control[evt.key] = true; //设置当前的key value为true
  });
  $(window).keyup(function (evt) { //按键抬起
    _this.control[evt.key] = false; //设置当前的key value为false
  })
};

根据我们的游戏规则,小球碰到上下墙壁要判别输赢,碰到上下板子要回弹。所以我们在 GameObject 的原型链上定义一个碰撞方法 collide。

GameObject.prototype.collide = function (otherObject) {
  let inRangeX = otherObject.position.x > this.position.x &&
    otherObject.position.x < this.position.x + this.size.width;
  let inRangeY = otherObject.position.y > this.position.y &&
    otherObject.position.y < this.position.y + this.size.height;
  return inRangeX && inRangeY;
};

其参数是另一个物体对象。

inRangeX 的判别式:当另一个物体的 X 值大于你的 X 值,且另一个物体 X 值小于你的 X 值+你宽度的时候,返回 true,否则 false。

inRangeY 的判别式:当另一个物体的 Y 值大于你的 Y 值,且另一个物体 Y 值小于你的 Y 值+你高度的时候,返回 true,否则 false。

然后返回两个判别式的情况。如果都为 true,说明两个物体相撞了。

这样我们在 Game 对象定义一个 startGameMain 方法,代表是我们游戏控制器主体。

Game.prototype.startGameMain = function () {
  let _this = this; //作用域!!!
  this.timer = setInterval(function () { //唯一定时器
    if (board1.collide(ball)) { //如果一号板子撞到了球
      console.log("碰到了1号板子"); 
      ball.velocity.y = -ball.velocity.y; //Y反向运动
    }
    if (board2.collide(ball)) { //如果二号板子撞到了球
      console.log("碰到了2号板子");
      _this.grade += 10; //自己的分数+10
      ball.velocity.y = -ball.velocity.y;
    }
    ball.update(); //球体更新方法
    $(".grade").text(this.grade); //jQuery更新分数
  }, 30) //每隔30ms走一次
};

然后,

let game = new Game();
game.startGameMain();

看一看效果:



接着在 startGameMain 函数内,继续编写。

如果球碰到上板子,说明上板子输了,如果碰到下板子,下板子输了。

if (ball.position.y < 0) {
  console.log("第一个板子输了");
  _this.endGame("你赢了"); //后面的结束游戏方法
}
if (ball.position.y > 500) {
  console.log("第二个板子输了");
  _this.endGame("你输了");
}

接着我们让上板子跟着球跑。我们在板子 Board 对象内定义一个 update 方法,更新板子的坐标和 UI。

Board.prototype.update = function () {
  this.updateCss();
};

然后继续在 startGameMain 函数内写板子跟球跑的逻辑:

board1.position.x += ball.position.x > board1.position.x + board1.size.width / 2 ? 12 : 0;
board1.position.x += ball.position.x < board1.position.x + board1.size.width / 2 ? -12 : 0;
board1.update();

如果球的 X 坐标 > 板子 X 坐标+板子宽度/2,那么板子 X +12,向右跑。

如果球的 X 坐标 < 板子 X 坐标+板子宽度/2,那么板子 X -12,向左跑。

如图:

但是细心的朋友可能会发现,板子超出边界了。

所以我们就限制板子最小 X 为 0,最大 X 为容器 width-板子 width。

于是我们重写一下 Board 的 update 方法。

Board.prototype.update = function () {
  if (this.position.x < 0) {
    this.position.x = 0;
  }
  if (this.position.x + this.size.width > 500) {
    this.position.x = 500 - this.size.width;
  }
  this.updateCss();
};

这样再看看:


接着写我方板子键盘控制事件,还是在 startGameMain 函数内。

if (_this.control["ArrowLeft"]) { //如果左键
  board2.position.x -= 8; //二号板子左移8
}


board2.update();

这样我们的键盘也可以操控了,球也能正常回弹。

我们继续写 endGame 函数:

Game.prototype.endGame = function (res) {
  clearInterval(this.timer); //清除定时器
  $(".infoText").html(res + '<br>分数:' + this.grade); //展示分数
  $(".info").show(); //展示信息
};

然后我们再加一个 startGame 的函数:

Game.prototype.startGame = function () {
  let time = 3; //倒计时3秒
  let _this = this;
  this.grade = 0; //初始化分数0
  ball.init(); //稍后用到
  let timer = setInterval(function () {
    $(".infoText").text(time);
    time--;
    if (time < 0) { //如果时间<0
      clearInterval(timer); //清除定时器
      $(".info").hide(); //隐藏信息
      _this.startGameMain(); //开始主要的游戏函数
    }
  }, 1000)
};

我们在 HTML 里面新增 info 信息的元素:

<div class="game">
  <div class="board b1">
  </div>
  <div class="board b2">
  </div>
  <div class="ball"></div>
  <div class="info"> //新增的地方
    <h2 class="infoText">开始游戏</h2>
    <button class="start">点击这里</button>
  </div>
  <div class="grade">0</div>
</div>

下面我们调用一下 startGame:

let game = new Game();
$(".start").click(function () {
  game.startGame();
})

这样一个比较完整的游戏完成了:


但是这看起来有点傻,因为它每次只向一个方向去发车。

我们可以使用 JavaScript 中的三角函数解决这个问题。

首先我们找到 Ball 对象,把里面的速度参数抽出为一个函数,取名叫 init。

Ball.prototype.init = function () {
  this.position = {x: 250, y: 250};
  let randomDeg = Math.random() * 2 * Math.PI;
  this.velocity = {
    x: Math.cos(randomDeg) * 8,
    y: Math.sin(randomDeg) * 8
  }
};

然后 Ball 对象内只剩下:

let Ball = function () {
  this.size = {width: 15, height: 15};
  this.init();
  GameObject.call(this, this.position, this.size, '.ball');
};

我们来仔细讲一下这个 init 函数。首先我们先锁定速度为 10,这个是首要条件,所以我们先产生一个随机角度。


  let randomDeg = Math.random() * 2 * Math.PI;

1PI 为 180 度,2PI 为 360 度。然后我们再随机一个小数,可以得到一个 360 度以内的任意角。

接着,我们可以根据三角函数 cos 和 sin。sin 是斜边/对边,cos 是斜边/邻边。我们如果知道了角度和长度,就可以知道 XY 的速度分别是多少。

X 长度 = 斜边长 * Cos(角度) Y 长度 = 斜边长 * Sin(角度)

如图:

这也就是数学中向量的概念。

然后我们再看看游戏:


显然比之前合理多了。

Gitee:https://gitee.com/Janlaywss/juejin-doc/blob/master/JsExtendGame.vue

作者:王圣松

转发链接:https://juejin.im/post/6844903687307919373

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

最近发表
标签列表