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

2024-03-24 06:10

本文主要是介绍互动应用开发p5.js——网页小游戏——贪吃蛇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

贪吃蛇

一、实验内容:

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

尽可能丰富游戏的玩法。

评分标准:

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

四、实验结果:

 

 

 

这篇关于互动应用开发p5.js——网页小游戏——贪吃蛇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/840670

相关文章

Python实战之SEO优化自动化工具开发指南

《Python实战之SEO优化自动化工具开发指南》在数字化营销时代,搜索引擎优化(SEO)已成为网站获取流量的重要手段,本文将带您使用Python开发一套完整的SEO自动化工具,需要的可以了解下... 目录前言项目概述技术栈选择核心模块实现1. 关键词研究模块2. 网站技术seo检测模块3. 内容优化分析模

PostgreSQL简介及实战应用

《PostgreSQL简介及实战应用》PostgreSQL是一种功能强大的开源关系型数据库管理系统,以其稳定性、高性能、扩展性和复杂查询能力在众多项目中得到广泛应用,本文将从基础概念讲起,逐步深入到高... 目录前言1. PostgreSQL基础1.1 PostgreSQL简介1.2 基础语法1.3 数据库

基于Java开发一个极简版敏感词检测工具

《基于Java开发一个极简版敏感词检测工具》这篇文章主要为大家详细介绍了如何基于Java开发一个极简版敏感词检测工具,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下... 目录你是否还在为敏感词检测头疼一、极简版Java敏感词检测工具的3大核心优势1.1 优势1:DFA算法驱动,效率提升10

Python中的filter() 函数的工作原理及应用技巧

《Python中的filter()函数的工作原理及应用技巧》Python的filter()函数用于筛选序列元素,返回迭代器,适合函数式编程,相比列表推导式,内存更优,尤其适用于大数据集,结合lamb... 目录前言一、基本概念基本语法二、使用方式1. 使用 lambda 函数2. 使用普通函数3. 使用 N

Python中yield的用法和实际应用示例

《Python中yield的用法和实际应用示例》在Python中,yield关键字主要用于生成器函数(generatorfunctions)中,其目的是使函数能够像迭代器一样工作,即可以被遍历,但不会... 目录python中yield的用法详解一、引言二、yield的基本用法1、yield与生成器2、yi

Python多线程应用中的卡死问题优化方案指南

《Python多线程应用中的卡死问题优化方案指南》在利用Python语言开发某查询软件时,遇到了点击搜索按钮后软件卡死的问题,本文将简单分析一下出现的原因以及对应的优化方案,希望对大家有所帮助... 目录问题描述优化方案1. 网络请求优化2. 多线程架构优化3. 全局异常处理4. 配置管理优化优化效果1.

从基础到高阶详解Python多态实战应用指南

《从基础到高阶详解Python多态实战应用指南》这篇文章主要从基础到高阶为大家详细介绍Python中多态的相关应用与技巧,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、多态的本质:python的“鸭子类型”哲学二、多态的三大实战场景场景1:数据处理管道——统一处理不同数据格式

Python开发简易网络服务器的示例详解(新手入门)

《Python开发简易网络服务器的示例详解(新手入门)》网络服务器是互联网基础设施的核心组件,它本质上是一个持续运行的程序,负责监听特定端口,本文将使用Python开发一个简单的网络服务器,感兴趣的小... 目录网络服务器基础概念python内置服务器模块1. HTTP服务器模块2. Socket服务器模块

Java 与 LibreOffice 集成开发指南(环境搭建及代码示例)

《Java与LibreOffice集成开发指南(环境搭建及代码示例)》本文介绍Java与LibreOffice的集成方法,涵盖环境配置、API调用、文档转换、UNO桥接及REST接口等技术,提供... 目录1. 引言2. 环境搭建2.1 安装 LibreOffice2.2 配置 Java 开发环境2.3 配

Java Stream 的 Collectors.toMap高级应用与最佳实践

《JavaStream的Collectors.toMap高级应用与最佳实践》文章讲解JavaStreamAPI中Collectors.toMap的使用,涵盖基础语法、键冲突处理、自定义Map... 目录一、基础用法回顾二、处理键冲突三、自定义 Map 实现类型四、处理 null 值五、复杂值类型转换六、处理