0
点赞
收藏
分享

微信扫一扫

HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)



HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)_javascript

个人名片:

🐼作者简介:一名大一在校生
🐻‍❄️个人主页:​​小新爱学习.​​ 🐼
🕊️系列专栏:零基础学java ----- 重识c语言 ---- 计算机网络
🐓每日一句:那些看似不起波澜的日复一日,一定会在某一天让你看见坚持的意义

前言:🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊🎊

最近有许多小伙伴问小新有没有好用的刷题网站,想提升一下自我能力
经过小新缜密的思考与亲身体验,推荐超实用的🎉​​点击直接访问牛客网​​​🎉
里面用丰富的大厂面试真题、各类算法由易到难层层递进、专项题库应有尽有,还不快来体验体验🎏🎏🎏

文章目录

  • ​​别踩鸡块🐓​​
  • ​​内容介绍🐓​​
  • ​​1.简介:🐓​​
  • ​​2、知识点🐓​​
  • ​​3、项目框架🐓​​
  • ​​4、项目原理🐓​​
  • ​​5、实现步骤+思路🐓​​
  • ​​源码:🐓​​
  • ​​index.js🐓​​
  • ​​index.css🐓​​
  • ​​index.html🐤​​
  • ​​数据库🐓​​
  • ​​部署到服务器🐓​​
  • ​​评论区收录(来自不知名网友):🐓​​
  • ​​游戏演示🐓​​
  • ​​别踩鸡块网页版🐓​​
  • ​​别踩鸡块​​
  • ​​github源码+作者加更多小游戏🐓​​

别踩鸡块🐓

内容介绍🐓

1.简介:🐓

别踩白块这个游戏相信很多人在网页手机都玩过吧,那时候的我们没有它没有什么特别之处,大多数只是能证明自己单身20年的手速,但今天的它更新换名又换面,是我们一个个ikun(这个粉字怎么有点黑)的共同努力,是对鸡哥(啊不对,是对蔡徐坤努力成果的纪念之作)——别踩鸡块

2、知识点🐓

  • HTML/CSS
  • JavaScript
  • PHP
  • MySOL
  • 元素节点增删
  • 属性节点操作
  • 采用json建立数据交互

3、项目框架🐓

puzzle
|index.html
|css/index.css
|js/index.js

4、项目原理🐓

在开始码文之前,让我们先来分析下整个游戏的流程:首先白块和鸡哥以一定的速度下移,点击鸡哥,鸡哥变为母鸡🐤即为img的交互,并鸡叫一声,如果不小心点到白块也有专属bgm嘿嘿嘿,然后游戏结束,如果时间到则游戏结束,跳出分数框并弹出相应“嘲讽语句”。游戏分为三种模式
注意:
而以开发者来说,应将每一个“鸡哥”和白块抽象成一个个的数据结构,鸡哥的消失和出现其实就是数据结构的创造和销毁,如不销毁,积累的数量多的话会极大的占用内存空间

5、实现步骤+思路🐓

页面布局 可以用 div+css 布局来实现别踩鸡块的静态效果展示,直接上 HTML 代码,我来简要说下 HTML 思路,将主界面分解成一个 4x4
的大矩形格子,每一个方块代表其中一个小的矩形格,其中每一行的四个白块中有一个鸡块,每一行中鸡块位于哪一列是随机生成的,但是我们这里现在是静态页面就自己确定了,然后通过
css 控制样式。

添加样式 下面源码是 css 代码,这里有一个要注意的地方,我将 div#con 块级元素向上提了 100 px,这样在游戏的开始就出现了最底一行的空白,隐藏最上面那行,为什么要这样呢,继续往下看就知道了。设置黑白块的样式,为 js
部分动态插入鸡块白块做准备。

让鸡块动起来 在可以通过 js 来创造和销毁 div 后,我们就要让鸡块动起来,这个时候我们就用到了之前 css 提到的设定 < div id=“con”> 隐藏了一行的 < div id=“row”>,我们通过 js 的 DOM 操作使其向下方移动,并设置定时器每
30 毫秒移动一次,这样就实现了鸡块的平滑移动,在鸡块移动的同时,我们要判断鸡块是否已经触底,触底则游戏失败,停止调用
move(),触底后调用函数 fail() 游戏失败,具体方法如下:

点击黑块事件 让鸡块动起来之后呢,我们就来考虑怎么判断用户有没有点击到鸡块呢,同时用户若点击到鸡块,我们要让所在那一行消失,并在内存中删除已消失的行数

