canvas标签应用 简单"贪吃蛇"游戏

最新推荐文章于 2024-08-12 17:42:25 发布
最新推荐文章于 2024-08-12 17:42:25 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： HTML5 文章标签： function 游戏
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wcf_szkingdom/article/details/7891922
版权 
<!DOCTYPE HTML>
<body>
    <canvas width="400px" height="500px" id="bk_canvas"/>
    <script type="text/javascript">
        var foods = new Array();    //存放食物坐标
        var g_nStopFlag = 0;
        function node(x,y,w)
        {
            var _this = this;
            this.x = x
            this.y = y;
            this.w = w;
            this.equals = function(node){
               if(this.x == node.x && this.y == node.y)return true;
                   return false;
            };
            this.foodInit = function(){
                 var obj = document.getElementById("bk_canvas");
                 var cxt = obj.getContext("2d");
                 cxt.fillStyle = "#FF0000";
                 //cxt.strokeStyle = "#000000";
                 cxt.fillRect(x,y,w,w);
                 //cxt.strokeRect(x,y,w,w);
            };
            this.snakeInit = function(){
                 var obj = document.getElementById("bk_canvas");
                 var cxt = obj.getContext("2d");
                 cxt.fillStyle = "#000000";
                 cxt.strokeStyle = "#FFFFFF";
                 cxt.fillRect(x,y,w,w);
                 cxt.strokeRect(x,y,w,w);
            };
            this.clear = function(){
                 var obj = document.getElementById("bk_canvas");
                 var cxt = obj.getContext("2d");
                 cxt.fillStyle = "#E8FFFF";
                 cxt.strokeStyle = "#E8FFFF";
                 cxt.fillRect(x,y,w,w);
                 cxt.strokeRect(x,y,w,w);
            };
        }
                function farm()
        {
            var _this = this;
            var init = function()
            {
                var bk_farm = document.getElementById("bk_canvas");
                var ctx = bk_farm.getContext("2d");
                ctx.fillStyle = "#E8FFFF";          //填充
				ctx.strokeStyle = "#000000";        //勾勒边框
				ctx.fillRect(0,0,bk_farm.width,bk_farm.height); 
				ctx.strokeRect(0, 0, bk_farm.width,bk_farm.height)
            }
            this.addFood = function()
            {
                if(g_nStopFlag)
                {
                    window.clearInterval(id_food);
                    window.clearInterval(id_draw);
                }
                var obj = document.getElementById("bk_canvas");
                var x = parseInt(obj.width - parseInt(Math.random()*obj.width/10)*10);
                var y = parseInt(obj.height - parseInt(Math.random()*obj.height/10)*10);
                var food = new node(x,y,10);
                food.foodInit();
                foods.push(food);
            }
            this.reDraw = function()
            {
                if(g_nStopFlag)
                {
                    window.clearInterval(id_food);
                    window.clearInterval(id_draw);
                }
                var bk_farm = document.getElementById("bk_canvas");
                var ctx = bk_farm.getContext("2d");
				ctx.strokeStyle = "#000000";        //勾勒边框
				ctx.strokeRect(0, 0, bk_farm.width,bk_farm.height)
            }
            var id_food = setInterval(_this.addFood,1000*10);
            var id_draw = setInterval(_this.reDraw,1000);
            init();
        }
        var farm = new farm();         
        function snake(x,y,len,speed)
        {
            var _this = this;
            this.nodes = new Array();
            this.odir = "L";
            this.dir = "L";
            this.len = 5;
            this.speed = parseInt(speed)*100;
            var init = function(){
                _this.len = len;
                _this.dir = "R";
                var nx = x;
                var ny = y;
                var nw = 10;
                for(var i=0;i<len;i++)
                {
                    var no = new node(nx,ny,nw);
                    _this.nodes[i] = no;
                    no.snakeInit();
                    nx -= nw;
                }
            };
            this.move = function(){
                var obj = document.getElementById("bk_canvas");
                var maxX = obj.width;
                var maxY = obj.height;
                var len = parseInt(_this.len);
                var head = _this.nodes[0]; 
                var hx = parseInt(head.x);
                var hy = parseInt(head.y);
                var hw = parseInt(head.w);  
                switch(_this.dir){
                    case "R":{//穿墙判断
                        if(hx + hw >= maxX) var nHead = new node(0,hy,hw);              
                        else var nHead = new node(hx+hw,hy,hw);                     
                    };break;
                    case "L":{ 
                        if(hx-hw < 0) var nHead = new node(maxX,hy,hw);              
                        else var nHead = new node(hx-hw,hy,hw);
                    };break;
                    case "U":{
                        if(hy-hw < 0 ) var nHead = new node(hx,maxY,hw);               
                        else var nHead = new node(hx,hy-hw,hw);
                    };break;
                    case "D":{ 
                        if(hy + hw >maxY ) var nHead = new node(hx,0,hw);                
                        else var nHead = new node(hx,hy+hw,hw);
                    };break;
                }
                if(_this.nodes[1].equals(nHead)){//运行反方向
                    _this.dir = _this.odir;
                    return;
                }
                for(var i=0;i<len;i++)
                {//穿过自己身体
                    if(_this.nodes[i].equals(nHead))
                    {
                        _this.stop();
                        return;
                    }
                }
                nHead.snakeInit();
                var tail = _this.nodes[len-1];
                tail.clear();
                for(var i=len-1;i>0;i--)
                {
                    _this.nodes[i] = _this.nodes[i-1];
                }
                _this.nodes[0] = nHead;
                for(var i=0;i<foods.length;i++)
                {
                    if(foods[i].equals(nHead)){
                        _this.addNode();
                        foods.pop(nHead);
                        break;
                    }
                }
            };
            this.stop = function(){
                window.clearInterval(_this.run);
                g_nStopFlag = 1;
            }
            this.addNode = function(){
                var len = parseInt(_this.len);
                var tail1 = _this.nodes[len-1];
                var tail2 = _this.nodes[len-2];
                var x1 = parseInt(tail1.x);
                var x2 = parseInt(tail2.x);
                var y1 = parseInt(tail1.y);
                var y2 = parseInt(tail2.y);
                var w  = parseInt(tail1.w);
                if(x1 == x2 )
                {
                    if(y1>y2) var no = new node(x1,y1+w,w);
                    else var no = new node(x1,y1-w,w);
                }
                else
                {
                    if(x1>x2) var no = new node(x1+w,y1,w);
                    else var no = new node(x1-w,y1,w);
                }
                no.snakeInit();
                _this.nodes[len] = no;
                _this.len = len+1;
                
                _this.stop();
                _this.speed = parseInt(_this.speed)-5;
                this.run = setInterval(_this.move,_this.speed);
                farm.addFood();                
            }
            this.run = setInterval(_this.move,_this.speed);
            document.onkeydown = function (event){
                _this.odir = _this.dir;
				var code = event.keyCode;
				switch(code){
				    case 65:_this.dir = "L";break;
				    case 87:_this.dir = "U";break;
				    case 68:_this.dir = "R";break;
				    case 83:_this.dir = "D";break;
				    case 37:_this.dir = "L";break;
				    case 38:_this.dir = "U";break;
				    case 39:_this.dir = "R";break;
				    case 40:_this.dir = "D";break;
				}
            }
            init();
        }      
        farm.addFood();  
        var Snake = new snake(200,200,25,1);
    </script>
