纯原生js实现贪吃蛇游戏

2024-12-20 16:33:43

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>贪吃蛇游戏</title>

<style type="text/css">
* {
  margin: 0;
  padding: 0;
}

.wrap {
  width: 600px;
  margin: 0 auto;
  position: relative;
}

p {
  position: absolute;
  left: 65%;
  top: 10%;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

#score {
  text-align: center;
  font-size: 20px;
}

#snake_map {
  margin: 0 auto;
  border: 1px solid skyblue;
}
/*行样式*/
.row {
  height: 20px;
}
/*列样式*/
.col {
  height: 20px;
  width: 20px;
  box-sizing: border-box;
  border: 1px solid lightgray;
  background: rgb(250, 250, 250);
  float: left;
}

.activeSnake {
  background: black;
}

.egg {
  background: red;
}

#Pause {
  margin-left: 18%;
  border: 1px solid skyblue;
  color: white;
  background: skyblue;
  width: 50px;
  height: 30px;
  margin-bottom: 10px;
  border-radius: 5px;
}

#Start,#Refresh,#Speed {
  border: 1px solid skyblue;
  background: skyblue;
  color: white;
  width: 50px;
  height: 30px;
  border-radius: 5px;
  margin-left: 15px;
}
</style>

</head>
 <body>
  <div class="wrap">
   <h1>贪吃蛇游戏</h1>
   <!-- 记录吃了多少个蛋 -->
   <p style="font-size:20px;color:red"> score:<span id="score" style="color:black">0</span> </p>
   <!-- 暂停按钮 -->
   <input id="Pause" type="button" name="name" value="Pause">
   <!-- 开始按钮 -->
   <input id="Start" type="button" name="name" value="Start">
   <!-- 刷新(重新开始游戏) -->
   <input id="Refresh" type="button" name="name" value="Refresh">
   <!-- 加速按钮 -->
   <input id="Speed" type="button" name="name" value="Speed">
   <!-- 贪吃蛇的行走路径地图 -->
   <div id="snake_map">

   </div>
  </div>
 </body>

<script type="text/javascript">
//获取分数标签
var score = document.getElementById('score');
// 获取路径地图标签
var map = document.getElementById('snake_map');
// 为了灵活的设置地图的大小,以下设置两个变量
// 用于存储行数和列数(即方格的个数)
var rowNumber = 25;// 行数
var columnNumber = 20;// 列数;
var mapWidth = columnNumber * 20 + 'px';// 地图的宽
var mapHeight = rowNumber * 20 + 'px';// 地图的高
map.style.width = mapWidth;
map.style.height = mapHeight;// 设置地图宽高
// 创建一个二维数组,用来记录地图上的所有div的位置
var snakeDIVPosition = [];
// 通过双层for循环来创建地图元素
for ( var i = 0; i < rowNumber; i++) {
  // 创建行div
  var rowDIV = document.createElement('div');
  // 设置div样式
  rowDIV.className = 'row';
  // 将行div添加到路径地图map中
  map.appendChild(rowDIV);
  // 创建一个行级数组,用来存储当前行中的每个方块div
  var rowArray = [];
  for ( var j = 0; j < columnNumber; j++) {
    // 创建每一行中的方块div
    var columnDIV = document.createElement('div');
    // 设置css样式
    columnDIV.className = 'col';
    // 将方块DIV添加到当前行中
    rowDIV.appendChild(columnDIV);
    // 同时将方块添加到行数组中
    rowArray.push(columnDIV);
  }
  // 当前内层循环结束,将行数组添加到二维数组中
  snakeDIVPosition.push(rowArray);
}

// 创建蛇模型
// 创建一个一维数组,用来存储蛇身所占的div
var snake = [];
// 固定蛇身起始长度为3个div
for ( var i = 0; i < 3; i++) {
  // 为蛇身设置不同颜色的div
  snakeDIVPosition[0][i].className = 'col activeSnake';
  // 存储在蛇身数组中
  snake[i] = snakeDIVPosition[0][i];
}
// 定义变量来控制蛇
var x = 2;
var y = 0;// 蛇头的起始位置偏移量
var scoreCount = 0;// 分数计数器,即吃了多少个蛋
var eggX = 0;// 记录蛋所在的行位置
var eggY = 0;// 记录蛋所在的列位置;

