互动应用开发p5.js——网页小游戏——贪吃蛇

2022-10-18 159

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 贪吃蛇一、实验内容：基于课件改进贪吃蛇或者太空大战的小游戏，可以加入新的视觉效果，比如区分蛇头和蛇身；为食物增加特效；分数排行榜；行进改成可以循环等等；尽可能丰富游戏的玩法。评分标准：游戏界面及功能（70分）用户体验（10分）代码规范（20分）

贪吃蛇

一、实验内容：

基于课件改进贪吃蛇或者太空大战的小游戏，可以加入新的视觉效果，比如区分蛇头和蛇身；为食物增加特效；分数排行榜；行进改成可以循环等等；

尽可能丰富游戏的玩法。

评分标准：

游戏界面及功能（70分）
用户体验（10分）
代码规范（20分）

二、实验说明：

所有实验是通过 Visual Studio Code引入p5.js包编写，所以首先要去p5.js官网下载相关包，或是在联网状态下把html中引入包的代码改成例如<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>等。

三、实验代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>贪吃蛇</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
</head>
<body>
  <script src="sketch.js"></script>
</body>
</html>

var s;
var scl = 20;//大小
var food;
var scoreElem;
function setup() {
  scoreElem = createDiv('Score = 0');
  scoreElem.position(20, 20);
  scoreElem.id = 'score';
  scoreElem.style('color', 'white');
  createCanvas(500, 500);
  s = new Snake();//创建一个蛇
  frameRate(10);
  pickLocation();//放置食物的位置 
}
//控制食物流向
function pickLocation() {
  var cols = floor(width / scl);
  var rows = floor(height / scl);
  food = createVector(floor(random(cols)), floor(random(rows)));
  food.mult(scl);
}
function draw() {
  background(51);
  //判断食物是否被吃，为食物选择另一个位置
  if (s.eat(food)) {
    pickLocation();
  }
  s.death();
  s.update();
  s.show();
  fill(255, 0, 100);//食物颜色
  rect(food.x, food.y, scl, scl);
}
function Snake() {
  this.x = 0;
  this.y = 0;
  this.xspeed = 1;
  this.yspeed = 0;
  this.total = 0;//蛇方块的数量
  this.tail = [];
  this.dir = function (x, y) {
    this.xspeed = x;
    this.yspeed = y;
  }
  //控制吃食物时的情况
  this.eat = function (pos) {
    var d = dist(this.x, this.y, pos.x, pos.y);
    if (d < 1) {
      this.total++;
      return true;
    } else {
      return false;
    }
  }
  //控制死亡情况
  this.death = function () {
    for (var i = 0; i < this.tail.length; i++) {
      var pos = this.tail[i];
      var d = dist(this.x, this.y, pos.x, pos.y);
      scoreElem.html('Score = '+this.total);
      if (d < 1) {
        this.total = 0;
        this.tail = [];
        scoreElem.html('Game ended!');
      }
    }
  }
  this.update = function () {
    for (var i = 0; i < this.tail.length - 1; i++) {
      this.tail[i] = this.tail[i + 1];
    }
    if (this.total >= 1) {
      this.tail[this.total - 1] = createVector(this.x, this.y);
    }
    this.x = this.x + this.xspeed * scl;
    this.y = this.y + this.yspeed * scl;
    this.x = constrain(this.x, 0, width - scl);
    this.y = constrain(this.y, 0, height - scl);
  }
  this.show = function () {
    fill(255);
    for (var i = 0; i < this.tail.length; i++) {
      rect(this.tail[i].x, this.tail[i].y, scl, scl);
    }
    rect(this.x, this.y, scl, scl);
  }
}
function keyPressed() {
  if (keyCode === UP_ARROW) {
    s.dir(0, -1);
  } else if (keyCode === DOWN_ARROW) {
    s.dir(0, 1);
  } else if (keyCode === RIGHT_ARROW) {
    s.dir(1, 0);
  } else if (keyCode === LEFT_ARROW) {
    s.dir(-1, 0);
  }
}