Internet Explorer
Internet Explorer is not supported. Please upgrade to a more modern browser.
Open4Discuss
Technology
OUR GAME BETA VERSION CODE
Started by Hemanth
<!DOCTYPE html>
<html>
<head>
<title>Hemanth Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
canvas {
border: 1px solid #d3d3d3;
background-image: url(seamless .webp);
}
body {
background-color: black;
text-align: center;
}
p {
color: white;
}
</style>
</head>
<body onload="startGame()">
<script>
var myGamePiece;
var myObstacles = [];
var myScore;
var topBarrier;
var gameRunning = true;
var restartButton;
function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120, "color");
myGamePiece.gravity = 0.05;
myScore = new component("30px", "Consolas", "white", 280, 40, "text");
topBarrier = new component(myGameArea.canvas.width, 0, "red", 0, 0);
myGameArea.start();
}
var myGameArea = {
canvas: document.createElement("canvas"),
start: function() {
this.canvas.width = 1339;
this.canvas.height = 530;
this.context = this.canvas.getContext("2d");
document.body.insertBefore(this.canvas, document.body.childNodes[0]);
this.frameNo = 0;
this.interval = setInterval(updateGameArea, 20);
this.canvas.addEventListener("click", restartGame);
window.addEventListener('keydown', function(e) {
if (e.code === "Space") { accelerate(-0.2); }
});
window.addEventListener('keyup', function(e) {
if (e.code === "Space") { accelerate(0.05); }
});
},
clear: function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
},
stop: function() {
clearInterval(this.interval);
gameRunning = false;
drawRestartButton();
}
};
function component(width, height, color, x, y, type) {
this.type = type;
if (type === "image") {
this.image = new Image();
this.image.src = color;
}
this.width = width;
this.height = height;
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 if (this.type === "image") {
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
} else {
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
}
this.newPos = function() {
this.gravitySpeed += this.gravity;
this.y += this.gravitySpeed;
this.hitBoundaries();
}
this.hitBoundaries = function() {
if (this.y > myGameArea.canvas.height - this.height) {
this.y = myGameArea.canvas.height - this.height;
this.gravitySpeed = 0;
}
if (this.y < topBarrier.height) {
this.y = topBarrier.height;
this.gravitySpeed = 0;
}
}
this.crashWith = function(otherobj) {
return !(this.y + this.height < otherobj.y || this.y > otherobj.y + otherobj.height ||
this.x + this.width < otherobj.x || this.x > otherobj.x + otherobj.width);
}
}
function updateGameArea() {
if (!gameRunning) return;
for (i = 0; i < myObstacles.length; i++) {
if (myGamePiece.crashWith(myObstacles[i])) {
myGameArea.stop();
return;
}
}
myGameArea.clear();
myGameArea.frameNo += 1;
if (myGameArea.frameNo == 1 || everyinterval(150)) {
var height = Math.floor(Math.random() * 150) + 50;
var yPos = Math.floor(Math.random() * (myGameArea.canvas.height - height));
myObstacles.push(new component(50, height, "green", myGameArea.canvas.width, yPos));
}
for (i = 0; i < myObstacles.length; i++) {
myObstacles[i].x -= 1;
myObstacles[i].update();
}
topBarrier.update();
myScore.text = "SCORE: " + myGameArea.frameNo;
myScore.update();
myGamePiece.newPos();
myGamePiece.update();
}
function drawRestartButton() {
var ctx = myGameArea.context;
ctx.fillStyle = "red";
ctx.fillRect(myGameArea.canvas.width / 2 - 50, myGameArea.canvas.height / 2 - 20, 100, 40);
ctx.fillStyle = "white";
ctx.font = "20px Arial";
ctx.fillText("Restart", myGameArea.canvas.width / 2 - 30, myGameArea.canvas.height / 2 + 5);
}
function restartGame(event) {
var canvas = myGameArea.canvas;
var rect = canvas.getBoundingClientRect();
var clickX = event.clientX - rect.left;
var clickY = event.clientY - rect.top;
var btnX = canvas.width / 2 - 50;
var btnY = canvas.height / 2 - 20;
if (clickX >= btnX && clickX <= btnX + 100 && clickY >= btnY && clickY <= btnY + 40) {
location.reload();
}
}
function everyinterval(n) {
return (myGameArea.frameNo / n) % 1 === 0;
}
function accelerate(n) {
myGamePiece.gravity = n;
}
</script>
<p>Press **Spacebar** to control the movement.</p>
<p>DESIGNED BY HEMANTH .</p>
</body>
</html>
click here to check it