<body>

Symbol
关注
专栏目录
用html5中canvas标签写个贪吃蛇
沙舟狼客
07-31 148
&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt; &lt;title&gt;沙舟狼客制作&lt;/title&gt; &lt;style type="
一个基于WF+WCF的小游戏
12-09
1,代码分服务端和客户端两部分,服务端用于游戏服务开启关闭,客户端进行游戏. 2,WF技术用于控制整个游戏流程 3,WCF用于服务端和客户端的通信.服务端和客户端同时启动WCF服务,服务端WCF服务用于接收客户端的请求;客户端WCF服务用于服务端的回调.
WCF编程系列(一)初识WCF
weixin_30537451的博客
05-12 133
Windows Communication Foundation(WCF)是微软为构建面向服务的应用程序所提供的统一编程模型。WCF的基本概念： 地址：定义服务的地址 绑定：定义服务的通讯方式(传输协议、编码方案) 契约：定义服务的具体实现 终结点：由地址、绑定和契约共同构成一个终结点，服务器通过终结点向客户端公开服务，客户端通过终结点调用服务。 下面通过一个简单的服务示例来认识WC...
一个粗糙的二人贪吃蛇联机版实现
CMonY的博客
11-20 3608
联机版贪吃蛇 经过六天的艰苦（抓狂）后，终于完成了一个简单的联机版贪吃蛇制作，我将和大家分享一下制作的流程与感触。 1.题目难点 贪吃蛇是一款很经典的游戏，也是一个难度系数尚可，适宜初学c++者进行挑战的一个项目。在此过程中，主要的难点有两个： 1.如何让蛇动起来 2.如何让两台机器可以随时保持数据的交换 2.基本思路 对于电脑来说，蛇是不可能一点点蠕动的。所以在我的思考中，
C语言项目——简单贪吃蛇
多低调的博客
02-20 3051
使用C语言+easyx绘图库，实现一款简单的贪吃蛇小游戏。
HarmonyOS实战 | 贪吃蛇游戏 | JS全注释
陈宇明
06-16 821
来源：https://harmonyos.51cto.com/user/posts/15053213关注回复"教程"获得最新鸿蒙开发者教程前言 本人之前是Java后端开发...
canvas画布
qq_56144522的博客
07-24 1031
Canvas元素是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图（bitmap）【像素图】。Canvas 由一个可绘制区域HTML代码中的属性定义决定高度和宽度。JavaScript代码可以访问该区域，通过一套完整的绘图功能的API生成动态的图形。为什么要去学习Canvas？？？2014年发布HTML5，至今10年已久，还有必要学习嘛？？？
大学生的小乐趣：html画布制作贪吃蛇小游戏
我有颗小粒的痣
10-29 3941
最终效果： 做贪吃蛇游戏需要Html5，部分Css美化,重要的是JavaScript的应用，因为我们主要是运用Html5的Canvas标签来打造游戏的，所以还是在JavaScript上的笔墨较多 首先搭建好框架： snake #canvas_frame{ height:500px; width:500px; margin:auto; backg
用html+CSS+js做一个贪吃蛇小游戏
最新发布
dp6558dfggbhhn_的博客
08-12 723
在本教程中，我们将逐步构建一个简单的贪吃蛇游戏。这个项目适合初学者，可以帮助你理解HTML、CSS和JavaScript的基础知识，并掌握如何将它们结合起来创建一个完整的游戏。游戏结束提示：当我们检测到蛇头与蛇身任何部分发生碰撞时，我们调用 endGame 函数。这个函数会清除游戏循环，通过 alert 消息弹窗显示出一个游戏结束的提示，并且将游戏重置。游戏重置会清空蛇的数组并将它的起始位置设置为初始位置。移动速度控制：变量 speed 被用来控制蛇移动的速度。
HTML5 canvas简单贪吃蛇小游戏特效代码
03-20
- 贪吃蛇游戏的基本逻辑包括蛇的移动、食物生成、碰撞检测和分数计算。 - 蛇由多个身体部分组成，每个部分都有自己的坐标，蛇的移动通过改变头部坐标来实现，其余部分跟随头部移动。 - 食物随机生成在画布内，当...
HTML5 canvas简单贪吃蛇小游戏.zip
07-04
在这个“HTML5 canvas简单贪吃蛇小游戏”中，我们看到Canvas技术被巧妙地应用到了经典的游戏设计中，即大家熟知的贪吃蛇游戏。这个游戏通过JavaScript实现，标签"JS特效-其它代码"提示我们主要关注JavaScript在游戏...
HTML，Javascript,Canvas网页贪吃蛇游戏
04-13
HTML，JavaScript 和 Canvas 是网页开发中的核心技术，它们共同构建了一个有趣的网页应用——贪吃蛇游戏。这个项目非常适合初学者学习，能够帮助他们深入理解 HTML 的基本结构，掌握 JavaScript 的编程逻辑，并利用 ...
非常简单的canvas贪吃蛇
09-20
【标题】"非常简单的canvas贪吃蛇"是一个利用HTML5的Canvas API实现的贪吃蛇游戏。这个项目展示了如何在网页上用纯JavaScript构建一个基本的游戏框架，通过Canvas的绘图功能来绘制游戏元素，以及处理游戏逻辑。 ...
Javascript + canvas 实现贪吃蛇小游戏
10-17
在本项目中，"Javascript + canvas 实现贪吃蛇小游戏" 是一个利用HTML5的Canvas API和JavaScript语言构建的经典小游戏。Canvas是HTML5的一个重要特性，它允许在网页上进行动态图形绘制，非常适合用于开发此类交互式...
秀！学妹看见都惊呆的 Python 小项目！【界面应用项目及游戏开发】
Amo Xiang的博客
04-27 8054
目录一、界面应用1、计算器2、记事本3、登录和注册二、游戏开发1、20482、贪吃蛇3、俄罗斯方块4、连连看 一、界面应用 1、计算器 1. 案例介绍 本例利用 Python 开发一个可以进行简单的四则运算的图形化计算器，会用到 Tkinter 图形组件进行开发。主要知识点：Python Tkinter 界面编程；计算器逻辑运算实现。本例难度为初级，适合具有 Python 基础和 Tkinter 组件编程知识的用户学习。 2. 设计原理 要制作一个计算器，首先需要知道它由哪些部分组成。示意如下图所示。 从
HTML5学习(3) SVG的学习及应用五 多点连线
wcf_szkingdom的专栏
08-20 2283
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 多点连线
HTML5学习(7) form及input新属性
wcf_szkingdom的专栏
08-20 1970
<!--新的 form 属性： autocomplete 自动完成 novalidate 属性规定在提交表单时不应该验证 form 或 input 域。 --> <!--新的 input 属性： autocomplete 自动完成 autofocus
Android贪吃蛇游戏实现
这些基本结构构成了贪吃蛇游戏的核心框架，通过不断的更新和重绘，实现蛇的移动、食物的生成、碰撞检测等游戏逻辑。 需要注意的是，虽然提供的代码片段没有包含完整的游戏逻辑，但可以推测开发者会在`run`方法中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值