基于JavaScript实现贪吃蛇游戏

本文实例为大家分享了JavaScript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

1.结构

创建一个盒子box作为蛇的身体,当前盒子中只有一个子元素,代表此时蛇的长度为1.

在创建一个盒子food作为贪吃蛇的食物。

<div id="box">

<div></div>

</div>

<div id="food"></div>

2.CSS

设置蛇和食物的样式,这里注意蛇和食物都是绝对定位。

<style>

*{

padding: 0px;

margin: 0px;

}

#box div{

width: 30px;

height: 30px;

box-sizing: border-box;

background: green;

border: 1px solid black;

position: absolute;

}

#food{

width: 30px;

height: 30px;

background: brown;

position: absolute;

}

</style>

3.脚本

获取蛇的身体和每一个子元素

var box = document.getElementById("box");

var boxs = document.getElementById("box").children;

定义蛇头的位置

var snackX = 0;

var snackY = 0;

获取屏幕宽度和高度,以此来设定墙的边界,以限制蛇的移动范围。

var cw = document.documentElement.clientWidth;

var ch = document.documentElement.clientHeight;

var minsnackX = 0;

var maxsnackX = Math.floor(cw / boxs[0].offsetWidth)*boxs[0].offsetWidth;

var minsnackY = 0;

var maxsnackY = Math.floor(ch / boxs[0].offsetHeight)*boxs[0].offsetHeight;

定义初始的移动方向。

var turn = "right";

获取食物元素,并设置食物的位置坐标。

var foodele = document.getElementById("food");

var foodX,foodY;

蛇的初始化

for(var i = 0; i <6 ; i++){

box.appendChild(boxs[0].cloneNode(true));

}

刷新食物

function food(){

//此处的坐标要先获取页面最大支持的蛇身体的块数,然后在块数中随机,然后乘以块数的大小,

//因为蛇的移动每一步都是固定的,想要判定食物和蛇头重合就必须坐标是整块的倍数。

foodX = parseInt( Math.random()*Math.floor(cw / boxs[0].offsetWidth))*boxs[0].offsetWidth;

foodY = parseInt( Math.random()*Math.floor(ch / boxs[0].offsetHeight))*boxs[0].offsetHeight;

//判定当食物的产生位置和蛇的任何一个位置重合时就重新生成食物。

for(var i = 0;i<boxs.length;i++){

if(foodX + "px" === boxs[i].style.left && foodY + "px" === boxs[i].style.top){

food();

}

}

foodele.style.left = foodX + "px";

foodele.style.top = foodY + "px";

}

调用food()方法 生成第一个食物

food();

设置定时器 每次执行一次蛇的运行方法

var timer = setInterval(function(){

snackMOve();

},150)

封装一个蛇的运动方法

//移动和判定边界

function snackMOve(){

//此处为判定方向 根据判定的方向,向改方向前进一个方块

switch(turn){

case "right":snackX +=30;break;

case "left":snackX -=30;break;

case "bottom":snackY +=30;break;

case "top":snackY -=30;break;

}

//如果蛇越过了墙就从另一端出现

if(snackX > maxsnackX){

snackX = 0;

}

if(snackX < minsnackX){

snackX = maxsnackX;

}

if(snackY > maxsnackY){

snackY = 0;

}

if(snackY < minsnackY){

snackY = maxsnackY;

}

//从最后一个开始,每个元素跟随上一个元素的位置

for(var i = boxs.length-1; i >0 ; i--){

boxs[i].style.left = boxs[i-1].style.left;

boxs[i].style.top = boxs[i-1].style.top ;

}

//第一个也就是蛇头的位置,永远是根据方向获取的位置

boxs[0].style.left = snackX + "px";

boxs[0].style.top = snackY + "px" ;

//判定吃到食物 就长大和刷新

//当蛇头位置移动之后与食物重合 那么刷新食物,并且在蛇的身体中插入一个克隆的元素,相当于长度+1

if(snackX === foodX && snackY === foodY){

food();

box.appendChild(boxs[0].cloneNode(true));

}else{

//判定撞死

//当蛇头与身体中的任何一个元素重合,那么判定结束游戏,停止定时器

for(var i = 1;i<boxs.length;i++){

if(snackX + "px" === boxs[i].style.left && snackY + "px" === boxs[i].style.top){

clearInterval(timer);

alert("失败");

}

}

}

}

