使用JavaScript实现贪吃蛇游戏

2024-09-30 02:33:40

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

index.html代码如下

<!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>贪吃蛇</title>
 <link rel="stylesheet" href="css/index.css" rel="external nofollow" >
</head>
<body>
<div id="map">

</div>

<script src="js/tool.js"></script>
<script src="js/food.js"></script>
<script src="js/snake.js"></script>
<script src="js/game.js"></script>
<script src="js/main.js"></script>
</body>
</html>

index.css代码如下

#map {
 width: 600px;
 height: 400px;
 background-color: #ccc;
 position: relative;
}

food.js代码如下

//自调函数 开启一个新的作用域，避免命名冲突
(function () {
 //局部作用域

//记录上一次创建的食物，为删除做准备
 var elements=[];
 var position = 'absolute';
//构造函数Food
 function Food(options) {
 options = options || {};
 this.color = options.color || 'green';

 this.width = options.width || 20;
 this.height = options.height || 20;
 //食物的位置
 this.x = options.x || 0;
 this.y = options.y || 0;
 }

//把食物渲染到map上
// prototype,每个函数都具有一个子对象prototype，prototype表示了该函数的原型
// prototype表示一个类属性的集合。通过new来生成一个类的对象时，prototype对象的属性就会变成实例化对象的属性
 Food.prototype.render = function (map) {
 //删除之前创建的食物
 remove();

 //动态创建div，显示页面上的食物
 var div = document.createElement('div');
 map.appendChild(div);

 elements.push(div);
 //随机生成食物
 this.x = Tool.getRandom(0,map.offsetWidth/this.width - 1)*this.width;
 this.y = Tool.getRandom(0,map.offsetHeight/this.height - 1)*this.height;

 //设置div样式
 div.style.position = position; //脱离文档流
 div.style.background = this.color;
 div.style.width = this.width + 'px';
 div.style.height = this.height + 'px';
 div.style.left = this.x + 'px';
 div.style.top = this.y + 'px';
 };

 function remove() {
 for (var i = elements.length-1;i >= 0;i-- ){
 //删除div
 elements[i].parentNode.removeChild(elements[i]);
 //删除数组元素
 elements.splice(i,1); //第一个参数，从哪个元素开始 第二个参数，删除几个元素
 }
 }
 //把Food构造函数 让外部可以访问
 window.Food = Food;
})()
//测试
// var map = document.getElementById('map');
// var food = new Food(); //这里的Food就是window.Food
// food.render(map);

snake.js代码如下

(function () {
 var position = 'absolute';
 //记录之前创建的蛇
 var elements = [];
 function Snake(options) {
 options = options || {};
 //蛇节的大小
 this.width = options.width || 20;
 this.height = options.height || 20;
 //蛇移动的方向
 this.direction = options.direction || 'right';
 //蛇身体（蛇节） 第一个元素是蛇头
 this.body = [
 {x: 5, y: 2, color: 'red'},
 {x: 4, y: 2, color: 'blue'},
 {x: 3, y: 2, color: 'blue'},
 {x: 2, y: 2, color: 'blue'},
 {x: 1, y: 2, color: 'blue'}
 ];
 }
 Snake.prototype.render = function (map) {
 //删除之前创建的蛇
 remove();
 //把每一蛇节渲染到地图上
 for (var i = 0,len = this.body.length; i<len; i++){
 //蛇节
 var object = this.body[i];
 var div = document.createElement('div');
 map.appendChild(div);

 //记录当前蛇
 elements.push(div);
 //设置样式
 div.style.position = position;
 div.style.width = this.width + 'px';
 div.style.height = this.height + 'px';
 div.style.left = object.x * this.width + 'px';
 div.style.top = object.y * this.height + 'px';
 div.style.backgroundColor = object.color;
 }
 }
 //控制蛇移动的方法
 Snake.prototype.move = function (food,map) {
 //控制蛇的身体移动 (当前蛇节 到 上一蛇节的位置)
 for (var i = this.body.length - 1;i > 0;i--){
 this.body[i].x = this.body[i - 1].x;
 this.body[i].y = this.body[i - 1].y;
 }
 //控制蛇头的移动
 //判断蛇移动的方向
 var head = this.body[0];
 switch (this.direction){
 case 'right':
 head.x += 1;
 break;
 case 'left':
 head.x -=1;
 break;
 case 'top':
 head.y -=1;
 break;
 case 'bottom':
 head.y +=1;
 }

 //2.4判断蛇头是否和食物重合
 var headX = head.x * this.width;
 var headY = head.y * this.height;
 if (headX === food.x && headY === food.y){
 //让蛇增加一节
 //获取蛇的最后一节
 var last = this.body[this.body.length - 1];
 this.body.push({
 x:last.x,
 y:last.y,
 color:last.color
 })
 //随机在地图上重新生成食物
 food.render(map);
 }
 }

 function remove() {
 for (var i = elements.length -1;i>= 0;i--){
 //删除div
 elements[i].parentNode.removeChild(elements[i]);
 //删除数组中的元素
 elements.splice(i,1);
 }
 }
 //暴露构造函数给外部
 window.Snake = Snake;
})()

//测试
// var map =document.getElementById('map');
// var sanke = new Snake();
// sanke.render(map);

game.js代码如下

