javascript实现贪吃蛇游戏(娱乐版)


Posted in Javascript onAugust 17, 2020

本文实例为大家分享了javascript实现贪吃蛇游戏的具体代码,供大家参考,具体内容如下

一共三个对象map,snake,food,代表的含义如名字。snake和food其实就是数组,表示位置,map来画图、判断得分、失败等等,直接上代码,可直接运行。

<!doctype html>
<html>

<body>
 <canvas id="map" width="400" height="400" style="background:Black"></canvas>
 <h1>Score:</h1>
 <h2 id="score">0</h2>

 <script>
 //地图
 function Map() {
 this.field = document.getElementById("map").getContext("2d"); //画布
 this.draw = function (something) { //画蛇或者食物
 this.field.fillStyle = something.color;
 var position;
 for (position in something.positions) {
 this.field.fillRect(something.positions[position][0], something.positions[position][1], 20, 20);
 }
 }
 this.clear = function () { //清除画布
 this.field.clearRect(0, 0, 400, 400);
 }
 this.judge = function (snake, food) { //判断状态(得分、失败、普通)
 var snakeHeadX = snake.positions[0][0];
 var snakeHeadY = snake.positions[0][1];
 var foodX = food.positions[0][0];
 var foodY = food.positions[0][1];
 if ((snakeHeadX == foodX) && (snakeHeadY == foodY)) { //吃食物
 snake.positions.unshift([foodX, foodY]);
 food.positions[0] = [Math.floor(Math.random() * 20) * 20, Math.floor(Math.random() * 20) * 20];
 this.clear();
 this.draw(food);
 this.draw(snake);
 var score = document.getElementById('score');
 score.innerHTML = (Number(score.innerHTML)+1).toString();
 }
 else if ((snakeHeadX+20 > 400) || (snakeHeadX < 0) || (snakeHeadY+20 > 400) || (snakeHeadY < 0)) {
 alert('GIME OVER!'); //撞墙
 }
 else {
 this.clear();
 this.draw(food);
 this.draw(snake);
 }
 }
 }
 
 //蛇
 function Snake() {
 this.positions = [[40 + 20, 40], [40, 40], [40 - 20, 40]]; //蛇的躯干
 this.color = "Yellow";
 this.direction = [1,0]; //蛇头方向
 this.move = function () { //移动
 this.positions.unshift([this.positions[0][0] + this.direction[0] * 20, this.positions[0][1] + this.direction[1] * 20]);
 this.positions.pop();
 }
 this.obeyOrders = function (snake = this) { //等待键盘上下左右
 document.onkeydown = function (event) {
 var e = event || window.event || arguments.callee.caller.arguments[0];
 var order = e.keyCode;
 console.log(snake.direction);
 switch (order) {
 case 37:
 snake.direction[0] = -1;
 snake.direction[1] = 0;
 break;
 case 38:
 snake.direction[1] = -1;
 snake.direction[0] = 0;
 break;
 case 39:
 snake.direction[0] = 1;
 snake.direction[1] = 0;
 break;
 case 40:
 snake.direction[1] = 1;
 snake.direction[0] = 0;
 break;
 default:
 ;
 }
 };
 }
 }

 //食物
 function Food() {
 this.positions = [[Math.floor(Math.random() * 20) * 20, Math.floor(Math.random() * 20) * 20]]; //随机位置
 this.color = 'Red';
 }


 //开始执行
 (function () {

 var map = new Map();
 var snake = new Snake();
 var food = new Food();
 map.draw(snake);
 map.draw(food);
 snake.obeyOrders();
 var t=0;
 var interval = setInterval(function () { //每0.5s走一步
 map.judge(snake, food);
 snake.move();
 }, 500);
 })()
 </script>


</body>

</html>

效果如图

javascript实现贪吃蛇游戏(娱乐版)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 对象中的类数组操作
Apr 27 Javascript
prototype 中文参数乱码解决方案
Nov 09 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
jquery iframe操作详细解析
Nov 20 Javascript
js日期联动示例
May 02 Javascript
js 动态修改css文件用到了cssRule
Aug 20 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript之Date_动力节点Java学院整理
Jun 28 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
webpack4实现不同的导出类型
Apr 09 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 Javascript
three.js着色器材质的内置变量示例详解
Aug 16 #Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 #Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 #Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 #Javascript
Vue使用axios引起的后台session不同操作
Aug 14 #Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 #Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 #Javascript
You might like
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php使用PDO操作MySQL数据库实例
2014/12/30 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
2014/03/12 Javascript
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
移动端效果之IndexList详解
2017/10/20 Javascript
Angular实现搜索框及价格上下限功能
2018/01/19 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
Vue组件和Route的生命周期实例详解
2018/02/10 Javascript
JS实现为动态创建的元素添加事件操作示例
2018/03/17 Javascript
详解JavaScript中操作符和表达式
2018/09/12 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
javascript实现简单搜索功能
2020/03/26 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
[04:26]DOTA2上海特锦赛小组赛第二日 TOP10精彩集锦
2016/02/27 DOTA
Python学习笔记(二)基础语法
2014/06/06 Python
Python中的类与对象之描述符详解
2015/03/27 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python常见异常分类与处理方法
2017/06/04 Python
Jupyter notebook远程访问服务器的方法
2018/05/24 Python
Python中函数的基本定义与调用及内置函数详解
2019/05/13 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
django admin管理工具自定义时间区间筛选器DateRangeFilter介绍
2020/05/19 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
医学生职业生涯规划书范文
2014/03/13 职场文书
教研活动总结
2014/04/28 职场文书
初中英语演讲稿
2014/04/29 职场文书
科技之星事迹材料
2014/06/02 职场文书
个人道歉信大全
2019/04/11 职场文书
利用Java设置Word文本框中的文字旋转方向的实现方法
2021/06/28 Java/Android