socket + vue + canvas实践，你画我猜（一）

正式项目未开始，先先自己练手，做一个你画我猜小游戏，先上一个不完善的dome

在线地址
1.node；安装socket，启动服务

var io = require(‘socket.io’).listen(server);

var messages = [];//暂时存放消息

//socket连接成功之后触发，用于初始化
io.sockets.on(‘connection’, function(socket){
socket.on(‘getAllMessages’, function(){
//用户连上后，发送messages
socket.emit(‘allMessages’, messages);
});
socket.on(‘createMessage’, function(message){
//用户向服务器发送消息，存放到messages
//messages.push(message);
//向除自己外的所有用户发送消息
socket.broadcast.emit(‘messageAdded’, message);
});
})
2.vue 设置；先在index.html直接引入socket.io.js，此文件由node生成;

//然后在vue对象上新增socket属性方便全局使用
//连接socket
Vue.prototype.socket = io.connect(‘http://localhost:3000/’);

3.vue文件的画图与数据传输交互

<template>
<div id=”gameRoom”>
<header class=”mui-bar mui-bar-nav”>
<a class=”mui-icon mui-icon-arrowleft Hui-icon-left” v-on:tap=”back()”></a>
<h1 class=”mui-title Hui-title”><p class=”ellipsis”>房间名字</p><i class=”ellipsis”>你画我猜</i></h1>
<a class=”Hui-icon-right mui-icon-extra mui-icon-extra-peoples Hui-icon”></a>
</header>
<nav class=”mui-bar mui-bar-tab Hui-chat-bar” style=”height:auto”>
<div class=”sentNews”>
<a href=”javascript:;”><i class=”mui-icon mui-icon-mic”></i></a>
<div contenteditable=”true”></div>
<a href=”javascript:;”><i class=”Hui-icon Hui-icon-face”></i></a>
<a href=”javascript:;”><i class=”mui-icon mui-icon-plus”></i></a>
</div>
<div style=”width:100%;height:200px;display:none”></div>
</nav>
<div class=”gameRoom-canvas”>
<div class=”canvas-bar”><span>1号正在画，请先围观~{{screenHeight}}</span><span>剩余时间：<i>60</i></span></div>
<canvas id=”gameCanvas” v-bind:width=”screenWidth” v-bind:height=”screenHeight” v-on:touchstart=”touchStart($event)” v-on:touchmove=”touchMove($event)” v-on:touchcancel=”touchCancel($event)” v-on:touchend=”touchEnd($event)” v-on:touchleave=”touchEnd($event)”></canvas>
</div>
<div id=”chat-scroll” class=”mui-content Hui-chat-scroll” v-bind:style=”{top:screenHeight+68+’px’}”>
<input type=”color” value=”#333333″ list=”colors”>
<datalist id=”colors”>
<option>#ffffff</option>
<option>#ff0000</option>
<option>#ff7700</option>
</datalist>
<input type=”range” name=”points” min=”1″ max=”10″ />
</div>
</div>
</template>

//获取坐标点与颜色画笔类型
function operatCanvas(){
var gameCanvas = document.getElementById(“gameCanvas”);
var ctx=gameCanvas.getContext(“2d”);
var touchAggregate = new Array();
var that = this;
var _default = {
color: ‘#333’, //画笔颜色
lineWidth: 3, //画笔大小
lineCap: ’round’, //绘制圆形的结束线帽 ,可选值:square
lineJoin: ’round’ //当两条线条交汇时，创建圆形边角
};
var ongoingTouchIndexById = function(idToFind){
for (let i=0; i<touchAggregate.length; i++) {
let id = touchAggregate[i].identifier;

if (id == idToFind) {
return i;
}
}
return -1; // not found
}
this.handleStart = function(event,callback){
event.preventDefault();
var touches = event.changedTouches;//获取正在发生此事件的
var Start = true;
for(let i=0; i<touches.length; i++){
touchAggregate.push(touches[i]);
let opt = {
x:touches[i].pageX,
y:touches[i].pageY
}
that.drawCanvas(_default,opt,Start);
that.back(_default,opt,Start,callback);
}
};
this.handleMove = function(event,callback){
event.preventDefault();
var touches = event.changedTouches;//获取正在发生此事件的
for(let i=0; i<touches.length; i++){
let idx = ongoingTouchIndexById(touches[i].identifier);
let opt = {
x:touches[i].pageX,
y:touches[i].pageY,
sx:touchAggregate[idx].pageX,
sy:touchAggregate[idx].pageY
}
that.drawCanvas(_default,opt);
touchAggregate.splice(idx, 1, touches[i]);
that.back(_default,opt,false,callback);
}
};
this.handleEnd = function(event,callback){
event.preventDefault();
var touches = event.changedTouches;
for (let i=0; i<touches.length; i++) {
let idx = ongoingTouchIndexById(touches[i].identifier);
let opt = {
x:touches[i].pageX,
y:touches[i].pageY,
sx:touchAggregate[idx].pageX,
sy:touchAggregate[idx].pageY
}
that.drawCanvas(_default,opt);
touchAggregate.splice(i, 1); // remove it; we’re done
that.back(_default,opt,false,callback);
}
};

this.handleCancel = function(event) {
evt.preventDefault();
var touches = evt.changedTouches;

for (let i=0; i<touches.length; i++) {
touchAggregate.splice(i, 1); // remove it; we’re done
}
}
this.drawCanvas = function(_default,opt,Start){
ctx.lineWidth = _default.lineWidth;
ctx.strokeStyle = _default.color;
ctx.lineCap = _default.lineCap;
ctx.lineJoin = _default.lineJoin;
if(Start){
ctx.beginPath();
ctx.moveTo(opt.x-1, opt.y-69);
ctx.lineTo(opt.x, opt.y-68);
ctx.closePath();
ctx.stroke();
}else{
ctx.beginPath();
ctx.moveTo(opt.sx, opt.sy-68);
ctx.lineTo(opt.x, opt.y-68);
ctx.closePath();
ctx.stroke();
}
}
this.back = function(_default,opt,Start,callback){
var message = {
parameter: _default,
opt: opt,
Start: Start
};
callback(message);
}
}
</script>

————————————————
版权声明：本文为CSDN博主「点点悠悠」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/huaxiongbiao/article/details/70173853

socket + vue + canvas实践，你画我猜（一）

相关文章

归档