The score will count one point for each frame you manage to "stay alive".
the game will be much easier with a touch screen
The score will count one point for each frame you manage to "stay alive".
The score will count one point for each frame you manage to "stay alive".
The score will count one point for each frame you manage to "stay alive".
Template<title>
<P>OH NO!<p>
</p>Thats not right...<p>
</p>
<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;
function startGame() {
myGamePiece = new
component(30, 30, "red", 225, 225);
myGameArea.start();
}
var myGame Area = {
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);
window.addEventListener('keydown',function (e) {
e.preventDefault();
myGameArea.keys =
(myGameArea.keys || []);
myGameArea.keys[e.keyCode] =
(e.type == "keydown");
})
window.addEventListner('keyup', function (e) {
myGameArea.keys[e.keyCode] = (e.type == "keydown");
})
},
stop : function() {
clearInterval(this.interval);
},
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.width = width;
this.height = height;
this.speed = 0;
this.angle = 0;
this.moveAngle = 0;
this.x = x;
this.y = y;
this.update = function() {
ctx = myGameArea.context;
ctx.save();
ctx.translate(this.x, this.y);
ctx.rotate(this.angle);
ctx.fillStyle = color;
ctx.fillRect(this.width / -2, this.height / -2, this.width,
this.height);
ctx.restore();
}
this.newPOse = function() {
this.angle +=
this.moveAngle * Math.PI / 180;
this.x += this.speed *
Math.sin(this.angle);
this.y -= this.speed *
Math.cos(this.angle);
}
}
function updateGameArea() {
myGameArea.clear();
myGamePiece. moveAngle = 0;
myGamePiece.speed = 0;
if (myGameArea.keys &&
myGameArea.keys[37])
{myGamePiece.moveAngle = -1;
if (myGameArea.keys &&
myGameArea.keys[39]
{myGamePiece.speed= 1; }
if (myGameArea.keys &&
myGameArea.keys[40])
{myGamePiece.speed= -1; }
myGamePiece.newPos();
myGamePiece.update();
}
</script>
<p>Make sure the gamearea has focus, than use the arrow keys to move the red square around.<p>
</body>
</html>
<p> oh come on! i spent so much time and not even that worked!?</p>
<p> Ah ha! i have an idea!</p>
<p> you guys can share me your projects and things your learned!</p>