其实程序写到这里,几个核心的功能点都已经实现了,是不是感觉很简单呢。剩下来的就是将这些方法组合起来,组成完整的逻辑关系,添加有一个记分器记录用户分数的功能,同时设置加速方法,使鸡块的移动越来越快等等。

源码:🐓

index.js🐓

const MODE_NORMAL = 1, MODE_ENDLESS = 2, MODE_PRACTICE = 3;

(function(w) {
const DEFAULT_I18N_RESOURCE = 'en';

function getJsonI18N() {
let res;
let lang = navigator.language.substring(0, 2);

function ajax(name, error) {
$.ajax({
url: `./static/i18n/${name}.json`,
dataType: 'json',
method: 'GET',
async: false,
success: data => res = data,
error: error
});
}

ajax(lang, () => {
ajax(DEFAULT_I18N_RESOURCE, () => {});
})

return res;
}

const I18N = getJsonI18N()

$('[data-i18n]').each(function() {
const content = I18N[this.dataset.i18n];
$(this).text(content);
});

$('[data-placeholder-i18n]').each(function() {
$(this).attr('placeholder', I18N[this.dataset.placeholderI18n]);
});

$('html').attr('lang', I18N['lang']);

let isDesktop = !navigator['userAgent'].match(/(ipad|iphone|ipod|android|windows phone)/i);
let fontunit = isDesktop ? 20 : ((window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) / 320) * 10;
document.write('<style type="text/css">' +
'html,body {font-size:' + (fontunit < 30 ? fontunit : '30') + 'px;}' +
(isDesktop ? '#welcome,#GameTimeLayer,#GameLayerBG,#GameScoreLayer.SHADE{position: absolute;}' :
'#welcome,#GameTimeLayer,#GameLayerBG,#GameScoreLayer.SHADE{position:fixed;}@media screen and (orientation:landscape) {#landscape {display: box; display: -webkit-box; display: -moz-box; display: -ms-flexbox;}}') +
'</style>');
let map = {'d': 1, 'f': 2, 'j': 3, 'k': 4};
if (isDesktop) {
document.write('<div id="gameBody">');
document.onkeydown = function (e) {
let key = e.key.toLowerCase();
if (Object.keys(map).indexOf(key) !== -1) {
click(map[key])
}
}
}


function gameInit() {
createjs.Sound.registerSound({
src: "./static/music/err.mp3",
id: "err"
});
createjs.Sound.registerSound({
src: "./static/music/end.mp3",
id: "end"
});
createjs.Sound.registerSound({
src: "./static/music/tap.mp3",
id: "tap"
});
gameRestart();
}

function gameRestart() {
_gameBBList = [];
_gameBBListIndex = 0;
_gameScore = 0;
_gameOver = false;
_gameStart = false;
_gameTimeNum = _gameSettingNum;
_gameStartTime = 0;
countBlockSize();
refreshGameLayer(GameLayer[0]);
refreshGameLayer(GameLayer[1], 1);
updatePanel();
}

function gameStart() {
_date1 = new Date();
_gameStartDatetime = _date1.getTime();
_gameStart = true;

_gameTime = setInterval(timer, 1000);
}

function getCPS() {
let cps = _gameScore / ((new Date().getTime() - _gameStartDatetime) / 1000);
if (isNaN(cps) || cps === Infinity || _gameStartTime < 2) {
cps = 0;
}
return cps;
}

function timer() {
_gameTimeNum--;
_gameStartTime++;
if (mode === MODE_NORMAL && _gameTimeNum <= 0) {
GameTimeLayer.innerHTML = I18N['time-up'] + '!';
gameOver();
GameLayerBG.className += ' flash';
if (soundMode === 'on') {
createjs.Sound.play("end");
}
}
updatePanel();
}

function updatePanel() {
if (mode === MODE_NORMAL) {
if (!_gameOver) {
GameTimeLayer.innerHTML = createTimeText(_gameTimeNum);
}
} else if (mode === MODE_ENDLESS) {
let cps = getCPS();
let text = (cps === 0 ? I18N['calculating'] : cps.toFixed(2));
GameTimeLayer.innerHTML = `CPS:${text}`;
} else {
GameTimeLayer.innerHTML = `SCORE:${_gameScore}`;
}
}
//使重试按钮获得焦点
function foucusOnReplay(){
$('#replay').focus()
}

function gameOver() {
_gameOver = true;
clearInterval(_gameTime);
let cps = getCPS();
updatePanel();
setTimeout(function () {
GameLayerBG.className = '';
showGameScoreLayer(cps);
foucusOnReplay();
}, 1500);
}


function encrypt(text) {
let encrypt = new JSEncrypt();


function createGameLayer() {
let html = '<div id="GameLayerBG">';
for (let i = 1; i <= 2; i++) {
let id = 'GameLayer' + i;
html += '<div id="' + id + '" class="GameLayer">';
for (let j = 0; j < 10; j++) {
for (let k = 0; k < 4; k++) {
html += '<div id="' + id + '-' + (k + j * 4) + '" num="' + (k + j * 4) + '" class="block' + (k ? ' bl' : '') +
'"></div>';
}
}
html += '</div>';
}
html += '</div>';
html += '<div id="GameTimeLayer" class="text-center"></div>';
return html;
}

function closeWelcomeLayer() {
welcomeLayerClosed = true;
$('#welcome').css('display', 'none');
updatePanel();
}

function showWelcomeLayer() {
welcomeLayerClosed = false;
$('#mode').text(modeToString(mode));
$('#welcome').css('display', 'block');
}

function getBestScore(score) {
// 练习模式不会进入算分界面
let cookieName = (mode === MODE_NORMAL ? 'bast-score' : 'endless-best-score');
let best = cookie(cookieName) ? Math.max(parseFloat(cookie(cookieName)), score) : score;
cookie(cookieName, best.toFixed(2), 100);
return best;
}

function scoreToString(score) {
return mode === MODE_ENDLESS ? score.toFixed(2) : score.toString();
}

function legalDeviationTime() {
return deviationTime < (_gameSettingNum + 3) * 1000;
}

function showGameScoreLayer(cps) {
let l = $('#GameScoreLayer');
let c = $(`#${_gameBBList[_gameBBListIndex - 1].id}`).attr('class').match(_ttreg)[1];
let score = (mode === MODE_ENDLESS ? cps : _gameScore);
let best = getBestScore(score);
l.attr('class', l.attr('class').replace(/bgc\d/, 'bgc' + c));
$('#GameScoreLayer-text').html(shareText(cps));
let normalCond = legalDeviationTime() || mode !== MODE_NORMAL;
l.css('color', normalCond ? '': 'red');

$('#cps').text(cps.toFixed(2));
$('#score').text(scoreToString(score));
$('#GameScoreLayer-score').css('display', mode === MODE_ENDLESS ? 'none' : '');
$('#best').text(scoreToString(best));

l.css('display', 'block');
}

function hideGameScoreLayer() {
$('#GameScoreLayer').css('display', 'none');
}

w.replayBtn = function() {
gameRestart();
hideGameScoreLayer();
}

w.backBtn = function() {
gameRestart();
hideGameScoreLayer();
showWelcomeLayer();
}

function shareText(cps) {
if (mode === MODE_NORMAL) {
let date2 = new Date();
deviationTime = (date2.getTime() - _date1.getTime())
if (!legalDeviationTime()) {
return I18N['time-over'] + ((deviationTime / 1000) - _gameSettingNum).toFixed(2) + 's';
}
SubmitResults();
}

if (cps <= 5) return I18N['text-level-1'];
if (cps <= 8) return I18N['text-level-2'];
if (cps <= 10) return I18N['text-level-3'];
if (cps <= 15) return I18N['text-level-4'];
return I18N['text-level-5'];
}

function toStr(obj) {
if (typeof obj === 'object') {
return JSON.stringify(obj);
} else {
return obj;
}
}

index.css🐓

body {
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
margin: 0;
padding: 0;
}

.loading {
background-image: url("data:image/gif;base64,R0lGODlhJQAlAJECAL3L2AYrTv///wAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFCgACACwAAAAAJQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaMk+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iGxcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHeop6UAAAIfkEBQoAAgAsEAACAAQACwAAAgWMj6nLXAAh+QQFCgACACwVAAUACgALAAACFZQvgRi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwXABEADAADAAACBYyPqcsFACH5BAUKAAIALBUAFQAKAAsAAAITlGKZwWoMHYxqtmplxlNT7ixGAQAh+QQFCgACACwQABgABAALAAACBYyPqctcACH5BAUKAAIALAUAFQAKAAsAAAIVlC+BGL3Z3IlxUmUuhtR2LzHhsiEFACH5BAUKAAIALAEAEQAMAAMAAAIFjI+pywUAIfkEBQoAAgAsBQAFAAoACwAAAhOUYJnAagwdjGq2amXGU1PuLEYBACH5BAUKAAIALBAAAgAEAAsAAAIFhI+py1wAIfkEBQoAAgAsFQAFAAoACwAAAhWUL4AIvdnciXFSZS6G1HYvMeGyIQUAIfkEBQoAAgAsFwARAAwAAwAAAgWEj6nLBQAh+QQFCgACACwVABUACgALAAACE5RgmcBqDB2MarZqZcZTU+4sRgEAIfkEBQoAAgAsEAAYAAQACwAAAgWEj6nLXAAh+QQFCgACACwFABUACgALAAACFZQvgAi92dyJcVJlLobUdi8x4bIhBQAh+QQFCgACACwBABEADAADAAACBYSPqcsFADs=");
background-repeat: no-repeat;
background-position: center center;
background-size: auto 60%;
}

.start_btn{
display:inline-block;
margin:0 auto;
width:8em;
height:1.7em;
line-height:1.7em;
font-size:2.2em;
color:#fff;
}

.SHADE {
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: 11;
}

.BOX-V {
box-orient: vertical;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
}

.BOX-D {
box-align: end;
box-pack: center;
-webkit-box-align: end;
-webkit-box-pack: center;
-ms-flex-align: end;
-ms-flex-pack: center;
}

.BOX-M {
box-align: center;
box-pack: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-ms-flex-align: center;
-ms-flex-pack: center;
}

.BOX-S {
display: block;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
-ms-flex: 1;
}

.BOX,
.BOX-V,
.BOX-D,
.BOX-M,
.FOOTER {
display: box;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
}

.BBOX,
.BOX,
.APP-STAGE,
.INSET-STAGE,
.STAGE,
.PAGE-STAGE,
.PAGE,
.PAGE-BOX,
.INSET-PAGE,
.FOOTER {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}


#welcome {
background-color: rgba(0, 0, 0, .8);
text-align: center;
font-weight: bold;
overflow: hidden;
}

.welcome-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-size: 100% 100%;
opacity: .4;
overflow: hidden;
}

#GameTimeLayer {
top: 1em;
left: 0;
width: 100%;
text-align: center;
color: rgb(233, 138, 131);
font-size: 4em;
text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
overflow: hidden;
}

