疫情在家游戏玩腻了？那就一起来开发H5小游戏吧

前提：游戏玩腻了？作为一名合格的程序员，应该自己开发小游戏来玩，玩腻了，自己就再去开发个游戏，利用这一特点实现永动机。既可以学习，也可以娱乐。

本次开发的是贪吃蛇小游戏。使用技术：html、css、原生js、部分es6语法

贪吃蛇实现原理：利用绝对定位的left和top来小蛇进行移动

开发游戏的思路：

首先在页面上放一个大的盒子（box），加上border，相当于一个围栏。这个大盒子就是游戏区域。
在box中，又四个盒子，2个body盒子作为蛇的身体（初始长度为2），snake作为蛇头部，food作为食物。
将蛇的身体的第一段放在left：0;right：0这个位置，第二段向右偏移50px（因为蛇的一段身体的宽高是50*50），蛇的头部向右偏移100px。这就是蛇的初始位置。
蛇的移动：我们要知道，蛇的身体是跟着蛇的方向来移动的。我们可以通过移动蛇头，然后利用循环或者递归来使蛇的一段段身体来移动（就是第一段身体移动到蛇头的位置，第二段身体移动到第一段身体的位置），为了防止蛇的身体和头部的位置重叠，我们就从最后一段开始移动，而不是使蛇头先移动。
食物的随机出现：因为我蛇每次移动都是50px，所以食物的left和top位置都是50的倍数（0-1000中），Math.floor(Math.random() * 20) * 50就是取50的倍数，范围是0-1000.
判断蛇有没有撞到身体或者吃到食物或者撞到墙：就利用蛇头的left和top跟他们比较，如果相等就撞到获取吃到食物。
自动移动：利用时间间隔函数。
其他的功能：代码注释都有详细说明，如果还有不懂的可以评论或者私信我！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>* {padding: 0;margin: 0;}.box {position: relative;width: 1000px;height: 1000px;margin: 50px auto;border: 1px solid red;}.snake {position: absolute;width: 50px;height: 50px;background-color: red;}.food {position: absolute;top: 100px;left: 100px;width: 50px;height: 50px;background-color: pink;}.body {position: absolute;top: 0;left: 0;width: 50px;height: 50px;background-color: green;}</style>
</head><body><div class="box"><div class="body"></div><!--由于two的style样式使用dom.style获取不到，就写到了行内样式中--><div class="body" id="two" style="top:0px;left:50px"></div><div class="snake"></div><div class="food"></div></div>
</body>
<script src="./贪吃蛇.js"></script></html>

