html5&javascript贪吃蛇游戏

最新推荐文章于 2024-02-16 13:18:31 发布

莫兰迪不会没有瓶子

最新推荐文章于 2024-02-16 13:18:31 发布

阅读量886

点赞数

分类专栏： html5

html5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

[代码] [JavaScript]代码

 
<!documentTYPE html>
 
<html lang="en">
 
<head>
 
<meta charset="utf-8" />
 
<title>Play Snake Game</title>
 
<style type="text/css">
 
body {text-align:center;}
 
canvas { border:5px dotted #ccc; }
 
h1 { font-size:50px; text-align: center; margin: 0; padding-bottom: 25px;}
 
</style>
 
<script type="text/javascript">
 
function play_game()
 
{
 
var level = 160; // Game level, by decreasing will speed up
 
var rect_w = 45; // Width
 
var rect_h = 30; // Height
 
var inc_score = 50; // Score
 
var snake_color = "#006699"; // Snake Color
 
var ctx; // Canvas attributes
 
var tn = []; // temp directions storage
 
var x_dir = [-1, 0, 1, 0]; // position adjusments
 
var y_dir = [0, -1, 0, 1]; // position adjusments
 
var queue = [];
 
var frog = 1; // defalut food
 
var map = [];
 
var MR = Math.random;
 
var X = 5 + (MR() * (rect_w - 10))|0; // Calculate positions
 
var Y = 5 + (MR() * (rect_h - 10))|0; // Calculate positions
 
var 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 positions
 
for (i = 0; i < rect_w; i++)
 
{
 
map[i] = [];
 
}
 
// random placement of snake food
 
function rand_frog()
 
{
 
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 placement
 
rand_frog();
 
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;
 
rand_frog();
 
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 msg_score = document.getElementById("msg");
 
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();' />";
 
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="msg"></div>
 
<canvas id="playArea" width="450" height="300">Sorry your browser does not support HTML5</canvas>
 
</body>
 
</html>