Here’s my code, the traps are the slightly visible squares. The user controls a red square (with arrow keys) and cannot touch the walls or traps or else the game resets. Additionally, if the user touches the green line, the game ends.
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Maze Game</title>
</head>
<body>
<header> </header>
<nav> </nav>
<section>
<div>
<canvas id="canvas" width="907" height="907">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
var dx = 5;
var dy = 5;
var x = 345;
var y = 135;
var WIDTH = 907;
var HEIGHT = 907;
var img = new Image();
var collision = 0;
//set minutes
var mins = 2;
//calculate the seconds
var secs = mins * 60;
//countdown function is evoked when page is loaded
function countdown() {
setTimeout('Decrement()', 60);
}
//Decrement function decrement the value.
function Decrement() {
if (document.getElementById) {
minutes = document.getElementById("minutes");
seconds = document.getElementById("seconds");
//if less than a minute remaining
//Display only seconds value.
if (seconds < 59) {
seconds.value = secs;
}
//Display both minutes and seconds
//getminutes and getseconds is used to
//get minutes and seconds
else {
minutes.value = getminutes();
seconds.value = getseconds();
}
//when less than a minute remaining
//colour of the minutes and seconds
//changes to red
if (mins < 1) {
minutes.style.color = "red";
seconds.style.color = "red";
}
//if seconds becomes zero,
//then page alert time up
if (mins < 0) {
alert('Times up!');
minutes.value = 0;
seconds.value = 0;
document.location.reload();
clearInterval(interval); // Needed for Chrome to end game
}
//if seconds > 0 then seconds is decremented
else {
secs--;
setTimeout('Decrement()', 1000);
} }
}
function getminutes() {
//minutes is seconds divided by 60, rounded down
mins = Math.floor(secs / 60);
return mins;
}
function getseconds() {
//take minutes remaining (as seconds) away
//from total seconds remaining
return secs - Math.round(mins * 60);
}
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
ctx.drawImage(img, 0, 0);
}
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
img.src = "canvas.png";
return setInterval(draw, 10);
}
function doKeyDown(evt){
switch (evt.keyCode) {
case 38: /* Up arrow was pressed */
if (y - dy > 0){
y -= dy;
clear();
checkcollision();
if (collision == 1){
y += dy;
collision = 0;
}
}
break;
case 40: /* Down arrow was pressed */
if (y + dy < HEIGHT ){
y += dy;
clear();
checkcollision();
if (collision == 1){
y -= dy;
collision = 0;
}
}
break;
case 37: /* Left arrow was pressed */
if (x - dx > 0){
x -= dx;
clear();
checkcollision();
if (collision == 1){
x += dx;
collision = 0;
}
}
break;
case 39: /* Right arrow was pressed */
if ((x + dx < WIDTH)){
x += dx;
clear();
checkcollision();
if (collision == 1){
x -= dx;
collision = 0;
}
}
break;
}
}
function checkcollision() {
var imgd = ctx.getImageData(x, y, 15, 15);
var pix = imgd.data;
for (var i = 0; n = pix.length, i < n; i += 4) {
if (pix[i] == 0) {
collision = 1;
}
} }
function draw() {
clear();
ctx.fillStyle = "red";
rect(x, y, 15,15);
}
init();
window.addEventListener('keydown',doKeyDown,true);
</script>
<body onload="countdown();">
<div>
Time Left ::
<input id="minutes" type="text" style="width: 16px;
border: none; font-size: 30px;
font-weight: bold; color: black;"><font size="30"> :
</font>
<input id="seconds" type="text" style="width: 40px;
border: none; font-size: 30px;font-weight: bold; color: black;">
</section>
<aside> </aside>
<footer> </footer>
</body>
</html>
</html>
. To the best of your knowledge: Does this code work? \$\endgroup\$