原生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 Array扩展实现代码
Oct 14 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
Jan 06 Javascript
JavaScript获取网页支持表单字符集的方法
Apr 02 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
详解JS正则replace的使用方法
Mar 06 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
iview给radio按钮组件加点击事件的实例
Sep 30 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 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
一个没有MYSQL数据库支持的简易留言本的编写
2006/10/09 PHP
PHP安全的URL字符串base64编码和解码
2014/06/19 PHP
PHP遍历目录文件的常用方法小结
2017/02/03 PHP
Laravel框架中VerifyCsrfToken报错问题的解决
2017/08/30 PHP
深入学习微信网址链接解封的防封原理visit_type
2019/08/15 PHP
Javascript与vbscript数据共享
2007/01/09 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
jQuery代码优化 事件委托篇
2011/11/01 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
Javascript原型链的原理详解
2016/01/05 Javascript
JS中生成随机数的用法及相关函数
2016/01/09 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
AngularJS基础 ng-paste 指令简单示例
2016/08/02 Javascript
canvas绘制的直线动画
2017/01/23 Javascript
在vue中获取dom元素内容的方法
2017/07/10 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
JQuery Ajax动态加载Table数据的实例讲解
2018/08/09 jQuery
Python中Class类用法实例分析
2015/11/12 Python
详解K-means算法在Python中的实现
2017/12/05 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
Django admin管理工具TabularInline类用法详解
2020/05/14 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
医学专业毕业生个人的求职信
2013/12/04 职场文书
建筑人员岗位职责
2013/12/25 职场文书
医务人员自我评价
2014/01/26 职场文书
员工合理化建议书
2014/05/19 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
经典导游欢迎词
2015/01/26 职场文书
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA
《现实主义勇者的王国再建记》第三弹OST全曲试听片段公开
2022/04/04 日漫