#GameLayerBG {
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
background: #fff;
}

.GameLayer {
position: absolute;
bottom: 0;
left: 0;
}

.block {
position: absolute;
border-top: 1px solid #b8dfe6;
background-repeat: no-repeat;
background-position: center;
}

.t1,
.t2,
.t3,
.t4,
.t5 {
background-size: auto 100%;
background-image: url(./image/ClickBefore.png);
}

.tt1,
.tt2,
.tt3,
.tt4,
.tt5 {
background-size: auto 86%;
background-image: url(./image/ClickAfter.png);
}

.bl {
border-left: 1px solid #b8dfe6;
}

@-ms-keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

@-webkit-keyframes flash {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}

.flash {
-webkit-animation: flash .2s 3;
animation: flash .2s 3;
}

.bad {
background-color: rgb(211, 91, 91);
-webkit-animation: flash .2s 3;
animation: flash .2s 3;
}

* {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-user-select: none;
}

#GameScoreLayer {
padding-top: 2em;
font-size: 2em;
font-weight: bold;
color: #251c1c;
text-align: center;
overflow: hidden;
}

.share-icon {
width: 1.7em;
background-repeat: no-repeat;
background-size: auto 100%;
}



#GameScoreLayer-btn .btn,
#GameScoreLayer-share .btn {
text-align: center;
font-size: 1.1em;
color: rgba(0, 0, 0, 0.3);
height: 2em;
line-height: 2em;
}

