用h5实现贪吃蛇,给我完整代码
时间: 2023-03-15 22:51:31 浏览: 75
用H5实现贪吃蛇的完整代码如下:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.min.js"></script> <script>let s; let scl = 20; let food; function setup() { createCanvas(600, 600); s = new Snake(); frameRate(10); pickLocation(); } function pickLocation() { let cols = floor(width/scl); let rows = floor(height/scl); food = createVector(floor(random(cols)), floor(random(rows))); food.mult(scl); } function mousePressed() { s.total++; } 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 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); } } function Snake() { this.x = 0; this.y = 0; this.xspeed = 1; this.yspeed = 0; this.total = 0; this.tail = []; this.eat = function(pos) { let d = dist(this.x, this.y, pos.x, pos.y); if (d < 1) { this.total++; return true; } else { return false; } } this.dir = function(x, y) { this.xspeed = x; this.yspeed = y; } this.death = function() { for (let i = 0; i < this.tail.length; i++) { let pos = this.tail[i]; let d = dist(this.x, this.y, pos.x, pos.y); if (d < 1) { console.log('starting over'); this.total = 0; this.tail = []; } } } this.update = function() { if (this.total === this.tail.length) { for (let i = 0; i < this.tail.length - 1; i++) { this.tail[i] = this.tail[i + 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 (let 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); } } </script>