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 相关文章推荐
IE和FireFox(FF)中js和css的不同
Apr 13 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jQuery使用$.ajax提交表单完整实例
Dec 11 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
微信小程序 navbar实例详解
May 11 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
React如何实现浏览器打印部分内容详析
May 19 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
vue导航栏部分的动态渲染实例
Nov 01 Javascript
JavaScript实现音乐导航效果
Nov 19 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
PHP 日常开发小技巧
2009/09/23 PHP
解析php如何将日志写进syslog
2013/06/28 PHP
php通过执行CutyCapt命令实现网页截图的方法
2016/09/30 PHP
Laravel中基于Artisan View扩展包创建及删除应用视图文件的方法
2016/10/08 PHP
thinkPHP5.0框架配置格式、加载解析与读取方法
2017/03/17 PHP
Yii框架扩展CGridView增加导出CSV功能的方法
2017/05/24 PHP
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
编写高效jQuery代码的4个原则和5个技巧
2014/04/24 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
Angular 根据 service 的状态更新 directive
2016/04/03 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
微信小程序 devtool隐藏的秘密
2017/01/21 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
详解angularJs中关于ng-class的三种使用方式说明
2017/06/02 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
在HTML文档中嵌入JavaScript的四种方法
2018/05/07 Javascript
vue中v-for循环给标签属性赋值的方法
2018/10/18 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
python抓取京东价格分析京东商品价格走势
2014/01/09 Python
python遍历文件夹并删除特定格式文件的示例
2014/03/05 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python参数传递对象的引用原理解析
2020/05/22 Python
Python实现图片查找轮廓、多边形拟合、最小外接矩形代码
2020/07/14 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
电子银行营销方案
2014/02/22 职场文书
竞聘书模板
2014/03/31 职场文书
高三英语教学计划
2015/01/23 职场文书
Vue3.0中Ref与Reactive的区别示例详析
2021/07/07 Vue.js