原生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 相关文章推荐
javascript中typeof的使用示例
Dec 19 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
在JavaScript中操作时间之getUTCDate()方法的使用
Jun 10 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
详解React开发中使用require.ensure()按需加载ES6组件
May 12 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
JS之if语句对接事件动作逻辑(详解)
Jun 28 Javascript
详解BootStrap表单验证中重置BootStrap-select验证提示不清除的坑
Sep 17 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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 switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
centos7上编译安装php7以php-fpm方式连接apache
2018/11/08 PHP
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
JS继承用法实例分析
2015/02/05 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
2016/08/03 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
2018/02/05 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
js实现移动端轮播图
2020/12/21 Javascript
VSCode搭建Vue项目的方法
2020/04/30 Javascript
js实现简易ATM功能
2020/10/27 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
Python判断字符串与大小写转换
2015/06/08 Python
python变量不能以数字打头详解
2016/07/06 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
keras.utils.to_categorical和one hot格式解析
2020/07/02 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
应届毕业生个人自我评价
2013/09/20 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
颁奖典礼主持词
2014/03/25 职场文书
《大禹治水》教学反思
2014/04/27 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
自动化专业大学生职业生涯规划范文:爱拚才会赢
2014/09/12 职场文书
质量保证书怎么写
2015/02/27 职场文书
实习班主任自我评价
2015/03/11 职场文书
工作简报格式范文
2015/07/21 职场文书
小学校长开学致辞
2015/07/29 职场文书