⽤js写⼀个简单的贪吃蛇⼩游戏⼀个⽤原⽣js写的贪吃蛇⼩游戏，贪吃蛇碰到⾃⼰⾝体游戏会结束
效果图：
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<button>按钮</button>
</body>
<script type="text/javascript">
var timerId;
document.querySelector("button").onclick = function(){
// 让蛇动起来 - 定时器移动
timerId = setInterval(()=>{
},100)
}
// 地图对象
function Map(){
/
/ 地图对象负责创建范围，放蛇和⾷物
this.map = ateElement("div");
setStyle(this.map,{
width:"800px",
height:"500px",
background:"pink",
border:"2px solid #000",
position:"relative"
})
// 将地图放在body中
document.body.appendChild(this.map)
}
var m = new Map()
// ⾷物对象
function Food(){
// ⾷物对象负责⽣成，消失(地图⼲掉他)
this.food = ateElement("div");
setStyle(this.food,{
width:"10px",
height:"10px",
background:"blue",
position:"absolute",
left:parseInt(getRandom(0,m.map.clientWidth-10)/10)*10+"px",
top:parseInt(getRandom(0,m.map.clientHeight-10)/10)*10+"px",
})
// 将⾷物放到地图中
m.map.appendChild(this.food)
}
var f = new Food()
// 蛇对象
function Snake(){
// 定义蛇的⾝体的left和top
this.body = [
{
x:0,
y:0
},
{
x:10,
y:0
},
{
x:20,
y:0
}
]
// 定义蛇的移动⽅向
this.direction = 'right';
// 通过按键改变蛇的移动⽅向
this.changeDirection();
// 显⽰蛇的⾝体
this.show()
}
Snake.prototype.changeDirection = function(){
var e = e || window.event;
// 获取键码
var code = e.keyCode || e.which;
// 根据键码改变direction属性
// console.log(code); // 119 115 97 100
switch(code){
case119:
this.direction = "up";
break;
case115:
this.direction = "down";
break;
case97:
this.direction = "left";
break;
case100:
this.direction = "right";
break;
}
}
}
ve = function(){
console.log(this.direction);
// 蛇移动需要⼀个⽅向 - 默认⽅向
// 蛇在移动过程中，不管是哪个⽅向，移动⼀步，蛇的第⼆节⾝体就是蛇头原来的位置，蛇的最后⼀节⾝体就是，第⼆节⾝体原来的位置
for(var i=0;i<this.body.length-1;i++){
this.body[i].x = this.body[i+1].x
this.body[i].y = this.body[i+1].y
}
// console.log(this.body);
// 单独设置蛇头
switch(this.direction){
case'up':
this.body[this.body.length-1].y -= 10;
break;
case'down':
this.body[this.body.length-1].y += 10;
break;
case'left':
this.body[this.body.length-1].x -= 10;
break;
case'right':
this.body[this.body.length-1].x += 10;
break;
}
// console.log(this.body);
// 根据新的数组显⽰⾝体
this.show()
this.eat()
// 蛇不能撞墙
this.die()
}
Snake.prototype.die = function(){
// 撞墙
if(this.body[this.body.length-1].x>m.map.clientWidth || this.body[this.body.length-1].x<0 || this.body[thi
s.body.length-1].y<0 || this.body[this.body.length-1].y>m.map.clientHeight){        clearInterval(timerId)
alert("GAME OVER");
}
// 撞⾝体
for(var i=0;i<this.body.length-1;i++){
if(this.body[i].x === this.body[this.body.length-1].x && this.body[i].y === this.body[this.body.length-1].y){
clearInterval(timerId)
alert("GAME OVER");
}
}
}
Snake.prototype.eat = function(){
// 蛇头的x和y跟⾷物的left和top完全相等的时候就吃到了
if(this.body[this.body.length-1].x === f.food.offsetLeft && this.body[this.body.length-1].y === f.food.offsetTop){
// 吃到了
// 蛇的⾝体要加⼀节
var oneBody = {
x:this.body[0].x,
y:this.body[0].y
}
// 将这个对象放到⾝体数组的最前⾯
this.body.unshift(oneBody)
// 根据新的数组⽣成新的⾝体
this.show()
// ⾷物要消失，并再⽣成⼀个
f.veChild(f.food)
f = new Food()
}
}
Snake.prototype.show = function(){
// 先删除之前的⾝体 - 再创建新的⾝体
var snakes = m.map.querySelectorAll(".snake")
// console.log(snakes);
if(snakes.length !== 0){
for(var i=0;i<snakes.length;i++){
snakes[i].veChild(snakes[i])        }
}
// 遍历⾝体属性，创建div
for(var i=0;i<this.body.length;i++){
var div = ateElement("div");
div.className = 'snake';
setStyle(div,{
width:"10px",
height:"10px",
background:"#0f0",
position:"absolute",
left:this.body[i].x + "px",
top:this.body[i].y + "px"
});
if(i === this.body.length-1){
div.style.background = 'red';
}
m.map.appendChild(div);
}
}
var s = new Snake()
function setStyle(ele,styleObj){
for(var attr in styleObj){
ele.style[attr] = styleObj[attr];
}
}
function getRandom(min,max){
原生js和js的区别if(min>max){
var tmp = min;
min = max;
max = tmp;
}
return parseInt(Math.random()*(max-min)+1);
}
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。