Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<canvas id="playGround" width="400" height="400"></canvas>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
#playGround { background-color: #d0d0d0; border: 1px solid #000; }
CSS
Autoformát
CSS reset
Až na konci
var playgnd = document.getElementById("playGround"); var ctx = playgnd.getContext("2d"); var pressedKeys = {}; var keys = { UP : 38, RIGHT : 39, DOWN : 40, LEFT : 37 }; var obstacles = [ [20, 50, 60, 30], [240, 170, 40, 50], [80, 280, 20, 60] ]; var infoX, infoY; function overlaps(x1, y1, w1, h1, x2, y2, w2, h2) { function getPositions(x, y, w, h) { return [ [ x, x + w ], [ y, y + h ] ]; } function writeSide(type, p1, p2) { if(type === "x") { infoX = p1[0] < p2[0] ? "right":"left"; } else if (type === "y") { infoY = p1[0] < p2[0] ? "bottom":"top"; } } function comparePositions(p1, p2) { var r1, r2; r1 = p1[0] < p2[0] ? p1 : p2; r2 = p1[0] < p2[0] ? p2 : p1; return r1[1] > r2[0] || r1[0] === r2[0]; } var pos1 = getPositions(x1, y1, w1, h1), pos2 = getPositions(x2, y2, w2, h2); writeSide("x", pos1[0], pos2[0]); writeSide("y", pos1[1], pos2[1]); return comparePositions( pos1[0], pos2[0] ) && comparePositions( pos1[1], pos2[1] ); } function checkIfOverlaps() { var booleanOverlap = false; for(var i in obstacles) { if(overlaps(obstacles[i][0], obstacles[i][1], obstacles[i][2], obstacles[i][3], carX, carY, 50, 70)) { booleanOverlap = true; break; } } return booleanOverlap; } document.onkeydown = function(e) {pressedKeys[e.which] = true}; document.onkeyup = function(e) {pressedKeys[e.which] = false}; var carX = 180; var carY = 320; function drawCar(x, y) { ctx.fillStyle = "#0a0"; ctx.fillRect(x, y, 50, 70); ctx.fillStyle = "#000"; carX = x; carY = y; } function drawObstacles() { for(var i in obstacles) { ctx.strokeRect(obstacles[i][0], obstacles[i][1], obstacles[i][2], obstacles[i][3]); } } drawObstacles(); drawCar(carX, carY); var idxKolize = 0; function gameloop() { if (pressedKeys[keys.RIGHT] || pressedKeys[keys.LEFT]) { ctx.clearRect(0, 0, playgnd.offsetWidth, playgnd.offsetHeight); var dir = pressedKeys[keys.LEFT] ? -1 : 1; drawCar(carX + (5 * dir), carY); drawObstacles(); if (checkIfOverlaps()) { ctx.clearRect(0, 0, playgnd.offsetWidth, playgnd.offsetHeight); switch(infoX) { case "left": drawCar(carX - 5, carY); break; case "right": drawCar(carX + 5, carY); break; } drawObstacles(); } } if (pressedKeys[keys.UP] || pressedKeys[keys.DOWN]) { ctx.clearRect(0, 0, playgnd.offsetWidth, playgnd.offsetHeight); var dir = pressedKeys[keys.UP] ? -1 : 1; drawCar(carX, carY + (5*dir)); drawObstacles(); if (checkIfOverlaps()) { ctx.clearRect(0, 0, playgnd.offsetWidth, playgnd.offsetHeight); switch(infoY) { case "top": drawCar(carX, carY - 5); break; case "bottom": drawCar(carX, carY + 5); break; } drawObstacles(); } } setTimeout(gameloop, 30); } gameloop();
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>