HTML5 + js 贪吃蛇游戏设计与实现

最新推荐文章于 2024-01-10 14:23:59 发布
最新推荐文章于 2024-01-10 14:23:59 发布
阅读量1w 收藏 13
点赞数 5
分类专栏： HTML5 Javascript 文章标签： 游戏 html5 function javascript timer
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lan_liang/article/details/6657697
版权

游戏截图：



游戏架构：

此游戏架构大概分为三层：


Game.html：

说明：包含了界面的展示，以及一些事件的入口。

 

完整代码：

<html>
<head>
<title>html5 snake game</title>
<script src ="game.js"></script>
</head>
 
<body>
 
<table>
<tr>
<td>
<!--
游戏面板
-->
<canvas id="cvsPnl"style="top:0px;border:5px solid;color:#FF9900" width="10"height="10" >你的浏览器不支持这个游戏！</canvas>
</td>
<td valign="top">
<!--
配置面板
-->
<div id="divSpeed">
<canvas id="cvsSpeed"width="120px" height="55px" ></canvas>
<select id="selSpeed">
<optionvalue="1000">1000</option>
<optionvalue="800">800</option>
<optionvalue="500">500</option>
<optionvalue="300">300</option>
<optionvalue="200">200</option>
</select>
</div>
 
<div id="divGameCtl">
<input id="btnStartGame"type="button" value="开始"></input>  
<input id="btnPauseGame"type="button" value="暂停"></input>
<br />
</div>
<br />
<div id="divPlayerName">
 
<canvas id="cvsName"width="50px" height="52px"></canvas><inputtype="text" id="txtName"style="width:120px;"></input>
<input id="btnRememberMe"value="记住我" type="button"></input>
</div>
 
<div>
<canvas id="cvsScore"></canvas>
</div>
 
 
</td>
</tr>
<table>
 
 
<divid="debug"></div>
 


<scripttype="text/javascript">
    
游戏画板
var canvasGamePnl =document.getElementById("cvsPnl");
var context =canvasGamePnl.getContext("2d");
 
分数
var canvasScore =document.getElementById("cvsScore");
var contxtScore =canvasScore.getContext("2d");
 
速度
var canvasSpeed =document.getElementById("cvsSpeed");
var contxtSpeed =canvasSpeed.getContext("2d");
 
姓名
var canvasName =document.getElementById("cvsName");
var contxtName =canvasName.getContext("2d");
 
开始
$("btnStartGame").οnclick=function(){
GameStart(context,contxtScore);
}
 
暂停/继续
$("btnPauseGame").onclick =function(){
          if($("btnPauseGame").value == "继续"){
          RunGame(context,contxtScore);
          $("btnPauseGame").value = "暂停";
          gameStatus = 1;
          }
          else{
          PauseGame();
          $("btnPauseGame").value = "继续";
          gameStatus = 2;
          }
}
 
加载
          window.οnlοad=function(){
          $("cvsPnl").width =screenWidth;
          $("cvsPnl").height=screenHeight;
    $("selSpeed").selectedIndex = 0;
 
          DrawFont(contxtSpeed,"选择游戏速度",120);
          DrawFont(contxtName,"姓名",50);
 
          $("txtName").value =GetPlayerName();
          }
 
 
 
键盘事件handler
    document.onkeydown = function (){
     var key = document.all ? event.keyCode : arguments[0].keyCode;
           left
           if(key == 37){
           if(direction != "right"){
           direction = "left";
           }
           }
           up
           else if(key == 38){
           if(direction != "down"){
           direction ="up";
           }
           }
           right
           else if(key == 39){
           if(direction != "left"){
           direction = "right";
           }
           }
           down
           else if(key == 40){
           if(direction != "up"){
           direction = "down";
           }
           }
    }
 
          设置速度
          $("selSpeed").οnchange=function(){
          if(gameStatus != 3){
          sleepTime =parseInt(GetSelectObj("selSpeed").value);
          }
 
          }
 
          /记住我
          $("btnRememberMe").onclick =function(){
          ScorePlayerName($("txtName").value);
          alert("已保存");
          }
 
          
 
 
