1元涨1000粉丝网站,网站运营做内容,详细论述制作网站的步骤,网站建设功能自制游戏列表
1植物大战僵尸自制HTML5游戏《植物大战僵尸》2开心消消乐自制HTML5游戏《开心消消乐》3贪吃蛇自制HTML5游戏《贪吃蛇》4捕鱼达人自制HTML5游戏《捕鱼达人》
一、游戏简介 贪吃蛇是一款经典的电子游戏#xff0c;最早在1976年由Gremlin公司推出#xff0c;名为… 自制游戏列表
1植物大战僵尸自制HTML5游戏《植物大战僵尸》2开心消消乐自制HTML5游戏《开心消消乐》3贪吃蛇自制HTML5游戏《贪吃蛇》4捕鱼达人自制HTML5游戏《捕鱼达人》
一、游戏简介 贪吃蛇是一款经典的电子游戏最早在1976年由Gremlin公司推出名为Blockade。游戏的玩法简单却富有挑战性玩家控制一条蛇在封闭的场地内移动通过吃食物增长身体同时避免撞到自己的身体或场地边界。随着时间的推移贪吃蛇游戏经历了多次演变但其核心玩法依然受到玩家的喜爱。
二、为什么选择贪吃蛇游戏 经典性贪吃蛇是一款历史悠久的游戏其经典性使得它成为学习编程和游戏开发的理想选择。 简单性游戏规则简单易于理解适合初学者作为编程练习项目。 互动性贪吃蛇游戏具有高度的互动性玩家需要快速反应和策略思考。 可扩展性基础游戏可以扩展多种功能如增加难度级别、特殊道具等为学习者提供更多实践机会。 三、游戏目标 贪吃蛇游戏的主要目标是控制蛇头吃到随机出现在游戏场地的苹果每吃到一个苹果蛇的身体就会增长一段。玩家需要避免蛇头撞到自己的身体或游戏场地的边界。游戏的难度会随着蛇身的增长而增加玩家的目标是尽可能获得更高的分数。
四、游戏界面设计
游戏界面通常由以下几个部分组成 游戏画布一个矩形区域作为蛇移动和吃苹果的场所。 蛇由多个小方块组成每个方块代表蛇的身体部分蛇头通常有特殊的标识。 苹果一个单独的方块随机出现在游戏画布上作为蛇的食物。 得分板显示玩家当前的得分和游戏等级。 五、游戏逻辑概述
游戏逻辑主要包括以下几个方面 初始化设置游戏初始状态包括蛇的位置、长度和方向苹果的位置以及得分和等级。 键盘控制监听键盘按键根据玩家的输入改变蛇的移动方向。 移动逻辑更新蛇的位置使其按照指定方向移动。 碰撞检测检查蛇头是否撞到自己、边界或苹果。 吃苹果如果蛇头碰到苹果更新苹果的位置增长蛇的身体并增加得分。 游戏结束如果蛇撞到自己或边界显示游戏结束的提示并结束游戏循环。 得分和等级根据吃到的苹果数量增加得分并根据得分调整游戏难度。 六、创建基本的HTML5文档结构 在创建贪吃蛇游戏之前首先需要构建一个基本的HTML5文档结构。这个结构包括了文档的头部head和主体body其中头部用于引入CSS样式和JavaScript脚本而主体则包含了游戏的所有元素。
源代码示例 - HTML5文档结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title贪吃蛇游戏/titlelink relstylesheet hrefstyles/base.csslink relstylesheet hrefstyles/snake.css
/head
body!-- 游戏画布和元素将在此处添加 --script srcscripts/snake.js/script
/body
/html
设定游戏画布 (div idbox)
游戏画布是一个div元素它作为游戏的容器包含了蛇、苹果和得分板。这个div具有固定的宽度和高度并且使用CSS样式来设置其位置和外观。
源代码示例 - HTML中的游戏画布
div idbox!-- 蛇的身体由列表项组成苹果是一个div得分板将在JavaScript中动态添加 --ul idsnake/uldiv idapple/div
/div
div idscore得分: span idscore-value0/span 等级: span idlevel-value1/span/div
添加游戏元素蛇头、蛇身、苹果、得分板 蛇头通常用一个带有图片的li元素表示这个li是ul idsnake的第一个子元素。 蛇身由多个li元素组成这些元素将通过JavaScript动态添加到蛇的列表中。 苹果用一个div idapple表示它的位置将通过JavaScript动态设置。 得分板一个包含得分和等级的div元素位于游戏画布之外。 源代码示例 - JavaScript中添加蛇头和蛇身
window.onload function() {var snakeList document.getElementById(snake);var snakeHead document.createElement(li);snakeHead.innerHTML img srchead.png alt蛇头; // 假设有一个蛇头图片snakeList.appendChild(snakeHead);
// 初始蛇身长度例如5个单位for (var i 0; i 5; i) {var snakeBodyPart document.createElement(li);snakeList.appendChild(snakeBodyPart);}
var apple document.getElementById(apple);// 设置苹果的初始位置apple.style.left 100px;apple.style.top 100px;
};
七、效果图 八、完整代码 HTML
!DOCTYPE html
htmlhead langenmeta charsetUTF-8title/titlelink relstylesheet hrefbase.css /link relstylesheet hrefsnake.css /script srcsnake.js/script
/headbodydiv idscore得分: span0/span等级: span1/span/divdiv idboxul idsnakeli classheihei idheadimg srcright.png alt //lili classheihei/lili classheihei/lili classheihei/lili classheihei/lili classheihei/lili classheihei/lili classheihei/li/uldiv idapple/div/divscript/script
/body/htmlsnake.css
#box{width: 800px;height: 600px;position: relative;background-color: #d5e3bd;border: 1px solid #000;margin: 30px auto;
}
#snake{/*position: absolute;*//*top: 200px;*//*left: 350px;*/
}
.heihei{width: 20px;height: 20px;/*border: 1px solid #000;*/border-radius: 10px;background-color: rgb(13, 113, 85);position: absolute;text-align: center;line-height: 20px;position: absolute;top: 200px;left: 350px;color: white;
}
#head img{width: 20px;
}
#apple{width: 20px;height: 20px;background-color: darkred;position: absolute;top: 140px;left: 400px;
}
#score{width: 100px;height: 100px;border: 1px solid #000;position: absolute;text-align: center;line-height: 100px;left: 1100px;z-index: 1;
} base.css
charset UTF-8;
/*css 初始化 */
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img {margin: 0;padding: 0;
}/*各浏览器显示不同去掉蓝色边框*/
fieldset, img, input, button {border: none;padding: 0;margin: 0;outline-style: none;
}ul, ol {list-style: none;
}/*统一组合框的默认样式*/
input {padding-top: 0;padding-bottom: 0;font-family: sums-song, 宋体;
}select, input, button {vertical-align: middle;
}select, input, textarea {font-size: 12px;margin: 0;
}/*防止拖动 影响布局*/
textarea {resize: none;
}/*去掉行内替换元素空白缝隙*/
img {border: 0;vertical-align: middle;
}table {border-collapse: collapse;
}body {font: 12px/150% Arial, Verdana, \5b8b\4f53; /*宋体 unicode */color: #666;background: #fff;
}/*清除浮动*/
.clearfix:before, .clearfix:after {content: ;display: table;
}.clearfix:after {clear: both;
}.clearfix {*zoom: 1; /*IE/7/6*/
}a {color: #666;text-decoration: none;
}a:hover {color: #C81623;
}h1, h2, h3, h4, h5, h6 {text-decoration: none;font-weight: normal;font-size: 100%;
}s, i, em {font-style: normal;text-decoration: none;
}/*京东色*/
.col-red {color: #C81623 !important;
}/*公共类*/
.w {/*版心 提取 */width: 1210px;margin: 0 auto;
}.fl {float: left;
}.fr {float: right;
}.al {text-align: left;
}.ac {text-align: center;
}.ar {text-align: right;
}.hide {display: none;
}js代码
window.onload function() {var ul document.getElementById(snake);var lis ul.children;var head lis[0];var img head.getElementsByTagName(img)[0];var box document.getElementById(box);var apple document.getElementById(apple);var score document.getElementById(score).getElementsByTagName(span)[0];var level document.getElementById(score).getElementsByTagName(span)[1];var gameOver;var square 20;var dirArr {left: { name: left, key: 65, point: { x: -1, y: 0 }, img: left.png },right: { name: right, key: 68, point: { x: 1, y: 0 }, img: right.png },up: { name: up, key: 87, point: { x: 0, y: -1 }, img: up.png },down: { name: down, key: 83, point: { x: 0, y: 1 }, img: down.png }};var dirList [];var currentDir dirArr[right];document.onkeydown function(event) {var event event || window.event;addDirection(event.keyCode);}function addDirection(key) {var dir;// 获取方向for (k in dirArr) {if (dirArr[k].key key) {dir dirArr[k];}}if (!dir) {return;}//获取上一次的方向var lastDirection dirList[dirList.length - 1];if (!lastDirection) { lastDirection currentDir }if (lastDirection.name dir.name) {return;} else if (lastDirection.point.x dir.point.x 0 lastDirection.point.y dir.point.y 0) {return;}if (dirList.length 3) {return;}dirList.push(dir);}function getDirection(arr) {if (arr.length ! 0) {currentDir arr.shift();}return currentDir;}function point(x, y) {this.x x;this.y y;}function move() {//处理按键队列var d getDirection(dirList);img.src d.img;//下一个要走的点var pre new point(head.offsetLeft d.point.x * square, head.offsetTop d.point.y * square);//死亡判定机制if (die(pre)) {clearInterval(timer)alert(GAME_OVER);return;}//吃的机制if (eat(pre)) {console.log(eat);}//移动身子for (var i lis.length - 1; i 0; i--) {lis[i].style.left lis[i - 1].offsetLeft px;lis[i].style.top lis[i - 1].offsetTop px;}head.style.left pre.x px;head.style.top pre.y px;}var timer setInterval(move, 300);function die(p) {var left p.x;var right p.x head.offsetWidth;var toper p.y;var bottom p.y head.offsetHeight;for (var i 1; i lis.length - 1; i) {if (left lis[i].offsetLeft toper lis[i].offsetTop)return 1;}if (left 0 || toper 0 || right box.offsetWidth || bottom box.offsetHeight) {console.log(1)return 1;}}//初始化for (var i 0; i lis.length; i) {lis[i].idx i;lis[i].style.left -square * i px;var backgroundColor parseInt(255 * 255 * 255 * Math.random());lis[i].style.backgroundColor # backgroundColor.toString(16);}//吃function eat(p) {if (p.x apple.offsetLeft p.y apple.offsetTop) {apple.style.left 20 * Math.floor(Math.random() * 39) px;apple.style.top 20 * Math.floor(Math.random() * 29) px;var li document.createElement(li);li.className heihei;var backgroundColor parseInt(255 * 255 * 255 * Math.random());li.style.backgroundColor # backgroundColor.toString(16);ul.appendChild(li);score.innerHTML;clearInterval(timer);var scoreLevel Math.floor(score.innerHTML / 4);level.innerHTML scoreLevel 1;var timeLevel scoreLevel 7 ? 7 : scoreLevel;timer setInterval(move, 250 - timeLevel * 25);}}
}
