基于JavaScript实现贪吃蛇游戏

2024-12-21 23:13:05

本文实例为大家分享了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经典小游戏汇总

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

原生JS实现贪吃蛇小游戏

本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到食物时(既坐标重复时),增加蛇身长度,碰到墙壁或自身时,程序停止,游戏结束. HTML结构: <body> <div id="map"></div> </body> CSS样式: <style> #map{ width: 600p
jsp网页实现贪吃蛇小游戏

本文实例为大家分享了jsp网页实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下一.主要思路 (1)第一步实现地图. (2)第二步实现蛇身. (3)第三步实现食物. (4)第四步实现移动吃食物. (5)第五步实现规则(撞墙游戏结束). 二.代码实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</
JavaScript实现简单贪吃蛇效果

本文实例为大家分享了js实现简单贪吃蛇效果的具体代码,供大家参考,具体内容如下上代码之前,先给大家看一下效果: 是不是想说:我能这样玩一天- 话不多说,代码如下: <script> class Map{ constructor(){ // 提前设定将来的地图的样式数据 this.w = 450; this.h = 250; this.c = "#DDD"; // 执行创建地图方法 this.createEle(); } createEle(){ this.mapEle =
js贪吃蛇游戏实现思路和源码

本文实例为大家分享了js贪吃蛇游戏的相关代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇小游戏</title> <style> *{margin:0; padding:0;} header { display: block; margin: 0 auto;
20行js代码实现的贪吃蛇小游戏

前言最近在csdn上看到一位大神用20行代码就写出了一个贪吃蛇的小游戏,感觉被惊艳到了,就试着读了一下这段代码,阅读过程中不断为作者写法的巧妙而叫绝,其中我发现自己对运算符优先级和一些js的技巧不是很清楚,所以看完之后决定把思路分享出来,方便和我一样的小白学习. 我对代码稍稍做了些修改,并添加了一些注释,方便理解. 示例代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="
js实现贪吃蛇小游戏（容易理解）

话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >
JS写的贪吃蛇游戏(个人练习)

JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t
javascript贪吃蛇完整版(源码)

javascript贪吃蛇完整版注释完整,面向对象复制代码代码如下: <html><head> <title>贪吃蛇 Snake v2.4</title><style> body{ font-size:9pt; } table{ border-collapse: collapse; border:solid #333 1px; } td{ heigh
原生javascript制作贪吃蛇小游戏的方法分析

本文实例讲述了原生javascript制作贪吃蛇小游戏的方法.分享给大家供大家参考,具体如下:     HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta char
js实现网页版贪吃蛇游戏

使用原生 js 实现贪吃蛇小游戏,首先这个小游戏的目录结构如下: 有贪吃蛇 , 食物 ,地图 ,还有游戏当我们在浏览器打开 index.html 的时候,会出现移动的小蛇 ,随机生成的食物(这里只有一个,当前食物被吃掉,才会初始化下一个),用户通过键盘上的方向键控制小蛇移动的方向当小蛇触碰到了墙,即画布边缘的时候,游戏结束! 接下来就是代码实现啦 ~ 食物模块 //食物的自调用函数 (function(){ //创建一个数组来存放元素 var elements=[]; //食物就是

基于JavaScript实现贪吃蛇游戏

相关推荐

随机推荐