绘出文字
function DrawFont(context,txt,size){
 context.font='30px impact';
 context.fillStyle=fontColor;
 context.textAlign='left';
// context.shadowColor="#00ff00";
// context.shadowOffsetX = 15;
// context.shadowOffsetY=-10;
 context.fillText(txt,0,50,size);
}
</script>
</body>
 
 
</html>
 
Game.js:
说明：包含了游戏的主干逻辑，业务逻辑层的实现。
完整代码：
document.write("<scriptlanguage='javascript' src='config.js'></script>");
document.write("<scriptlanguage='javascript' src='utility.js'></script>");
document.write("<scriptlanguage='javascript' src='player.js'></script>");
document.write("<scriptlanguage='javascript' src='global.js'></script>");

游戏入口

function GameStart(context,contxtScore){
        
InitGame(context,contxtScore);
RunGame(context,contxtScore);
}
 
 

初始化游戏

function InitGame(context,contxtScore){
        
贪吃蛇
for(var i = initSize ;i > 0;i --){
snakeArr[i - 1] = new Object();
snakeArr[i - 1].x = (initSize - i + 1) *unitSize;
snakeArr[i - 1].y = 0;
}
方向
direction = "right";
食物
food = new Object();
 
绘制屏幕方格
DrawScreen(context);
随即食物
RandomFood(context);
分数
DrawScore(contxtScore,score);
 
 
}
 

运行游戏

function RunGame(context,contxtScore){
if(timer){
clearInterval(timer);
}
 
timer = setInterval(function(){
if(IsGameOver()){
         alert("gameover!");
clearInterval(timer);
return;
}
EatFoodHandler(context,contxtScore);
Refresh(context);
SetPosition();
DrawSnake(context);
 
},sleepTime);
}
 
 

刷新

function Refresh(context){
FillRect(context,snakeArr[snakeArr.length -1].x,snakeArr[snakeArr.length - 1].y,unitSize,unitSize,screenColor);
DrawRect(context,snakeArr[snakeArr.length -1].x,snakeArr[snakeArr.length - 1].y,unitSize,unitSize,lineColor);
}
 
 

画蛇身//

function DrawSnake(context){
 
for(var i = 0;i < snakeArr.length;i ++){
FillRect(context,snakeArr[i].x,snakeArr[i].y,unitSize,unitSize,snakeColor);
DrawRect(context,snakeArr[i].x,snakeArr[i].y,unitSize,unitSize,lineColor);
}
}
 

画屏幕//

function DrawScreen(context){
for(var i = screenLeft;i < screenLeft +screenWidth / unitSize;i ++){
for(var j = screenTop;j < screenTop +screenHeight / unitSize;j ++){
FillRect(context,i * unitSize,j *unitSize,unitSize,unitSize,screenColor);
DrawRect(context,i * unitSize,j *unitSize,unitSize,unitSize,lineColor);
}
}
}
 

设置坐标

function SetPosition(){
 
for(var i = snakeArr.length - 2;i >= 0;i --){
snakeArr[i + 1].x = snakeArr[i].x;
snakeArr[i + 1].y = snakeArr[i].y;
 
}
if(direction == "left"){
snakeArr[0].x -= unitSize;
}
else if(direction == "right"){
snakeArr[0].x += unitSize;
}
else if(direction == "up"){
snakeArr[0].y -= unitSize;
}
else if(direction == "down"){
snakeArr[0].y += unitSize;
}
}
 

判断是否结束游戏///

function IsGameOver(){
if(snakeArr[0].x < 0 ||snakeArr[0].x> screenWidth){
return true;
}
if(snakeArr[0].y < 0 ||snakeArr[0].y> screenHeight){
return true;
}
 
for(var i = 1;i < snakeArr.length;i ++){
if(snakeArr[0].x == snakeArr[i].x&& snakeArr[0].y == snakeArr[i].y){
         gameStatus= 3;
return true;
}
}
return false;
}
 
 

