Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to achieve Gobang in nodeJs+express+soket.io. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

_ window.onload=function () {

Var sence = document.getElementById ('sence')

/ / Checkerboard size

ROW = 20cnum = ROW*ROW

/ / scene width

SenceWidth = sence.offsetWidth

/ / the width of each piece

BlockWidth = Math.floor ((senceWidth-ROW) / ROW) + 'px'

/ / users can drop children by default.

CanDrop = true

/ / users default to White Chess

Color = 'white'

/ / two dictionaries used to store the location of the fallen children of white and black; based on coordinates, the value is true

WhiteBlocks = {}, blackBlocks = {}

Console.log (sence)

/ / create a scene

(function () {

Var el

/ / draw lines on the chessboard

Rowline

Colline

For (var I = 0 * * I < ROW;i++) {

/ / place horizontal lines at calculated intervals

Rowline = document.createElement ('div')

Rowline.setAttribute ('class','row')

Rowline.style.top= (senceWidth/ROW) / 2 + (senceWidth/ROW) * I + 'px'

Sence.appendChild (rowline)

/ / Vertical bars are placed at calculated intervals

Colline = document.createElement ('div')

Colline.setAttribute ('class','col')

Colline.style.left= (senceWidth/ROW) / 2 + (senceWidth/ROW) * I + 'px'

Sence.appendChild (colline)

For (var j = 0 * * j < ROW;j++) {

El = document.createElement ('div')

El.style.width = blockWidth

El.style.height = blockWidth

El.setAttribute ('class','block')

El.setAttribute ('id',i +' _'+ j)

Sence.appendChild (el)

}

}

) ()

Console.log ('1')

Var id2Position = function (id) {

Console.log (id)

Return {x:Number (id.split ('_') [0]), y:Number (id.split ('_') [1])}

}

Var position2Id = function (XBI y) {

Return x +'_'+ y

}

Console.log ('abc')

/ / judge whether the color of the queen of Luozi is even 5.

Var isHasWinner = function (id,dic) {

Var x = id2Position (id) .x

Var y = id2Position (id). Y

/ / used to record the number of consecutive pieces in horizontal, vertical, left and right oblique directions

Var rowCount = 1Magna colCout = 1JM leftSkewLineCount = 1Magi RigheSkewlineCount = 1

/ / tx ty as a cursor, move left, right, up, down, left top, right bottom, left bottom, right top

/ / every time tens of thousands of consecutive pieces in a certain direction, the cursor will return to the origin

Var tx,ty

/ / Note: it is not successful to judge that more than five companies are not successful. if the rules are changed, the condition can be changed to greater than five.

Tx = xterty = y

While (dic [position2Id (tx,ty+1)]) {

RowCount++

Ty++

}

Tx = xterty = y

While (dic [position2Id (tx,ty-1)]) {

RowCount++

Ty--

}

If (rowCount = = 5) return true

Tx = xterty = y

While (dic [position2Id (tx+1,ty)]) {

ColCout++

Tx++

}

Tx = xterty = y

While (dic [position2Id (tx-1,ty)]) {

ColCout++

Tx--

}

If (colCout = = 5) return true

Tx = xterty = y

While (dic [position2Id (tx+1,ty+1)]) {

LeftSkewLineCount++

Tx++

Ty++

}

Tx = xterty = y

While (dic [position2Id (tx-1,ty-1)]) {

LeftSkewLineCount++

Tx--

Ty--

}

If (leftSkewLineCount = = 5) {

Return true

}

Tx = xterty = y

While (dic [position2Id (tx-1,ty+1)]) {

RigheSkewlineCount++

Tx--

Ty++

}

Tx = xterty = y

While (dic [position2Id (tx+1,ty-1)]) {

LeftSkewLineCount++

Tx++

Ty--

}

If (righeSkewlineCount = = 5) return true

Return false

}

/ / deal with the information sent by the opponent

/ / var socket = io.connect ('http://127.0.0.1:3100');

If (/ Firefox\ / s/.test (navigator.userAgent)) {

Var socket = io.connect ('http://127.0.0.1:3100',{transports:['xhr-polling']});

}

Else if (/ MSIE (\ dmom.\ d+); / .test (navigator.userAgent)) {

Var socket = io.connect ('http://127.0.0.1:3100',{transports:['jsonp-polling']});

}

Else {

Var socket = io.connect ('http://127.0.0.1:3100');

}

Socket.on ('message',function (data) {

/ / console.log ('data')

CanDrop = true

Var el = document.getElementById (data.id)

/ / console.log (el)

El.setAttribute ('has-one','true')

If (data.color = = 'white') {

Color = 'black'

El.setAttribute ('class','block white')

WhiteBlocks [data.id] = true

If (isHasWinner (data.id,whiteBlocks)) {

Alert ('White wins')

The location.reload () / / Location.reload () method is used to refresh the current page. This method takes only one parameter, and when the value is true, it forces the browser to load the page resource from the server, and when the value is false or no parameter is passed, the browser may read the page from the cache.

}

} else {

El.setAttribute ('class','block black')

BlackBlocks [data.id] = true

If (isHasWinner (data.id,blackBlocks)) {

Alert ('black wins')

Location.reload ()

}

}

});

Sence.onclick = function (e) {

/ / console.log ('gyu')

Var el = e.target / a reference to the object (some DOM element) that triggered the event. When the event handler is called during the bubbling or capture phase of the event

If (! canDrop | | el.hasAttribute ('has-one') | | el = = this) {/ / the hasAttributes attribute returns a Boolean value of true or false to indicate whether the current element node has at least one attribute

Return

}

El.setAttribute ('has-one','true')

CanDrop = false

Var id = el.getAttribute ('id')

If (color = = 'white') {

El.setAttribute ('class','block white')

WhiteBlocks [id] = true

Socket.emit ('message', {id:id,color:'white'}); / / socket.emit (' action',data); indicates that an action command was sent, along with data data, which can be written as: socket.on ('action',function (data) {...}) when it is received at the other end.

If (isHasWinner (id,whiteBlocks)) {

Alert ('White wins')

Location.reload ()

}

}

If (color = = 'black') {

El.setAttribute ('class','block black')

BlackBlocks [id] = true

Socket.emit ('message', {id:id,color:'black'})

If (isHasWinner (id,blackBlocks)) {

Alert ('black wins')

Location.reload ()

}

}

}

}

Style index.css

Body {

Background: # 4b4832

Font-family: Microsoft Yahei

Color: # 666

}

.sence {

Width: 600px

Height: 600px

Margin: 50px auto

Border-right: none

Border-bottom: none

Position: relative

Box-shadow:-10px 10px 15px black

Background: # 8d6d45

Border: 2px solid black

}

.sence .block {

Float: left

Margin-right: 1px

Margin-bottom: 1px

Border-radius: 50%

Position: relative

Z-index: 8884

}

.sence .row,. Sence .col {

Background: # 4d392b

Position: absolute

}

.sence .row {

Width:100%

Height: 1px

Top: 0

}

.sence .col {

Width:1px

Height: 100%

Top: 0

}

.white {

Background: # ffffff

}

.black {

Background: # 2c1d1b

}

Index.html:

Five-in-a-Row

Server index.js

Var express = require ('express')

Function () {/ / ThinkMarkets remit gold http://www.kaifx.cn/question/kaifx/1819.html

Var path = require ('path')

Var app = express ()

Var http = require ('http') .Server (app)

Var io = require ('socket.io') (http)

Io.on ('connection',function (socket) {

Socket.on ('message',function (data) {

Socket.broadcast.emit ('message',data)

});

});

App.use ('/ public/',express.static (path.join (_ _ dirname,'./public/')

App.use ('/ node_modules/',express.static (path.join (_ _ dirname,'./node_modules/')

App.get ('/', function (req,res) {

Res.sendFile (_ _ dirname +'/ index.html')

});

Http.listen (3100) function () {

Console.log ('runing...')

})

Socket.io compatibility Code:

If (/ Firefox\ / s/.test (navigator.userAgent)) {

Var socket = io.connect ('http://127.0.0.1:3100',{transports:['xhr-polling']});

}

Else if (/ MSIE (\ dmom.\ d+); / .test (navigator.userAgent)) {

Var socket = io.connect ('http://127.0.0.1:3100',{transports:['jsonp-polling']});

}

Else {

Var socket = io.connect ('http://127.0.0.1:3100');

}

This is the end of the article on "how to achieve Gobang in nodeJs+express+soket.io". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.