[代码] [JavaScript]代码
001 | <!documentTYPE html> |
002 | <html lang= "en" > |
003 | <head> |
004 | <meta charset= "utf-8" /> |
005 | <title>Play Snake Game</title> |
006 | <style type= "text/css" > |
007 | body {text-align:center;} |
008 | canvas { border:5px dotted #ccc; } |
009 | h1 { font-size:50px; text-align: center; margin: 0; padding-bottom: 25px;} |
010 | </style> |
011 | <script type= "text/javascript" > |
012 | function play_game() |
013 | { |
014 | var level = 160; // Game level, by decreasing will speed up |
015 | var rect_w = 45; // Width |
016 | var rect_h = 30; // Height |
017 | var inc_score = 50; // Score |
018 | var snake_color = "#006699" ; // Snake Color |
019 | var ctx; // Canvas attributes |
020 | var tn = []; // temp directions storage |
021 | var x_dir = [-1, 0, 1, 0]; // position adjusments |
022 | var y_dir = [0, -1, 0, 1]; // position adjusments |
023 | var queue = []; |
024 | var frog = 1; // defalut food |
025 | var map = []; |
026 | var MR = Math.random; |
027 | var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positions |
028 | var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions |
029 | var direction = MR() * 3 | 0; |
030 | var interval = 0; |
031 | var score = 0; |
032 | var sum = 0, easy = 0; |
033 | var i, dir; |
034 | // getting play area |
035 | var c = document.getElementById( 'playArea' ); |
036 | ctx = c.getContext( '2d' ); |
037 | // Map positions |
038 | for (i = 0; i < rect_w; i++) |
039 | { |
040 | map[i] = []; |
041 | } |
042 | // random placement of snake food |
043 | function rand_frog() |
044 | { |
045 | var x, y; |
046 | do |
047 | { |
048 | x = MR() * rect_w|0; |
049 | y = MR() * rect_h|0; |
050 | } |
051 | while (map[x][y]); |
052 | map[x][y] = 1; |
053 | ctx.fillStyle = snake_color; |
054 | ctx.strokeRect(x * 10+1, y * 10+1, 8, 8); |
055 | } |
056 | // Default somewhere placement |
057 | rand_frog(); |
058 | function set_game_speed() |
059 | { |
060 | if (easy) |
061 | { |
062 | X = (X+rect_w)%rect_w; |
063 | Y = (Y+rect_h)%rect_h; |
064 | } |
065 | --inc_score; |
066 | if (tn.length) |
067 | { |
068 | dir = tn.pop(); |
069 | if ((dir % 2) !== (direction % 2)) |
070 | { |
071 | direction = dir; |
072 | } |
073 | } |
074 | if ((easy || (0 <= X && 0 <= Y && X < rect_w && Y < rect_h)) && 2 !== map[X][Y]) |
075 | { |
076 | if (1 === map[X][Y]) |
077 | { |
078 | score+= Math.max(5, inc_score); |
079 | inc_score = 50; |
080 | rand_frog(); |
081 | frog++; |
082 | } |
083 | //ctx.fillStyle("#ffffff"); |
084 | ctx.fillRect(X * 10, Y * 10, 9, 9); |
085 | map[X][Y] = 2; |
086 | queue.unshift([X, Y]); |
087 | X+= x_dir[direction]; |
088 | Y+= y_dir[direction]; |
089 | if (frog < queue.length) |
090 | { |
091 | dir = queue.pop() |
092 | map[dir[0]][dir[1]] = 0; |
093 | ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10); |
094 | } |
095 | } |
096 | else if (!tn.length) |
097 | { |
098 | var msg_score = document.getElementById( "msg" ); |
099 | msg_score.innerHTML = "Thank you for playing game.<br /> Your Score : <b>" +score+ "</b><br /><br /><input type='button' value='Play Again' onclick='window.location.reload();' />" ; |
100 | document.getElementById( "playArea" ).style.display = 'none' ; |
101 | window.clearInterval(interval); |
102 | } |
103 | } |
104 | interval = window.setInterval(set_game_speed, level); |
105 | document.onkeydown = function (e) { |
106 | var code = e.keyCode - 37; |
107 | if (0 <= code && code < 4 && code !== tn[0]) |
108 | { |
109 | tn.unshift(code); |
110 | } |
111 | else if (-5 == code) |
112 | { |
113 | if (interval) |
114 | { |
115 | window.clearInterval(interval); |
116 | interval = 0; |
117 | } |
118 | else |
119 | { |
120 | interval = window.setInterval(set_game_speed, 60); |
121 | } |
122 | } |
123 | else |
124 | { |
125 | dir = sum + code; |
126 | if (dir == 44||dir==94||dir==126||dir==171) { |
127 | sum+= code |
128 | } else if (dir === 218) easy = 1; |
129 | } |
130 | } |
131 | } |
132 | </script> |
133 | </head> |
134 | <body onload= "play_game()" > |
135 | <h1>Play Snake Game</h1> |
136 | <div id= "msg" ></div> |
137 | <canvas id= "playArea" width= "450" height= "300" >Sorry your browser does not support HTML5</canvas> |
138 | </body> |
139 | </html> |