<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><title>Snake Game</title><style type="text/css">body {text-align:center;}canvas { border:7px dashed #4A4747 }h1 { font-size:35px; text-align: center; margin: 0; padding-bottom: 25px; text-decoration: underline; font-family: Geneva; color: #0520A5;}</style><script type="text/javascript">function play_game(){var level = 160; // Game level, by decreasing will speed upvar rect_w = 45; // Widthvar rect_h = 30; // Heightvar inc_score = 50; // Scorevar snake_color = "#0520A5"; // Snake Colorvar ctx; // Canvas attributesvar tn = []; // temp directions storagevar x_dir = [-1, 0, 1, 0]; // position adjusmentsvar y_dir = [0, -1, 0, 1]; // position adjusmentsvar queue = [];var frog = 1; // defalut foodvar map = [];var MR = Math.random;var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positionsvar Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positionsvar direction = MR() * 3 | 0;var interval = 0;var score = 0;var sum = 0, easy = 0;var i, dir;// getting play area var c = document.getElementById('playArea');ctx = c.getContext('2d');// Map positionsfor (i = 0; i < rect_w; i++){map[i] = [];}// random placement of snake foodfunction random_snake(){var x, y;do{x = MR() * rect_w|0;y = MR() * rect_h|0;}while (map[x][y]);map[x][y] = 1;ctx.fillStyle = snake_color;ctx.strokeRect(x * 10+1, y * 10+1, 8, 8);}// Default somewhere placementrandom_snake();function set_game_speed(){if (easy){X = (X+rect_w)%rect_w;Y = (Y+rect_h)%rect_h;}--inc_score;if (tn.length){dir = tn.pop();if ((dir % 2) !== (direction % 2)){direction = dir;}}if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y]){if (1 === map[X][Y]){score+= Math.max(5, inc_score);inc_score = 50;random_snake();frog++;}//ctx.fillStyle("#ffffff");ctx.fillRect(X * 10, Y * 10, 9, 9);map[X][Y] = 2;queue.unshift([X, Y]);X+= x_dir[direction];Y+= y_dir[direction];if (frog < queue.length){dir = queue.pop()map[dir[0]][dir[1]] = 0;ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);}}else if (!tn.length){var show_score = document.getElementById("show");show_score.innerHTML = "You lose!<br /> <u>Your Score:</u> <b>"+score+"</b><br><br> Want to try again?<br><br><input type='button' value='Play Again' onclick='window.location.reload();' />";document.getElementById("playArea").style.display = 'none';window.clearInterval(interval);}}interval = window.setInterval(set_game_speed, level);document.onkeydown = function(e) {var code = e.keyCode - 37;if (0 <= code && code < 4 && code !== tn[0]){tn.unshift(code);}else if (-5 == code){if (interval){window.clearInterval(interval);interval = 0;}else{interval = window.setInterval(set_game_speed, 60);}}else{dir = sum + code;if (dir == 44||dir==94||dir==126||dir==171) {sum+= code} else if (dir === 218) easy = 1;}}}</script></head><body onload="play_game()"><h1>Play Snake Game</h1><div id="show"></div><canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5. Try using like Chrome or Firefox.</canvas></body></html>
Fun fact: this is real.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_formatting_intro3
copy paste it.
0 comments