Scribd
Upload
19 views3 pages

Game 2

This document describes a game where the player controls a red square and there is a green square obstacle. The game initializes a red square piece and green obstacle square and sets up a canvas to render the game area. Movement functions are defined to control the red square piece but it currently does not interact with the obstacle.

Uploaded by

Muthu Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views3 pages

Game 2

This document describes a game where the player controls a red square and there is a green square obstacle. The game initializes a red square piece and green obstacle square and sets up a canvas to render the game area. Movement functions are defined to control the red square piece but it currently does not interact with the obstacle.

Uploaded by

Muthu Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

GAME 2

<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 myObstacle;

function startGame() {
myGamePiece = new component(30, 30, "red", 10, 120);
myObstacle = new component(10, 200, "green", 300, 120);
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.interval = setInterval(updateGameArea, 20);
},
clear : function() {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}

function component(width, height, color, x, y) {


this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
this.x += this.speedX;
this.y += this.speedY;
}
}

function updateGameArea() {
myGameArea.clear();
myObstacle.update();
myGamePiece.newPos();
myGamePiece.update();
}

function moveup() {
myGamePiece.speedY = -1;
}

function movedown() {
myGamePiece.speedY = 1;
}

function moveleft() {
myGamePiece.speedX = -1;
}

function moveright() {
myGamePiece.speedX = 1;
}

function clearmove() {
myGamePiece.speedX = 0;
myGamePiece.speedY = 0;
}
</script>
<div style="text-align:center;width:480px;">
<button onmousedown="moveup()" onmouseup="clearmove()"
ontouchstart="moveup()">UP</button><br><br>
<button onmousedown="moveleft()" onmouseup="clearmove()"
ontouchstart="moveleft()">LEFT</button>
<button onmousedown="moveright()" onmouseup="clearmove()"
ontouchstart="moveright()">RIGHT</button><br><br>
<button onmousedown="movedown()" onmouseup="clearmove()"
ontouchstart="movedown()">DOWN</button>
</div>
<p>Now there is an obstacle in our gaming area, but still nothing happens when the red square hits it.</p>
</body>
</html>

You might also like