I myself have been a league of Legends player for 10 years, and the day EDG won was as exciting as if China had entered the World Cup. At the same time eason Chan’s “Lone Brave” and I want to blow the “Battle of Two Cities” recently also released, ignited my Internet addiction youth passion. I decided to make a theme bullet-screen webpage to commemorate this hard-won champion. I stayed up late in my spare time to finish and open source the code.
Web entry: www.lhqcloud.top/EDG_NB/page…
Making: github.com/doterlin/ED…
Compatibility: Modern browser, not suitable for mobile devices, please browse on PC.
Technology selection: the front-end is basically written by native CSS3 + ES5, and the back-end is Node + socket. IO + mysql
The front end
The front end of the animation effect of their own design level is limited, the sense of atmosphere is not very strong, but all native writing, do not rely on the third party library. In order to add more fun, combined with EDG’s BO5 hero skill designed the animation effect of the barrage, I racked my brains on the idea effect, but felt comfortable coding.
Background animation
The background animation class is implemented as follows, and needs to work with CSS. The style part can be found in static/style. CSS.
// class Bg, draw the background
// @param parentElement Draw the background node
function Bg(parentElement, randomTextArray) {
this.parentElement = parentElement;
this.randomTextArray = randomTextArray;
this.parentW = parentElement.clientWidth,
this.parentH = parentElement.clientHeight;
this.rowWidth = 40;
this.rowMargin = 50;
this.rowClassName = 'bg-row';
}
/ / start painting
Bg.prototype.draw = function () {
this.drawRow();
}
Bg.prototype.drawRow = function () {
// How many columns can the parent node draw
var rowNumber = Math.ceil(this.parentW / (this.rowWidth + this.rowMargin));
for (let i = 0; i < rowNumber; i++) {
var el = document.createElement('div');
el.setAttribute('class'.'bg-row');
this.parentElement.append(el);
new ScrollText(el, this.randomTextArray);
}
}
Bg.prototype.destroy = function () {
this.parentElement.innerHTML = ' ';
}
Copy the codeBackground text:
// Scroll text class
function ScrollText(rowElement, textArray) {
this.rowElement = rowElement;
this.textArray = textArray;
this.aniTime = 10000; // Text animation scrolling length
this.createRomdomTextEl();
}
ScrollText.prototype.createRomdomTextEl = function () {
var text = this.textArray[Math.floor((Math.random() * this.textArray.length))].toUpperCase(); // Select one at random
var p = document.createElement('p');
p.setAttribute('class'.'bg-text');
p.innerHTML = text;
var ts = this;
p.className = 'bg-text slideDown';
this.rowElement.append(p);
setTimeout(function () {
ts.rowElement.removeChild(p)
}, this.aniTime);
setTimeout(() = >{ ts.createRomdomTextEl(); },Math.random() * 1 + 2.2) * 1000);
}
Copy the codebarrage
The danmu function consists of animation effects and websocket connection interaction. Animation core code:
/ / barrage
// @param text
// @param aniType The type of barrage animation
function Bullet({ text, aniType, isCustomer }, parentElement) {
this.text = text;
this.aniType = aniType;
this.isCustomer = isCustomer;
this.parentElement = parentElement;
this.el = null;
this.aniTime = aniType === '1' ? 4000 : 10000; // The retention time of the barrage
this.create()
}
Bullet.prototype.create = function () {
this.el = document.createElement('div');
var innerHTML = this.text;
if (this.isCustomer) {
innerHTML += ' from distinguished programmer ';
}
if (this.aniType === '6') {
innerHTML = '
'
+ innerHTML + '</div>'
}
this.el.innerHTML = innerHTML;
this.el.setAttribute('class'.'bullet-text bullet-ani' + this.aniType);
// The initial height is random
this.el.setAttribute('style'.'top: ' + Math.random() * 90 + '%; ');
}
Bullet.prototype.go = function () {
var ts = this;
ts.parentElement.append(ts.el);
setTimeout(function () {
ts.parentElement.removeChild(ts.el)
}, this.aniTime)
}
Copy the code
Websocker connection and handling:
// websocket
function createSocketIo() {
var socket = io('localhost:3300', { transports: ['websocket']});// Listen for connections
socket.on('connect'.function () {
console.log('%c connect success.'.'color: #690');
});
// Listen to count
socket.on('count'.function (data) {
countText1.innerHTML = data.C1;
countText2.innerHTML = data.C2;
});
// Listen for data
socket.on('add'.function (data) {
new Bullet(data, parentEl).go(true)});return socket;
}
Copy the codeThe back-end
The functions to be realized at the back end are very simple: one is to establish websocket connection and push messages; the other is to record and query the number of bullets of users in the database. Main code:
const db = require("./db")
let http = require("http");
let fs = require("fs");
let server = http.createServer((req, res) = > {
res.end('Nothing! ')
})
server.listen(3300.() = > {
console.log("HTTP service started");
})
var io = require('socket.io')(server);
/ / the connection
io.on('connection'.function (socket) {
getCount(res= > {
socket.emit('count', res)
})
/ / to monitor
socket.on('add'.function (data, a2, a3) {
const_data = { ... data,isCustomer: isCustomer(data.text)
}
socket.emit('add', _data);
addRecord(_data, socket);
getCount(res= > {
socket.emit('count', res)
})
});
});
Copy the codeDb.js is the encapsulated mysql query module.
An egg
There is a little egg hidden in the project for the summoner programmer friends, I believe you will find this egg soon. If you really need an Easter egg trigger, you can check it out on the Console (though I’m sure most of you reading this don’t need one).
Everyone is welcome to contribute bullets, if you like this page you are welcome to share with other summoners. After a certain time I will give a statistical result, any questions to communicate at any time.
When the broken sword is recast, when its power returns! Come on summoner.