My HTML file :
<html>
<head>
<title> Game </title>
<link rel= "stylesheet" type = "text/css" href = "style.css" />
</head>
<body>
<canvas id ="maincanvas" width = "500" height = "400"> </canvas>
<canvas id ="maincanvas2" width = "500" height = "400"> </canvas>
<script src ="script.js"> </script>
</body>
</html>
My Script (javascript) :
var canvas = document.getElementById("maincanvas");
var context = canvas.getContext("2d");
var keys = [];
var width = 500, speed = 3, height = 400;
var player = {
x: 10,
y: 10,
width: 20,
height: 20
};
window.addEventListener("Keydown", function(e){
keys[e.keyCode] = true;
}, false);
window.addEventListener("Keyup", function(e){
delete keys[e.keyCode];
}, false);
function game(){
update();
render();
}
function update(){
if(keys[38]) player.y--;
if(keys[40]) player.y++;
if(keys[37]) player.x--;
if(keys[39]) player.x++;
}
function render(){
context.clearRect(0, 0, 100, 100);
}
setInterval(function(){
game();
}, 1000/30)
My CCS file :
#maincanvas {
background-color: red;
}
The Problem is that, when I run this it doesn't shows why I am trying to do. I mean their is a minor, a bit problem in the code of the script, I think. I'm tired to look for it.
So please, will anyone correct it and then send me back the solution ?
Thanks.