var direction = 'right';// 记录蛇移动的方向,初始为向右
var changeDir = true;// 判断是否需要改变蛇的移动方向
var delayTimer = null;// 延迟定时器

// 添加键盘事件监听方向键来改变蛇的移动方向
document.onkeydown = function(event) {
  // 先判断是否需要改变方向,true表示需要,false表示不需要
  if (!changeDir) {
    return;// return空表示直接结束函数,后续代码不执行
  }
  event = event || window.event;
  // 为了合理处理蛇的移动,需要判断蛇头和蛇身
  // 假设蛇向右移动,点方向键左,右键都不需要做出响应
  if (direction == 'right' && event.keyCode == 37) {
    return;// 终止事件执行
  }
  if (direction == 'left' && event.keyCode == 39) {
    return;
  }
  if (direction == 'up' && event.keyCode == 40) {
    return;
  }
  if (direction == 'down' && event.keyCode == 38) {
    return;
  }
  // 我们通过keyCode确定蛇要移动的方向
  switch (event.keyCode) {
  case 37:
    direction = 'left';// 向左
    break;
  case 38:
    direction = 'up';// 向上;
    break;
  case 39:
    direction = 'right';// 向右
    break;
  case 40:
    direction = 'down';// 向下
    break;
  }
  changeDir = false;
  delayTimer = setTimeout(function() {
    // 设置是否需要改变方向
    changeDir = true;
  }, 300);
};

// 开始设置蛇移动逻辑
// 蛇移动函数
function snakeMove() {
  // 根据上面设置的方向来设置蛇头的位置
  switch (direction) {
  case 'left':
    x--;
    break;
  case 'right':
    x++;
    break;
  case 'up':
    y--;
    break;
  case 'down':
    y++;
    break;
  };
  // 判断是否游戏结束
  if (x < 0 || y < 0 || x >= columnNumber || y >= rowNumber) {
    alert('Game Over!!!');
    // 结束蛇移动的定时器
    clearInterval(moveTimer);
    return;// 终止键盘事件;
  }
  // 如果蛇吃到自己,也要结束游戏
  for ( var i = 0; i < snake.length; i++) {
    // 将此时蛇头移动后的位置与之前左右的组成蛇的div的位置进行比较,如果相同则说明吃到自己,游戏结束
    if (snake[i] == snakeDIVPosition[y][x]) {
      alert('Game over!!!');
      clearInterval(moveTimer);
      return;
    };
  }
  // 判断蛇头移动的位置是否有蛋
  if (eggX == x && eggY == y) {
    snakeDIVPosition[eggY][eggX].className = 'col activeSnake';
    snake.push(snakeDIVPosition[eggY][eggX]);// 加入蛇身
    scoreCount++;// 记录分数
    // 更新当前的分数
    score.innerHTML = scoreCount;
    // 随机产生一个新的蛋
    createNewEgg();
  } else {
    // 设置蛇碰不到蛋的逻辑
    // 让蛇移动
    // 蛇尾去掉蛇自身的颜色,变成格子的颜色
    snake[0].className = 'col';
    // 将蛇尾div从数组中移除
    snake.shift();
    // 定位到的新的蛇头加入到蛇数组中
    snakeDIVPosition[y][x].className = 'col activeSnake';
    snake.push(snakeDIVPosition[y][x]);
  };
};

var moveTimer = setInterval('snakeMove()', 300);

// 定义一个生成min,max之间的随机数函数
function random(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
};

function createNewEgg() {
  // 随机出新的egg的下标的x和y值
  eggX = random(0, columnNumber - 1);
  eggY = random(0, rowNumber - 1);

  // 判断如果随机产生的蛋与蛇身重合,就重新随机产生一个蛋
  if (snakeDIVPosition[eggY][eggX].className == 'col activeSnake') {
    createNewEgg();// 重新随机新的egg
  } else {
    snakeDIVPosition[eggY][eggX].className = 'col egg';
  }
};

