Welcome, Guest: Register On Nairaland / LOGIN! / Trending / Recent / NewStats: 3,194,953 members, 7,956,593 topics. Date: Monday, 23 September 2024 at 02:47 PM |
Nairaland Forum / Jenntorr's Profile / Jenntorr's Posts
(1) (of 1 pages)
Programming / Multiplayer Game- Socket.io by Jenntorr: 1:04pm On Mar 28, 2019 |
please guys help me fish out the error in this code. for some reason the "snake[0].x" value is undefined. here's the code below client.js var userform = document.getElementById('user-form'); var gamefield = document.getElementById('game-field'); var menu = document.getElementById('menu'); var loginBtn = document.getElementById('login'); var joinBtn = document.getElementById('join'); var startBtn = document.getElementById('start'); var welcomeDiv = document.getElementById('welcome-div'); var socket; loginBtn.onclick = function () { // display gamefield gamefield.style.visibility = "visible"; menu.style.visibility = "visible"; // append username to array of activePlayers // set userform display to none userform.style.display = "none"; } startBtn.onclick = function () { //clear the menu div and welcome message welcomeDiv.style.display = 'none'; menu.style.visibility = "hidden"; // display race arena cvs.style.visibility = 'visible'; //join the game room /* let game = */ }; socket = io.connect(); var cvs = document.getElementById('snake'); const ctx = cvs.getContext("2d" const cvsH = cvs.clientHeight; const cvsW = cvs.clientWidth; const cell = 20; //let snake = []; //function that draws snake on canvas function drawSnake(x, y, color) { ctx.fillStyle = color; ctx.fillRect(x * cell, y * cell, cell, cell); //border around the snake ctx.fillStyle = "#000"; ctx.strokeRect(x * cell, y * cell, cell, cell); } let direction; //Event listener for direction function getDirection(e) { if (e.keyCode == 37 && direction != "right" { direction = "left"; //left.play(); } else if (e.keyCode == 38 && direction != "down" { direction = "up"; //up.play(); } else if (e.keyCode == 39 && direction != "left" { direction = "right"; //right.play(); } else if (e.keyCode == 40 && direction != "up" { direction = "down"; //down.play(); } } //start game function drawAll() { //ctx.clearRect(0, 0, cvsW, cvsH); socket.on('welcome', (data) => { console.log('Hello ' + data.x); //draw current player Snake drawPlayer(data); function drawPlayer(player) { let snake = []; ctx.fillStyle = player.color; ctx.fillRect(player.x * cell, player.y * cell, cell, cell); ctx.fillStyle = "#000"; //border around the snake ctx.strokeRect(player.x * cell, player.y * cell, cell, cell); //initialise snake array var snakeCell = { x: player.x, y: player.y, color: player.color }; snake.push(snakeCell); for (var i = 0; i < snake.length; i++) { var posX = snake[i].x; var posY = snake[i].y; drawSnake(posX, posY, snake.color); } } console.log(snakeCell); }); //receive food position and draw to canvas socket.on('DisplayFood', function (food) { ctx.fillStyle = "#fff"; ctx.fillRect(food.x * cell, food.y * cell, cell, cell); ctx.fillStyle = "#000"; //border around the snake ctx.strokeRect(food.x * cell, food.y * cell, cell, cell); var thefood = food; }); let snakeX = snake[0].x; let snakeY = snake[0].y; document.addEventListener("keydown", getDirection); //if direction is pressed, move snake correspondingly if (direction == "left" snakeX--; else if (direction == "up" snakeY--; else if (direction == "right" snakeX++; else if (direction == "down" snakeY++; position = { x: snakeX, y: snakeY } socket.emit('keypressed', position); snake.pop(); //if snake eats food /* if (thisPlayer.x == theFood.x && thisPlayer.y == theFood.y) { theFood.x = Math.floor(Math.random() * (cvsW / cell - 1) + 1); theFood.y = Math.floor(Math.random() * (cvsH / cell - 1) + 1); // we don't remove the tail } else { //remove the tail snake.pop(); } */ //ADD new Head position socket.on('PlayerMoved', function (player) { snake.unshift = { x: player.x, y: player.y, color: player.color } }); } //drawAll; setInterval(drawAll, 500); ////////////////////////////////////////////// server.js ////////////////////////////////////////////// var express = require('express'); var app = express(); var port = process.env.PORT || 3000; var server = app.listen(3000); app.use(express.static('public')); console.log('server is listening on *: ' + port); var socket = require('socket.io'); var io = socket(server); const canvasHeight = 400; const canvasWidth = 400; const cell = 20; var players = []; class newPlayer { constructor() { this.x = Math.floor(Math.random() * (canvasWidth / cell - 1)); this.y = Math.floor(Math.random() * (canvasWidth / cell - 1)); this.color = Color(); return { 'name': this.id, 'color': this.color, 'x': this.x, 'y': this.y }; } } io.sockets.on('connection', function (socket) { var currentPlayer = new newPlayer(); console.log(currentPlayer.x); players.push(currentPlayer); socket.broadcast.emit('welcome', currentPlayer); console.log('new connection: ' + socket.id); //send food position object if (players.length == 2) { //food object food = { foodx: 1 + Math.floor(Math.random() * (canvasWidth / cell - 2) + 1), foody: 1 + Math.floor(Math.random() * (canvasHeight / cell - 2) + 1) } socket.broadcast.emit('DisplayFood', food); } else { //socket.broadcast.emit('DisplayFood', players[1].name); } /* socket.on('FoodEaten', function () { socket.emit('nextFood', food, players); }); */ //listen for direction socket.on('keypressed', function (position) { currentPlayer.x = position.x; currentPlayer.y = position.y; socket.broadcast.emit('PlayerMoved', currentPlayer); }); socket.on('disconnect', function () { players.splice(players.indexOf(currentPlayer), 1); //console.log(players); }); }); function Color() { return ("green" || "blue" } i |
(1) (of 1 pages)
(Go Up)
Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 15 |