js实现贪吃蛇游戏(简易版)


Posted in Javascript onSeptember 29, 2020

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

直接开始

效果图:

js实现贪吃蛇游戏(简易版)

项目结构:图片自己找的

js实现贪吃蛇游戏(简易版)

1.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>

 <style type="text/css">
  * {
  padding: 0;
  margin: 0;
  }
 </style>
 </head>
 <body>
 <canvas id='view' width="400" height="400" style="border:1px solid red;"></canvas>
 <button id='start'>开始</button>
 <button id='parse'>暂停</button>
 <button id='restart'>重新开始</button>
 <h4>最高分: <span id='scoreMax' style='color:red;'>0</span></h4>
 <h4>分数: <span id='score' style='color:skyblue;'>0</span></h4>
 <script src="js/config.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/score.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/area.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/food.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/snake.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/move.js" type="text/javascript" charset="utf-8"></script>
 <script src="js/init.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var start = document.getElementById('start');
  var parse = document.getElementById('parse');
  var restart = document.getElementById('restart');
  start.onclick = function() {
  parse = false;
  }
  parse.onclick = function() {
  parse = true;
  }
  restart.onclick = function() {
  snake && snake.restart();
  parse = false;
  }
 </script>
 </body>
</html>

2.area.js

function render(x, y, color, img) {
 ctx.beginPath();
 ctx.fillStyle = color || 'red';
 if (img) {
 ctx.drawImage(img, x * w, y * h, img.width, img.height);
 } else {
 ctx.fillRect(x * w, y * h, w, h);
 }
 ctx.closePath();
 ctx.fill();
}

function clear(x, y) {
 ctx.clearRect(x * w, y * h, w, h);
}

3.config.js

var exit = [];

var parse = true;

var view = document.getElementById('view');
var ctx = view.getContext('2d');
var width = 400,
 height = 400;
var w = 20,
 h = 20;
var maxX = (width / w) - 1,
 maxY = (height / h) - 1;
var speed = 500;
var scoreMax = 0;

var imgsrcs = [
 './img/snakeheadup.png', //图片自己找
 './img/snakeheaddown.png',
 './img/snakeheadleft.png',
 './img/snakeheadright.png'
];
var imgs = [];
var length = 4;
for (var i = 0, len = imgsrcs.length; i < len; i++) {
 var img = new Image(20,20);
 img.src = imgsrcs[i];
 imgs[i] = img;
}

var food, snake, move, score;

4.food.js

function Food() {
 this.init();
}

Food.prototype = {
 init: function() {
 this.update();
 },
 update: function() {
 var food = this.makeCoordinate();
 this.food = food;
 var foodX = food[0];
 var foodY = food[1];
 this.render(foodX, foodY);
 },
 render: function(x, y) {
 render(x, y, 'blue');
 },
 makeCoordinate: function() {
 var x = this.random(0, maxX);
 var y = this.random(0, maxY);
 for (var i = 0; i < exit.length; i++) {
  if (exit[i].toString() == [x, y].toString()) {
  return this.makeCoordinate();
  }
 }
 return [x, y];
 },
 random: function(min, max) {
 return Math.floor(Math.random() * (max - min + 1)) + min;
 }
}

5.init.js

function init() {
 food = new Food();
 snake = new Snake();
 move = new Move();
 score = new Score();
 var timer = setInterval(function() {
 if (!parse) {
  snake.move();
 }
 }, speed);
}

for (var j = 0; j < imgs.length; j++) {
 imgs[j].onload = function() {
 length--;
 if (length == 0) {
  init();
 }
 }
}

6.move.js

function Move() {

}

Move.prototype = {
 up: function(s) {
 snake.move('up');
 },
 down: function(s) {
 snake.move('down');
 },
 left: function(s) {
 snake.move('left');
 },
 right: function(s) {
 snake.move('right');
 }
}


document.onkeydown = function(e) {
 var key = e.keyCode;
 if(!parse){
 switch (key) {
  case 37:
  case 65:
  move.left(snake);
  break;
  case 38:
  case 87:
  move.up(snake);
  break;
  case 39:
  case 68:
  move.right(snake);
  break;
  case 40:
  case 83:
  move.down(snake);
  break;
  default:
  break;
 }
 }
};

7.score.js

var scoreDom = document.getElementById('score');
var scoreMaxDom = document.getElementById('scoreMax');

function Score() {
 this.score = 0;
}

Score.prototype = {
 scoreAdd: function() {
 this.score += 1;
 scoreDom.innerHTML = this.score;
 },
 scoreClear: function() {
 this.score = 0;
 scoreDom.innerHTML = 0;
 },
 highScore: function() {
 scoreMax = scoreMax > this.score ? scoreMax : this.score;
 scoreMaxDom.innerHTML = scoreMax;
 }
}

8.snake.js

function Snake() {
 this.head = [0, 5, imgs[1]]; // x,y坐标,头
 this.body = []; // 二维数组,身体
 this.snake = []; //完整的蛇
 this.init(6);
 this.direction = 'down'; // 默认向下运动
}