随即食物

function RandomFood(context){
 
food.x = GetRandom((screenWidth / unitSize)- 1) * unitSize;
food.y = GetRandom((screenHeight /unitSize) - 1) * unitSize;
for(var i = 0;i < snakeArr.length;i ++){
if(food.x == snakeArr[i].x &&food.y == snakeArr[i].y){
RandomFood(context);
}
}
 
FillRect(context,food.x ,food.y,unitSize,unitSize,foodColor);utility.js
DrawRect(context,food.x ,food.y,unitSize,unitSize,lineColor);utility.js
 
}
 

///食物处理/

functionEatFoodHandler(context,contxtScore){
 
if(direction == "left"){
if((snakeArr[0].x - unitSize == food.x)&& snakeArr[0].y == food.y){
 
         IncreaseLen(contxtScore);
         ClearFood(context);
         RandomFood(context);
}
}
else if(direction == "right"){
if(snakeArr[0].x + unitSize == food.x&& snakeArr[0].y == food.y){
 
         IncreaseLen(contxtScore);
         ClearFood(context);
         RandomFood(context);
}
}
else if(direction == "up"){
if(snakeArr[0].x == food.x &&(snakeArr[0].y - unitSize == food.y)){
        
         IncreaseLen(contxtScore);
         ClearFood(context);
         RandomFood(context);
}
}
else if(direction == "down"){
if(snakeArr[0].x == food.x &&snakeArr[0].y + unitSize == food.y){
        
         IncreaseLen(contxtScore);
         ClearFood(context);
         RandomFood(context);
}
}
 
}
 

清除食物

function ClearFood(context){
FillRect(context,food.x,food.y,unitSize,unitSize,screenColor);
DrawRect(context,food.x,food.y,unitSize,unitSize,lineColor);
 
}
 

增加长度

function IncreaseLen(contxtScore){
 
var newObj = new Object();
newObj.x = food.x;
newObj.y = food.y;
snakeArr.unshift(newObj);
 
分数增加
IncreaseScore(contxtScore);player.js
 
}
 
暂停
function PauseGame(){
         clearInterval(timer);
}
 
Utility.js：
说明：提供了一些工具方法，工具层。
完整代码：
 
返回客户端对象
function $(clientId){
return document.getElementById(clientId);
}
 
获得SELECT选中项
function GetSelectObj(clientId){
var obj = $(clientId);
 
var index = obj.selectedIndex; // 选中索引
return obj.options[index];
}
 
调试使用
function DebugVar(param){
$("debug").innerHTML=param;
}
 
function DebugTxt(text){
$("debug").innerHTML = text;
}
 
画方块
functionDrawRect(context,left,right,width,height,color){
                   //设置填充样式
                   context.strokeStyle= color;
                   context.strokeRect(left,right,width, height);
}
 
填充方块
functionFillRect(context,left,right,width,height,color){
                   //设置填充样式
                   context.fillStyle= color;
                   context.fillRect(left,right,width,height);
}
 
绘画文字
function DrawScore(context,txt){
 
 context.moveTo(0,0);
 context.clearRect(0,0,500,500);
 
 context.font='60px impact';
 context.fillStyle=fontColor;
 context.textAlign='center';
// context.shadowColor="#00ff00";
// context.shadowOffsetX = 15;
// context.shadowOffsetY=-10;
txt = "分数:" + txt;
 context.fillText(txt,100,100,fontSize); 
 
}
 
绘制渐变
function ScreenGradient(context){
 
var grd =context.createLinearGradient(0,0,screenWidth,screenHeight);
grd.addColorStop(0,"#FFCC00");
grd.addColorStop(1,"#99FFFF");
context.fillStyle = grd;
context.fillRect(0,0,screenWidth,screenHeight);
}
 
生产随机数
function GetRandom(n){returnMath.floor(Math.random()*n+1)}
 
存储键值对
function addKV(k,v){
localStorage.setItem(k,v);
 
}
 
