Vue+websocket realization Multiplayer Online King plane (i)

Looked at the official Vue tutorial (seemingly and their own writing framework difference is not big, listen to front-end colleagues have been blowing vue, so learning a bit, and their own framework does not seem to be strong where to go, is to be proud of the HA haha), and so on to organize their own framework, open source good), want to find a project training practiced hand Let's write a plane war.
Aircraft Wars Total three pages: login, match, Game page, three page functions:
1, Login: Players fill in the user name, socket connection
2. Match: Wait for other players to prepare
3. Game: Battle page
The above process is modeled after the glory of kings, so called the King plane (of course, and the King of Glory 108,000 miles) the final effect:

Git address: https://gitee.com/djxfire/PlaneWar.git
According to the above design, Vue package is basically used.
First of all, write the game page (let the plane Move up):

We define the Player class Player.js:

Export Default class Player {constructor (name, x, y, Enermy = false) {this.name = name//Player Name this.position = { }//Position this.position.x = x this.position.y = y This.speed = 1 this.direct = 0//Direction 0: Upward, 1 facing left, 2 facing down, 3 facing right this.  Attack = 1//Attack This.flood = 5//Blood volume This.sock = NULL//socket Connection This.state = 0//0: Stop, 1: Move this.bullets =  []//fired bullets This.enermys = []//Enemy if (!enermy) {This.init ()}} init () {///Todo:websocket Connection} Move (direct) {this.direct = Direct switch (direct) {case 0:if (This.position.y > 0) {th IS.POSITION.Y-= this.speed} break case 1:if (this.position.x > 0) {this.position . x-= This.speed} break case 2:if (THIS.POSITION.Y < window.innerheight-55) {th          IS.POSITION.Y + = this.speed} break case 3:if (This.position.x < window.innerwidth-55) { This.position.x+ = This.speed} Break}}} 

The specific information for the player class refers to the comment.
Next write the Game.vue component

<template> <div class = "Scene" > <div v-for= "(monster,index) of Monsters": key= "index" class= "monster" : style= "{left:monster.position.x + ' px ', top:monster.position.y + ' px '}" >  <p>{{monster.name}}</p> </div> <span V-for= "(Monster,index) of Monsters": key= "index" > <div class= "Bullet" v-for= "(bullet,index2) of Monster.bullet S ": key =" Index2 ": style=" {left:bullet.position.x + ' px ', top:bullet.position.y + ' px '} "> < /div> </span> <div class = "Monster": style= "{left:own.position.x + ' px ', TOP:OWN.POSITION.Y + ' p X '} ">  <p>{{own.name}}</p> </div> <div class=" Bullet "v-for=" (bullet,index) of O Wn.bullets ": Key =" index ": style=" {left:bullet.position.x + ' px ', top:bullet.position.y + ' px '} "> &L T;/div> <div class = "Play-control" > <div> <div @touchstart = "Turn (0)" @touchend = "turnend ( ) "class=" Up ></div> </div> <div style= "text-align:initial;" > <div @touchstart = "Turn (1)" @touchend = "turnend ()" class= "left" ></div> <div @touchstart = "T       Urn (3) "@touchend =" turnend () "class=" right "></div> <div class=" clear "></div> </div> <div> <div @touchstart = "Turn (2)" @touchend = "Turnend ()" class = "Down" ></div> </div&    Gt </div> <div class = "Shoot-control" @touchstart = "shoot ()" > </div> &LT;/DIV&GT;&LT;/TEMPLATE&GT;&L T;script>import Player from '. /player ' Export DEfault {name: ' Game ', data () {return {own:new Player (' Test ', Math.Round (Math.random () * window.innerwidth), Math.Round (Math.random () * window.innerheight)), Monsters: []}, methods: {Turn (direct) {This.own. Move (Direct)}, Turnend () {}, Shoot () {}}}</script><style scoped>.scene{Position:relat  Ive  Overflow:hidden;  width:100%; Height:calc (100VH);}.  bomb{animation:bombframe 3s; -webkit-animation:bombframe 3s;}.  turn-right{-webkit-transform:rotate (270DEG);  -moz-transform:rotate (270DEG);  -ms-transform:rotate (270DEG);  -o-transform:rotate (270DEG); Transform:rotate (270deg);}.  turn-left{-webkit-transform:rotate (90DEG);  -moz-transform:rotate (90DEG);  -ms-transform:rotate (90DEG);  -o-transform:rotate (90DEG); Transform:rotate (90deg);}.  turn-up{-webkit-transform:rotate (180DEG);  -moz-transform:rotate (180DEG);  -ms-transform:rotate (180DEG);  -o-transform:rotate (180DEG); Transform:rotate (180deg);}. turn-down{-webkit-transform:rotate (0DEG);  -moz-transform:rotate (0DEG);  -ms-transform:rotate (0DEG);  -o-transform:rotate (0DEG); Transform:rotate (0deg);}.  monster{Position:absolute;  Display:inline-block; Text-align:center;}.  bullet{Position:absolute;  Display:inline-block;  width:4px;  height:4px;  Background: #000;  -webkit-border-radius:4px;  -moz-border-radius:4px; border-radius:4px;}.  play-control{position:fixed;  Text-align:center;  bottom:0;  left:0;  Background: #E9E9E9;  width:100px;  height:100px;  opacity:0.5;  z-index:999;  -webkit-border-radius:100px;  -moz-border-radius:100px; border-radius:200px;}. clear{Clear:both;}.  Play-control. left{Display:inline-block;  width:0;  height:0;  Float:left;  border-top:25px solid Transparent;  border-right:25px solid #A8A8A8;  border-bottom:25px solid Transparent; Vertical-align:middle;}.  Play-control. right{Display:inline-block;  width:0;  height:0;  Float:right;  Vertical-align:middle; Border-top:25px solid Transparent;  border-left:25px solid #A8A8A8; border-bottom:25px solid Transparent;}.  Play-control. up{Display:inline-block;  Vertical-align:top;  width:0;  height:0;  border-right:25px solid Transparent;  border-bottom:25px solid #A8A8A8; border-left:25px solid Transparent;}.  Play-control. down{Display:inline-block;  Vertical-align:bottom;  width:0;  height:0;  border-right:25px solid Transparent;  border-top:25px solid #A8A8A8; border-left:25px solid Transparent;}. Play-control. left:active{border-right:25px solid #A88888;}. Play-control. right:active{border-left:25px solid #A88888;}. Play-control. up:active{border-bottom:25px solid #A88888;}. Play-control. down:active{border-top:25px solid #A88888;}.  shoot-control{position:fixed;  Text-align:center;  bottom:0;  right:0;  Background: #E9E9E9;  width:100px;  height:100px;  opacity:0.5;  z-index:999;  -webkit-border-radius:100px;  -moz-border-radius:100px;  border-radius:200px; Background-size:100%; Background:url (.. /assets/bbutton.png) No-repeat;} </style>

Now click on the steering wheel the plane is moving, but the need to constantly click the button, obviously unreasonable, so we use the Requestanimationframe () method to implement the animation, the game component to add code:

 mounted () {    let that = this    function _callback () {      for (let monster of that.own.enermys) {        monster.onframe()        for (let bullet of monster.bullets) {          bullet.onframe()        }      }      that.own.onframe()      for (let bullet of that.own.bullets) {        bullet.onframe()      }      requestAnimationFrame(_callback)    }    _callback()  }

Add the Onframe code for the player:

onframe () {    if (this.state === 1) {      this.move(this.direct)      this.send({ opt: ‘upposition‘, name: this.name, x: this.position.x, y: this.position.y, direct: this.direct })    }  }

When the steering wheel Touchstart own.state is set to 1, when the Touchend is set to 0, modify the method:

turn (direct) {      this.$store.dispatch(‘move‘, direct)    },    turnEnd () {      this.$store.dispatch(‘turnEnd‘)    },

At this point, when the arrow keys are pressed, the aircraft begins to move, and when the arrow keys are released, the aircraft stops moving.
The next article will implement NODEJS implementation of WebSocket game server logic

Vue+websocket realization Multiplayer Online King plane (i)