蛇的运动方向

document.onkeydown = function(eve){

var e = eve||event;

var keyCode = e.keyCode||e.which;

switch(keyCode){

case 37:if(turn === "right"){break;}turn = "left";break;

case 38:if(turn === "bottom"){break;}turn = "top";break;

case 39:if(turn === "left"){break;}turn = "right";break;

case 40:if(turn === "top"){break;}turn = "bottom";break;

}

}

全部代码

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Document</title>

<style>

*{

padding: 0px;

margin: 0px;

}

#box div{

width: 30px;

height: 30px;

box-sizing: border-box;

background: green;

border: 1px solid black;

position: absolute;

}

#food{

width: 30px;

height: 30px;

background: brown;

position: absolute;

}

</style>

</head>

<body>

<div id="box">

<div></div>

</div>

<div id="food"></div>

<script>

var box = document.getElementById("box");

var boxs = document.getElementById("box").children;

var snackX = 0;

var snackY = 0;

var cw = document.documentElement.clientWidth;

var ch = document.documentElement.clientHeight;

var minsnackX = 0;

var maxsnackX = Math.floor(cw / boxs[0].offsetWidth)*boxs[0].offsetWidth;

var minsnackY = 0;

var maxsnackY = Math.floor(ch / boxs[0].offsetHeight)*boxs[0].offsetHeight;

var turn = "right";

var foodele = document.getElementById("food");

var foodX,foodY;

for(var i = 0; i <6 ; i++){

box.appendChild(boxs[0].cloneNode(true));

}

//随机食物

function food(){

foodX = parseInt( Math.random()*Math.floor(cw / boxs[0].offsetWidth))*boxs[0].offsetWidth;

foodY = parseInt( Math.random()*Math.floor(ch / boxs[0].offsetHeight))*boxs[0].offsetHeight;

for(var i = 0;i<boxs.length;i++){

if(foodX + "px" === boxs[i].style.left && foodY + "px" === boxs[i].style.top){

food();

}

}

foodele.style.left = foodX + "px";

foodele.style.top = foodY + "px";

}

food();

//设置定时器 移动

var timer = setInterval(function(){

snackMOve();

},150)

//移动和判定边界

function snackMOve(){

switch(turn){

case "right":snackX +=30;break;

case "left":snackX -=30;break;

case "bottom":snackY +=30;break;

case "top":snackY -=30;break;

}

//根据边界归零

if(snackX > maxsnackX){

snackX = 0;

}

if(snackX < minsnackX){

snackX = maxsnackX;

}

if(snackY > maxsnackY){

snackY = 0;

}

if(snackY < minsnackY){

snackY = maxsnackY;

}

for(var i = boxs.length-1; i >0 ; i--){

boxs[i].style.left = boxs[i-1].style.left;

boxs[i].style.top = boxs[i-1].style.top ;

}

boxs[0].style.left = snackX + "px";

boxs[0].style.top = snackY + "px" ;

//判定吃到食物 就长大和刷新

if(snackX === foodX && snackY === foodY){

food();

box.appendChild(boxs[0].cloneNode(true));

}else{

//判定撞死 暂停计时器 刷新

for(var i = 1;i<boxs.length;i++){

// console.log(boxs[i].style.left);

if(snackX + "px" === boxs[i].style.left && snackY + "px" === boxs[i].style.top){

clearInterval(timer);

alert("失败");

// console.log(1)

}

}

}

}

//方向

document.onkeydown = function(eve){

var e = eve||event;

var keyCode = e.keyCode||e.which;

switch(keyCode){

case 37:if(turn === "right"){break;}turn = "left";break;

case 38:if(turn === "bottom"){break;}turn = "top";break;

case 39:if(turn === "left"){break;}turn = "right";break;

case 40:if(turn === "top"){break;}turn = "bottom";break;

}

}

</script>

</body>

</html>

总结

贪吃蛇的思路主要是有以下几个部分

1.食物的随机出现(不能随机在蛇身上)

2.定时器控制蛇的移动

3.墙的判定

4.蛇的运动逻辑

5.运动方向的判定

6.吃到食物的判定

7.蛇头与身体的判定(即游戏结束的判定)

小编还为大家准备了精彩的专题:javascript经典小游戏汇总

以上是 基于JavaScript实现贪吃蛇游戏 的全部内容, 来源链接: utcz.com/z/328103.html

回到顶部