https:\/\/github.com\/Pyrokahd\/CircleClicker<\/a><\/p>\n\n\n\n
App <\/h1>\n\n\n\n
CircleClicker is a skill game with the goal to click on the appearing circles as fast as possible before they disappear again. <\/p>\n\n\n\n We used javascript for the Frontend and Backend, in the form of Node.js. Javascript is well known and is used almost everywhere. This is also connected to a huge community and therefore already many answers to questions asked. <\/p>\n\n\n\n Tip: After installing node.js and express, we can use the \u201cExpress Application Generator\u201d to generate a skeleton web server. We do this by navigating to the folder, in which we want the project to be and type the following command:<\/p>\n\n\n\n With –view we define which view engine to use, for example pug or ejs. Those are used to generate response pages using templates and variables. To install additional modules type npm install ModuleName.<\/p>\n\n\n\n This will add the dependency to the package.json. Beanstalk will install all the modules listed in your package.json file automatically, so you don\u2019t have to worry about uploading or installing them by yourself.<\/p>\n\n\n\n Now we add responses for the server to reply to client requests.<\/p>\n\n\n\n The first one sends the default page to the client, once it is connected. This will be our html site containing the game.<\/p>\n\n\n\n Here we tell our server to respond to GET requests on the root server path \u201c\/\u201d, which is the URL without anything behind it. The Response is our main.html located in the public folder behind the root. This means we have our main.html as the default web page.<\/p>\n\n\n\n The next GET response will respond to the url \u201c\/getScore\u201d by sending the top 10 highscores to the client. <\/p>\n\n\n\n In there we make a query to our MongoDB and then construct a JSON string out of it to send it to the client. The query is shown later when we talk about MongoDB.<\/p>\n\n\n\n The last response answers a POST request from the client and is used to create new entries for the database, if the player sends a score.<\/p>\n\n\n\n In this function we receive a name and a score from the client in the form of a JSON object. Those variables are then used to create a database entry.<\/p>\n\n\n\n The Frontend consists of the HTML page, the CSS stylesheet and one or more javascript files for the logic and functionality.<\/p>\n\n\n\n The HTML and javascript files are stored in their respective folder under the \u201cpublic\u201d folder in the server.<\/p>\n\n\n\n For the HTML document the important parts are a form to enter the archived score plus a name and buttons to start the game and send the score to the server. Other important parts, like the HTML canvas are generated once the game is started.<\/p>\n\n\n\n How exactly the html looks is not important. It just needs all the relevant elements with a respective ID, to be called upon in the javascript file, in which all the event handling and game logic happens.<\/p>\n\n\n\n The following should be avoided because it violates the content security policy (CSP):<\/p>\n\n\n\n It is also important to import the gameLogic script at the end of the html body. That way the html will be loaded first and we can access all elements in the javascript file without trouble.<\/p>\n\n\n\n First we give the buttons on the site some functions to invoke, by adding click events to them. A HTML canvas is created inside an object, which holds the gamelogic, once the site has loaded. <\/p>\n\n\n\n The first three of those buttons provide the necessary functionality to play the game and interact with the server. <\/p>\n\n\n\n The first one \u201cstartBtn\u201d does exactly what the name suggests. It starts the game by calling the startGame function. This sets some variables like lifes and points and then starts an intervalTimer to act as our Game Loop. After a certain time, which decreases the longer the game runs, a circle-object is spawned. This has the logic to increase points or decrease lifes and despawn after a while. The second button has the functionality to show the popup-form, which is used to enter a name and send it, together with the archived, score to the server. This function is also called automatically once you lose the game.<\/p>\n\n\n\n The submit Button calls the sendScore function, which uses jquery and ajax to make a POST request to the server and send the score and username as a JSON object named data. Here we also use the \u201c\/sendScore\u201d url which we set for a post response, at the server.<\/p>\n\n\n\n The last relevant function is to request the leaderboard. This is called upon loading the page and once we send our new score to the server, to update the leaderboard. This also uses jquery and ajax to make it easier to write the GET request.<\/p>\n\n\n\n The \u201c\/getScore\u201d url from the GET response of the server used to get the top 10 scores as a JSON object. This JSON object is then used to create a table in the form of a HTML string, which is set as the innerHTML of a div-box.<\/p>\n\n\n\n In our application we use MongoDB together with the mongoose module. The mongoose module simplifies certain MongoDB functions. <\/p>\n\n\n\n As the host for the database we used MongoDB Atlas, which lets you create a free MongoDB in the cloud of a provider of your choice. We chose AWS, since we also use their Beanstalk service. The free version of this database has some limits, but for a small project like this, it is more than enough.<\/p>\n\n\n\n After a database is created, you can create a user, assign rights and copy a connection-string from MongoDB Atlas. <\/p>\n\n\n\n We are using this string and mongoose to connect to the DB in a few lines of code.<\/p>\n\n\n\n After the connection is established we can create a mongoose model, which is like a blueprint for the entries in one table. This model is created from a mongoose schema in which we define the structure.<\/p>\n\n\n\n Now we are ready to add new entries to the database. This is easily done by creating an instance of the mongoose model and filling in the appropriate fields. After calling the save function, a new entry is added.<\/p>\n\n\n\n To make a query is just as easy. First we define a query object and set the parameter according to our needs.<\/p>\n\n\n\n We can then execute that query and receive a result depending on the settings<\/p>\n\n\n\n But how do we get into the cloud? The first thing we do is decide on a cloud provider. We very quickly chose AWS because we were particularly impressed by the service they offered. It’s about AWS Beanstalk. Amazon promises to take over a lot of backend provisioning, like load-balancing,scaling, e2-instances and security groups.<\/p>\n\n\n\n Which means more time for actually programming. <\/p>\n\n\n\n Does that work? To a large extent yes! <\/p>\n\n\n\n Very simple. You create an Amazon AWS account, go into the development console and create a new AWS Beanstalk environment. Here you define the domain name and in which programming language your app is written. Then start the environment. Afterwards you upload the app which is put together to an archive and check on the domain if the app works. Updates are done the same way. Merge the new code into an archive, upload and select. <\/p>\n\n\n\n You now have a website with your own game. Load Balancer is included, highscore is included and basic security settings are set. <\/p>\n\n\n\n In your Beanstalk environment configuration under monitoring, you can enable your logs to be streamed to CloudWatch. This comes with some extra cost, but allows you to have all your logs online and centralized in one location. <\/p>\n\n\n\n CloudWatch also has many more functionalities like alarms when your application gets downscaled because there is less traffic, or monitoring of the performance of your ressources.<\/p>\n\n\n\n However we are interested in our logs, which you find under your protocol groups in CloudWatch. There is one log with the ending stdout.log (by default). This is where all of the console.log or console.error messages from our server are located.<\/p>\n\n\n\n If you want to make your application even more secure, you can put a little more time into it. We have decided to set up HTTPS and use the SCP protocol. <\/p>\n\n\n\n To provide HTTPS, proceed as follows:<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh6.googleusercontent.com\/94km_-ABxxtYp92raHzp_erXJbn5rGxef-4Gx_H_4lNjJopHLKK7YcZ1MXr0x36FWgiVYUtsoB2Zyrv4lieXMJoxlo6fVURi_ypj7UXk6rU1llPwjp2Z04bmdDemx45sBA8WGGYe\")
![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/IPcD_Bt6guztMibxzL8jNtdmtMWOShjrhsHXEFMqPrdS6TG7sfsjOm1XuEM0bVgv_a-xqS3npiEmtrC8qAHUY_kkvwwPqtkqwJRr38Kg-SipNsAUvAqgOv1WOP9LK9Cugk6nPn2M\")
When deciding which programming language or tool you want to work with, always consider what the community is like and how many tutorials are available.\u00a0<\/p>\n\n\n\nBackend<\/h2>\n\n\n\n
Getting started<\/h3>\n\n\n\n
![\"\"\/](\"https:\/\/lh3.googleusercontent.com\/UZgPXL5KTKKM1t5xE4ftUyWwH1EdaMfYP4wklAtvBQNGnqC9i0aXf-ti30NVLQH65Ky1_tlmX9SwOPYSNptJOh63v_TzOnq6Q2epM0RI3uwicP5AbSC8PjIR1FXPDdGBR_IHDb9l\")
However in this project we don’t use them except for the auto generated uses, to keep it simple.<\/p>\n\n\n\n![\"\"\/](\"https:\/\/lh5.googleusercontent.com\/PtJM9NEBtnvpBfF4lWQjl5yVDNikd0B8U1IZ8Nh6oEWL0vw_2ojkBMfgU4OcEfnqhe9BZEssP5D785BTs3VPk8yuQeYPpVfcwNWUJmy1G1_w5_lSzjiBImz2CKQnSb66Hh5evV17\")
app.get('\/', function(req, res, next) {\n res.sendFile(path.join(__dirname + "\/public\/main.html")); \n});<\/code><\/pre>\n\n\n\napp.get('\/getScore', function(req, res, next) {\n<\/code><\/pre>\n\n\n\napp.post('\/sendScore', function(req, res, next) {<\/code><\/pre>\n\n\n\nFrontend<\/h2>\n\n\n\n
HTML<\/h3>\n\n\n\n
Javascript<\/h3>\n\n\n\n
document.getElementById("startBtn").addEventListener("click", startGame);\ndocument.getElementById("showPopUpBtn").addEventListener("click", showPopUp);\ndocument.getElementById("submitBtn").addEventListener("click", sendScore);\ndocument.getElementById("resetBtn").addEventListener("click", hidePopUp);<\/code><\/pre>\n<\/div><\/div>\n\n\n\n
The canvas has an EventListener to check for clicks inside it. To check if a circle is clicked, the mouse-position and the circle-position are compared (the circle position needs to be increased by the offset of the canvas position and decreased by the scroll-y height).<\/p>\n\n\n\nconst serverURL = window.location.origin;\n\n$.ajax({\n type:"POST",\n async: true,\n url: serverURL+"\/sendScore",\n data:data,\n success: function(dataResponse){\n console.log("success beim senden: ");\n console.log(dataResponse);\n setTimeout(requestLeaderboard,1000);\n },\n statusCode: {\n 404: function(){\n alert("not found");\n } \/\/, 300:()=>{}, ...\n }\n});<\/code><\/pre>\n\n\n\n$.ajax\n({\n type:"GET",\n async: true,\n url: serverURL+"\/getScore",\n success: function(dataResponse){\n highScores = JSON.parse(dataResponse);\n\n \/\/Build html String from JSON response\n var leaderBoardString = "<h2>Leaderboard<\/h2>";\n var tableString = '<table id="table"><tr>\n <th>Name<\/th> <th>Score<\/th>';\n for (var i = 0; i < highScores.user.length;i++){\n tableString += "<tr><td>"+highScores.user[i].name\n +"<\/td><td>"\n +highScores.user[i].score\n +"<\/td><\/tr>";\n }\n tableString += '<\/tr><\/table>';\n \/\/Update leaderBoard with created table\n document.getElementById("leaderboardArea").innerHTML\n = leaderBoardString+tableString;\n },\n statusCode: {\n 404: function(){\n alert("not found");\n } \/\/, 300:()=>{}, ...\n }\n});<\/code><\/pre>\n\n\n\nMongoDB<\/h2>\n\n\n\n
Host<\/h3>\n\n\n\n
Connection<\/h3>\n\n\n\n
mongoose.connect(mongoDBConnectionString, { useNewUrlParser: true },);\n\/\/Get the default connection\nvar db = mongoose.connection;\n\/\/Bind connection to error event (to get notification of connection errors)\ndb.on('error', console.error.bind(console, 'MongoDB connection error:'));<\/code><\/pre>\n\n\n\nvar UserModelSchema = new mongoose.Schema({\nname: String,\nscore: Number\n});\nvar UserModel = mongoose.model('UserModel', UserModelSchema );<\/code><\/pre>\n\n\n\nCreate Entry<\/h3>\n\n\n\n
var testInstance = new UserModel({name: _name, score: _score});\n testInstance.save(function (err, testInstance) {\n if (err) return console.error(err);\n console.log("new Entry saved");\n });<\/code><\/pre>\n\n\n\nQuery<\/h3>\n\n\n\n
\/\/ find all athletes that play tennis\n var query = UserModel.find();\n \/\/ selecting the 'name' and 'score' fields but no _id field\n query.select('name score -_id'); \n \/\/ sort by score\n query.sort({ score: -1 });\n \/\/limit our results to 10 items\n query.limit(10);\n \/\/to return JS objects not Mongoose Documents\n query.lean();<\/code><\/pre>\n\n\n\nquery.exec(function (err, queryResult) {\n if (err) return handleError(err);\n\n \/\/use queryResult (JS-Object)\n \/\/to create JSON string\n\n \/\/and send it to client\n res.send(resJSON); \n });<\/code><\/pre>\n\n\n\nInto the cloud!<\/h1>\n\n\n\n
![\"\"\/](\"https:\/\/lh4.googleusercontent.com\/HxMZru7GvW49NDvqeSLmwwD-BQALw5XVrGV1_ZtHagP70ZcVdMhNwJAjh_W0tFu-juAt7vU6lQmELDWnsXBFoXfFajzRIRoWoqjPgctUAnO0yA383hAlA0e-ttegisT0mvuCD_ht\")
How does it work?<\/h2>\n\n\n\n
Check Logs on CloudWatch<\/h2>\n\n\n\n
Security Settings<\/h1>\n\n\n\n
HTTPS<\/h2>\n\n\n\n