createNewEgg();// 在游戏开始的时候生成新的egg

var pause = document.getElementById('Pause');
var start = document.getElementById('Start');
var refresh = document.getElementById('Refresh');
var speed = document.getElementById('Speed');
// 添加暂停按钮
pause.onclick = function() {
  clearInterval(moveTimer);
};
// 添加开始按钮
start.onclick = function() {
  clearInterval(moveTimer);
  moveTimer = setInterval('snakeMove()', speed1);
};
// 添加刷新按钮
refresh.onclick = function() {
  window.location.reload();
};
// 添加加速按钮
var speed1 = 300;
speed.onclick = function() {
  speed1 -= 20;
  clearInterval(moveTimer);
  moveTimer = setInterval('snakeMove()', speed1);
};
</script>

</html>

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

纯JS单页面赛车游戏制作代码分享

分享一个以前写的小游戏,纯js游戏,代码很简单.欢迎大家来喷呦! 效果图: 代码展示://直接复制到html文件即可支持IE9+版本 <!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title>Best Fly Car</title> <style> input { border: 1px solid yellow; margin-l
javascript HTML5 canvas实现打砖块游戏

本文实例编写的一个小游戏,基于HTML5中的canvas.游戏主要是小球反弹击打小方块.在代码中主要实现了小方块的生成,键盘键事件的监听,小球的移动和碰壁之后的反弹以及怎样消除小方块等方法.代码使用到了一个js脚本库游戏开发流程: 1.创建画布: 将画布放在div标签里面,这样可以控制画布居中的位置,再对div标签加上一些样式比如border和border-radius,这样一来使其看上去像手机,利于观看. <div id="main"> <!--将画布嵌在div块
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仿微信打飞机游戏

首先实现微信打飞机游戏,首先会有自己和敌机,采用canvas绘图来生成自己和敌人. 1.生成自己,且可以通过左右键来进行左右移动. //生成自己,且可以左右移动 //控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ var img = new Image(); img.src = "../images/self.png";
js实现打地鼠小游戏

话不多说,请看代码: <!doctype html> <html> <head> <meta charset="utf-8"> <title>打地鼠</title> <style type="text/css"> #content { width:960px; margin:0 auto; text-align:center; margin-top:40px; } #form1 {
JavaScript实现Fly Bird小游戏

本教程为大家分享了Fly Bird小游戏的制作流程,供大家参考,具体内容如下 1.分析页面结构,理清需求和功能游戏有三个界面,分别是开始界面,游戏界面和游戏结束界面. 1.1 开始界面 start.gif 游戏的大背景上下移动的游戏标题和翅膀摆动的小鸟 start 按钮,点击进入游戏界面一直移动的地面 1.2 游戏界面 play.gif 显示越过障碍数量的计分器移动的障碍物,分别是上管道和下管道点击游戏界面,小鸟向上飞起,然后在重力作用下下坠, 当小鸟和管道碰撞后,结束界面弹出,同时小
JavaScript 打地鼠游戏代码说明

演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑): 说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码代码如下: <style> #panel{height:300px;width:300px;background:#cc
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;
纯js和css完成贪吃蛇小游戏demo

本文实例为大家分享了js贪吃蛇小游戏demo,纯js和css完成,供大家参考,具体内容如下 <!doctype html> <html> <meta charset="utf-8"> <head> <style> *{ margin: 0; padding:0; } .content{ position: absolute; width: 500px; height: 500px; background-color: #212
JavaScript实现打地鼠小游戏

在写这个打地鼠的游戏开始首先要清楚每一步该做什么然后再一步一步搭好框架再完善功能. 1.创建table三行三列,用来存放坑(图片) 2.获得所有的图片标签 3.老鼠的动作有①.冒出来 4.②. 老鼠跑了 5.③.老鼠被打死了 6.完善功能一.首先实现第一步,用table创建一个三行三列的坑 <div id = "content"> <h2>打地鼠</h2><br/> <table id = "background&qu

纯原生js实现贪吃蛇游戏

相关推荐

随机推荐