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 相关文章推荐
很全的显示阴历(农历)日期的js代码
Jan 01 Javascript
比Jquery的document.ready更快的方法
Apr 28 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
Jun 21 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
微信小程序显示下拉列表功能【附源码下载】
Dec 12 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 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
PHP中isset()和unset()函数的用法小结
2014/03/11 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
php swoft框架实例用法
2020/12/22 PHP
jQuery 性能优化指南(3)
2009/05/21 Javascript
js制作支付倒计时页面
2016/10/21 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
jQuery源码分析之init的详细介绍
2017/02/13 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
详解node.js的http模块实例演示
2018/07/12 Javascript
layui实现table加载的示例代码
2018/08/14 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
2018/09/01 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
Python中super的用法实例
2015/05/28 Python
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python复制Word内容并使用格式设字体与大小实例代码
2018/01/22 Python
django搭建项目配置环境和创建表过程详解
2019/07/22 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
Keras—embedding嵌入层的用法详解
2020/06/10 Python
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
新西兰最大的品牌运动鞋购物网站:Platypus NZ
2017/10/27 全球购物
澳大利亚制造的羊皮靴:Original UGG Boots
2017/11/13 全球购物
英国女性运动服品牌:Sweaty Betty
2018/11/08 全球购物
消防器材管理制度
2014/01/28 职场文书
教师个人鉴定材料
2014/02/08 职场文书
标准化管理实施方案
2014/02/25 职场文书
2014高三学生考试作弊检讨书
2014/12/14 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP