原生js+canvas实现贪吃蛇效果


Posted in Javascript onAugust 02, 2020

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

效果展示:

原生js+canvas实现贪吃蛇效果

源码展示:

页面布局展示:worm.html

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>贪吃蛇</title>
 <style type="text/css">
 canvas{
 border: 1px solid black;
 }
 div{
 width: 50px; height: 50px; 
 border: 1px solid black; cursor: pointer;
 text-align: center; line-height: 50px;
 }
 </style>
 <script type="text/javascript" src="Node.js" ></script>
 <script type="text/javascript" src="Worm.js" ></script>
 <script src="Stage.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
 function load () {
 //创建一个舞台 调用print方法打印
 stage=new Stage();
 //获取ctx 
 var mCanvas=document.getElementById("mCanvas");
 ctx=mCanvas.getContext('2d');
 stage.print(ctx);
 startPrint();
 }
 
 function changeDir(dir){
 DIR=dir;
 }
 var task;
 var stage;
 var ctx;
 function startPrint () {
 task=window.setInterval(function () {
  stage.worm.step();
  stage.print(ctx);
 }, SPEED);
 }
 function endPrint () {
 window.clearInterval(task);
 }
 
 </script>
 </head>
 <body onload="load()">
 <canvas id="mCanvas" width="500" height="500">
 </canvas>
 
 <table>
 <tr>
 <td></td>
 <td>
  <div onclick="changeDir(UP)">UP</div>
 </td>
 <td></td>
 </tr>
 <tr>
 <td>
  <div onclick="changeDir(LEFT)">LEFT</div>
 </td>
 <td></td>
 <td>
  <div onclick="changeDir(RIGHT)">RIGHT</div>
 </td>
 </tr>
 <tr>
 <td></td>
 <td>
  <div onclick="changeDir(DOWN)">DOWN</div>
 </td>
 <td></td>
 </tr>
 </table>
 
 </body>
</html>

节点类的js  :Node.js

/* 节点类 */
function Node (x, y) {
 this.x=x;
 this.y=y;
 this.equals=function (i, j) {
 return this.x==i && this.y==j;
 };
 
}

舞台类js:Stage.js

/** 舞台类 */
function Stage () {
 this.width=50;
 this.height=50;
 this.worm=new Worm();
 
 /* 在canvas中绘制舞台的内容 */
 this.print=function (ctx) {
 for(i=0; i<this.width; i++){
 for(j=0; j<this.height; j++){
 //如果当前节点是蛇身子的一部分 
 //那么换一种颜色绘制
 if(this.worm.contains(i,j)){
  ctx.fillStyle="#ab55ff";
  ctx.fillRect(i*10, j*10, 10, 10);
 }else if(this.worm.food.equals(i, j)){
  ctx.fillStyle="#000000";
  ctx.fillRect(i*10, j*10, 10, 10);
 }else{
  ctx.fillStyle="#dddddd";
  ctx.fillRect(i*10, j*10, 10, 10);
 }
 }
 }
 //在舞台的左上角绘制分数
 ctx.font="30px Arial";
 ctx.fillStyle="#880000";
 ctx.fillText("score:"+SCORE, 10,40);
 };
}

蛇类js:Worm.js

/** 蛇类 */
var UP=0;
var DOWN=1;
var LEFT=2;
var RIGHT=3;
 
var DIR=UP;
 
var SCORE=0;
var SPEED=300;
//蛇类初始化的形状
function Worm () {
 this.nodes=[];
 this.nodes[this.nodes.length]=new Node(20,10);
 this.nodes[this.nodes.length]=new Node(20,11);
 this.nodes[this.nodes.length]=new Node(20,12);
 this.nodes[this.nodes.length]=new Node(20,13);
 this.nodes[this.nodes.length]=new Node(20,14);
 this.nodes[this.nodes.length]=new Node(20,15);
 this.nodes[this.nodes.length]=new Node(21,15);
 this.nodes[this.nodes.length]=new Node(22,15);
 this.nodes[this.nodes.length]=new Node(23,15);
 this.nodes[this.nodes.length]=new Node(24,15);
 this.nodes[this.nodes.length]=new Node(24,16);
 this.nodes[this.nodes.length]=new Node(24,17);
 this.nodes[this.nodes.length]=new Node(24,18);
 this.nodes[this.nodes.length]=new Node(24,19);
 
 /* 蛇会走一步 */
 this.step=function () {
 //计算出头结点 把头节点添加到nodes数组中
 var oldHead=this.nodes[0];
 var newHead;
 switch (DIR){
 case UP:
 if(oldHead.y-1<0){
  newHead=new Node(oldHead.x, 49);
 }else{
  newHead=new Node(oldHead.x, oldHead.y-1);
 }
 break;
 case DOWN:
 if(oldHead.y+1>49){
  newHead=new Node(oldHead.x, 0);
 }else{
  newHead=new Node(oldHead.x, oldHead.y+1);
 }
 break;
 case LEFT:
 if(oldHead.x-1<0){
  newHead=new Node(49, oldHead.y);
 }else{
  newHead=new Node(oldHead.x-1, oldHead.y);
 }
 break;
 case RIGHT:
 if(oldHead.x+1>49){
  newHead=new Node(0, oldHead.y);
 }else{
  newHead=new Node(oldHead.x+1, oldHead.y);
 }
 break;
 }
 this.nodes.unshift(newHead);
 
 if(!this.food.equals(newHead.x, newHead.y)){
 //把尾节点删掉 (在没有吃到食物的时候)
 this.nodes.pop();
 }else{
 //吃到了食物 重新生成食物
 this.food=this.randomFood();
 SCORE+=10;
 SPEED-=50;
 endPrint();
 startPrint();
 }
 };
 
 /* 判断i,j节点是否是当前蛇身子的一部分 */
 this.contains=function (i, j) {
 for(k=0; k<this.nodes.length; k++){
 var node=this.nodes[k];
 if(node.x==i && node.y==j){
 return true;
 }
 }
 return false;
 };
 
 //声明生成食物的方法
 this.randomFood=function () {
 var x;
 var y;
 do{
 x=Math.floor(Math.random()*50);
 y=Math.floor(Math.random()*50);
 }while(this.contains(x, y));
 return new Node(x, y);
 };
 
 //声明食物
 this.food=this.randomFood();
 
}

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

Javascript 相关文章推荐
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 Javascript
基于jquery的让textarea自适应高度的插件
Aug 03 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
JS保存和删除cookie操作 判断cookie是否存在
Nov 13 Javascript
Json实现异步请求提交评论无需跳转其他页面
Oct 11 Javascript
JavaScript 实现打印,打印预览,打印设置
Dec 30 Javascript
超赞的动手创建JavaScript框架的详细教程
Jun 30 Javascript
js格式化输入框内金额、银行卡号
Feb 01 Javascript
前端设计师们最常用的JS代码汇总
Sep 25 Javascript
实例浅析js的this
Dec 11 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
Aug 20 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
js+canvas实现五子棋小游戏
Aug 02 #Javascript
js实现3D旋转相册
Aug 02 #Javascript
js实现双色球效果
Aug 02 #Javascript
js实现tab栏切换效果
Aug 02 #Javascript
原生js canvas实现鼠标跟随效果
Aug 02 #Javascript
原生js+canvas实现下雪效果
Aug 02 #Javascript
jQuery实现滑动开关效果
Aug 02 #jQuery
You might like
PHP写的加密函数,支持私人密钥(详细介绍)
2013/06/09 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
php正则表达式学习笔记
2015/11/13 PHP
详解php框架Yaf路由重写
2017/06/20 PHP
初探jquery——表单应用范例
2007/02/20 Javascript
jQuery :nth-child前有无空格的区别分析
2011/07/11 Javascript
jQuery1.6 使用方法一
2011/11/23 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
JavaScript中的正则表达式简明总结
2014/04/04 Javascript
jQuery中scrollTop()方法用法实例
2015/01/16 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
NodeJS配置HTTPS服务实例分享
2017/02/19 NodeJs
基于复选框demo(分享)
2017/09/27 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
总结网络IO模型与select模型的Python实例讲解
2016/06/27 Python
使用Python对Access读写操作
2017/03/30 Python
Python Selenium Cookie 绕过验证码实现登录示例代码
2018/04/10 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
opencv之颜色过滤只留下图片中的红色区域操作
2020/06/05 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
英国门把手公司:Door Handle Company
2019/05/12 全球购物
获奖的大学生创业计划书
2014/01/05 职场文书
幼儿发展评估方案
2014/06/11 职场文书
最新离婚协议书范本
2014/08/19 职场文书
单位工作证明书格式
2014/10/04 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2014年后勤管理工作总结
2014/12/01 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript