DDR爱好者之家

js实现贪吃蛇游戏（简易版）
站长资源 2024/11/24 佚名
5 1538
DDR爱好者之家 Design By 杰米

本文实例为大家分享了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="/UploadFiles/2021-04-02/config.js">


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 "htmlcode">



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();
 }
}





以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米