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

r囧r小猫 2023-10-01 15:49 7阅读 0赞

## 贪吃蛇 ##

### 一、实验内容： ###

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

尽可能丰富游戏的玩法。

评分标准：

1.  游戏界面及功能 （70分）
2.  用户体验 （10分）
3.  代码规范（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);
      }
    }

### 四、实验结果： ###

![80a6a4c949a34a20b7635e0d7343598c.png][]

![b2d3ed9ac9224e2cb0452188ad908e28.png][]

[80a6a4c949a34a20b7635e0d7343598c.png]: https://img-blog.csdnimg.cn/80a6a4c949a34a20b7635e0d7343598c.png
[b2d3ed9ac9224e2cb0452188ad908e28.png]: https://img-blog.csdnimg.cn/b2d3ed9ac9224e2cb0452188ad908e28.png