html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Game</title>
</head>
<body>
<canvas id="canvas"></canvas>
<center>
<button id="left">Left</button>
<button id="right">Right</button>
</center>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body
{
background-color: gray;
}
canvas
{
background-color: #323232;
box-shadow: 0px 0px 10px black;
/*position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);*/
}
button
{
width: 30%;
font-size: 1em;
box-shadow: 0px 0px 10px black;
margin-top:10px;
}
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.onload=function()
{
alert("This is my First Canvas Game.")
alert("My Score is 400\n")
var canvas = document.getElementById("canvas");
var ctx=canvas.getContext("2d");
canvas.width=innerWidth-15;
canvas.height=innerHeight-200;
var x = 50;
var y = 50;
var dx=4;
var dy=4;
var r = 20;
var rx=200;
var s=0;
var ry=canvas.height-10;
var ri=document.getElementById("right");
var le=document.getElementById("left");
function animate()
{
requestAnimationFrame(animate);
ctx.clearRect(0,0,innerWidth,innerHeight);
ctx.beginPath();
ctx.arc(x,y,20,0,2*Math.PI);
ctx.fillStyle="white";
ctx.fill();
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Laufen