class Snake {constructor() {this.snake = document.querySelector('.snake')this.food = document.querySelector('.food')this.bodys = document.querySelectorAll('.body')this.top = 0this.left = 100this.lastTop = '' //记录蛇身体最后一段的topthis.lastLeft = '' //记录蛇身体最后一段的leftthis.lastBody = null //蛇的最后一段，没吃到食物为nullthis.snakeMoveByAuto = nullthis.init()}// 初始化init () {this.snake.style.top = this.top + 'px'this.snake.style.left = this.left + 'px'this.foodAppearByRandom()// 监听键盘的事件document.querySelector('body').onkeydown = (e) => {clearInterval(this.snakeMoveByAuto)switch (e.keyCode) {case 87:  //w键this.snakeMoveByAuto = setInterval(() => this.snakeMove(-50, 0), 500)break;case 65: // a键this.snakeMoveByAuto = setInterval(() => this.snakeMove(0, -50), 500)break;case 83:  // s键this.snakeMoveByAuto = setInterval(() => this.snakeMove(50, 0), 500)break;case 68: // d键this.snakeMoveByAuto = setInterval(() => this.snakeMove(0, 50), 500)break;}}}// 食物随机出现foodAppearByRandom () {let length = this.bodys.lengththis.food.style.top = Math.floor(Math.random() * 20) * 50 + 'px'this.food.style.left = Math.floor(Math.random() * 20) * 50 + 'px'// 防止食物刷新在同一位置if (this.snake.style.top === this.food.style.top && this.snake.style.left === this.food.style.left) {this.foodAppearByRandom()}// 防止食物刷新在蛇身上for (var i = 0; i < length; i++) {if (this.food.style.top === this.bodys[i].style.top && this.food.style.left === this.bodys[i].style.left) {this.foodAppearByRandom()}}}// 移动蛇位置snakeMove (top, left) {let newTop = parseInt(this.snake.style.top.slice(0, -2)) + toplet newLeft = parseInt(this.snake.style.left.slice(0, -2)) + leftlet length = this.bodys.length// 阻止蛇走出方框// 因为盒子的宽高是50px,就各自减50if (newTop < 0 || newTop > 950 || newLeft < 0 || newLeft > 950) {clearInterval(this.snakeMoveByAuto)alert('gg')window.location.reload()return}// 让蛇身体后一个跟着前一个移动for (var i = 0; i < length - 1; i++) {console.log(this.bodys[i + 1].style.left)this.bodys[i].style.left = this.bodys[i + 1].style.leftthis.bodys[i].style.top = this.bodys[i + 1].style.top}// 让蛇身体的最后部分跟着蛇的头移动this.bodys[length - 1].style.top = this.snake.style.topthis.bodys[length - 1].style.left = this.snake.style.left// 让蛇的头部移动this.snake.style.top = newTop + 'px'this.snake.style.left = newLeft + 'px'// 蛇吃到食物if (this.snake.style.top === this.food.style.top && this.snake.style.left === this.food.style.left) {this.lastTop = this.bodys[0].style.topthis.lastLeft = this.bodys[0].style.leftthis.foodAppearByRandom()this.snakeChangeBig()}// 循环判断蛇有没有撞到自己的身体for (var i = 0; i < length; i++) {if (this.snake.style.top === this.bodys[i].style.top && this.snake.style.left === this.bodys[i].style.left) {clearInterval(this.snakeMoveByAuto)alert('gg')window.location.reload()}}}// 蛇吃到食物变大snakeChangeBig () {// 创建蛇身体最后一段this.lastBody = document.createElement('div')this.lastBody.className = 'body'this.lastBody.style.top = this.lastTopthis.lastBody.style.left = this.lastLeftdocument.querySelector('.box').prepend(this.lastBody)// 因为添加了蛇的最后一段，所以要更新this.bodysthis.bodys = document.querySelectorAll('.body')}
}var snake = new Snake()

游戏操作：使用键盘的wasd来控制方向。
GitHub项目：https://github.com/wa545464/H5-

小白运行教程：
创建一个html文件，html文件内容如下，然后用浏览器打开该html文件：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title><style>* {padding: 0;margin: 0;}.box {position: relative;width: 1000px;height: 1000px;margin: 50px auto;border: 1px solid red;}.snake {position: absolute;width: 50px;height: 50px;background-color: red;}.food {position: absolute;top: 100px;left: 100px;width: 50px;height: 50px;background-color: pink;}.body {position: absolute;top: 0;left: 0;width: 50px;height: 50px;background-color: green;}</style>
</head><body><div class="box"><div class="body"></div><!--由于two的style样式使用dom.style获取不到，就写到了行内样式中--><div class="body" id="two" style="top:0px;left:50px"></div><div class="snake"></div><div class="food"></div></div>
</body>
<script>
class Snake {constructor() {this.snake = document.querySelector('.snake')this.food = document.querySelector('.food')this.bodys = document.querySelectorAll('.body')this.top = 0this.left = 100this.lastTop = '' //记录蛇身体最后一段的topthis.lastLeft = '' //记录蛇身体最后一段的leftthis.lastBody = null //蛇的最后一段，没吃到食物为nullthis.snakeMoveByAuto = nullthis.init()}// 初始化init () {this.snake.style.top = this.top + 'px'this.snake.style.left = this.left + 'px'this.foodAppearByRandom()// 监听键盘的事件document.querySelector('body').onkeydown = (e) => {clearInterval(this.snakeMoveByAuto)switch (e.keyCode) {case 87:  //w键this.snakeMoveByAuto = setInterval(() => this.snakeMove(-50, 0), 500)break;case 65: // a键this.snakeMoveByAuto = setInterval(() => this.snakeMove(0, -50), 500)break;case 83:  // s键this.snakeMoveByAuto = setInterval(() => this.snakeMove(50, 0), 500)break;case 68: // d键this.snakeMoveByAuto = setInterval(() => this.snakeMove(0, 50), 500)break;}}}// 食物随机出现foodAppearByRandom () {let length = this.bodys.lengththis.food.style.top = Math.floor(Math.random() * 20) * 50 + 'px'this.food.style.left = Math.floor(Math.random() * 20) * 50 + 'px'// 防止食物刷新在同一位置if (this.snake.style.top === this.food.style.top && this.snake.style.left === this.food.style.left) {this.foodAppearByRandom()}// 防止食物刷新在蛇身上for (var i = 0; i < length; i++) {if (this.food.style.top === this.bodys[i].style.top && this.food.style.left === this.bodys[i].style.left) {this.foodAppearByRandom()}}}// 移动蛇位置snakeMove (top, left) {let newTop = parseInt(this.snake.style.top.slice(0, -2)) + toplet newLeft = parseInt(this.snake.style.left.slice(0, -2)) + leftlet length = this.bodys.length// 阻止蛇走出方框// 因为盒子的宽高是50px,就各自减50if (newTop < 0 || newTop > 950 || newLeft < 0 || newLeft > 950) {clearInterval(this.snakeMoveByAuto)alert('gg')window.location.reload()return}// 让蛇身体后一个跟着前一个移动for (var i = 0; i < length - 1; i++) {console.log(this.bodys[i + 1].style.left)this.bodys[i].style.left = this.bodys[i + 1].style.leftthis.bodys[i].style.top = this.bodys[i + 1].style.top}// 让蛇身体的最后部分跟着蛇的头移动this.bodys[length - 1].style.top = this.snake.style.topthis.bodys[length - 1].style.left = this.snake.style.left// 让蛇的头部移动this.snake.style.top = newTop + 'px'this.snake.style.left = newLeft + 'px'// 蛇吃到食物if (this.snake.style.top === this.food.style.top && this.snake.style.left === this.food.style.left) {this.lastTop = this.bodys[0].style.topthis.lastLeft = this.bodys[0].style.leftthis.foodAppearByRandom()this.snakeChangeBig()}// 循环判断蛇有没有撞到自己的身体for (var i = 0; i < length; i++) {if (this.snake.style.top === this.bodys[i].style.top && this.snake.style.left === this.bodys[i].style.left) {clearInterval(this.snakeMoveByAuto)alert('gg')window.location.reload()}}}// 蛇吃到食物变大snakeChangeBig () {// 创建蛇身体最后一段this.lastBody = document.createElement('div')this.lastBody.className = 'body'this.lastBody.style.top = this.lastTopthis.lastBody.style.left = this.lastLeftdocument.querySelector('.box').prepend(this.lastBody)// 因为添加了蛇的最后一段，所以要更新this.bodysthis.bodys = document.querySelectorAll('.body')}
}var snake = new Snake()
</script></html>

疫情在家游戏玩腻了？那就一起来开发H5小游戏吧相关推荐

小游戏开发小程序app游戏开发 H5小游戏开发
目前有很多人对小游戏的理解都不同,有的人认为小游戏是H5嵌入形式的,也有的人认为小游戏是就几兆的程序其实大家认为的都是正确的,没有任何问题.那么今天给大家讲下小游戏之间的区别 1.H5小游戏嵌入:这 ...
Hilo开发H5小游戏踩坑笔记
第一次开发小游戏,用的是Hilo框架.由于项目开发时间比较紧张,对游戏和CANVAS都没有了解过.代码虽然写的很烂,但是还是记录下踩过的坑吧!本文为碎碎念模式,并不深入,写错的地方希望多多指点. 一. ...
基于js原生算法＋cocos游戏引擎+uni框架Cloud托管网页：开发2048小游戏域名发布版本
目录首先看一下效果图 CocosCreator游戏引擎 block绑定: canvas绑定: cocos中创建脚本js以及js原生算法然后我们先看game.js 背景方法及包含的原生算法代码: 开 ...
Egret 开发H5小游戏
Egret Wing 代码编辑器 ResDepot 静态资源加载器项目目录主要构成:resource文件夹下的新建的游戏文件(用于存放图片,音频和json文件等资源).新建游戏同名的 .ts 文件( ...
微信H5小游戏互动营销的使用场景
H5游戏营销的定义是借助小游戏通过微信渠道运营推广的形式,而且H5小游戏营销成本低,同时满足于用户碎片化时间,通过用户间裂变传播的形式为企业或品牌带来更多的流量和收益!今天就为大家列举下H5游戏定制开 ...
h5小游戏制作开发大概要多久，微信h5的游戏开发成本有多少?
国内有很多商家在用h5的游戏做营销,诸如TOM游戏等出色的开发商也脱颖而出,成为了H5小游戏定制领域的翘楚,本期我们借助TOM游戏,分析一款h5小游戏制作开发大概要多久,微信h5的游戏开发成本有多少, ...
Unity3d C# 开发微信小游戏分享图片、朋友圈等功能实现（含源码）
广告通过一段时间的基于minigame-unity-webgl-transform插件的开发,算是稍微完整的一小个游戏已经制作完成,具体大家可以扫码体验一下: 感谢支持!! 前言之前编写了一篇u3 ...
h5小游戏在线玩：万圣节互动游戏《逃离禁闭岛》通关完全攻略
最近有好多玩家跟我私信留言,让TOM游戏小编快点分享下H5密室逃脱游戏<逃离禁闭岛>的攻略,小编通过整晚的努力终于玩通关了,说实话还是蛮烧脑的,让我体验了一次别样的穿越之旅,话不多说,这就 ...
4399玩过的服务器找不到了,4399小游戏：曾经玩到忘记吃饭了，为何如今有时间也不玩了？...
原标题:4399小游戏:曾经玩到忘记吃饭了,为何如今有时间也不玩了? 大家好,我是小瑞子! 4399小游戏是一个网站平台,这个平台里面有着无数个大大小小的小游戏,各种各样类型的游戏都有,单人双人三人四 ...

疫情在家游戏玩腻了？那就一起来开发H5小游戏吧

贪吃蛇实现原理：利用绝对定位的left和top来小蛇进行移动

疫情在家游戏玩腻了？那就一起来开发H5小游戏吧相关推荐

最新文章

热门文章