.btn:active {
opacity: 0.2;
}

#landscape {
display: none;
}

#gameBody {
position: relative;
width: 640px;
margin: 0 auto;
}

#share-wx {
background: rgba(0, 0, 0, 0.8);
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 10000;
display: none;
}

#btn_group {
width: 37.5%;
max-width: 200px;
}

@media (max-width: 450px) {
#btn_group {
max-width: 110px !important;
}
}

@media (max-width: 600px) {
#btn_group {
max-width: 125px;
}
}

@media (max-width: 800px) {
#btn_group {
max-width: 150px;
}
}

#setting {
width: 50%;
}

@media (max-width: 1200px) {
#setting {
width: 80%;
}
}

#GameScoreLayer .col-3, #GameScoreLayer .col-2 {
max-width: 144px;
}

.dropdown-item {
cursor: pointer;
}

index.html🐤

<!DOCTYPE html>
<html lang="zh">

<head>
<title data-i18n="eat-kano"></title>
<meta itemprop="name" content="吃掉小鹿乃" />
<meta itemprop="description" content="新概念音游" />
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, width=device-width,target-densitydpi=device-dpi" />
<link href="./static/index.css" rel="stylesheet" type="text/css">
<script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="h></script>
<link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>
<?php
session_start();
$str = substr(str_shuffle('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890'), 0, 8);
$_SESSION['t'] = $str;
echo "<script>var tj='" . $str . "'</script>";
?>
</head>