Snake.prototype = {
 init: function(len) {
 len = len ? len > 10 ? 10 : len : 5;
 var head = this.head = [0, len, imgs[1]];
 var body = this.body;
 for (var i = 0; i < len; i++) {
  body.push([0, i]);
 }
 this.getSnake();
 },
 restart: function() {
 ctx.clearRect(0, 0, width, height);
 this.head = [0, 5, imgs[1]]; // x,y坐标,头
 this.body = []; // 二维数组,身体
 this.snake = []; //完整的蛇
 exit = [];
 this.direction = 'down'; // 默认向下运动
 this.init(6);
 food.update();
 score.scoreClear();
 },
 eat: function() {
 var head = [this.head[0], this.head[1]];
 var body = this.body;
 if (food.food.toString() == head.toString()) {
  food.update();
  score.scoreAdd();
  return true;
 }
 return false;
 },
 update: function(direction) {
 var oldDirection = this.direction;
 this.direction = direction || this.direction;
 if ((this.direction == 'down' && oldDirection == 'up') ||
  (this.direction == 'up' && oldDirection == 'down') ||
  (this.direction == 'left' && oldDirection == 'right') ||
  (this.direction == 'right' && oldDirection == 'left')) {
  this.direction = oldDirection;
 }
 if (this.direction == 'left' && oldDirection != 'right') {
  this.head[0] -= 1;
  this.head[2] = imgs[2];
 } else if (this.direction == 'right' && oldDirection != 'left') {
  this.head[0] += 1;
  this.head[2] = imgs[3];
 } else if (this.direction == 'up' && oldDirection != 'down') {
  this.head[1] -= 1;
  this.head[2] = imgs[0];
 } else if (this.direction == 'down' && oldDirection != 'up') {
  this.head[1] += 1;
  this.head[2] = imgs[1];
 }
 this.die();
 },
 gameOver: function() {
 alert('game over!')
 console.log('game over!');
 parse = true;
 score.highScore();
 },
 die: function() {
 var head = this.head;
 var x = head[0],
  y = head[1];
 if (x < 0 || x > maxX || y < 0 || y > maxY) {
  this.gameOver();
 }
 var body = this.body;
 for (var i = 0; i < body.length; i++) {
  if (body[i].toString() == [x, y].toString()) {
  this.gameOver();
  }
 }
 },
 render: function() {
 var snake = this.snake;
 for (var i = 0, len = snake.length; i < len; i++) {
  var item = snake[i];
  render(item[0], item[1], 'green', item[2]);
 }
 },
 move: function(direction) {
 var head = this.head;
 var headCopy = head.slice(); //之前的头
 var body = this.body;
 body.push([headCopy[0], headCopy[1]]);
 this.update(direction);
 var eat = this.eat();
 if (!eat) {
  var del = body.shift();
  clear(del[0], del[1]);
 }
 this.getSnake();
 },
 getSnake: function() {
 var head = this.head;
 var body = this.body;
 var snake = this.snake = [];
 for (var i = 0, l = body.length; i < l; i++) {
  snake.push(body[i]);
 }
 snake.push(head);
 exit = [];
 for (var i = 0; i < snake.length; i++) {
  exit.push(snake[i]);
 }
 this.render();
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的私有成员
Sep 18 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
Jul 22 Javascript
30分钟就入门的正则表达式基础教程
Feb 25 Javascript
JavaScript解析URL参数示例代码
Aug 12 Javascript
Javascript 按位与赋值运算符 (&amp;=)使用介绍
Feb 04 Javascript
jquery实现类似淘宝星星评分功能实例
Sep 12 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
Dec 08 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JS实现简单抖动效果
Jun 01 Javascript
Node.js中DNS模块学习总结
Feb 28 Javascript
js实现计算器功能
Aug 10 Javascript
js实现星星海特效的示例
Sep 28 #Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
Sep 28 #Javascript
Openlayers绘制聚合标注
Sep 28 #Javascript
Openlayers绘制地图标注
Sep 28 #Javascript
Openlayers实现图形绘制
Sep 28 #Javascript
Openlayers显示瓦片网格信息的方法
Sep 28 #Javascript
Openlayers实现地图全屏显示
Sep 28 #Javascript
You might like
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
2015/12/15 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
详谈表单重复提交的三种情况及解决方法
2017/08/16 Javascript
原生JS 购物车及购物页面的cookie使用方法
2017/08/21 Javascript
快速搭建React的环境步骤详解
2017/11/06 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
详解JS实现简单的时分秒倒计时代码
2019/04/25 Javascript
微信小程序下拉菜单效果的实例代码
2019/05/14 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
2020/09/21 Javascript
python 解析XML python模块xml.dom解析xml实例代码
2014/02/07 Python
介绍Python的@property装饰器的用法
2015/04/28 Python
浅谈Pandas中map, applymap and apply的区别
2018/04/10 Python
Python生成器generator用法示例
2018/08/10 Python
基于python实现学生管理系统
2018/10/17 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
pytorch加载语音类自定义数据集的方法教程
2020/11/10 Python
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
运动员获奖感言
2014/08/15 职场文书
升国旗演讲稿
2014/09/05 职场文书
商务司机岗位职责
2015/04/10 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python