期中HTML代码及技术博客

最新推荐文章于 2024-07-30 10:31:44 发布

bo o ya ka

最新推荐文章于 2024-07-30 10:31:44 发布

阅读量212

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dakaceng/p/5418885.html

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>贪吃蛇</title>
	<style type="text/css">
	*{margin:0;padding: 0;font-family: "Microsoft YaHei";}
	#page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; }
	#yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;}
	#mark{font-weight: 800;}
	#mark_con{ color: red; }
	button{width: 50px; }
	a{text-decoration:none;}
	</style>
	<script type="text/javascript">
	//伪常量
	var BLOCK_SIZE = 20; //格子大小
	var COLS = 40; //列数
	var ROWS = 30; //行数
	//变量
	var snakes = []; //保存蛇坐标
	var c = null; //绘图对象
	var toGo = 3; //行进方向
	var snakecount = 4; //蛇身数量
	var interval = null; //计时器
	var foodX = 0; //食物X轴坐标
	var foodY = 0; //食物Y轴坐标
	var oMark = null; //分数显示框
	var isPause = false; //是否暂停
	// 绘图函数
	function draw(){
	c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS);
	//画出横线
	for( var i = 1; i <= ROWS; i++ ) {
	c.beginPath();
	c.moveTo(0, i * BLOCK_SIZE);
	c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE);
	c.strokeStyle = "gray";
	c.stroke();
	}
	//画出竖线
	for(var i = 1; i <= COLS; i++){
	c.beginPath();
	c.moveTo(i * BLOCK_SIZE, 0);
	c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS);
	c.stroke();
	}
	//画出蛇
	for (var i = 0; i < snakes.length; i++){
	c.beginPath();
	c.fillStyle = "green";
	c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE);
	c.moveTo(snakes[i].x, snakes[i].y);
	c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y);
	c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE);
	c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE);
	c.closePath();
	c.strokeStyle = "white";
	c.stroke();
	}
	//画出食物
	c.beginPath();
	c.fillStyle = "yellow";
	c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE);
	c.moveTo(foodX, foodY);
	c.lineTo(foodX + BLOCK_SIZE, foodY);
	c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE);
	c.lineTo(foodX, foodY + BLOCK_SIZE);
	c.closePath();
	c.strokeStyle = "red";
	c.stroke();
	}
	//游戏初始化
	function start(){
	for( var i = 0; i < snakecount; i++){
	snakes[i] = {x: i * BLOCK_SIZE, y: 0};
	}
	addFood();
	draw();
	oMark.innerHTML = 0;
	}
	//移动函数
	function move(){
	switch(toGo){
	case 1: //左边
	snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y});
	break;
	case 2: //上边
	snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE});
	break;
	case 3: //右边
	snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y});
	break;
	case 4: //下边
	snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE});
	break;
	default:;
	}
	snakes.shift();
	isEat();
	isDie();
	draw();
	}
	//吃到食物判断
	function isEat(){
	if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) {
	oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString();
	addFood();
	addSnake();
	}
	}
	//添加蛇身
	function addSnake(){
	snakecount++;
	snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS});
	}
	//交互响应函数
	function keydown(keyCode){
	switch(keyCode){
	case 37: //左边
	if(toGo != 1 && toGo != 3) toGo = 1;break;
	case 38: //上边
	if(toGo != 2 && toGo != 4) toGo = 2;break;
	case 39: //右边
	if(toGo != 3 && toGo != 1) toGo = 3;break;
	case 40: //下的
	if(toGo != 4 && toGo != 2) toGo = 4;break;
	case 80: //开始/暂停
	if(isPause){
	interval = setInterval(move,100);
	isPause = false;
	document.getElementById('pause').innerHTML = "Pause";
	}else{
	clearInterval(interval);
	isPause = true;
	document.getElementById('pause').innerHTML = "Start";
	}
	break;
	}
	}
	//制造食物
	function addFood(){
	foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE;
	foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE;
	// console.log(foodX + " -- " + foodY);
	}
	//死亡判断
	function isDie(){
	if(snakes[snakecount - 1].x == -20 \|\| snakes[snakecount - 1].x == BLOCK_SIZE * COLS
	\|\| snakes[snakecount - 1].y == -20 \|\| snakes[snakecount - 1].y == BLOCK_SIZE * ROWS){
	alert("Game Over!");
	clearInterval(interval);
	}
	for(var i = 0; i < snakecount - 1; i++){
	if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){
	clearInterval(interval);
	alert("Game Over!");
	}
	}
	}
	// 启动函数
	window.onload = function(){
	c = document.getElementById('canvas').getContext('2d');
	oMark = document.getElementById('mark_con');
	start();
	interval = setInterval(move,100);
	document.onkeydown = function(event){
	var event = event \|\| window.event;
	keydown(event.keyCode);
	}
	}
	</script>
	</head>
	<body>
	<div id="page">
	<div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div>
	<div id="help">
	<div id="mark">得分：<span id="mark_con"></span></div>
	<div id="helper">
	<table>
	<tr>
	<td></td>
	<td><button οnclick="keydown(38);">上</button></td>
	<td></td>
	</tr>
	<tr>
	<td><button οnclick="keydown(37);">左</button></td>
	<td><button οnclick="keydown(80);" id="pause">暂停</button></td>
	<td><button οnclick="keydown(39);">右</button></td>
	</tr>
	<tr>
	<td></td>
	<td><button οnclick="keydown(40);">下</button></td>
	<td></td>
	</tr>
	</table><a href="index.html">再玩一次</a>
	</div>
	</div>
	</div>


	</div>


	</body>
	</html>