//使用自调函数，创建一个新的局部作用域，防止命名冲突
(function () {
 function Game(map) {
 this.food = new Food();
 this.snake = new Snake();
 this.map = map;
 that=this;
 }
 Game.prototype.start = function () {
 //1.把蛇和食物对象渲染到地图上
 this.food.render(this.map);
 this.snake.render(this.map);
 //2.开始游戏逻辑
 //2.1 让蛇移动起来
 //2.2当蛇遇到边界游戏结束
 runSnake();
 //2.3通过键盘控制蛇移动的方向
 bindKey();
 //2.4当蛇遇到食物 做相应的处理
 }

 function bindKey() {
 document.onkeydown = function (e) {
 switch (e.keyCode){
 case 37:
  if (that.snake.direction === 'right') return;
  that.snake.direction = 'left';
  break;
 case 38:
  if (that.snake.direction === 'bottom') return;
  that.snake.direction = 'top';
  break;
 case 39:
  if (that.snake.direction === 'left') return;
  that.snake.direction = 'right';
  break;
 case 40:
  if (that.snake.direction === 'top') return;
  that.snake.direction = 'bottom';
  break;
 }
 }
 }

 //
 function runSnake() {
 var timerId = setInterval(function () {
 //让蛇走一格
 //在定时器中的function中this是指向window对象的
 that.snake.move(that.food,that.map);
 that.snake.render(that.map);

 //2.2当蛇遇到边界游戏结束

 var maxX = that.map.offsetWidth / that.snake.width;
 var maxY = that.map.offsetHeight / that.snake.height;
 //获取蛇头的坐标
 var headX = that.snake.body[0].x;
 var headY = that.snake.body[0].y;

 if (headX <0 || headX>=maxX){
 alert('Game Over');
 clearInterval(timerId);
 }
 if (headY <0 || headY >= maxY){
 alert('Game Over');
 clearInterval(timerId);
 }
 for (var i = that.snake.body.length - 1;i > 0;i--){
 if (headX == that.snake.body[i].x && headY == that.snake.body[i].y){
  alert('Game Over');
  clearInterval(timerId);
  break;
 }
 }
 },300)
 }

 //暴露构造函数给外部
 window.Game = Game;
})()

// //测试
// var map =document.getElementById('map');
// var game = new Game(map);
// game.start();

main.js代码如下

(function () {
 var map =document.getElementById('map');
 var game = new Game(map);
 game.start();
})()

Tool.js代码如下

// 工具对象

(function () {
 var Tool = {
 getRandom: function (min, max) {
 min = Math.ceil(min);
 max = Math.floor(max);
 return Math.floor(Math.random() * (max - min + 1)) + min;
 }
 }
 window.Tool = Tool;
})()

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

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
20行js代码实现的贪吃蛇小游戏

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

本文为大家分享了javascript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下效果图设计贪吃蛇游戏是一款休闲益智类游戏.既简单又耐玩.该游戏通过控制蛇头方向吃蛋,从而使得蛇变得越来越长. 玩法: 点击屏幕控制蛇的移动方向,寻找吃的东西,每吃一口就能得到一定的积分,而且蛇的身子会越吃越长,身子越长玩的难度就越大,不能咬到自己的身体,更不能咬自己的尾巴,等到了一定的分数,游戏胜利. 设计: 首先需要创建一个棋盘,然后需要生成一条贪吃蛇,接着随机生成食物.每当蛇吃到食物的时候,随机生成新
JS实现简易贪吃蛇游戏

本文实例为大家分享了JS实现简易贪吃蛇的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #body{ width: 900px;/*长宽最好是obj的倍数*/ height: 600px; border-widt
JS实现的贪吃蛇游戏完整实例

本文实例讲述了JS实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 思想: 1.设计蛇:属性有宽.高.方向.状态(有多少节),方法:显示,跑 2.设计食物:属性宽.高 3.显示蛇:根据状态向地图里加元素 4.蛇跑起来:下一节到前一节的位置,蛇头根据方向变,删除原来的蛇,新建蛇:当出界时,死亡,初始化:当蛇头吃到自己的时候,死亡,初始化 5.食物被吃掉,蛇加一节,去掉原来的食物,生成新的食物 6.添加定时器,绑定按键完整示例: <!doctype html> <html lang=&q
js实现贪吃蛇游戏 canvas绘制地图

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下思路 400px * 400px的地图,每20px*20px分成单元格绘制蛇身每次移动即更换尾部头部的颜色全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="
javascript实现贪吃蛇游戏（娱乐版）

本文实例为大家分享了javascript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下一共三个对象map,snake,food,代表的含义如名字.snake和food其实就是数组,表示位置,map来画图.判断得分.失败等等,直接上代码,可直接运行. <!doctype html> <html> <body> <canvas id="map" width="400" height="400" styl
js实现贪吃蛇游戏（简易版）

本文实例为大家分享了js实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下直接开始效果图: 项目结构:图片自己找的 1.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } &l
javascript贪吃蛇完整版(源码)

javascript贪吃蛇完整版注释完整,面向对象复制代码代码如下: <html><head> <title>贪吃蛇 Snake v2.4</title><style> body{ font-size:9pt; } table{ border-collapse: collapse; border:solid #333 1px; } td{ heigh
js实现贪吃蛇小游戏（容易理解）

话不多说,请看代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" href="style.css"> <script src="style.js" >

使用JavaScript实现贪吃蛇游戏

相关推荐

随机推荐