原始js做的贪吃蛇，如何用JavaScript做一个贪吃蛇游戏，贪吃蛇系列——01初级贪吃蛇_键盘的方向键，吃食物，撞墙死亡

最新推荐文章于 2024-08-16 14:54:44 发布

田江

最新推荐文章于 2024-08-16 14:54:44 发布

阅读量1.7k

点赞数 1

分类专栏： JavaScript从入门到精通 DOM 文章标签： javascript web前端开发 web应用 web开发

本文链接：https://blog.csdn.net/jiang7701037/article/details/78944878

版权

JavaScript从入门到精通同时被 2 个专栏收录

147 篇文章 80 订阅

订阅专栏

DOM

9 篇文章 0 订阅

订阅专栏

示意图：

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
	
	*{
		margin:0px;
		padding:0px;
	}
	
	ul{
		list-style:none;
		position:relative;
		width:600px;
		height:400px;
		background-color:green;
	}
	
	li{
		position:absolute;
		top:0px;
		width:20px;
		height:20px;
		border-radius:50%;
		background-color:red;
		text-align:center;
	}
	
	</style>
	<body >	
		<ul id="box">
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
		</ul>
		<input id="btnGo" type="button" value="走起" />
	</body>
</html>

<script type="text/javascript" src="js/move1704.js"></script>
<script type="text/javascript">

function $(id){
	return document.getElementById(id);
}

function initUI(){
	var lis = $("box").children;
	for(var i=0;i<lis.length;i++){		
		lis[i].style.left = (i*20)+"px";
		lis[i].style.top = "40px";
	}
}

var foodLeft;
var foodTop;

function genGood(){
	//2、创建食物
	var food = document.createElement("div");
	food.style.cssText = "position:absolute;width:20px;height:20px;border-radius:50%;background-color:black";
	food.style.left = foodLeft+"px";
	food.style.top = foodTop+"px";
	food.id = "foodDiv";
	document.body.appendChild(food);
}

//显示食物
function showFood(){
	//1、随机食物位置
	foodLeft = parseInt(Math.random()*600/20)*20;
	foodTop = parseInt(Math.random()*400/20)*20;
	
	genGood();
}

function eat(){
	//1、随机食物位置
	foodLeft = parseInt(Math.random()*600/20)*20;
	foodTop = parseInt(Math.random()*400/20)*20;
	
	$("foodDiv").style.left = foodLeft+"px";
	$("foodDiv").style.top = foodTop+"px";
	
	//2、增加一节；
	var li = document.createElement("li");
	$("box").appendChild(li);
	
}

var direction = "下";
var myTimer = null;

function startMove(){
	myTimer = setInterval(goStep,200);
}

function goStep(){
	//一、计算出一个合法的数据
	var lis = $("box").children;
	var left=parseFloat(lis[0].style.left);
	var top= parseFloat(lis[0].style.top);
	//计算头该出现位置
	switch(direction){
		case "左":left = left-20;break;
		case "上":top = top-20;break;
		case "右":left = left+20;break;
		case "下":top = top+20;break;
		default:;
	}
	
	if(left<0 || left>600-20 || top<0 || top>400-20){
		window.clearInterval(myTimer);
		alert("亲，您game over");
		return;
	}
	
	if(left==foodLeft && top == foodTop){
		eat();
	}
	
	//二、改变外观
	 
	//1、把除了第一个外的其它节移动
	for(var i=lis.length-1;i>0;i--){		
		lis[i].style.left = lis[i-1].style.left;
		lis[i].style.top = lis[i-1].style.top;
	}
	
	//2、改变第一节（根据方向）
	lis[0].style.left  = left+"px";
	lis[0].style.top  = top+"px";
	
}

window.onload = function(){
	initUI();
	
	$("btnGo").onclick = function(){
		startMove();
		showFood();
	}
	
	document.body.onkeydown = function(event){
		var evt = event || window.event;
		switch(evt.keyCode){
			case 37:direction="左";break;
			case 38:direction="上";break;
			case 39:direction="右";break;
			case 40:direction="下";break;
			default:;
		}
	}
}

</script>