取得键值对的值
function getV(k){
return localStorage.getItem(k);
}
 
获得本地存储的所有值并转化为字符串
function getAllValueToStr(){
var content = "";
 for(var i=0;i<localStorage.length;i++){
 //key(i)获得相应的键，再用getItem()方法获得对应的值
  content += localStorage.key(i)+ " : " +localStorage.getItem(localStorage.key(i)) + "<br />";
}
}
 
Player.js：
说明：包含了玩家的一些操作，game.js下面一层，属于业务逻辑辅助层。
完整实现：
 
function GetPlayerName(){
         varname = getV("userName");
return name != null ? name : "newplayer" ;
}
 
function IncreaseScore(context){
score += 10;
DrawScore(context,score);utility.js
}
 
function ScorePlayerName(name){
addKV("userName",name);
}
 
Config.js：
说明：游戏相关配置以及变量，系统配置层。
完整代码：

变量、配置参数//

 
 
var screenWidth = 800;屏幕宽度
var screenHeight = 500;屏幕高度
var unitSize = 20;单元格大小
var initSize = 3;初始长度
var screenLeft = 0;屏幕横起始坐标
var screenTop = 0;屏幕纵起始坐标
var snakeArr = new Array();贪吃蛇数组
var food;食物
var snakeColor = "#009999";蛇身颜色
var direction;蛇的方向
 
 
var screenColor = "#99CCFF";屏幕颜色
var lineColor = "#ffffff";线条颜色（方格）
var lineWidth = 3;线条宽度
var foodColor = "#FFCC00"食物颜色
 
var fontColor = "#996600";分数颜色
var fontSize = 300;分数字体大小
 
 
var timer;定时器
var sleepTime = 200;休眠时间
var level=0;级别
var score=0;分数
var currentPlayer;当前玩家
 
var gameStatus = 0;0:未开始 1:运行 2:暂停 3:已结束
 
global.js：（暂时没有用到，用于扩展），系统全局控制，例如场景绘制



