版权声明：请点击关注 https://blog.csdn.net/weixin_42914677/article/details/82988897
2018年10月9日 21:05:01周四，瑞翼工坊
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>我的贪吃蛇test</title>
<script type="text/javascript" src="jquery-3.3.1.min.js" ></script>
<script type="text/javascript" src="snake.js" ></script>
<link rel="stylesheet" href="index.css" />
</head>
<body>
</body>
</html>
snake.js
$(document).ready(function(){
var mapDiv=new Mapdiv();
var snake=new Snake();
var food=new Food();
});
//地图
var Mapdiv=function(){
var div=$("<div></div>");
div.appendTo("body");
div.css(
{
"width": "800px",
"height": "500px",
"background-color":"darkgrey",
"position": "absolute"
});
div.attr("id","map_div");
};
//蛇
var Snake=function(){
var div=$("<div></div>");
div.appendTo("#map_div");
div.css(
{
"width": "50px",
"height": "50px",
"background-color":"red",
"position": "absolute",
"margin-left":0,
"margin-top":0
});
};
//食物
var Food=function(){
var div=$("<div></div>");
div.appendTo("#map_div");
this.x=parseInt(Math.random()*16);
this.y=parseInt(Math.random()*10);
div.css(
{
"width": "50px",
"height": "50px",
"background-color":"yellow",
"position": "absolute",
"margin-left":this.x*50,
"margin-top":this.y*50
});
}