vlambda博客
学习文章列表

<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>

.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;}

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

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; //更改原型链上的构造为自己的构造

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

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; // 回弹 }};

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

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.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;};

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();

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

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

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();

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();};

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

board2.update();

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

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)};

<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>

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

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 }};

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

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