<body onLoad="init()" oncontextmenu=self.event.returnValue=false>
<div id="GameScoreLayer" class="BBOX SHADE bgc1" style="display:none;">
<div style="padding:5%;margin-top: 200px;background-color: rgba(125, 181, 216, 0.3);">
<div id="GameScoreLayer-text"></div>
<div id="GameScoreLayer-CPS" class="mb-2 d-flex flex-row justify-content-center text-start">
<div class="col-3">CPS</div>
<div class="col-2" id="cps"></div>
</div>
<div id="GameScoreLayer-score" class="mb-2 d-flex flex-row justify-content-center text-start">
<div class="col-3" data-i18n="score"></div>
<div class="col-2" id="score"></div>
</div>
<div id="GameScoreLayer-bast" class="mb-2 d-flex flex-row justify-content-center text-start">
<div class="col-3" data-i18n="best"></div>
<div class="col-2" id="best"></div>
</div>
<button type="button" class="btn btn-secondary btn-lg" id="replay" onclick="replayBtn()" data-i18n="again">AGAIN-I18N</button>
<button type="button" class="btn btn-secondary btn-lg" onclick="window.location.reload()" data-i18n="home">HOME-I18N</button>
<button type="button" class="btn btn-secondary btn-lg" onclick="goRank()" data-i18n="rank">RANK-I18N</button>
<button type="button" class="btn btn-secondary btn-lg" onclick="window.location.href='https://github.com/arcxingye/EatKano'" data-i18n="repo">REPO-I18N</button>
</div>
</div>
</div>
<div id="welcome" class="SHADE BOX-M">
<div class="welcome-bg FILL"></div>
<div class="FILL BOX-M" style="position:absolute;top:0;left:0;right:0;bottom:0;z-index:5;">
<div class="container">
<div class="container mb-5">
<div style="font-size:2.6em; color:#FEF002;" data-i18n="game-title">GAME-TITLE-I18N</div><br />
<div id="desc" style="display: block;font-size:2.2em; color:#fff; line-height:1.5em;">
<span data-i18n="game-intro1">GAME-INTRO1-I18N</span><br />
<span data-i18n="game-intro2">GAME-INTRO2-I18N</span><br />
</div>
</div>
<div id="btn_group" class="container text-nowrap">
<div class="d-flex justify-content-center flex-column flex-fill">
<a class="btn btn-primary btn-lg mb-3" onclick="readyBtn()" data-i18n="start">START-I18N</a>
<div class="dropdown mb-3">
<a class="w-100 btn btn-secondary btn-lg" href="javascript: void(0);" role="button" id="mode" data-bs-toggle="dropdown" aria-expanded="false" data-i18n="normal">NORMAL-I18N</a>
<ul class="dropdown-menu" aria-labelledby="mode">
<li><a class="dropdown-item" onclick="changeMode(MODE_NORMAL)" data-i18n="normal">NORMAL-I18N</a></li>
<li><a class="dropdown-item" onclick="changeMode(MODE_ENDLESS)" data-i18n="endless">ENDLESS-I18N</a></li>
<li><a class="dropdown-item" onclick="changeMode(MODE_PRACTICE)" data-i18n="practice">PRACTICE-I18N</a></li>
</ul>
</div>
<a class="btn btn-secondary btn-lg" onclick="show_setting()" data-i18n="settings">SETTINGS-I18N</a>
</div>
</div>
<div id="setting" class="container" style="display: none;">
<div class="container mb-3 btn-group">
<a data-i18n="img-before" type="button" class="btn text-nowrap btn-secondary me-1" onclick="getClickBeforeImage()" style="left: 0">IMG-BEFORE-I18N</a>
<input type="file" id="click-before-image" accept="image/*" class="d-none" onchange="saveClickBeforeImage()">
<a data-i18n="img-after" type="button" class="btn text-nowrap btn-secondary me-1" onclick="getClickAfterImage()" style="right: 0">IMG-AFTER-I18N</a>
<input type="file" id="click-after-image" accept="image/*" style="display: none;" onchange="saveClickAfterImage()">
<a id="sound" type="button" class="btn text-nowrap btn-secondary" onclick="changeSoundMode()"></a>
</div>
<div class="input-group mb-3">
<div class="input-group-prepend col-2">
<span class="input-group-text" data-i18n="title">TITLE-I18N</span>
</div>
<input data-placeholder-i18n="eat-kano" type="text" id="title" class="form-control" placeholder="EAT-KANO-I18N">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend col-2">
<span data-i18n="key" class="input-group-text">KEY-I18N</span>
</div>
<input data-placeholder-i18n="default-dfjk" type="text" id="keyboard" class="form-control" maxlength=4 placeholder="DFJK-I18N">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend col-2">
<span data-i18n="time" class="input-group-text">TIME-I18N</span>
</div>
<input data-placeholder-i18n="default-20s" type="text" id="gameTime" class="form-control" maxlength=4 placeholder="default-20s">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend col-2">
<span class="input-group-text" data-i18n="name">NAME-I18N</span>
</div>
<input data-placeholder-i18n="record-rank" type="text" id="username" class="form-control" maxlength=8 placeholder="RECORD-RANK-I18N">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend col-2">
<span class="input-group-text" data-i18n="comment">COMMENT-I18N</span>
</div>
<input data-placeholder-i18n="no-ad-bad-lang" type="text" id="message" class="form-control" maxlength=50 placeholder="NO-AD-BAD-LANG-I18N">
</div>
<button type="button" class="btn btn-secondary btn-lg" onclick="show_btn();save_cookie();" data-i18n="ok">OK-I18N</button>
</div>
</div>
</div>
</div>

