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中令人发指的valueOf方法介绍
Feb 22 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
JavaScript与jQuery实现的闪烁输入效果
Feb 18 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
jQuery实现动态加载(按需加载)javascript文件的方法分析
May 31 jQuery
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
Jun 09 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
Oct 11 Javascript
利用JavaScript模拟京东按键输入功能
Dec 01 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
咖啡语言
2021/03/03 咖啡文化
咖啡豆的最常见发酵处理方法,详细了解一下
2021/03/03 冲泡冲煮
PHP静态类
2006/11/25 PHP
PHP5中使用PDO连接数据库的方法
2010/08/01 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
ECMAScript 基础知识
2007/06/29 Javascript
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
JS实现一键回顶功能示例代码
2013/10/28 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
vue.js初学入门教程(1)
2016/11/03 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
javascript修改浏览器title方法 JS动态修改浏览器标题
2017/11/30 Javascript
利用vue组件自定义v-model实现一个Tab组件方法示例
2017/12/06 Javascript
解决Layui数据表格显示无数据提示的问题
2019/11/14 Javascript
探索浏览器页面关闭window.close()的使用详解
2020/08/21 Javascript
[01:00:59]VP VS VG Supermajor小组赛胜者组第二轮 BO3第二场 6.2
2018/06/03 DOTA
[00:08]DOTA2勇士令状等级奖励“天外飞星”
2019/05/24 DOTA
Ubuntu下安装PyV8
2016/03/13 Python
通过实例了解python property属性
2019/11/01 Python
python logging模块的使用
2020/09/07 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
美国高街时尚品牌:OASAP
2016/07/24 全球购物
写出SQL四条最基本的数据操作语句(DML)
2012/12/12 面试题
国际会议邀请函范文
2014/01/16 职场文书
物流业务员岗位职责
2014/02/08 职场文书
师德师风演讲稿
2014/05/05 职场文书
网络营销计划书
2015/01/17 职场文书
医院合作意向书范本
2015/05/08 职场文书
技术转让协议书
2016/03/19 职场文书
Python爬虫:从m3u8文件里提取小视频的正确操作
2021/05/14 Python
python实现局部图像放大
2021/11/17 Python