您的位置：首页 > Web前端 > JavaScript

html5&javascript贪吃蛇游戏

2012-11-23 10:46 134 查看

[代码] [JavaScript]代码

view
source

print ?

001	<!documentTYPE html>

002	<html lang= "en" >

<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;}

</style>

011	<script type= "text/javascript" >

012	function play_game()

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++)

040	map[i] = [];

042	// random placement of snake food

043	function rand_frog()

045	var x, y;

do

048	x = MR() * rect_w\|0;

049	y = MR() * rect_h\|0;

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);

056	// Default somewhere placement

057	rand_frog();

058	function set_game_speed()

060	if (easy)

062	X = (X+rect_w)%rect_w;

063	Y = (Y+rect_h)%rect_h;

065	--inc_score;

066	if (tn.length)

068	dir = tn.pop();

069	if ((dir % 2) !== (direction % 2))

071	direction = dir;

074	if ((easy \|\| (0 <= X && 0 <= Y && X <rect_w && Y <rect_h)) && 2 !== map[X][Y])

076	if (1 === map[X][Y])

078	score+= Math.max(5, inc_score);

079	inc_score = 50;

080	rand_frog();

frog++;

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)

091	dir = queue.pop()

092	map[dir[0]][dir[1]] = 0;

093	ctx.clearRect(dir[0] * 10, dir[1] * 10, 10, 10);

096	else if (!tn.length)

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);

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])

109	tn.unshift(code);

111	else if (-5 == code)

113	if (interval)

115	window.clearInterval(interval);

116	interval = 0;

else

120	interval = window.setInterval(set_game_speed, 60);

else

125	dir = sum +code;

126	if (dir == 44\|\|dir==94\|\|dir==126\|\|dir==171) {

127	sum+= code

128	} else if (dir === 218) easy = 1;

</script>

</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>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

html5&amp;javascript贪吃蛇游戏

[代码] [JavaScript]代码

html5&javascript贪吃蛇游戏