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 相关文章推荐
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
javascript数组快速打乱重排的方法
Jan 02 Javascript
JavaScript程序开发之JS代码放置的位置
Jan 15 Javascript
JS功能代码集锦
May 04 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
Jul 21 Javascript
JS实现物体带缓冲的间歇运动效果示例
Dec 22 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
javascript中递归的两种写法
Jan 17 Javascript
实战node静态文件服务器的示例代码
Mar 08 Javascript
vue + vuex todolist的实现示例代码
Mar 09 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
JavaScript生成随机验证码代码实例
Sep 28 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
一个图形显示IP的PHP程序代码
2007/10/19 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
关于 Laravel Redis 多个进程同时取队列问题详解
2017/12/25 PHP
将HTML自动转为JS代码
2006/06/26 Javascript
一个很有趣3D球状标签云兼容IE8
2014/08/22 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
javascript简单链式调用案例分析
2017/05/10 Javascript
bootstrap警告框示例代码分享
2017/05/17 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
详解nuxt sass全局变量(公共scss解决方案)
2018/06/27 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
使用TS来编写express服务器的方法步骤
2020/10/29 Javascript
[27:53]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS iG
2014/05/26 DOTA
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
在Mac OS上搭建Python的开发环境
2015/12/24 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
python 定义给定初值或长度的list方法
2018/06/23 Python
python Tkinter版学生管理系统
2019/02/20 Python
wxPython之wx.DC绘制形状
2019/11/19 Python
Python如何生成xml文件
2020/06/04 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
Black Halo官方网站:购买连衣裙、礼服和连体裤
2018/06/13 全球购物
幼儿园庆六一活动方案
2014/03/06 职场文书
贸易经济专业自荐书
2014/06/29 职场文书
三严三实对照检查材料
2014/09/22 职场文书
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
详解JavaScript的计时器和按钮效果设置
2022/02/18 Javascript