html实战:用html编写游戏

一前言

大家对不起啊，我最近在搞一个网站生日礼物忘记发表博客了，今天给他补上，今天就简简单单做一个贪吃蛇小游戏吧，就是有没有编写数据库的大佬，网站开发数据库不会导入啊，有意者私聊我，谢谢！

二示例图

看着是不是还可以

三配置

系统:window11

编译器:vscode

浏览器:Microsoft Edge

四代码分析

其实纯html代码没有什么要分析的，因为纯html不需要css和js所以直接放源码吧

五源代码

<!DOCTYPE html>
<html>
<head><title>贪吃蛇 sun</title><meta charset="UTF-8"><meta name="keywords" content="贪吃蛇"><meta name="Description" content="哈哈哈"><style type="text/css">*{margin:0;}.map{margin:100px auto;height:600px;width:900px;background:#00D0FF;border:10px solid #AFAEB2;border-radius:8px;}</style></head><body>
<div class="map">
<canvas id="canvas" height="600" width="900"></canvas>
</div><script type="text/javascript">//获取绘制工具/*var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");//获取上下文ctx.moveTo(0,0);ctx.lineTo(450,450);*/var c=document.getElementById("canvas");var ctx=c.getContext("2d");/*ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(450,450);ctx.stroke();*/var snake =[];//定蛇，画蛇的身体var snakeCount = 6;//初始义一条化蛇的长度var foodx =0;var foody =0;var togo =0;function drawtable()//画地图的函数{for(var i=0;i<60;i++)//画竖线{ctx.strokeStyle="black";ctx.beginPath();ctx.moveTo(15*i,0);ctx.lineTo(15*i,600);ctx.closePath();ctx.stroke();}for(var j=0;j<40;j++)//画横线{ctx.strokeStyle="black";ctx.beginPath();ctx.moveTo(0,15*j);ctx.lineTo(900,15*j);ctx.closePath();ctx.stroke();}for(var k=0;k<snakeCount;k++)//画蛇的身体{ctx.fillStyle="#000";if (k==snakeCount-1){ctx.fillStyle="white";//蛇头的颜色与身体区分开}ctx.fillRect(snake[k].x,snake[k].y,15,15);//前两个数是矩形的起始坐标，后两个数是矩形的长宽。}//绘制食物   ctx.fillStyle ="black";ctx.fillRect(foodx,foody,15,15);ctx.fill();}function start()//定义蛇的坐标{//var snake =[];//定义一条蛇，画蛇的身体//var snakeCount = 6;//初始化蛇的长度for(var k=0;k<snakeCount;k++){snake[k]={x:k*15,y:0};}drawtable();addfood();//在start中调用添加食物函数}function addfood(){foodx = Math.floor(Math.random()*60)*15; //随机产生一个0-1之间的数foody = Math.floor(Math.random()*40)*15;for (var k=0;k<snake;k++){if (foodx==snake[k].x&&foody==sanke[k].y)//防止产生的随机食物落在蛇身上{  addfood();}}}   function move(){switch (togo){case 1: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y}); break;//向左走case 2: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y-15}); break;case 3: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y}); break;case 4: snake.push({x:snake[snakeCount-1].x,y:snake[snakeCount-1].y+15}); break;case 5: snake.push({x:snake[snakeCount-1].x-15,y:snake[snakeCount-1].y-15}); break;case 6: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y+15}); break;default: snake.push({x:snake[snakeCount-1].x+15,y:snake[snakeCount-1].y});}snake.shift();//删除数组第一个元素ctx.clearRect(0,0,900,600);//清除画布重新绘制isEat();isDead();drawtable();}           function keydown(e){switch(e.keyCode){case 37: togo=1; break;case 38: togo=2; break;case 39: togo=3; break;case 40: togo=4; break;case 65: togo=5; break;case 68: togo=6; break;}}function isEat()//吃到食物后长度加1{if(snake[snakeCount-1].x==foodx&&snake[snakeCount-1].y==foody){addfood();snakeCount++;snake.unshift({x:-15,y:-15});}}function isDead(){if (snake[snakeCount-1].x>885||snake[snakeCount-1].y>585||snake[snakeCount-1].x<0||snake[snakeCount-1].y<0){alert("You are dead,GAME OVER!!!");window.location.reload();}}document.onkeydown=function(e)
{keydown(e);}
window.onload = function()//调用函数
{ start();setInterval(move,150);drawtable();}
</script>
</body>
</html>

在代码里可以自行修改颜色，长度等

六结尾

html可比Python简单多了，大家要是想看2048游戏编程在评论区留言，我一天最多可以写4篇文章，我看到会马上开始写的，最后提前祝大家元旦快乐！！！

转载我文章联系我（JXZSUNILY）本人唯一微信加我

下一篇推荐一个好用的在线编程网站（支持手机编程）

祝大家元旦快乐！！！

html实战:用html编写游戏相关推荐

Cocos Creator入门实战：桌球小游戏
Cocos Creator入门实战:桌球小游戏转载请保留原文链接:https://blog.csdn.net/zzx023/article/details/90035153 本篇主要是希望能够通过C ...
C语言项目实战：24点游戏计算器（基于结构体、指针、函数、数组、循环等知识点）
文章目录 C语言项目实战:24点游戏计算器(基于结构体.指针.函数.数组.循环等知识点) 前言:24点游戏计算器的规则如下一.项目的创建标 1.选择项目 2.输入项目名称和路径 3.创建头文件Mai ...
Cocos Creator游戏引擎可以支持鼠标吗_Cocos Creator入门实战：桌球小游戏
本文作者:BigBear 多年游戏行业研发经验精通Unreal.CocosCreator游戏引擎参与过多款手游.端游项目的研发 Cocos Creator入门实战:桌球小游戏本篇主要是希望能够通 ...
Cocos Creator入门实战：桌球小游戏
本文作者:BigBear 多年游戏行业研发经验精通Unreal.CocosCreator游戏引擎参与过多款手游.端游项目的研发 Cocos Creator入门实战:桌球小游戏本篇主要是希望能够通 ...
使用Managed DirectX编写游戏
转自 http://dev.gameres.com/Program/Visual/DirectX/ManagedDirectX9Game_01.htm http://dev.gameres.com/ ...
为什么我选择用 C 编写游戏？
"古老"的C++,仍然是当前编写游戏时最常用的语言,但是 C 为什么才是最适合的? 作者 | Jonathan Whiting 译者 | 弯月,责编 | 郭芮出品 | CSDN( ...
通过编写游戏程序的视角去编写字符驱动--设备树-百问imx6ull-pro
本文基于imx6ull-pro百问网开发板进行驱动开发设计编写驱动就好比是创建一个游戏并注册一个角色,每一步都是有意义的对于这个游戏本身,我们也是管理者.首先先把游戏的初始化.退出框架搭好,然后提 ...
python编写游戏测试机器人客户端(一)
系列文章目录 python编写游戏测试机器人客户端(一) python编写游戏测试机器人客户端(二) python编写游戏测试机器人客户端(三) python编写游戏测试机器人客户端(四) pytho ...
如何让c语言编的游戏运行,如何用C语言编写游戏一.doc
如何用C语言编写游戏网络游戏是常谈的话题,是交互式娱乐的主力军,是一种高层次的综合艺术,更是一个民族的文化,世界观的全新传播方式作为游戏玩家的我们,是不是想设计一个属于自己的游戏呢? 爱玩是人的 ...

html实战:用html编写游戏

html实战:用html编写游戏相关推荐

最新文章

热门文章