Game Developer12

How to make a multiplayer game on NOTEPAD

2018-11-03T14:16:00.002-07:00

Hello everybody after publishing two games today I am publishing my third game which is a multiplayer game.Just follow my STEPS.

STEP 1:Open NOTEPAD and copy the codes.

STEP 2:after that just Save as 12345.html (replace 12345 with the game name)

<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
padding: 0px;
}

canvas {
margin-top: 15vh;
margin-left: 20vw;
background: black;
outline: 1px solid white;
}
</style>
</head>

<body onload="startGame()">

<script>
var hockey1;
var hockey2;
var ball;
var point1 = 0;
var point2 = 0;
function startGame() {
myGameArea.start();
hockey1 = new component(8, 60, "yellow", 20, 150);
hockey2 = new component(8, 60, "lime", 670, 150);
ball = new component(7, 7, 'orange', 350, 170);
myScore = new component("16px", "Consolas", "yellow", 200, 25, "text");
myScore1 = new component("16px", "Consolas", "lime", 410, 25, "text");
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function() {
this.canvas.width = 700;
this.canvas.height = 390;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.interval = setInterval(updateGameArea, 30);
window.addEventListener('keydown', function(e) {
myGameArea.keys = (myGameArea.keys || []);
myGameArea.keys[e.keyCode] = true;
})
window.addEventListener('keyup', function(e) {
myGameArea.keys[e.keyCode] = false;
})
},
clear: function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function() {
clearInterval(this.interval);
}
}
function component(width, height, color, x, y, type) {
this.type = type;
this.width = width;
this.height = height;
this.x = x;
this.y = y;
this.speedX = 1;
this.speedY = 1;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}
function updateGameArea() {
//Hockey Control //////////////////////////////
///////////////////////////////////////////////
if (hockey1.y <= 0) {
hockey1.y = 0;
}
if (hockey1.y >= 350) {
hockey1.y = 350;
}
if (hockey2.y <= 0) {
hockey2.y = 0;
}
if (hockey2.y >= 350) {
hockey2.y = 350;
}
//Keyboard control /////////////////////////////
////////////////////////////////////////////////
if (myGameArea.keys && myGameArea.keys[38]) {
hockey1.y -= 10;
if (ball.crashWith(hockey1)) {
ball.speedY = -4;
ball.speedX = 14;
}
}
if (myGameArea.keys && myGameArea.keys[40]) {
hockey1.y += 10;
if (ball.crashWith(hockey1)) {
ball.speedY = 4;
ball.speedX = 14;
}
}
if (myGameArea.keys && myGameArea.keys[37]) {
hockey2.y -= 10;
if (ball.crashWith(hockey2)) {
ball.speedY = -4;
ball.speedX = -8;
}
}
if (myGameArea.keys && myGameArea.keys[39]) {
hockey2.y += 10;
if (ball.crashWith(hockey2)) {
ball.speedY = 4;
ball.speedX = -8;
}
}
///********BALL MOVEMENTS *************/////////
////////////////////////////////////////////////
ball.newPos();
if (ball.crashWith(hockey1)) {
ball.speedY = 0;
ball.speedX = 13;
} else if (ball.crashWith(hockey2)) {
ball.speedY = 0;
ball.speedX = -8;
} else {
ball.x += -4;
}
if (ball.y <= 0) {
ball.speedY = 4;
}
if (ball.y >= 390) {
ball.speedY = -4;
}
if (ball.x <= 2) {
ball.x = 690;
point2 += 1;
//myGameArea.stop();
}
if (ball.x >= 700) {
ball.x = 0;
point1 += 1;
//myGameArea.stop();
}
// console.log(point1);
// console.log(point2);
//ball.x -= 4;
myGameArea.clear();
hockey1.update();
hockey2.update();
ball.update();
myScore.text = "SCORE: " + point1;
myScore.update();
myScore1.text = "SCORE: " + point2;
myScore1.update();
}
</script>

</body>

</html>

How to make a flappy bird game in NOTEPAD

2018-11-03T14:06:00.002-07:00

Welcome to my blog, come we will make a small game.Just follow the STEPS.

STEPS 1: Open NOTEPAD and copy the codes.

STEPS 2: After this just Save as 123.html(replace 123 with your game name)

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
</style>
</head>
<body onload="startGame()">
<script>

var myGamePiece;
var myObstacles = [];
var myScore;

function startGame() {
myGamePiece = new component(30 , 30, "red",30,120,);
myGamePiece.gravity = 0.05;
myScore = new component("30px", "Consolas", "black", 280, 40, "text");
myGameArea.start();
}

