html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<style>
canvas {
border: 1px solid black;
width: 100%;
}
* {
-webkit-user-select: none; /*disable text selection */
}
</style>
</head>
<body>
<h1>Javascript game</h1>
<p>Left-Click on Canvas to move your player. Try to reach the goal without being caught by the enemies</p>
<canvas id="mycanvas" width="640" height="360" ></canvas>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
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.addEventListener("load",function() {
//constants
var GAME_WIDTH = 640;
var GAME_HEIGHT = 360;
//keep the game going
var gameLive = true;
//current level
var level = 1;
var life = 5;
//random color
var color = "#"+((1<<24)*Math.random()|0).toString(16);
//enemies
var enemies = [
{
x: 100, //x coordinate
y: 100, //y coordinate
speedY: 2, //speed in Y
w: 40, //width
h: 40 //heght
},
{
x: 200,
y: 0,
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Laufen