贪吃蛇完整代码

最新推荐文章于 2024-06-26 09:12:29 发布

一见深情

最新推荐文章于 2024-06-26 09:12:29 发布

阅读量1.2w

点赞数 2

文章标签：贪吃蛇完整版 html5贪吃蛇 css3+html5+JavaScrip

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Q___0/article/details/72771321

版权

本文未经博主允许不得转载：

闲来无事，勤能补拙；

贪吃蛇代码-----用来练手仅供参考：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
	body{
		background-image: url(body.jpg);
		background-repeat: no-repeat;
	}
	div{
		width: 1180px;
		height: 600px;
		border: 10px solid #666666;
		background: #EEEEEE;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30px;  
	}
	div+div{
		width: 1180px;
		height: 200px;
		border: 10px solid #666666;
		background: #c6c5d3;
		margin: auto;
	}
	div+div>input{
		margin-top: 80px;
		margin-left: 30px;
		width: 100px;
		height: 50px;
	}
	div+div>select{
		margin-top: 80px;
		margin-left: 30px;
		width: 100px;
		height: 50px;
	}
	</style>
</head>
<body>
	<div>
		<canvas id="snake" width="1180" height="600" style="border: 1px solid #666"></canvas>
	</div>
	<div>
		<input type="button" name="begin" value="重新开始" οnclick="refrash()">
		<input type="button" name="stope" value="暂停" οnclick="pause()" id="pause_begin">
		<input type="text" name="score" value="得分" id="score" readOnly="true" style="text-align:center;color:#FF0000;">
		<input type="button" name="speed" value="点击加速" οnclick="speedSnake()" style="text-align:center;color:#FF0000;" id="speedSnake">
		<select id="model" readOnly="true" style="text-align:center;color:#FF0000;">
			<option value="1" selected="selected">默认</option>
			<option value="2">无敌</option>
		</select>		
		<textarea name="注意" cols="65" rows="1" style="margin-left: 600px;margin-top: 40px" readOnly="true">注意事项：吃到150分之后，每吃50分加速10ms，初始速度为200ms
		</textarea> 
	</div>
	<script type="text/javascript">
		var context=document.getElementById("snake");
		var ctx=context.getContext("2d");
		var snake=[{x:3,y:7},{x:3,y:6},{x:3,y:5},{x:3,y:4}];//蛇身
		var dir=40;
		var food=[];
		var scoreValue=0;
		var speed=200;
		// 键盘控制变量
		document.οnkeydοwn=function(event){
			//alert(event.keyCode);//判断键盘值
			dir = (event.keyCode>=37 
				&& event.keyCode<=40 
				&& Math.abs((event.keyCode-dir))!=2
				)?event.keyCode:dir;
		}
		function onframe(){
			var model=document.getElementById("model");
			if(model.options[model.selectedIndex].value==1){
				RuleDie();
			}else if(model.options[model.selectedIndex].value==2){
				RuleNoDie();
				free();
			}
			drow();
			createFoodVar();
			ctx.beginPath();
			ctx.fillRect(food[0].x*20,food[0].y*20,20,20);
			ctx.closePath();
			crashEat();
		}
		// 自动爬行
		var timer=window.setInterval(onframe,speed);
		// 画表格，画蛇，画食物
		function drow(){
			//控制蛇的移动
			switch(dir){
				case 37:
					snake[0].x=snake[1].x-1;
					snake[0].y=snake[1].y;
					break;
				case 38:
					snake[0].x=snake[1].x;
					snake[0].y=snake[1].y-1;
					break;
				case 39:
					snake[0].x=snake[1].x+1;
					snake[0].y=snake[1].y;
					break;
				case 40:
					snake[0].x=snake[1].x;
					snake[0].y=snake[1].y+1;
					break;
			}
			ctx.clearRect(0,0,context.width,context.height);
			//画格子
			for(var j=0;j<=context.width;j+=20){
				ctx.beginPath();
				ctx.moveTo(j,0);
				ctx.lineTo(j,context.width);
				ctx.moveTo(0,j);
				ctx.lineTo(context.width,j);
				ctx.strokeStyly="#eee";
				ctx.stroke();
				ctx.closePath();
			}
			//画蛇
			for(var i=0;i<snake.length;i++){
				ctx.beginPath();
				ctx.fillRect(snake[i].x*20,snake[i].y*20,20,20);
				ctx.closePath();
			}
		}
		// 创造食物变量
		function createFoodVar(){
			if(food.length==0){
				createFood();
				function createFood(){
					food=[{x:parseInt(Math.random()*(context.width)/20),
						y:parseInt(Math.random()*(context.height)/20)}];
					for(var i=0;i<snake.length;i++){
						if ((food[0].x==snake[i].x)&&(food[0].y==snake[i].y)) {
							createFood();
						}
					}
				}
			}
		}
		//蛇捕食
		function crashEat(){
			if (food.length!=0 ) {
				if((snake[0].x==food[0].x && snake[0].y==food[0].y)){
					snake.push(food);
					food=[];
					score();
				}
			}
		}
		//创建规则让蛇死
		function RuleDie(){
			var flag=false;
			for(var i=1;i<snake.length;i++){
				if(snake[0].x==snake[i].x&&snake[0].y==snake[i].y){
					flag=true;
				}
			}
			if ((snake[0].x<=0&&dir==37)||(snake[0].x>=context.width/20-1&&dir==39)
			 || (snake[0].y<=0&&dir==38)||(snake[0].y>=context.height/20-1&&dir==40)) {
				alert("头部擦伤，请疗养，再来一局吧！");
				window.clearInterval(timer);
			}else if(flag){
				alert("咬到自己了,快住口！");
				window.clearInterval(timer);
			}else{
				snake.unshift(snake.pop());
			}
		}
		//创建规则不死技能
		function RuleNoDie(){
			if (snake[0].x<0&&dir==37) {
				snake[0].x=context.width/20;
			}
			if (snake[0].x>=context.width/20&&dir==39) {
				snake[0].x=0;
			}
			if (snake[0].y>=context.height/20&&dir==40) {
				snake[0].y=0;
			}
			if (snake[0].y<0&&dir==38) {
				snake[0].y=context.height/20;
			}
			snake.unshift(snake.pop());
		}
		//暂停
		function pause(){
			window.clearInterval(timer);
			var pause=document.getElementById("pause_begin");
			pause.setAttribute("value","继续");
			pause.setAttribute("onclick","begin()");
		}
		//继续
		function begin(){
			timer=window.setInterval(onframe,speed);
			var pause=document.getElementById("pause_begin");
			pause.setAttribute("value","暂停");
			pause.setAttribute("onclick","pause()");
		}
		//重新开始 
		function refrash(){
			window.location.reload();
		}
		//得分
		function score(){
			scoreValue+=10;
			var score=document.getElementById("score");
			score.setAttribute("value",scoreValue);
		}
		//自由行动
		function free(){
			createFoodVar();
			if(food[0].x<snake[1].x){
				dir=37;
			}
			if(food[0].x>snake[1].x){
				dir=39;
			}
			if (food[0].y<snake[1].y) {
				dir=38;
			}
			if (food[0].y>snake[1].y) {
				dir=40;
			}
		}
		//点击加速
		function speedSnake(){
			speed-=10;
			if (speed<=0) {speed=0;}
			var speedSnake=document.getElementById("speedSnake");
			speedSnake.setAttribute("value","当前速度:"+speed+"ms");
			window.clearInterval(timer);
			timer=window.setInterval(onframe,speed);
		}
	</script>
</body>
</html>

注：可以设置一个背景图，是界面更加美观！

一见深情

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
贪吃蛇完整代码

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <style type="text/css"> body{ background-image: url(body.jpg); background-repeat: no-repeat; } div{ width: 1180px; height: 600px; border: 10px solid #666666; background:
复制链接

扫一扫