var myGameArea = {
canvas : document.createElement("canvas"),
start : function() {
this.canvas.width = 480;
this.canvas.height = 270;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y, type) {
this.type = type;
this.score = 0;
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.gravity = 0;
this.gravitySpeed = 0;
this.update = function() {
ctx = myGameArea.context;
if (this.type == "text") {
ctx.font = this.width + " " + this.height;
ctx.fillStyle = color;
ctx.fillText(this.text, this.x, this.y);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.x += this.speedX;
this.y += this.speedY + this.gravitySpeed;
this.hitBottom();
}
this.hitBottom = function() {
var rockbottom = myGameArea.canvas.height - this.height;
if (this.y > rockbottom) {
this.y = rockbottom;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
var myleft = this.x;
var myright = this.x + (this.width);
var mytop = this.y;
var mybottom = this.y + (this.height);
var otherleft = otherobj.x;
var otherright = otherobj.x + (otherobj.width);
var othertop = otherobj.y;
var otherbottom = otherobj.y + (otherobj.height);
var crash = true;
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
crash = false;
}
return crash;
}
}

function updateGameArea() {
var x, height, gap, minHeight, maxHeight, minGap, maxGap;
for (i = 0; i < myObstacles.length; i += 1) {
if (myGamePiece.crashWith(myObstacles[i])) {
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
x = myGameArea.canvas.width;
minHeight = 20;
maxHeight = 200;
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight);
minGap = 50;
maxGap = 200;
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap);
myObstacles.push(new component(10, height, "green", x, 0));
myObstacles.push(new component(10, x - height - gap, "green", x, height + gap));
}
for (i = 0; i < myObstacles.length; i += 1) {
myObstacles[i].x += -1;
myObstacles[i].update();
}
myScore.text="SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}

function everyinterval(n) {
if ((myGameArea.frameNo / n) % 1 == 0) {return true;}
return false;
}

function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
<br>
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">ACCELERATE</button>
<p>Use the ACCELERATE button to stay in the air</p>
<p>How long can you stay alive?</p>
</body>
</html>

How to create a snake game in NOTEPAD

2018-11-03T13:58:00.003-07:00

Hello everybody,If you want to make a game just follow my STEPS

STEP 1:Open NOTEPAD and copy the codes.

STEP 2:after this just Save as 1234.html (replace 1234 with your game name)

<canvas id=canvas height=400 width=600>
</canvas>

<script>
function Game(){
this.snake = new Snake();
this.food = new Food();
this.ctx = canvas.getContext('2d');
this.scale = 20;
this.nx = Math.floor(canvas.width/this.scale);
this.ny = Math.floor(canvas.height/this.scale);
this.step = function(){
this.snake.step(this);
this.food.step(this);
this.draw();
this.wait();
};
this.draw = function(){
this.Rect(0, 0, this.nx, this.ny, '#AAAAAA');
this.snake.draw(this);
this.food.draw(this);
};
this.keydown = function(evt){
this.snake.keydown(evt.key);
}
this.Rect = function(x,y,w,h,fs){
this.ctx.fillStyle = fs;
this.ctx.fillRect(x*this.scale, y*this.scale, w*this.scale-1, h*this.scale-1)
};
this.wait = function(){
setTimeout(this.step.bind(this), 1000/25);
};
document.addEventListener('keydown', this.keydown.bind(this));
this.wait();
}
function Snake(){
this.l = 2;
this.trace = [];
this.x = 10;
this.y = 10;
this.vx = 1;
this.vy = 0;
this.step = function(game){
this.x = this.x + this.vx;
this.y = this.y + this.vy;
if(this.x >= game.nx) this.x = 0;
if(this.y >= game.ny) this.y = 0;
if(this.x < 0 ) this.x = game.nx - 1;
if(this.y < 0 ) this.y = game.ny - 1;
for(var i=0; i<this.trace.length; i++){
var pos = this.trace[i];
if( pos.x == game.food.x && pos.y == game.food.y ){
this.l = this.l + 1;
game.food.reset(game);
}
if(pos.x == this.x && pos.y == this.y) this.l = 2;
}
this.trace.push({x: this.x, y: this.y});
while(this.trace.length > this.l) this.trace.shift();
};
this.draw = function(game){
for(var i=0; i<this.trace.length; i++){
var pos = this.trace[i];
game.Rect(pos.x, pos.y, 1, 1, 'white');
}
};
this.keydown = function(key){
if(key == 'ArrowDown'){
this.vx = 0;
this.vy = 1;
} else if(key == 'ArrowUp'){
this.vx = 0;
this.vy =-1;
} else if(key == 'ArrowLeft'){
this.vx =-1;
this.vy = 0;
} else if(key == 'ArrowRight'){
this.vx = 1;
this.vy = 0;
}
};
}
function Food(){
this.x = 3;
this.y = 4;
this.step = function(game){};
this.draw = function(game){
game.Rect(this.x, this.y, 1, 1, 'blue');
};
this.reset = function(game){
this.x = Math.floor(Math.random()*game.nx);
this.y = Math.floor(Math.random()*game.ny);
};
}
window.onload = function(){
new Game();
};
</script>