Game HTML Template

GAME HTML TEMPLATE

Use it now! Click "Embed" and Paste this into the code:

<!DOCTYPE html>

<html>

<head><title>Basic Html App</title>

<style>

canvas {

border:1px solid #d3d3d3;

background-color: #f1f1f1;

}

</style>

</head>

var myGamePiece;

function startGame() {

myGamePiece = new component(10, 10, "red", 162, 100);

myGameArea.start();

}

var myGameArea = {

canvas : document.createElement("canvas"),

start : function() {

this.canvas.width = 325;

this.canvas.height = 200;

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();

myGamePiece.newPos();

myGamePiece.update();

}

function moveup() {

myGamePiece.speedY = -0.5;

}

function movedown() {

myGamePiece.speedY = 0.5;

}

function moveleft() {

myGamePiece.speedX = -0.5;

}

function moveright() {

myGamePiece.speedX = 0.5;

}

function clearmove() {

myGamePiece.speedX = 0;

myGamePiece.speedY = 0;

}

</script>

<button onmousedown="moveright()" onmouseup="clearmove()" ontouchstart="moveright()">RIGHT</button><br><br>

</div>

</body>

</html>

Report abuse