<script src="./static/index.js"></script>
</body>

</html>

数据库🐓

DROP TABLE IF EXISTS `kano_rank`;
CREATE TABLE `kano_rank` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`score` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`time` datetime NOT NULL,
`system` varchar(255) NOT NULL,
`area` varchar(255) NOT NULL,
`message` varchar(255) NOT NULL,
`attempts` int(11) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE (`name`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

部署到服务器🐓

按照这些步骤来在你的服务器上配置排行榜的数据库

创建数据库并且执行提供的脚本(这里用kano作为数据库名)

CREATE DATABASE kano DEFAULT CHARSET=utf8;
USE kano;
SOURCE kano.sql;

更改有数据库信息的conn.php为你的数据库配置

<?php
// 把这里改为你的配置
$link = new mysqli('localhost','NAME','PASSWORD','kano');
mysqli_set_charset($link, 'utf8');
if ($link->connect_error) {
die("Failed to connect: " . $conn->connect_error);
}
$ranking = "kano_rank";

评论区收录(来自不知名网友):🐓

作者真的用心了,1.2m大小, 承载了每个ikun的热爱与理想,我希望这款软件火下去等鸡哥老了,颜值不在了,真爱粉都会去关注别的小鲜肉,只有我们小黑子见到鸡哥还会肃然起敬,还是那句话,巅峰产生虚伪的拥护,黄昏见证虔诚的信徒这里是引用

其实我之前是拒绝喷蔡徐坤的,后来我试着喷了一下,哇,赞率真的很高,还掉助攻,还送VIP,忙的时候还可以离线喷,现在每天带着全网友一起喷,哇,好热血,嗯,蛮好玩的,懒得找理由了,开团?

其实我真的不太理解,为什么那么多人会黑坤坤,一个梗玩了几年还在玩,或许真的是现在物质生活变好了,导致大家没了感恩之心,你们可以想想,以前我们经常被台湾省的老乡嘲笑,说我们吃不起茶叶蛋,那段黑暗的日子是怎么过来的大家都忘了吗?只有我还记得,是坤坤每天坚持下蛋,下新鲜的鸡蛋,才让我们度过了那段艰难的缺蛋时期,俗话说喝水不忘挖井人,我们现在能实现吃蛋自由,坤坤功不可没

游戏演示🐓

HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)_javascript_03


HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)_html_04


HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)_html_05

别踩鸡块网页版🐓

​​别踩鸡块​​

github源码+作者加更多小游戏🐓

​​原作在这里​​

HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)_css_06

·

HTML+CSS+JS实现【别踩鸡块】,含(源码+思路)_github_07


举报

相关推荐

0 条评论