_iorilan
关注
  • 5
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
H5贪吃蛇完整代码（前端HTML CSS JS）
10-22
用积分免费下载的资源哦~ HTML5 CSS3 JavaScript制作的精美贪吃蛇小游戏 对期末作业、代码学习等方面都很有帮助
HTML5 游戏开发实战 ｜ 贪吃蛇
不断学习，不断进步，提高自己
06-29 6855
在该游戏中，玩家操纵一条贪吃的蛇在长方形场地里行走，贪吃蛇按玩家所按的方向键折行，蛇头吃到食物(豆)后，分数加10分，蛇身会变长，如果贪吃蛇碰上墙壁或者自身的话，游戏就结束了(当然也可能是减去一条生命)。贪吃蛇游戏的运行界面如上图所示。
HTML实现简单的贪吃蛇小游戏（附完整源码）
热门推荐
m0_56417836的博客
07-04 2万+
项目简介： 贪吃蛇作为我们儿时经典的游戏之一，它是一款单机而又好玩的小游戏。今天，就让我们用html5技术实现一个简单的贪吃蛇小游戏！项目核心技术： html5的canvas技术+js技术操作步骤： 游戏玩家通过操作键盘的方向键（上下左右键）来控制小蛇的方向，使小蛇吃到红色的食物，然后促使小蛇长大。并且，如果得到的分数在不断上涨，游戏的难度也会不断的上升（小蛇的移动速度会越来越快）。如果小蛇头部撞到墙壁或蛇自身体，就会判定游戏失败。......
HTML5贪吃蛇代码
博客
05-27 2万+
首先声明，这是网上摘录的贪吃蛇完整代码，放在我博客上仅作学习用。         贪吃蛇     *{margin:0;padding: 0;font-family: "Microsoft YaHei";} #page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width
HTML5贪吃蛇游戏游戏代码
xcy_3568的博客
06-05 296
HTML5贪吃蛇游戏游戏代码 <!doctype html> <html> <head> <meta charset="utf-8"> <title>贪吃蛇游戏</title> <style> #myCanvas { box-shadow: 0 0 6px #000; } </style> </head> <body> <br/><br/><br/
JS实现的贪吃蛇游戏完整实例
12-12
本文实例讲述了JS实现的贪吃蛇游戏。分享给大家供大家参考，具体如下： 思想： 1、设计蛇：属性有宽、高、方向、状态（有多少节），方法：显示，跑 2、设计食物：属性宽、高 3、显示蛇：根据状态向地图里加元素 4、...
html5和javascript做的简单贪吃蛇游戏
07-22
一个简单的贪吃蛇游戏，由于本人水平有限，有什么意见请大家指教
贪吃蛇小游戏JS
01-07
JavaScript+css+html实现的贪吃蛇小游戏，可以用作课程设计参考
网页版贪吃蛇游戏.rar
03-09
本资源为一套精心制作的网页版贪吃蛇游戏的源代码，采用HTML、CSS和JavaScript进行开发。该源码设计简洁，功能完善，能够在浏览器中直接运行，为玩家带来经典且富有挑战性的贪吃蛇游戏体验。 技术栈说明： HTML：...
【前端素材】小游戏-008- 贪吃蛇.zip
最新发布
04-06
前端游戏设计是游戏开发中至关重要的一部分，它涉及到游戏的外观、交互和用户体验等方面。以下是一些前端游戏设计的思路和关键点： 用户体验：确保游戏界面简洁直观，易于操作。考虑用户的需求和习惯，设计友好的...
js实现贪吃蛇游戏-超简单
02-27
大二实习期间用js写的一个贪吃蛇游戏，对有些js和css/html的学习者有很大帮助。
贪食蛇 课程设计 完整课题报告
10-09
里面包含贪食蛇的源程序，运行截图以及心得感受
贪吃蛇HTML5代码
06-04
此段代码实现了简单的贪吃蛇网页版，用css、HTML5和JS完成
html5贪吃蛇源码
03-13
html5贪吃蛇源码,代码浅显易懂。
基于html和js的贪吃蛇小游戏
06-02
运用html和js写的贪吃蛇小游戏，好玩。
php 实现贪吃蛇游戏,HTML5 贪吃蛇游戏实现思路及源代码_html5教程技巧
weixin_39721853的博客
03-12 176
游戏操作说明通过方向键控制贪吃蛇上下左右移动。贪吃蛇吃到食物之后会变长一个长度。游戏具体实现游戏难点是怎么模拟贪吃蛇的移动。如果只是一个方块的话显然很简单。但是当蛇的长度变长之后要怎么样控制每个方块的移动呢？如果观察蛇的移动，可以发现，从蛇的头部到尾部，每个方块在下一时刻的位置就是它的前一个方块在当前时刻的位置。因此我们需要做的只是控制贪吃蛇的头部的运动。其他部分的位置都可以依次类推。另外一个值...
HTML（8）基于HTML5的贪吃蛇游戏的设计与实现
qq_52187093的博客
01-10 757
基于HTML5的贪吃蛇游戏的设计与实现
Html5版贪吃蛇游戏制作（经典玩法）
弹了个球
03-31 2766
回味经典小游戏，用Html5做了个贪吃蛇的小游戏，完成了核心经典玩法的功能。
HTML做一个贪吃蛇小游戏
ZTLJQ的博客
06-06 8871
☄️爬虫JS逆向系列专栏 -☄️python系列专栏 -
基于html5的贪吃蛇的设计与实现
04-14
很高兴回答这个问题！基于HTML5的贪吃蛇可以使用Canvas和JavaScript来实现。您可以使用Canvas来绘制游戏界面和蛇的移动轨迹，使用JavaScript来处理游戏逻辑，如蛇的移动、食物的随机生成和得分的计算等。具体实现过程可以参考一些在线教程和示例代码，如MDN网站上的贪吃蛇示例和W3Schools上的HTML5游戏教程。希望这些信息能够对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值